feat: complete frontend UI - comparison views, profile, explore, layout

src/app/(main)/explore/page.tsx

@@ -0,0 +1,216 @@
+"use client"
+
+import { useState } from "react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Search, Eye, BarChart3, Filter, X, Loader2 } from "lucide-react"
+import Link from "next/link"
+
+const allComparisons = [
+  {
+    id: "1",
+    title: "React vs Vue vs Svelte",
+    description: "Frontend framework comparison for modern web development",
+    items: ["React", "Vue", "Svelte"],
+    tags: ["Tech", "JavaScript"],
+    author: "Alex Johnson",
+    overallScore: 8.5,
+    views: 1247,
+  },
+  {
+    id: "2",
+    title: "GPT-4 vs Claude vs Gemini",
+    description: "Comparing top AI language models for reasoning tasks",
+    items: ["GPT-4", "Claude 3", "Gemini Pro"],
+    tags: ["AI", "Products"],
+    author: "Sarah Chen",
+    overallScore: 8.8,
+    views: 3891,
+  },
+  {
+    id: "3",
+    title: "Notion vs Obsidian vs Roam",
+    description: "Knowledge management tools for productivity",
+    items: ["Notion", "Obsidian", "Roam Research"],
+    tags: ["Productivity", "Tools"],
+    author: "Mike Peters",
+    overallScore: 7.5,
+    views: 892,
+  },
+  {
+    id: "4",
+    title: "AWS vs GCP vs Azure",
+    description: "Cloud platform comparison for enterprise infrastructure",
+    items: ["AWS", "Google Cloud", "Microsoft Azure"],
+    tags: ["Tech", "Cloud"],
+    author: "Emma Wilson",
+    overallScore: 9.0,
+    views: 2156,
+  },
+  {
+    id: "5",
+    title: "iPhone 15 Pro vs Samsung S24 Ultra",
+    description: "Flagship smartphone comparison with camera and performance benchmarks",
+    items: ["iPhone 15 Pro", "Samsung S24 Ultra"],
+    tags: ["Products", "Mobile"],
+    author: "James Lee",
+    overallScore: 8.2,
+    views: 3421,
+  },
+  {
+    id: "6",
+    title: "Python vs Rust vs Go",
+    description: "Systems programming languages compared for performance and productivity",
+    items: ["Python", "Rust", "Go"],
+    tags: ["Tech", "Programming"],
+    author: "Anna Kim",
+    overallScore: 8.4,
+    views: 1873,
+  },
+]
+
+const categories = ["All", "Tech", "Products", "AI", "Cloud", "Productivity"]
+
+export default function ExplorePage() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedCategory, setSelectedCategory] = useState("All")
+  const [loading, setLoading] = useState(false)
+
+  const filteredComparisons = allComparisons.filter((comparison) => {
+    const matchesSearch =
+      searchQuery === "" ||
+      comparison.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      comparison.items.some((item) =>
+        item.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    const matchesCategory =
+      selectedCategory === "All" ||
+      comparison.tags.some((tag) => tag.toLowerCase() === selectedCategory.toLowerCase())
+    return matchesSearch && matchesCategory
+  })
+
+  return (
+    <div className="max-w-6xl mx-auto p-4 sm:p-6 space-y-6">
+      <div className="space-y-4">
+        <h1 className="text-2xl font-bold">Explore Comparisons</h1>
+
+        <div className="flex flex-col sm:flex-row gap-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Search comparisons..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {categories.map((category) => (
+            <Button
+              key={category}
+              variant={selectedCategory === category ? "default" : "outline"}
+              size="sm"
+              onClick={() => setSelectedCategory(category)}
+              className="rounded-full"
+            >
+              {category}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="size-8 animate-spin text-primary" />
+        </div>
+      ) : filteredComparisons.length > 0 ? (
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {filteredComparisons.map((comparison) => (
+            <Link key={comparison.id} href={`/compare/${comparison.id}`}>
+              <Card className="h-full transition-all hover:border-primary hover:shadow-md">
+                <CardHeader className="pb-3">
+                  <div className="flex items-start justify-between gap-2">
+                    <CardTitle className="text-base line-clamp-1 flex-1">
+                      {comparison.title}
+                    </CardTitle>
+                  </div>
+                  <CardDescription className="text-sm line-clamp-2">
+                    {comparison.description}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <div className="flex flex-wrap gap-1.5">
+                    {comparison.tags.map((tag) => (
+                      <Badge key={tag} variant="secondary" className="text-xs">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Avatar className="size-6">
+                      <AvatarFallback className="text-[10px]">
+                        {comparison.author.split(" ").map((n) => n[0]).join("")}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span className="text-xs">{comparison.author}</span>
+                  </div>
+
+                  <div className="flex items-center justify-between pt-2 border-t">
+                    <span className="text-sm text-muted-foreground">
+                      {comparison.items.join(" vs ")}
+                    </span>
+                    <div className="flex items-center gap-3 text-sm">
+                      <span className="flex items-center gap-1 text-muted-foreground">
+                        <Eye className="size-3.5" />
+                        {comparison.views.toLocaleString()}
+                      </span>
+                      <span className="font-semibold text-foreground bg-primary/10 px-2 py-0.5 rounded">
+                        {comparison.overallScore}/10
+                      </span>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      ) : (
+        <Card className="p-8 text-center">
+          <div className="flex flex-col items-center gap-4">
+            <div className="size-12 rounded-full bg-muted flex items-center justify-center">
+              <Search className="size-6 text-muted-foreground" />
+            </div>
+            <div>
+              <p className="font-medium">No comparisons found</p>
+              <p className="text-sm text-muted-foreground">
+                Try adjusting your search or filters
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setSearchQuery("")
+                setSelectedCategory("All")
+              }}
+            >
+              Clear Filters
+            </Button>
+          </div>
+        </Card>
+      )}
+
+      <div className="flex justify-center">
+        <Button variant="outline" className="gap-2">
+          Load More
+        </Button>
+      </div>
+    </div>
+  )
+}

src/app/(main)/layout.tsx

@@ -1,50 +1,174 @@
+"use client"
+
 import Link from "next/link"
-import { Sparkles } from "lucide-react"
+import { usePathname } from "next/navigation"
+import { Sparkles, Home, BarChart3, Compass, User, Menu, X, Search } from "lucide-react"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+const navItems = [
+  { href: "/", label: "Home", icon: Home },
+  { href: "/compare", label: "Compare", icon: BarChart3 },
+  { href: "/explore", label: "Explore", icon: Compass },
+  { href: "/profile", label: "Profile", icon: User },
+]
+
+function NavSidebar({ className }: { className?: string }) {
+  const pathname = usePathname()
+
+  return (
+    <nav className={cn("flex flex-col gap-1", className)}>
+      {navItems.map((item) => {
+        const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
+        return (
+          <Link key={item.href} href={item.href}>
+            <Button
+              variant={isActive ? "secondary" : "ghost"}
+              className={cn(
+                "w-full justify-start gap-2",
+                isActive && "bg-muted text-primary font-medium"
+              )}
+            >
+              <item.icon className="size-4" />
+              {item.label}
+            </Button>
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}
+
+function MobileNav() {
+  const pathname = usePathname()
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 md:hidden">
+      <div className="flex items-center justify-around h-14">
+        {navItems.map((item) => {
+          const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
+          return (
+            <Link key={item.href} href={item.href} className="flex flex-col items-center gap-1 py-2 px-3">
+              <item.icon className={cn("size-5", isActive ? "text-primary" : "text-muted-foreground")} />
+              <span className={cn("text-xs", isActive ? "text-primary font-medium" : "text-muted-foreground")}>
+                {item.label}
+              </span>
+            </Link>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}
 
 export default function MainLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState("")
+
   return (
     <div className="min-h-screen flex flex-col">
       <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container flex h-14 items-center px-4 mx-auto">
-          <Link href="/" className="flex items-center gap-2 font-semibold mr-8">
+        <div className="container flex h-14 items-center px-4 mx-auto gap-4">
+          <Link href="/" className="flex items-center gap-2 font-semibold shrink-0">
             <Sparkles className="size-5 text-primary" />
-            <span className="text-lg">ComparAIson</span>
+            <span className="text-lg hidden sm:inline">ComparAIson</span>
           </Link>
 
-          <div className="flex-1 max-w-md">
+          <div className="flex-1 max-w-md mx-auto hidden md:block">
             <div className="relative">
-              <input
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+              <Input
                 type="search"
                 placeholder="Search comparisons..."
-                className="w-full h-8 rounded-lg border border-input bg-muted/50 px-3 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 h-9"
               />
             </div>
           </div>
 
-          <div className="flex items-center gap-3 ml-auto">
-            <Link href="/compare">
-              <button className="h-8 px-3 rounded-lg text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/80 transition-colors">
+          <div className="flex items-center gap-2 ml-auto">
+            <Link href="/compare" className="hidden sm:block">
+              <Button size="sm" className="gap-2">
+                <Sparkles className="size-3.5" />
                 New Comparison
-              </button>
+              </Button>
             </Link>
-            <div className="size-8 rounded-full bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground">
-              U
-            </div>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger className="rounded-full">
+                <Avatar className="size-8">
+                  <AvatarImage src="/placeholder-avatar.png" />
+                  <AvatarFallback className="bg-primary/10 text-primary font-medium">U</AvatarFallback>
+                </Avatar>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Link href="/profile" className="w-full">Profile</Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Link href="/compare" className="w-full">New Comparison</Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Link href="/sign-in" className="w-full">Sign Out</Link>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <Button
+              variant="ghost"
+              size="icon"
+              className="md:hidden"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            >
+              {mobileMenuOpen ? <X className="size-5" /> : <Menu className="size-5" />}
+            </Button>
           </div>
         </div>
+
+        {mobileMenuOpen && (
+          <div className="border-t md:hidden bg-background p-4">
+            <div className="relative mb-4">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+              <Input
+                type="search"
+                placeholder="Search comparisons..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+            <NavSidebar />
+          </div>
+        )}
       </header>
 
-      <main className="flex-1">{children}</main>
+      <div className="flex flex-1">
+        <aside className="hidden md:block w-52 border-r bg-muted/20 p-4 shrink-0">
+          <NavSidebar />
+        </aside>
 
-      <footer className="border-t py-4">
+        <main className="flex-1 pb-16 md:pb-0">{children}</main>
+      </div>
+
+      <MobileNav />
+
+      <footer className="border-t py-4 hidden md:block">
         <div className="container mx-auto px-4 text-center text-xs text-muted-foreground">
           ComparAIson — AI-powered deep research comparisons
         </div>
       </footer>
     </div>
   )
-}
+}

src/app/(main)/profile/page.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { BarChart3, Eye, Calendar, Plus, ArrowRight } from "lucide-react"
+import Link from "next/link"
+
+const mockUser = {
+  name: "Alex Johnson",
+  email: "alex@example.com",
+  avatar: "/placeholder-avatar.png",
+}
+
+const mockComparisons = [
+  {
+    id: "1",
+    title: "React vs Vue vs Svelte",
+    items: ["React", "Vue", "Svelte"],
+    tags: ["Tech", "JavaScript"],
+    overallScore: 8.5,
+    views: 1247,
+    createdAt: "2024-01-15",
+  },
+  {
+    id: "2",
+    title: "GPT-4 vs Claude vs Gemini",
+    items: ["GPT-4", "Claude 3", "Gemini Pro"],
+    tags: ["AI", "Products"],
+    overallScore: 8.8,
+    views: 3891,
+    createdAt: "2024-01-10",
+  },
+  {
+    id: "3",
+    title: "Notion vs Obsidian vs Roam",
+    items: ["Notion", "Obsidian", "Roam Research"],
+    tags: ["Productivity"],
+    overallScore: 7.5,
+    views: 892,
+    createdAt: "2024-01-05",
+  },
+]
+
+const stats = [
+  { label: "Total Comparisons", value: 12, icon: BarChart3 },
+  { label: "Total Views", value: "8.2K", icon: Eye },
+]
+
+export default function ProfilePage() {
+  return (
+    <div className="max-w-4xl mx-auto p-4 sm:p-6 space-y-8">
+      <div className="flex items-center gap-6">
+        <Avatar className="size-20">
+          <AvatarImage src={mockUser.avatar} />
+          <AvatarFallback className="text-2xl bg-primary/10 text-primary font-semibold">
+            {mockUser.name.split(" ").map((n) => n[0]).join("")}
+          </AvatarFallback>
+        </Avatar>
+        <div className="space-y-1.5">
+          <h1 className="text-2xl font-bold">{mockUser.name}</h1>
+          <p className="text-muted-foreground">{mockUser.email}</p>
+        </div>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        {stats.map((stat) => (
+          <Card key={stat.label}>
+            <CardContent className="flex items-center gap-4 p-4">
+              <div className="size-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                <stat.icon className="size-5 text-primary" />
+              </div>
+              <div>
+                <p className="text-2xl font-bold">{stat.value}</p>
+                <p className="text-sm text-muted-foreground">{stat.label}</p>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-semibold">My Comparisons</h2>
+          <Link href="/compare">
+            <Button size="sm" className="gap-2">
+              <Plus className="size-4" />
+              New Comparison
+            </Button>
+          </Link>
+        </div>
+
+        {mockComparisons.length > 0 ? (
+          <div className="grid gap-4 sm:grid-cols-2">
+            {mockComparisons.map((comparison) => (
+              <Link key={comparison.id} href={`/compare/${comparison.id}`}>
+                <Card className="h-full transition-all hover:border-primary hover:shadow-md">
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-base line-clamp-1">{comparison.title}</CardTitle>
+                    <CardDescription className="flex items-center gap-2 text-xs">
+                      <Calendar className="size-3.5" />
+                      {comparison.createdAt}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    <div className="flex flex-wrap gap-1.5">
+                      {comparison.tags.map((tag) => (
+                        <Badge key={tag} variant="secondary" className="text-xs">
+                          {tag}
+                        </Badge>
+                      ))}
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-muted-foreground">
+                        {comparison.items.join(" vs ")}
+                      </span>
+                      <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                        <span className="flex items-center gap-1">
+                          <Eye className="size-3.5" />
+                          {comparison.views.toLocaleString()}
+                        </span>
+                        <span className="font-semibold text-foreground">
+                          {comparison.overallScore}/10
+                        </span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        ) : (
+          <Card className="p-8 text-center">
+            <div className="flex flex-col items-center gap-4">
+              <div className="size-12 rounded-full bg-muted flex items-center justify-center">
+                <BarChart3 className="size-6 text-muted-foreground" />
+              </div>
+              <div>
+                <p className="font-medium">No comparisons yet</p>
+                <p className="text-sm text-muted-foreground">
+                  Create your first comparison to get started
+                </p>
+              </div>
+              <Link href="/compare">
+                <Button className="gap-2">
+                  <Plus className="size-4" />
+                  Create Comparison
+                </Button>
+              </Link>
+            </div>
+          </Card>
+        )}
+      </div>
+    </div>
+  )
+}

src/app/page.tsx

@@ -1,65 +1,186 @@
-import Image from "next/image";
+import Link from "next/link"
+import { Sparkles, BarChart3, Search, Share2, ArrowRight, CheckCircle2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 
-export default function Home() {
+const exampleComparisons = [
+  {
+    title: "React vs Vue vs Svelte",
+    description: "Frontend framework comparison for modern web development",
+    tags: ["Tech", "JavaScript"],
+    items: ["React", "Vue", "Svelte"],
+    scores: [8.5, 7.8, 8.2],
+  },
+  {
+    title: "GPT-4 vs Claude vs Gemini",
+    description: "Comparing top AI language models for reasoning tasks",
+    tags: ["AI", "Products"],
+    items: ["GPT-4", "Claude 3", "Gemini Pro"],
+    scores: [8.8, 9.0, 8.4],
+  },
+  {
+    title: "Notion vs Obsidian vs Roam",
+    description: "Knowledge management tools for productivity",
+    tags: ["Products", "Productivity"],
+    items: ["Notion", "Obsidian", "Roam Research"],
+    scores: [7.5, 8.3, 7.2],
+  },
+  {
+    title: "AWS vs GCP vs Azure",
+    description: "Cloud platform comparison for enterprise infrastructure",
+    tags: ["Tech", "Cloud"],
+    items: ["AWS", "Google Cloud", "Microsoft Azure"],
+    scores: [9.0, 8.2, 8.5],
+  },
+]
+
+const features = [
+  {
+    icon: BarChart3,
+    title: "Rich Visualizations",
+    description: "Interactive radar charts, bar graphs, and comparison tables to understand your results at a glance.",
+  },
+  {
+    icon: Search,
+    title: "Deep Research",
+    description: "AI-powered research that gathers comprehensive data from multiple sources for each item.",
+  },
+  {
+    icon: Share2,
+    title: "Save & Share",
+    description: "Keep your comparisons private or share them with the world. Build a library of research.",
+  },
+]
+
+export default function HomePage() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
+    <div className="flex flex-col min-h-screen">
+      <section className="flex-1 flex flex-col items-center justify-center py-20 px-4 bg-gradient-to-b from-background to-muted/30">
+        <div className="max-w-3xl mx-auto text-center space-y-8">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">
+            <Sparkles className="size-4" />
+            AI-Powered Research
+          </div>
+
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
+            Compare Anything with{" "}
+            <span className="text-primary">AI-Powered</span> Deep Research
           </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
+
+          <p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto">
+            Stop spending hours researching. Let AI do the work for you with comprehensive,
+            multi-dimensional comparisons on anything you can think of.
           </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+            <Link href="/compare">
+              <Button size="lg" className="gap-2 text-lg px-8">
+                <Sparkles className="size-5" />
+                Start Comparing
+                <ArrowRight className="size-4" />
+              </Button>
+            </Link>
+            <Link href="/explore">
+              <Button size="lg" variant="outline" className="text-lg px-8">
+                Explore Examples
+              </Button>
+            </Link>
+          </div>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+      </section>
+
+      <section className="py-16 px-4 bg-muted/20">
+        <div className="max-w-5xl mx-auto">
+          <h2 className="text-2xl font-bold text-center mb-10">Example Comparisons</h2>
+
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+            {exampleComparisons.map((example) => (
+              <Link key={example.title} href="/compare" className="group">
+                <Card className="h-full transition-all group-hover:border-primary group-hover:shadow-md">
+                  <CardHeader className="pb-3">
+                    <div className="flex items-center gap-2 mb-2">
+                      <span className="text-lg font-bold">{example.title}</span>
+                    </div>
+                    <CardDescription className="text-sm line-clamp-2">
+                      {example.description}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    <div className="flex flex-wrap gap-1.5">
+                      {example.tags.map((tag) => (
+                        <span
+                          key={tag}
+                          className="px-2 py-0.5 rounded-full bg-muted text-xs font-medium"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">
+                        {example.items.slice(0, 2).join(" vs ")}
+                        {example.items.length > 2 && ` vs ${example.items.length - 2}+`}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      {example.scores.slice(0, 3).map((score, i) => (
+                        <div
+                          key={i}
+                          className="h-1 flex-1 rounded-full bg-primary/30"
+                          style={{ width: `${score * 10}%` }}
+                        />
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
         </div>
-      </main>
+      </section>
+
+      <section className="py-20 px-4">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-2xl font-bold text-center mb-12">Why ComparAIson?</h2>
+
+          <div className="grid gap-8 sm:grid-cols-3">
+            {features.map((feature) => (
+              <div key={feature.title} className="flex flex-col items-center text-center space-y-3">
+                <div className="size-12 rounded-xl bg-primary/10 flex items-center justify-center">
+                  <feature.icon className="size-6 text-primary" />
+                </div>
+                <h3 className="font-semibold text-lg">{feature.title}</h3>
+                <p className="text-muted-foreground text-sm">{feature.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="py-16 px-4 bg-primary text-primary-foreground">
+        <div className="max-w-2xl mx-auto text-center space-y-6">
+          <h2 className="text-2xl sm:text-3xl font-bold">Ready to compare?</h2>
+          <p className="text-primary-foreground/80">
+            Start your first comparison in seconds. It&apos;s free to get started.
+          </p>
+          <Link href="/compare">
+            <Button size="lg" variant="secondary" className="gap-2 text-lg px-8">
+              <Sparkles className="size-5" />
+              Start Comparing
+            </Button>
+          </Link>
+        </div>
+      </section>
+
+      <footer className="border-t py-8 px-4">
+        <div className="max-w-4xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <Sparkles className="size-4 text-primary" />
+            <span className="font-semibold">ComparAIson</span>
+          </div>
+          <p>AI-powered deep research comparisons</p>
+        </div>
+      </footer>
     </div>
-  );
-}
+  )
+}