mirror of
https://github.com/shadcn-ui/taxonomy
synced 2026-05-24 09:48:32 +00:00
feat: implement responsive styles for marketing pages
This commit is contained in:
shadcn
parent
4a83f9504d
commit
7f61c809e9
9 changed files with 226 additions and 80 deletions
|
|
@ -5,5 +5,5 @@ interface AuthLayoutProps {
|
|||
}
|
||||
|
||||
export default function RootLayout({ children }: AuthLayoutProps) {
|
||||
return <div className="grid min-h-screen grid-cols-2">{children}</div>
|
||||
return <div className="min-h-screen">{children}</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,32 +5,30 @@ import { UserAuthForm } from "@/components/user-auth-form"
|
|||
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<div className="flex h-screen w-screen flex-col items-center justify-center">
|
||||
<div className="container flex h-screen w-screen flex-col items-center justify-center">
|
||||
<Link
|
||||
href="/"
|
||||
className="absolute top-8 left-8 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white dark:focus:ring-slate-700"
|
||||
className="absolute top-4 left-4 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 md:top-8 md:left-8"
|
||||
>
|
||||
<>
|
||||
<Icons.chevronLeft className="mr-2 h-4 w-4" />
|
||||
Back
|
||||
</>
|
||||
</Link>
|
||||
<div className="p-8">
|
||||
<div className="mx-auto flex w-[350px] flex-col justify-center space-y-6">
|
||||
<div className="flex flex-col space-y-2 text-center">
|
||||
<Icons.logo className="mx-auto h-6 w-6" />
|
||||
<h1 className="text-2xl font-bold">Welcome back</h1>
|
||||
<p className="text-sm text-slate-500">
|
||||
Enter your email to sign in to your account
|
||||
</p>
|
||||
</div>
|
||||
<UserAuthForm />
|
||||
<p className="px-8 text-center text-sm text-slate-500">
|
||||
<Link href="/register" className="underline hover:text-brand">
|
||||
Don't have an account? Sign Up
|
||||
</Link>
|
||||
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||
<div className="flex flex-col space-y-2 text-center">
|
||||
<Icons.logo className="mx-auto h-6 w-6" />
|
||||
<h1 className="text-2xl font-bold">Welcome back</h1>
|
||||
<p className="text-sm text-slate-500">
|
||||
Enter your email to sign in to your account
|
||||
</p>
|
||||
</div>
|
||||
<UserAuthForm />
|
||||
<p className="px-8 text-center text-sm text-slate-500">
|
||||
<Link href="/register" className="underline hover:text-brand">
|
||||
Don't have an account? Sign Up
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,16 +5,16 @@ import { UserAuthForm } from "@/components/user-auth-form"
|
|||
|
||||
export default function RegisterPage() {
|
||||
return (
|
||||
<div className="grid h-screen w-screen grid-cols-2 flex-col items-center justify-center">
|
||||
<div className="container grid h-screen w-screen flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
|
||||
<Link
|
||||
href="/login"
|
||||
className="absolute top-8 right-8 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white dark:focus:ring-slate-700"
|
||||
className="absolute top-4 right-4 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 md:top-8 md:right-8"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
<div className="h-full bg-slate-100" />
|
||||
<div className="p-8">
|
||||
<div className="mx-auto flex w-[350px] flex-col justify-center space-y-6">
|
||||
<div className="hidden h-full bg-slate-100 lg:block" />
|
||||
<div className="lg:p-8">
|
||||
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||
<div className="flex flex-col space-y-2 text-center">
|
||||
<Icons.logo className="mx-auto h-6 w-6" />
|
||||
<h1 className="text-2xl font-bold">Create an account</h1>
|
||||
|
|
|
|||
|
|
@ -31,23 +31,26 @@ export default async function PostPage({ params }: PostPageProps) {
|
|||
const mdx = await serialize(post.content)
|
||||
|
||||
return (
|
||||
<article className="mx-auto max-w-2xl py-12">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<h1 className="max-w-[90%] text-4xl font-bold leading-normal">
|
||||
<article className="container pt-8 md:max-w-3xl md:pt-12 lg:pt-24">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<h1 className="md:leading-12 text-2xl font-bold leading-[1.2] sm:text-3xl md:text-5xl">
|
||||
{post.frontMatter.title}
|
||||
</h1>
|
||||
{post.frontMatter.date && (
|
||||
<p className="text-sm text-slate-600">
|
||||
{formatDate(post.frontMatter.date)}
|
||||
</p>
|
||||
<p className="text-slate-800">{formatDate(post.frontMatter.date)}</p>
|
||||
)}
|
||||
</div>
|
||||
<hr className="my-6" />
|
||||
<div className="pt-12 pb-8 md:pt-10 md:pb-8 lg:pt-12 lg:pb-12">
|
||||
<hr className="border-slate-100" />
|
||||
</div>
|
||||
{mdx && (
|
||||
<div className="prose max-w-none">
|
||||
<MdxContent source={mdx} />
|
||||
</div>
|
||||
)}
|
||||
<div className="pt-12 pb-8 md:pt-10 md:pb-8 lg:pt-12 lg:pb-12">
|
||||
<hr className="border-slate-100" />
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,29 +2,33 @@ import Link from "next/link"
|
|||
|
||||
import { Blog } from "@/lib/mdx/sources"
|
||||
import { formatDate } from "@/lib/utils"
|
||||
import { Icons } from "@/components/icons"
|
||||
|
||||
export default async function BlogPage() {
|
||||
const posts = await Blog.getAllMdxNodes()
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-3xl px-6 py-12 xl:px-8">
|
||||
<h1 className="text-3xl font-bold leading-tight sm:text-4xl md:text-5xl">
|
||||
Blog
|
||||
</h1>
|
||||
<p className="mt-4 text-gray-700">
|
||||
A blog built using MDX content. I copied some sample blog posts from my{" "}
|
||||
<Link href="https://shadcn.com" target="_blank" className="underline">
|
||||
personal site
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
<hr className="mt-6 py-6" />
|
||||
<div className="container pt-8 md:max-w-3xl md:pt-12 lg:pt-24">
|
||||
<div className="mx-auto flex flex-col gap-4">
|
||||
<h1 className="text-2xl font-bold leading-[1.1] sm:text-3xl md:text-6xl">
|
||||
Blog
|
||||
</h1>
|
||||
<p className="max-w-[75%] leading-normal text-slate-700 sm:text-lg sm:leading-7">
|
||||
A blog built using MDX content. I copied some sample blog posts from
|
||||
my{" "}
|
||||
<Link href="https://shadcn.com" target="_blank" className="underline">
|
||||
personal site
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
<div className="md:pt-18 pt-12 pb-8 md:pb-10 lg:pt-24 lg:pb-12">
|
||||
<hr className="border-slate-100" />
|
||||
</div>
|
||||
{posts.map((post) => (
|
||||
<article key={post.slug} className="flex flex-col space-y-4">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<Link href={post.url}>
|
||||
<h2 className="max-w-[90%] text-2xl font-bold leading-normal sm:text-3xl md:text-3xl">
|
||||
<h2 className="max-w-[80%] text-2xl font-bold leading-normal sm:text-3xl md:text-3xl">
|
||||
{post.frontMatter.title}
|
||||
</h2>
|
||||
</Link>
|
||||
|
|
@ -37,7 +41,9 @@ export default async function BlogPage() {
|
|||
{post.frontMatter.excerpt && (
|
||||
<p className="text-slate-600">{post.frontMatter.excerpt}</p>
|
||||
)}
|
||||
<hr className="mt-6 py-6" />
|
||||
<div className="py-8 md:py-10 lg:py-12">
|
||||
<hr className="border-slate-100" />
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,24 +7,41 @@ interface MarketingLayoutProps {
|
|||
|
||||
export default function MarketingLayout({ children }: MarketingLayoutProps) {
|
||||
return (
|
||||
<div className="mx-auto w-full px-4">
|
||||
<header className="mx-auto flex max-w-[1440px] items-center justify-between py-4">
|
||||
<div className="flex gap-10">
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<header className="container flex items-center justify-between py-4">
|
||||
<div className="flex gap-6 md:gap-10">
|
||||
<Link href="/" className="flex items-center space-x-2">
|
||||
<Icons.logo />
|
||||
<span className="font-bold">Taxonomy</span>
|
||||
<span className="hidden font-bold sm:inline-block">Taxonomy</span>
|
||||
</Link>
|
||||
<nav>
|
||||
<Link href="/blog" className="hover:underline">
|
||||
<nav className="flex items-center gap-6 sm:gap-8">
|
||||
<Link href="/blog" className="text-sm font-medium hover:underline">
|
||||
Blog
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
className="cursor-not-allowed text-sm font-medium opacity-40 hover:underline"
|
||||
>
|
||||
Pricing
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
className="cursor-not-allowed text-sm font-medium opacity-40 hover:underline"
|
||||
>
|
||||
Docs
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
<div>
|
||||
<Link href="/login">Login</Link>
|
||||
</div>
|
||||
<nav>
|
||||
<Link
|
||||
href="/login"
|
||||
className="relative inline-flex items-center rounded-md border border-transparent bg-brand-500 px-6 py-2 text-sm font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
</nav>
|
||||
</header>
|
||||
<main>{children}</main>
|
||||
<main className="flex-1">{children}</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,149 @@
|
|||
import { Icons } from "@/components/icons"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
|
||||
import { Icons } from "@/components/icons"
|
||||
|
||||
export default function IndexPage() {
|
||||
return (
|
||||
<section className="mx-auto grid max-w-[1100px] grid-cols-[1fr_380px] items-center gap-12 py-12">
|
||||
<div>
|
||||
<h1 className="text-6xl font-black leading-[1.1]">
|
||||
Publishing Platform for Everyone
|
||||
</h1>
|
||||
<p className="my-4 max-w-[85%] text-xl leading-8 text-slate-500">
|
||||
A Next.js 13 application built using layouts, server components and
|
||||
everything new in React 18.
|
||||
</p>
|
||||
<Link
|
||||
href="/login"
|
||||
className="relative inline-flex h-11 items-center rounded-md border border-transparent bg-brand-500 px-8 py-2 font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
|
||||
>
|
||||
Get Started
|
||||
<Icons.arrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
<>
|
||||
<section className="container grid items-center justify-center gap-6 pt-8 md:pt-12 lg:pt-24">
|
||||
<div className="flex flex-col items-start gap-4 md:max-w-[800px]">
|
||||
<Link
|
||||
href="https://twitter.com/shadcn"
|
||||
className="group inline-flex items-center space-x-2 rounded-full px-1 text-sm font-medium"
|
||||
>
|
||||
<span>Follow the development on Twitter</span>
|
||||
<span className="rounded-full bg-slate-100 p-1 transition-colors group-hover:bg-slate-900 group-hover:text-white">
|
||||
<Icons.arrowRight className="h-3 w-3" />
|
||||
</span>
|
||||
</Link>
|
||||
<h1 className="text-3xl font-black leading-[1.1] sm:text-4xl md:text-6xl">
|
||||
Publishing Platform for Everyone
|
||||
</h1>
|
||||
<p className="max-w-[85%] text-lg leading-normal text-slate-700 sm:text-xl sm:leading-8">
|
||||
An open source application built using the new router, server
|
||||
components and everything new in Next.js 13.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<Link
|
||||
href="/login"
|
||||
className="relative inline-flex h-11 items-center rounded-md border border-transparent bg-brand-500 px-8 py-2 font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
|
||||
>
|
||||
Get Started
|
||||
<Icons.arrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
<Link
|
||||
href="https://github.com/shadcn/taxonomy"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="relative inline-flex h-11 items-center rounded-md border border-slate-200 bg-white px-8 py-2 font-medium text-slate-900 transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
|
||||
>
|
||||
GitHub
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
<div className="md:py-18 container py-12 lg:py-24">
|
||||
<hr className="border-slate-100" />
|
||||
</div>
|
||||
<Image
|
||||
src="/images/nextjs-icon-dark-background.png"
|
||||
width={380}
|
||||
height={380}
|
||||
alt="Next.js logo"
|
||||
priority
|
||||
/>
|
||||
</section>
|
||||
<section className="container grid justify-center gap-6">
|
||||
<div className="mx-auto flex flex-col gap-4 md:max-w-[800px]">
|
||||
<h2 className="text-2xl font-bold leading-[1.1] sm:text-3xl md:text-6xl">
|
||||
Features
|
||||
</h2>
|
||||
<p className="max-w-[85%] leading-normal text-slate-700 sm:text-lg sm:leading-7">
|
||||
This project is as an experiment to see how a modern app, with
|
||||
features like authentication, subscriptions, API routes, and static
|
||||
pages, would work in Next.js 13.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid justify-center gap-4 sm:grid-cols-2 md:max-w-[860px] md:grid-cols-3">
|
||||
<div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
|
||||
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#000000]/20 p-6">
|
||||
<svg viewBox="0 0 24 24" className="h-12 w-12">
|
||||
<path d="M11.572 0c-.176 0-.31.001-.358.007a19.76 19.76 0 0 1-.364.033C7.443.346 4.25 2.185 2.228 5.012a11.875 11.875 0 0 0-2.119 5.243c-.096.659-.108.854-.108 1.747s.012 1.089.108 1.748c.652 4.506 3.86 8.292 8.209 9.695.779.25 1.6.422 2.534.525.363.04 1.935.04 2.299 0 1.611-.178 2.977-.577 4.323-1.264.207-.106.247-.134.219-.158-.02-.013-.9-1.193-1.955-2.62l-1.919-2.592-2.404-3.558a338.739 338.739 0 0 0-2.422-3.556c-.009-.002-.018 1.579-.023 3.51-.007 3.38-.01 3.515-.052 3.595a.426.426 0 0 1-.206.214c-.075.037-.14.044-.495.044H7.81l-.108-.068a.438.438 0 0 1-.157-.171l-.05-.106.006-4.703.007-4.705.072-.092a.645.645 0 0 1 .174-.143c.096-.047.134-.051.54-.051.478 0 .558.018.682.154.035.038 1.337 1.999 2.895 4.361a10760.433 10760.433 0 0 0 4.735 7.17l1.9 2.879.096-.063a12.317 12.317 0 0 0 2.466-2.163 11.944 11.944 0 0 0 2.824-6.134c.096-.66.108-.854.108-1.748 0-.893-.012-1.088-.108-1.747-.652-4.506-3.859-8.292-8.208-9.695a12.597 12.597 0 0 0-2.499-.523A33.119 33.119 0 0 0 11.573 0zm4.069 7.217c.347 0 .408.005.486.047a.473.473 0 0 1 .237.277c.018.06.023 1.365.018 4.304l-.006 4.218-.744-1.14-.746-1.14v-3.066c0-1.982.01-3.097.023-3.15a.478.478 0 0 1 .233-.296c.096-.05.13-.054.5-.054z" />
|
||||
</svg>
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-bold text-slate-900">Next.js 13</h3>
|
||||
<p className="text-sm text-slate-900">
|
||||
App dir, Routing, Layouts, Loading UI and API routes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
|
||||
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#61DAFB]/20 p-6">
|
||||
<svg viewBox="0 0 24 24" className="h-12 w-12">
|
||||
<path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38a2.167 2.167 0 0 0-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44a23.476 23.476 0 0 0-3.107-.534A23.892 23.892 0 0 0 12.769 4.7c1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442a22.73 22.73 0 0 0-3.113.538 15.02 15.02 0 0 1-.254-1.42c-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87a25.64 25.64 0 0 1-4.412.005 26.64 26.64 0 0 1-1.183-1.86c-.372-.64-.71-1.29-1.018-1.946a25.17 25.17 0 0 1 1.013-1.954c.38-.66.773-1.286 1.18-1.868A25.245 25.245 0 0 1 12 8.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933a25.952 25.952 0 0 0-1.345-2.32zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493a23.966 23.966 0 0 0-1.1-2.98c.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98a23.142 23.142 0 0 0-1.086 2.964c-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39a25.819 25.819 0 0 0 1.341-2.338zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143a22.005 22.005 0 0 1-2.006-.386c.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295a1.185 1.185 0 0 1-.553-.132c-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
|
||||
</svg>
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-bold text-slate-900">React 18</h3>
|
||||
<p className="text-sm text-slate-900">
|
||||
Server and Client Components. Use hook.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
|
||||
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#f45e1e]/20 p-6">
|
||||
<svg viewBox="0 0 24 24" className="h-12 w-12">
|
||||
<path d="M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a11.981 11.981 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.962 11.962 0 0 1 0 12Zm12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24Z" />
|
||||
</svg>
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-bold text-slate-900">Database</h3>
|
||||
<p className="text-sm text-slate-900">
|
||||
ORM using Prisma and deployed on PlanetScale.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
|
||||
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#06B6D4]/20 p-6">
|
||||
<svg viewBox="0 0 24 24" className="h-12 w-12">
|
||||
<path d="M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z" />
|
||||
</svg>
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-bold text-slate-900">Components</h3>
|
||||
<p className="text-sm text-slate-900">
|
||||
UI components built using Radix UI and styled with Tailwind
|
||||
CSS.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
|
||||
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#29d7c4]/20 p-6">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
className="h-12 w-12"
|
||||
>
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||||
</svg>
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-bold text-slate-900">Authentication</h3>
|
||||
<p className="text-sm text-slate-900">
|
||||
Authentication using NextAuth.js and middlewares.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
|
||||
<div className="flex h-[180px] flex-col justify-between rounded-md bg-[#008CDD]/20 p-6">
|
||||
<svg viewBox="0 0 24 24" className="h-12 w-12">
|
||||
<path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z" />
|
||||
</svg>
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-bold text-slate-900">Subscriptions</h3>
|
||||
<p className="text-sm text-slate-900">
|
||||
Free and paid subscriptions using Stripe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
Command,
|
||||
File,
|
||||
FileText,
|
||||
Github,
|
||||
HelpCircle,
|
||||
Image,
|
||||
Loader2,
|
||||
|
|
@ -35,4 +36,5 @@ export const Icons = {
|
|||
arrowRight: ArrowRight,
|
||||
help: HelpCircle,
|
||||
pizza: Pizza,
|
||||
gitHub: Github,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ module.exports = {
|
|||
"./ui/**/*.{ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "1.5rem",
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
...colors,
|
||||
|
|
|
|||
Loading…
Reference in a new issue