Initial commit
This commit is contained in:
twotalesanimation
@@ -0,0 +1,129 @@
|
||||
// app/components/LandingPage.tsx (Server Component)
|
||||
import React from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Check } from "lucide-react";
|
||||
import JoinForm from "./JoinForm";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<header className="max-w-6xl mx-auto px-6 py-6 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-full w-10 h-10 bg-black/90 text-white flex items-center justify-center font-bold">G4</div>
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold">Gruff Studio</h1>
|
||||
<p className="text-xs text-slate-500">UI playground · shadcn + Tailwind</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="sm">Docs</Button>
|
||||
<Button size="sm">Sign in</Button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main className="max-w-6xl mx-auto px-6 py-12">
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<Badge className="mb-4">Beta</Badge>
|
||||
<h2 className="text-4xl font-extrabold leading-tight">Build faster with shadcn components</h2>
|
||||
<p className="mt-4 text-slate-600">A tiny example landing page to confirm your Tailwind + shadcn setup is working. Components are unopinionated and fully customizable with Tailwind.</p>
|
||||
|
||||
<div className="mt-6 flex gap-4">
|
||||
<Button>Get started</Button>
|
||||
<Button variant="outline">Learn more</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
<Feature icon={<Check className="w-4 h-4" />} title="Reusable" subtitle="Composable UI" />
|
||||
<Feature icon={<Check className="w-4 h-4" />} title="Accessible" subtitle="Focus & keyboard" />
|
||||
<Feature icon={<Check className="w-4 h-4" />} title="Themed" subtitle="Tailwind friendly" />
|
||||
<Feature icon={<Check className="w-4 h-4" />} title="Tiny" subtitle="Zero runtime" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<CardTitle>Join the waitlist</CardTitle>
|
||||
<CardDescription>Drop your email and we’ll ping you when the demo is live.</CardDescription>
|
||||
<JoinForm />
|
||||
<p className="mt-3 text-xs text-slate-500">No spam — only useful updates.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 gap-3">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="rounded-md bg-slate-100 p-2">
|
||||
<Check className="w-5 h-5 text-slate-700" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">Server-side friendly</p>
|
||||
<p className="text-sm text-slate-500">Use these components in server and client components.</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="rounded-md bg-slate-100 p-2">
|
||||
<Check className="w-5 h-5 text-slate-700" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">Tailwind-ready</p>
|
||||
<p className="text-sm text-slate-500">Customize tokens in tailwind.config.</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-16">
|
||||
<h3 className="text-2xl font-semibold">Example features</h3>
|
||||
<div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<FeatureCard title="Fast dev loop" desc="Hot reload, Tailwind JIT, and tiny components." />
|
||||
<FeatureCard title="Prisma-ready" desc="Wire your database and serve content from server components." />
|
||||
<FeatureCard title="Accessible" desc="Built with accessibility and UX in mind." />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="border-t mt-12 py-6">
|
||||
<div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<p className="text-sm text-slate-500">© {new Date().getFullYear()} Gruff Studio</p>
|
||||
<div className="flex items-center gap-3 text-sm text-slate-600">Made with ❤️ using shadcn components</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Feature({ icon, title, subtitle }: { icon: React.ReactNode; title: string; subtitle: string }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 p-3 bg-white rounded-lg shadow-sm">
|
||||
<div className="w-8 h-8 bg-slate-100 rounded flex items-center justify-center">{icon}</div>
|
||||
<div>
|
||||
<div className="font-medium text-sm">{title}</div>
|
||||
<div className="text-xs text-slate-500">{subtitle}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeatureCard({ title, desc }: { title: string; desc: string }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<h4 className="font-semibold">{title}</h4>
|
||||
<p className="mt-2 text-sm text-slate-500">{desc}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user