Upload page.tsx with huggingface_hub

page.tsx

@@ -0,0 +1,285 @@
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Plus, Upload, ChevronDown, ChevronRight, Eye, Heart } from "lucide-react"
+
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Navigation */}
+      <nav className="sticky top-0 z-50 flex items-center justify-between border-b border-border bg-white px-8 h-[60px]">
+        <div className="flex items-center gap-12">
+          {/* Logo */}
+          <a href="#" className="flex items-center gap-1 text-base font-semibold text-foreground">
+            <span>v0</span>
+            <span className="text-xs font-normal text-muted-foreground">by Vercel</span>
+          </a>
+          
+          {/* New Chat Button */}
+          <Button variant="outline" size="sm" className="gap-2">
+            <Plus className="w-4 h-4" />
+            New Chat
+          </Button>
+          
+          {/* Nav Links */}
+          <div className="flex items-center gap-6">
+            <button className="flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
+              Templates
+              <ChevronDown className="w-3 h-3" />
+            </button>
+            <button className="flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
+              Resources
+              <ChevronDown className="w-3 h-3" />
+            </button>
+            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
+              Enterprise
+            </a>
+            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
+              Pricing
+            </a>
+            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
+              iOS
+            </a>
+            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
+              Students
+            </a>
+            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
+              FAQ
+            </a>
+          </div>
+        </div>
+        
+        {/* Auth Buttons */}
+        <div className="flex items-center gap-4">
+          <Button variant="outline" size="sm" className="text-sm font-medium">
+            Sign In
+          </Button>
+          <Button variant="outline" size="sm" className="text-sm font-medium">
+            Sign Up
+          </Button>
+        </div>
+      </nav>
+
+      {/* Main Container */}
+      <main className="max-w-[1200px] mx-auto px-8">
+        {/* Hero Section */}
+        <section className="relative text-center py-16">
+          {/* Large Watermark */}
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[240px] font-bold text-foreground/[0.02] tracking-tighter leading-none select-none pointer-events-none">
+            v0
+          </div>
+          
+          <div className="relative z-10">
+            <h1 className="text-5xl font-semibold tracking-tight mb-4">
+              What do you want to create?
+            </h1>
+            <p className="text-base text-muted-foreground mb-8">
+              Start building with a single prompt. No coding needed.
+            </p>
+            
+            {/* Input Field */}
+            <div className="max-w-[600px] mx-auto flex items-center gap-2 p-2 border border-input rounded-xl bg-background hover:border-muted-foreground/20 focus-within:border-ring transition-colors">
+              <button className="p-2 hover:bg-accent rounded-lg transition-colors">
+                <Plus className="w-5 h-5 text-muted-foreground" />
+              </button>
+              <Input 
+                placeholder="Ask v0 to build..."
+                className="border-0 shadow-none focus-visible:ring-0 text-sm bg-transparent"
+              />
+              <button className="p-2 hover:bg-accent rounded-lg transition-colors">
+                <Upload className="w-5 h-5 text-muted-foreground" />
+              </button>
+            </div>
+          </div>
+        </section>
+
+        {/* Community Section */}
+        <section className="py-12">
+          <div className="flex items-center justify-between mb-6">
+            <div>
+              <h2 className="text-lg font-semibold mb-1">From the Community</h2>
+              <p className="text-sm text-muted-foreground">
+                Explore what the community is building with v0.
+              </p>
+            </div>
+            <a href="#" className="flex items-center gap-1 text-sm font-medium text-foreground hover:underline">
+              Browse All
+              <ChevronRight className="w-4 h-4" />
+            </a>
+          </div>
+
+          {/* Template Grid */}
+          <div className="grid grid-cols-3 gap-6">
+            {/* Template Card 1 */}
+            <div className="group cursor-pointer">
+              <div className="relative aspect-[4/3] rounded-lg border border-border overflow-hidden mb-3 bg-gray-50">
+                <div className="p-6">
+                  <h3 className="text-sm font-medium mb-4">
+                    Effortless custom contract billing by Brilliance
+                  </h3>
+                  <div className="mt-8 space-y-2">
+                    <div className="h-2 bg-gray-200 rounded w-full"></div>
+                    <div className="h-2 bg-gray-200 rounded w-3/4"></div>
+                    <div className="h-8 bg-black rounded w-24 mt-4"></div>
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-start gap-2">
+                <div className="w-6 h-6 rounded-full bg-purple-500 flex-shrink-0"></div>
+                <div className="flex-1">
+                  <h4 className="text-sm font-medium mb-1">Brilliance SaaS Landing Page</h4>
+                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                      <Eye className="w-3 h-3" />
+                      2.1k
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Heart className="w-3 h-3" />
+                      662
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Template Card 2 */}
+            <div className="group cursor-pointer">
+              <div className="relative aspect-[4/3] rounded-lg border border-border overflow-hidden mb-3 bg-black">
+                <div className="flex items-center justify-center h-full">
+                  <div className="text-white text-sm">3D Gallery Photography Template</div>
+                </div>
+              </div>
+              <div className="flex items-start gap-2">
+                <div className="w-6 h-6 rounded-full bg-purple-500 flex-shrink-0"></div>
+                <div className="flex-1">
+                  <h4 className="text-sm font-medium mb-1">3D Gallery Photography Template</h4>
+                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                      <Eye className="w-3 h-3" />
+                      5.14k
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Heart className="w-3 h-3" />
+                      403
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Template Card 3 */}
+            <div className="group cursor-pointer">
+              <div className="relative aspect-[4/3] rounded-lg border border-border overflow-hidden mb-3 bg-black">
+                <div className="absolute top-3 right-3">
+                  <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-black text-white text-xs font-medium border border-white/20">
+                    AI
+                  </span>
+                </div>
+                <div className="flex items-center justify-center h-full">
+                  <h3 className="text-white text-lg font-semibold">AI Gateway Starter</h3>
+                </div>
+              </div>
+              <div className="flex items-start gap-2">
+                <div className="w-6 h-6 rounded-full bg-purple-500 flex-shrink-0"></div>
+                <div className="flex-1">
+                  <h4 className="text-sm font-medium mb-1">AI Gateway Starter</h4>
+                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                      <Eye className="w-3 h-3" />
+                      4.42k
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Heart className="w-3 h-3" />
+                      188
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Template Card 4 */}
+            <div className="group cursor-pointer">
+              <div className="relative aspect-[4/3] rounded-lg border border-border overflow-hidden mb-3 bg-gradient-to-br from-blue-500 to-purple-600">
+                <div className="flex flex-col items-center justify-center h-full text-white px-6">
+                  <h3 className="text-lg font-semibold mb-3">
+                    Unleash the Power of AI Agents
+                  </h3>
+                  <Button size="sm" variant="secondary" className="bg-white text-black hover:bg-gray-100">
+                    Learn More
+                  </Button>
+                </div>
+              </div>
+              <div className="flex items-start gap-2">
+                <div className="w-6 h-6 rounded-full bg-purple-500 flex-shrink-0"></div>
+                <div className="flex-1">
+                  <h4 className="text-sm font-medium mb-1">Pointer AI landing page</h4>
+                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                      <Eye className="w-3 h-3" />
+                      14.8k
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Heart className="w-3 h-3" />
+                      1.1k
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Template Card 5 */}
+            <div className="group cursor-pointer">
+              <div className="relative aspect-[4/3] rounded-lg border border-border overflow-hidden mb-3 bg-black">
+                <div className="flex items-center justify-center h-full">
+                  <div className="w-16 h-16 rounded-lg bg-gradient-to-br from-green-400 to-emerald-500"></div>
+                </div>
+              </div>
+              <div className="flex items-start gap-2">
+                <div className="w-6 h-6 rounded-full bg-purple-500 flex-shrink-0"></div>
+                <div className="flex-1">
+                  <h4 className="text-sm font-medium mb-1">Dashboard – M.O.N.K.Y</h4>
+                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                      <Eye className="w-3 h-3" />
+                      7.76k
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Heart className="w-3 h-3" />
+                      725
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Template Card 6 */}
+            <div className="group cursor-pointer">
+              <div className="relative aspect-[4/3] rounded-lg border border-border overflow-hidden mb-3 bg-gradient-to-br from-slate-900 to-slate-800">
+                <div className="flex items-center justify-center h-full">
+                  <h3 className="text-white text-lg font-semibold">
+                    Unlock your future growth
+                  </h3>
+                </div>
+              </div>
+              <div className="flex items-start gap-2">
+                <div className="w-6 h-6 rounded-full bg-purple-500 flex-shrink-0"></div>
+                <div className="flex-1">
+                  <h4 className="text-sm font-medium mb-1">Skal Ventures Template</h4>
+                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                      <Eye className="w-3 h-3" />
+                      3.23k
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Heart className="w-3 h-3" />
+                      495
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  )
+}