imagwn

app/page.tsx

@@ -1,43 +1,168 @@
+"use client"
+
+import React from "react"
 import { Navbar } from "@/components/yuuki/navbar"
 import { Hero } from "@/components/yuuki/hero"
 import { ModelSection } from "@/components/yuuki/model-section"
 import { EcosystemSection } from "@/components/yuuki/ecosystem-section"
-import { DemoSection } from "@/components/yuuki/demo-section"
 import { StatsSection } from "@/components/yuuki/stats-section"
 import { CreatorSection } from "@/components/yuuki/creator-section"
-import { DonateSection } from "@/components/yuuki/donate-section"
 import { Footer } from "@/components/yuuki/footer"
 
+function Divider() {
+  return (
+    <div className="mx-auto max-w-7xl px-6">
+      <div className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
+    </div>
+  )
+}
+
+class ErrorBoundary extends React.Component<
+  { name: string; children: React.ReactNode },
+  { error: Error | null }
+> {
+  constructor(props: { name: string; children: React.ReactNode }) {
+    super(props)
+    this.state = { error: null }
+  }
+  static getDerivedStateFromError(error: Error) {
+    return { error }
+  }
+  componentDidCatch(error: Error) {
+    console.log(`[v0] ErrorBoundary caught in ${this.props.name}:`, error.message)
+  }
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="p-8 text-center text-red-400 border border-red-800 rounded-lg m-4">
+          <p className="font-mono text-sm">Error in {this.props.name}: {this.state.error.message}</p>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+
 export default function Page() {
+  console.log("[v0] Page component rendering")
   return (
     <main className="min-h-screen bg-background text-foreground">
-      <Navbar />
-      <Hero />
-      <div className="mx-auto max-w-7xl px-6">
-        <div className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
-      </div>
-      <ModelSection />
-      <div className="mx-auto max-w-7xl px-6">
-        <div className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
-      </div>
-      <EcosystemSection />
-      <div className="mx-auto max-w-7xl px-6">
-        <div className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
-      </div>
-      <DemoSection />
-      <div className="mx-auto max-w-7xl px-6">
-        <div className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
-      </div>
-      <StatsSection />
-      <div className="mx-auto max-w-7xl px-6">
-        <div className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
-      </div>
-      <CreatorSection />
-      <div className="mx-auto max-w-7xl px-6">
-        <div className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
-      </div>
-      <DonateSection />
-      <Footer />
+      <ErrorBoundary name="Navbar">
+        <Navbar />
+      </ErrorBoundary>
+      <ErrorBoundary name="Hero">
+        <Hero />
+      </ErrorBoundary>
+      <Divider />
+      <ErrorBoundary name="ModelSection">
+        <ModelSection />
+      </ErrorBoundary>
+      <Divider />
+      <ErrorBoundary name="EcosystemSection">
+        <EcosystemSection />
+      </ErrorBoundary>
+      <Divider />
+
+      {/* Demo Section */}
+      <ErrorBoundary name="DemoSection">
+        <section id="demo" className="relative px-6 py-24">
+          <div className="mx-auto max-w-7xl">
+            <div className="mb-12 text-center">
+              <span className="mb-4 inline-block font-mono text-xs uppercase tracking-widest text-[#f472b6]">
+                Live Demo
+              </span>
+              <h2 className="mb-4 text-3xl font-bold text-foreground md:text-5xl text-balance">
+                Try Yuuki Now
+              </h2>
+              <p className="mx-auto max-w-2xl text-muted-foreground leading-relaxed">
+                Generate code directly in your browser. Click below to open the Yuuki Space
+                on HuggingFace. No setup required.
+              </p>
+            </div>
+
+            <div className="rounded-2xl border border-border bg-card p-12 text-center">
+              <div className="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-[rgba(244,114,182,0.15)] border border-[rgba(244,114,182,0.25)]">
+                <svg className="h-8 w-8 text-[#f472b6]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
+                </svg>
+              </div>
+              <h3 className="mb-3 text-xl font-bold text-foreground">Interactive Playground</h3>
+              <p className="mx-auto mb-8 max-w-md text-sm text-muted-foreground leading-relaxed">
+                The Yuuki Space runs the Yuuki-best model on HuggingFace infrastructure.
+                Generate code in Agda, C, Python, Assembly, and more.
+              </p>
+              <a
+                href="https://huggingface.co/spaces/OpceanAI/Yuuki"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 rounded-xl bg-[#f472b6] px-8 py-3.5 text-sm font-semibold text-[#0a0a0a] transition-opacity hover:opacity-90"
+              >
+                Launch Yuuki Space
+                <span>{">"}</span>
+              </a>
+            </div>
+          </div>
+        </section>
+      </ErrorBoundary>
+
+      <Divider />
+      <ErrorBoundary name="StatsSection">
+        <StatsSection />
+      </ErrorBoundary>
+      <Divider />
+      <ErrorBoundary name="CreatorSection">
+        <CreatorSection />
+      </ErrorBoundary>
+      <Divider />
+
+      {/* Donate Section */}
+      <ErrorBoundary name="DonateSection">
+        <section id="donate" className="relative px-6 py-24">
+          <div className="mx-auto max-w-7xl">
+            <div className="mx-auto max-w-3xl">
+              <div className="overflow-hidden rounded-2xl border border-[rgba(244,114,182,0.25)] bg-card relative">
+                <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-[#f472b6]/5 via-transparent to-transparent" />
+                <div className="relative p-8 md:p-12 text-center">
+                  <h2 className="mb-4 text-3xl font-bold text-foreground md:text-4xl text-balance">
+                    Support the Project
+                  </h2>
+                  <p className="mx-auto mb-8 max-w-xl text-muted-foreground leading-relaxed">
+                    Yuuki is built with zero budget by a single person. Your support helps keep the
+                    project alive and growing -- better hardware, more training time, and new features.
+                  </p>
+
+                  <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
+                    <a
+                      href="https://github.com/sponsors/aguitauwu"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-2 rounded-xl bg-[#f472b6] px-8 py-3.5 text-sm font-semibold text-[#0a0a0a] transition-opacity hover:opacity-90"
+                    >
+                      Sponsor on GitHub
+                    </a>
+                    <a
+                      href="https://github.com/YuuKi-OS"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-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"
+                    >
+                      Star the repos
+                    </a>
+                  </div>
+
+                  <p className="mt-6 text-xs text-muted-foreground">
+                    Even a star on GitHub helps. Every contribution matters.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </ErrorBoundary>
+
+      <ErrorBoundary name="Footer">
+        <Footer />
+      </ErrorBoundary>
     </main>
   )
 }