You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import NextLink from "next/link";
|
|
import { Link } from "@nextui-org/link";
|
|
import { Snippet } from "@nextui-org/snippet";
|
|
import { Code } from "@nextui-org/code"
|
|
import { button as buttonStyles } from "@nextui-org/theme";
|
|
import { siteConfig } from "@/config/site";
|
|
import { title, subtitle } from "@/components/primitives";
|
|
import { GithubIcon } from "@/components/icons";
|
|
|
|
export default function Home() {
|
|
return (
|
|
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
|
|
<div className="inline-block max-w-lg text-center justify-center">
|
|
<h1 className={title()}>Make </h1>
|
|
<h1 className={title({ color: "violet" })}>beautiful </h1>
|
|
<br />
|
|
<h1 className={title()}>
|
|
websites regardless of your design experience.
|
|
</h1>
|
|
<h2 className={subtitle({ class: "mt-4" })}>
|
|
Beautiful, fast and modern React UI library.
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<Link
|
|
isExternal
|
|
as={NextLink}
|
|
href={siteConfig.links.docs}
|
|
className={buttonStyles({ color: "primary", radius: "full", variant: "shadow" })}
|
|
>
|
|
Documentation
|
|
</Link>
|
|
<Link
|
|
isExternal
|
|
as={NextLink}
|
|
className={buttonStyles({ variant: "bordered", radius: "full" })}
|
|
href={siteConfig.links.github}
|
|
>
|
|
<GithubIcon size={20} />
|
|
GitHub
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<Snippet hideSymbol hideCopyButton variant="flat">
|
|
<span>
|
|
Get started by editing <Code color="primary">app/page.tsx</Code>
|
|
</span>
|
|
</Snippet>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|