yuuki web init

components/yuuki/hero.tsx

@@ -0,0 +1,96 @@
+import React from "react"
+import { Terminal, Smartphone, Cpu } from "lucide-react"
+
+export function Hero() {
+  return (
+    <section className="relative flex min-h-screen flex-col items-center justify-center px-6 pt-20">
+      {/* Subtle grid background */}
+      <div
+        className="pointer-events-none absolute inset-0 opacity-[0.03]"
+        style={{
+          backgroundImage: `linear-gradient(rgba(244,114,182,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(244,114,182,0.3) 1px, transparent 1px)`,
+          backgroundSize: "60px 60px",
+        }}
+      />
+
+      {/* Glow */}
+      <div className="pointer-events-none absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[500px] w-[500px] rounded-full bg-sakura/5 blur-[120px]" />
+
+      <div className="relative z-10 mx-auto max-w-4xl text-center">
+        {/* Terminal badge */}
+        <div className="mb-8 inline-flex items-center gap-2 rounded-full border border-border bg-secondary px-4 py-2">
+          <Terminal size={14} className="text-sakura" />
+          <span className="text-xs font-mono text-muted-foreground">
+            Trained entirely on a smartphone
+          </span>
+        </div>
+
+        <h1 className="mb-6 text-5xl font-bold tracking-tight text-foreground md:text-7xl lg:text-8xl text-balance">
+          <span className="text-sakura">Yuuki</span>
+          <br />
+          <span className="text-foreground">Code Generation</span>
+        </h1>
+
+        <p className="mx-auto mb-10 max-w-2xl text-lg leading-relaxed text-muted-foreground md:text-xl text-pretty">
+          A multilingual code generation model trained on a Redmi 12 smartphone.
+          Zero cloud. Zero budget. Built by one person with pure determination.
+        </p>
+
+        {/* CTA buttons */}
+        <div className="mb-16 flex flex-col items-center justify-center gap-4 sm:flex-row">
+          <a
+            href="#demo"
+            className="group flex items-center gap-2 rounded-xl bg-sakura px-8 py-3.5 text-sm font-semibold text-primary-foreground transition-all hover:opacity-90"
+          >
+            Try Live Demo
+            <span className="transition-transform group-hover:translate-x-0.5">{">"}</span>
+          </a>
+          <a
+            href="https://github.com/YuuKi-OS/yuy"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 rounded-xl border border-border px-8 py-3.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
+          >
+            <span className="font-mono text-muted-foreground">$</span>
+            cargo install yuy
+          </a>
+        </div>
+
+        {/* Stats row */}
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 sm:gap-0 sm:divide-x sm:divide-border">
+          <Stat icon={<Smartphone size={16} />} value="Redmi 12" label="Training Device" />
+          <Stat icon={<Cpu size={16} />} value="$0.00" label="Cloud Cost" />
+          <Stat value="988 MB" label="Model Size" />
+          <Stat value="5.3%" label="Training Progress" />
+        </div>
+      </div>
+
+      {/* Scroll indicator */}
+      <div className="absolute bottom-8 left-1/2 -translate-x-1/2">
+        <div className="h-8 w-5 rounded-full border border-border flex items-start justify-center p-1">
+          <div className="h-2 w-1 rounded-full bg-sakura animate-bounce" />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function Stat({
+  icon,
+  value,
+  label,
+}: {
+  icon?: React.ReactNode
+  value: string
+  label: string
+}) {
+  return (
+    <div className="flex flex-col items-center gap-1 px-6 py-3">
+      <div className="flex items-center gap-1.5">
+        {icon && <span className="text-sakura">{icon}</span>}
+        <span className="text-lg font-bold text-foreground font-mono">{value}</span>
+      </div>
+      <span className="text-xs text-muted-foreground">{label}</span>
+    </div>
+  )
+}