Skip to content

Commit

Permalink
Improved landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@williamlmao
williamlmao committed Mar 15, 2023
1 parent a5ae06b commit 269a1b5
Show file tree
Hide file tree
Showing 13 changed files with 750 additions and 161 deletions.
1 change: 1 addition & 0 deletions apps/docs/.prettierignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/components/LandingPage
9 changes: 7 additions & 2 deletions apps/docs/components/Code.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,13 @@ export const Code = ({ children }: { children: string }) => {
const [copied, setCopied] = React.useState(false);

return (
<pre className={"bg-gray-800 text-white p-4 rounded-md overflow-auto"}>
<Copy contentToCopy={children} className="bg-gray-900" />
<pre
className={"bg-gray-800 text-white p-4 rounded-md overflow-auto group"}
>
<Copy
contentToCopy={children}
className="bg-gray-900 text-white hidden group-hover:block"
/>
<code>{children}</code>
</pre>
);
Expand Down
9 changes: 9 additions & 0 deletions apps/docs/components/LandingPage/ButtonExample.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Button } from "@chimera-ui/components";

export const ButtonExample = () => {
return (
<div className="w-full rounded-md bg-gray-800 flex items-center justify-center flex-1 p-4">
<Button>Boop</Button>
</div>
);
};
150 changes: 117 additions & 33 deletions apps/docs/components/LandingPage/LandingPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,15 @@ import {
ColorType,
setSupportingColors,
} from "@/utils/colors";
import { Button } from "@chimera-ui/components";
import Color from "color";
import { useEffect, useState } from "react";
import { ColorSelector } from "../ThemeGenerator/ColorSelector";
import { ColorSelector } from "../ThemeGenerator/ColorSelectorWithName";
import { TodoExample } from "./ToDoExample";
import { Button } from "@chimera-ui/components";
import Link from "next/link";
import { motion } from "framer-motion";
import { Code } from "../Code";
import { ButtonExample } from "./ButtonExample";

const Hero = ({
handleColorChange,
Expand All @@ -19,48 +23,63 @@ const Hero = ({
}) => {
return (
<div className="flex flex-col md:flex-row justify-between mt-8 md:mt-12 w-full gap-8">
<div className="font-bold text-left w-full md:w-1/2 flex flex-col justify-between">
<div className="font-bold text-left w-full md:w-1/2 flex flex-col justify-between relative">
<div className="">
<h1 className="text-center md:text-left text-2xl md:font-extrabold md:text-4xl ">
Infinitely customizable, theme-adaptive, Tailwind-ready components
<h1 className="text-center md:text-left text-4xl md:font-extrabold md:text-5xl opcacity-0 transition-opacity opacity-100">
Infinitely customizable,
</h1>
<div className="font-light mt-4">
Chimera UI is a collection of React components that are built to be
infinitely customizable and theme-adaptive. Chimera UI is built on
top of Tailwind CSS and is designed to be used with{" "}
</div>
</div>
<div className="flex divide-x-2 justify-around">
<div className="flex items-center gap-2 px-2">
<ColorSelector
color={themeColors.base as ColorType}
handleColorChange={handleColorChange}
/>
<span className=" font-medium">Base</span>
</div>
<div className="flex items-center gap-2 px-2">
<ColorSelector
color={themeColors.primary as ColorType}
handleColorChange={handleColorChange}
/>
<span className=" font-medium">Primary</span>
<h1 className="text-center md:text-left text-4xl md:font-extrabold md:text-5xl ">
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
Theme-adaptive,
</span>
</h1>
<h1 className="text-center md:text-left text-4xl md:font-extrabold md:text-5xl ">
Importable,
</h1>
<h1 className="text-center md:text-left text-4xl md:font-extrabold md:text-5xl ">
Accessible,
</h1>
<h1 className="text-center md:text-left text-4xl md:font-extrabold md:text-5xl ">
React + Tailwind components
</h1>
<div className="font-light mt-6 text-center md:text-left">
Chimera components look great out of the box, but can be easily
customized with Tailwind, allowing you to build beautiful and
accessible interfaces quickly. Free & open source.
</div>
<div className="flex items-center gap-2 px-2">
<ColorSelector
color={themeColors.secondary as ColorType}
handleColorChange={handleColorChange}
/>
<span className=" font-medium">Secondary</span>
<div className="flex gap-4 justify-center md:justify-start">
<Link href="/docs/install">
<Button className="mt-8 ">Get Started</Button>
</Link>
<Button className="mt-8" variant="outline">
Learn More
</Button>
</div>
</div>
</div>
<div className="flex items-center justify-center w-full md:w-1/2">
<div className="relative w-full">
<div className="absolute top-0 -left-4 w-72 h-72 bg-primary rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
<div className="absolute top-0 -right-4 w-72 h-72 bg-input rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
<div className="absolute top-0 -right-4 w-72 h-72 bg-secondary rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
<div className="absolute -bottom-8 left-20 w-72 h-72 bg-secondary rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
<div className="relative">
<TodoExample />
<div className="flex sm:divide-x-2 justify-around mt-4 rounded-md py-2 bg-base-2 opacity-90">
<ColorSelector
color={themeColors.base as ColorType}
handleColorChange={handleColorChange}
/>

<ColorSelector
color={themeColors.primary as ColorType}
handleColorChange={handleColorChange}
/>

<ColorSelector
color={themeColors.secondary as ColorType}
handleColorChange={handleColorChange}
/>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -109,8 +128,73 @@ export const LandingPage = () => {
setThemeColors(supportingColors);
};
return (
<div className="flex flex-col items-center h-screen p-4 md:p-8">
<div className="flex flex-col gap-24 items-center p-4 md:p-8">
<Hero handleColorChange={handleColorChange} themeColors={themeColors} />
<NoRestylingNeeded />
<Customize />
</div>
);
};

export const NoRestylingNeeded = () => {
return (
<div className="flex gap-4">
<div className="w-1/2">
<div className="flex flex-col gap-2">
<Code>
{`import { Button } from "@chimera-ui/components";
export const ButtonExample = () => {
return (
<Button>Boop</Button>
);
};
`}
</Code>
<ButtonExample />
</div>
</div>
<div className="w-1/2 px-6">
<h1 className="text-4xl font-bold">
Importable & tree-shakeable components that look great out of the box,
no re-styling necessary
</h1>
<p className="my-6">
{`No more copy, pasting, and restyling, like you have to from other
Tailwind libraries. Just import it and it will instantly pick up the
theme you’ve set.`}
</p>
</div>
</div>
);
};

export const Customize = () => {
return (
<div className="flex gap-4">
<div className="w-1/3 px-6">
<h1 className="text-4xl font-bold">Customize with the Tailwind</h1>
<p className="my-6">
{`No need to learn a new library-specific styling stystem. All you need is the Tailwind you already know and love.`}
</p>
</div>
<div className="w-2/3">
<div className="flex flex-col gap-2">
<Code>
{`import { Button } from "@chimera-ui/components";
export const ButtonExample = () => {
return (
<Button className="w-full h-24 text-4xl">BOOOOOOOOOOOP</Button>
);
};
`}
</Code>
<div className="w-full rounded-md bg-gray-800 flex items-center justify-center flex-1 p-4">
<Button className="w-full h-24 text-4xl">BOOOOOOOOOOOP</Button>
</div>
</div>
</div>
</div>
);
};
Loading

0 comments on commit 269a1b5

Please sign in to comment.