yuuki web init

components/yuuki/stats-section.tsx

@@ -0,0 +1,153 @@
+export function StatsSection() {
+  const stats = [
+    { value: "124M", label: "Parameters", sub: "GPT-2 base" },
+    { value: "988", label: "MB Model Size", sub: "Full precision" },
+    { value: "37,500", label: "Total Steps", sub: "Target" },
+    { value: "2,000", label: "Steps Completed", sub: "5.3% done" },
+    { value: "50+", label: "Hours Training", sub: "On a phone" },
+    { value: "$0", label: "Total Cost", sub: "Zero cloud" },
+    { value: "~86s", label: "Per Step", sub: "Snapdragon 685" },
+    { value: "+146%", label: "Quality Gain", sub: "CP-1400 to CP-2000" },
+  ]
+
+  const timeline = [
+    {
+      step: "Phase 1",
+      title: "Foundation",
+      status: "complete",
+      items: [
+        "Training pipeline on mobile",
+        "Custom tokenizer",
+        "Checkpoint system",
+        "Evaluation framework",
+      ],
+    },
+    {
+      step: "Phase 2",
+      title: "Current",
+      status: "active",
+      items: [
+        "Continued pre-training",
+        "Language expansion",
+        "YUY CLI tool (Rust)",
+        "YUY-Chat TUI interface",
+      ],
+    },
+    {
+      step: "Phase 3",
+      title: "Upcoming",
+      status: "planned",
+      items: [
+        "Yuuki v0.1 full release",
+        "Research paper publication",
+        "Native model (from scratch)",
+        "Community model hub",
+      ],
+    },
+  ]
+
+  return (
+    <section id="stats" className="relative px-6 py-24">
+      <div className="mx-auto max-w-7xl">
+        <div className="mb-16 text-center">
+          <span className="mb-4 inline-block font-mono text-xs uppercase tracking-widest text-sakura">
+            Numbers
+          </span>
+          <h2 className="mb-4 text-3xl font-bold text-foreground md:text-5xl text-balance">
+            Progress is Real
+          </h2>
+          <p className="mx-auto max-w-2xl text-muted-foreground leading-relaxed">
+            Every metric is measurable and reproducible. Trained at zero cost
+            with consistent improvements across checkpoints.
+          </p>
+        </div>
+
+        {/* Stats grid */}
+        <div className="mb-16 grid grid-cols-2 gap-4 md:grid-cols-4">
+          {stats.map((stat) => (
+            <div
+              key={stat.label}
+              className="rounded-xl border border-border bg-card p-5 text-center"
+            >
+              <div className="mb-1 text-2xl font-bold font-mono text-sakura md:text-3xl">
+                {stat.value}
+              </div>
+              <div className="text-sm font-medium text-foreground">{stat.label}</div>
+              <div className="text-xs text-muted-foreground">{stat.sub}</div>
+            </div>
+          ))}
+        </div>
+
+        {/* Roadmap / Timeline */}
+        <div className="grid gap-6 md:grid-cols-3">
+          {timeline.map((phase) => (
+            <div
+              key={phase.step}
+              className={`rounded-xl border p-6 ${
+                phase.status === "active"
+                  ? "border-sakura-border bg-sakura-dim"
+                  : "border-border bg-card"
+              }`}
+            >
+              <div className="mb-4 flex items-center gap-3">
+                <span
+                  className={`h-2.5 w-2.5 rounded-full ${
+                    phase.status === "complete"
+                      ? "bg-[#22c55e]"
+                      : phase.status === "active"
+                        ? "bg-sakura animate-pulse"
+                        : "bg-muted-foreground/30"
+                  }`}
+                />
+                <div>
+                  <span className="text-xs font-mono text-muted-foreground">{phase.step}</span>
+                  <h3 className="text-lg font-semibold text-foreground">{phase.title}</h3>
+                </div>
+              </div>
+              <ul className="flex flex-col gap-2">
+                {phase.items.map((item) => (
+                  <li key={item} className="flex items-start gap-2 text-sm">
+                    <span
+                      className={`mt-1.5 h-1 w-1 flex-shrink-0 rounded-full ${
+                        phase.status === "complete" ? "bg-[#22c55e]" : "bg-muted-foreground/40"
+                      }`}
+                    />
+                    <span className="text-secondary-foreground">{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {/* Why it matters */}
+        <div className="mt-16 rounded-xl border border-border bg-card p-8 md:p-12">
+          <h3 className="mb-6 text-2xl font-bold text-foreground">Why This Matters</h3>
+          <div className="grid gap-6 md:grid-cols-3">
+            <div>
+              <h4 className="mb-2 text-sm font-semibold text-sakura">Accessibility</h4>
+              <p className="text-sm text-muted-foreground leading-relaxed">
+                Students without GPU access can experiment with ML training.
+                No cloud account, no credit card, no barriers.
+              </p>
+            </div>
+            <div>
+              <h4 className="mb-2 text-sm font-semibold text-sakura">Democratization</h4>
+              <p className="text-sm text-muted-foreground leading-relaxed">
+                Proves that meaningful ML research can happen anywhere in the world,
+                with just a phone and determination.
+              </p>
+            </div>
+            <div>
+              <h4 className="mb-2 text-sm font-semibold text-sakura">Edge ML</h4>
+              <p className="text-sm text-muted-foreground leading-relaxed">
+                Explores the limits of what is possible with mobile hardware,
+                pushing edge ML training into new territory.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}