Initial commit for project Spoon!

2026-06-21 17:52:02 -05:00
commit cf7ff2ee4e
268 changed files with 32981 additions and 0 deletions
@@ -0,0 +1,125 @@
+'use client';
+
+import Link from 'next/link';
+import { useConvexAuth } from 'convex/react';
+import {
+  ArrowRight,
+  Bot,
+  CheckCircle2,
+  GitBranch,
+  GitPullRequest,
+  ShieldCheck,
+} from 'lucide-react';
+
+import { Badge, Button } from '@spoon/ui';
+
+const previewRows = [
+  {
+    name: 'editor-spoon',
+    upstream: 'upstream/main',
+    status: 'Clean update',
+    icon: CheckCircle2,
+    tone: 'text-emerald-600',
+  },
+  {
+    name: 'billing-fork',
+    upstream: 'release/2026.06',
+    status: 'AI review queued',
+    icon: Bot,
+    tone: 'text-teal-600',
+  },
+  {
+    name: 'docs-platform',
+    upstream: 'main',
+    status: 'Needs review',
+    icon: GitPullRequest,
+    tone: 'text-amber-600',
+  },
+];
+
+export const Hero = () => {
+  const { isAuthenticated } = useConvexAuth();
+  return (
+    <section className='container mx-auto px-4 py-16 md:py-24'>
+      <div className='grid items-center gap-10 lg:grid-cols-[0.92fr_1.08fr]'>
+        <div className='max-w-3xl'>
+          <Badge variant='outline' className='mb-5 gap-2'>
+            <ShieldCheck className='size-3.5 text-emerald-600' />
+            Self-hostable fork maintenance
+          </Badge>
+          <h1 className='max-w-4xl text-4xl font-semibold tracking-normal text-balance sm:text-5xl md:text-6xl'>
+            Fork freely. Stay close to upstream.
+          </h1>
+          <p className='text-muted-foreground mt-6 max-w-2xl text-lg leading-8'>
+            Spoon helps you customize upstream projects without inheriting the
+            full maintenance burden. Track drift, review update risk, and keep
+            managed forks ready for merge requests.
+          </p>
+          <div className='mt-8 flex flex-col gap-3 sm:flex-row'>
+            <Button size='lg' asChild>
+              <Link href={isAuthenticated ? '/dashboard' : '/sign-in'}>
+                {isAuthenticated ? 'Open dashboard' : 'Start with Spoon'}
+                <ArrowRight className='size-4' />
+              </Link>
+            </Button>
+            <Button size='lg' variant='outline' asChild>
+              <Link href='#workflow'>See how it works</Link>
+            </Button>
+          </div>
+        </div>
+
+        <div className='border-border bg-card border shadow-sm'>
+          <div className='border-border flex items-center justify-between border-b px-5 py-4'>
+            <div>
+              <p className='text-sm font-medium'>Spoon dashboard</p>
+              <p className='text-muted-foreground text-xs'>
+                Upstream status across managed forks
+              </p>
+            </div>
+            <Badge className='bg-primary/10 text-primary hover:bg-primary/10'>
+              3 active Spoons
+            </Badge>
+          </div>
+          <div className='grid gap-4 p-5 md:grid-cols-3'>
+            {[
+              ['Updates', '4', '2 clean'],
+              ['Needs review', '1', 'conflict risk'],
+              ['Agents', '2', 'queued'],
+            ].map(([label, value, note]) => (
+              <div
+                key={label}
+                className='border-border bg-background border p-4'
+              >
+                <p className='text-muted-foreground text-xs'>{label}</p>
+                <p className='mt-2 text-2xl font-semibold'>{value}</p>
+                <p className='text-muted-foreground mt-1 text-xs'>{note}</p>
+              </div>
+            ))}
+          </div>
+          <div className='space-y-3 px-5 pb-5'>
+            {previewRows.map(({ name, upstream, status, icon: Icon, tone }) => (
+              <div
+                key={name}
+                className='border-border bg-background flex items-center justify-between gap-4 border p-4'
+              >
+                <div className='flex items-center gap-3'>
+                  <span className='bg-muted flex size-9 items-center justify-center rounded-md'>
+                    <GitBranch className='size-4' />
+                  </span>
+                  <div>
+                    <p className='text-sm font-medium'>{name}</p>
+                    <p className='text-muted-foreground text-xs'>{upstream}</p>
+                  </div>
+                </div>
+                <span className='flex items-center gap-2 text-sm'>
+                  <Icon className={`size-4 ${tone}`} />
+                  {status}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};