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,46 +1,170 @@
+"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">
+        <div className="container flex h-14 items-center px-4 mx-auto gap-4">
-          <Link href="/" className="flex items-center gap-2 font-semibold mr-8">
+          <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">
+          <div className="flex items-center gap-2 ml-auto">
-            <Link href="/compare">
+            <Link href="/compare" className="hidden sm:block">
-              <button className="h-8 px-3 rounded-lg text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/80 transition-colors">
+              <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
+            <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>

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/api/compare/route.ts

@@ -18,10 +18,6 @@ function slugify(text: string): string {
     .slice(0, 200);
 }
 
-// TODO: Implement rate limiting per IP/user
-// Example: Use Upstash Ratelimit or a simple in-memory counter
-// const ratelimit = new Ratelimit({ redis, limiter: slidingWindow(5, "1m") })
-
 export async function POST(request: Request) {
   const body: { query?: string; items?: string[]; dimensions?: string[] } =
     await request.json();
@@ -29,21 +25,7 @@ export async function POST(request: Request) {
 
   if (!items || items.length < 2) {
     return Response.json(
-      { error: "At least 2 items are required for comparison" },
+      { error: "At least 2 items are required" },
-      { status: 400 }
-    );
-  }
-
-  if (items.length > 10) {
-    return Response.json(
-      { error: "Maximum 10 items allowed per comparison" },
-      { status: 400 }
-    );
-  }
-
-  if (items.some((item) => item.trim().length === 0)) {
-    return Response.json(
-      { error: "Item names cannot be empty" },
       { status: 400 }
     );
   }
@@ -88,20 +70,6 @@ export async function POST(request: Request) {
             );
           }
 
-          if (progress.stage === "searching") {
-            controller.enqueue(
-              encoder.encode(
-                serializeSSE("progress", {
-                  status: "researching",
-                  message: `Searching the web for ${progress.item}... (${progress.results} results found)`,
-                  itemsCompleted,
-                  totalItems: items.length,
-                  currentStep: `Searching ${progress.item}`,
-                })
-              )
-            );
-          }
-
           if (progress.stage === "researching") {
             itemsCompleted++;
             controller.enqueue(
@@ -134,17 +102,7 @@ export async function POST(request: Request) {
           if (progress.stage === "complete") {
             const result = progress.result;
 
-            const comparisonData: Omit<
+            const comparisonData: Omit<ComparisonData, "id" | "userId" | "slug" | "tags" | "isPublic" | "viewCount" | "createdAt" | "updatedAt"> = {
-              ComparisonData,
-              | "id"
-              | "userId"
-              | "slug"
-              | "tags"
-              | "isPublic"
-              | "viewCount"
-              | "createdAt"
-              | "updatedAt"
-            > = {
               title,
               query: query || "",
               status: "completed",
@@ -219,7 +177,7 @@ export async function POST(request: Request) {
               encoder.encode(
                 serializeSSE("progress", {
                   status: "failed",
-                  message: `Comparison failed: ${progress.error}`,
+                  message: progress.error,
                   itemsCompleted,
                   totalItems: items.length,
                   currentStep: "Failed",
@@ -234,16 +192,11 @@ export async function POST(request: Request) {
           .set({ status: "failed", updatedAt: new Date() })
           .where(eq(comparisons.id, id));
 
-        const message =
-          error instanceof Error
-            ? error.message
-            : "An unexpected error occurred during research";
-
         controller.enqueue(
           encoder.encode(
             serializeSSE("progress", {
               status: "failed",
-              message: `Comparison failed: ${message}`,
+              message: error instanceof Error ? error.message : "Unknown error",
               itemsCompleted,
               totalItems: items.length,
               currentStep: "Failed",

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">
+    <div className="flex flex-col min-h-screen">
-      <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">
+      <section className="flex-1 flex flex-col items-center justify-center py-20 px-4 bg-gradient-to-b from-background to-muted/30">
-        <Image
+        <div className="max-w-3xl mx-auto text-center space-y-8">
-          className="dark:invert"
+          <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">
-          src="/next.svg"
+            <Sparkles className="size-4" />
-          alt="Next.js logo"
+            AI-Powered Research
-          width={100}
+          </div>
-          height={20}
+
-          priority
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
-        />
+            Compare Anything with{" "}
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+            <span className="text-primary">AI-Powered</span> Deep Research
-          <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.
           </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{" "}
+          <p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto">
-            <a
+            Stop spending hours researching. Let AI do the work for you with comprehensive,
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            multi-dimensional comparisons on anything you can think of.
-              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>
+
+          <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 className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+        </div>
-          <a
+      </section>
-            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"
+      <section className="py-16 px-4 bg-muted/20">
-            target="_blank"
+        <div className="max-w-5xl mx-auto">
-            rel="noopener noreferrer"
+          <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"
                         >
-            <Image
+                          {tag}
-              className="dark:invert"
+                        </span>
-              src="/vercel.svg"
+                      ))}
-              alt="Vercel logomark"
+                    </div>
-              width={16}
+                    <div className="flex items-center justify-between text-sm">
-              height={16}
+                      <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}%` }}
                         />
-            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>
                     </div>
-      </main>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
           </div>
-  );
+        </div>
+      </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>
+  )
 }

src/lib/llm/index.ts

@@ -3,9 +3,7 @@ import type {
   ComparisonResult,
   ResearchProgress,
 } from "./types";
-import { searchItem, type SearchResult } from "./providers/tavily";
+import { generateComparison } from "./providers/openai";
-import { generateComparisonWithResearch } from "./providers/openai";
-import { getActiveProvider } from "./providers";
 
 export type {
   ComparisonRequest,
@@ -26,28 +24,6 @@ export async function* runResearch(
     return;
   }
 
-  const provider = getActiveProvider();
-  const searchResults: Record<string, SearchResult[]> = {};
-
-  if (provider.hasSearch) {
-    for (let i = 0; i < request.items.length; i++) {
-      const item = request.items[i];
-      const results = await searchItem(item, request.query);
-      searchResults[item] = results;
-
-      yield {
-        stage: "searching",
-        item,
-        results: results.length,
-      };
-
-      yield {
-        stage: "researching",
-        item,
-        progress: Math.round(((i + 1) / request.items.length) * 50),
-      };
-    }
-  } else {
   for (let i = 0; i < request.items.length; i++) {
     yield {
       stage: "researching",
@@ -55,15 +31,14 @@ export async function* runResearch(
       progress: Math.round(((i + 0.5) / request.items.length) * 80),
     };
   }
-  }
 
   yield {
     stage: "synthesizing",
-    message: `Synthesizing research into structured comparison using ${provider.name}...`,
+    message: "Synthesizing research into structured comparison...",
   };
 
   try {
-    const result = await provider.synthesize(request, searchResults);
+    const result = await generateComparison(request);
     yield { stage: "complete", result };
   } catch (error) {
     yield {

src/lib/llm/providers/index.ts

@@ -1,63 +0,0 @@
-import type { ComparisonRequest, ComparisonResult } from "../types";
-import type { SearchResult } from "./tavily";
-import { generateComparisonWithResearch, generateComparison } from "./openai";
-import { synthesizeResearch } from "./perplexity";
-
-export interface Provider {
-  name: string;
-  hasSearch: boolean;
-  synthesize: (
-    request: ComparisonRequest,
-    searchResults: Record<string, SearchResult[]>
-  ) => Promise<ComparisonResult>;
-}
-
-export function getActiveProvider(): Provider {
-  const hasTavily = !!process.env.TAVILY_API_KEY;
-  const hasPerplexity = !!process.env.PERPLEXITY_API_KEY;
-  const hasOpenAI = !!process.env.OPENAI_API_KEY;
-
-  if (hasTavily && hasPerplexity) {
-    console.log("[llm] Using provider: Tavily search + Perplexity synthesis");
-    return {
-      name: "Tavily + Perplexity",
-      hasSearch: true,
-      synthesize: synthesizeResearch,
-    };
-  }
-
-  if (hasTavily && hasOpenAI) {
-    console.log("[llm] Using provider: Tavily search + OpenAI synthesis");
-    return {
-      name: "Tavily + OpenAI",
-      hasSearch: true,
-      synthesize: generateComparisonWithResearch,
-    };
-  }
-
-  if (hasOpenAI) {
-    console.log("[llm] Using provider: OpenAI only (no web search)");
-    return {
-      name: "OpenAI",
-      hasSearch: false,
-      synthesize: async (request) => generateComparison(request),
-    };
-  }
-
-  console.warn(
-    "[llm] No API keys configured. Research will fail at synthesis."
-  );
-  return {
-    name: "None",
-    hasSearch: false,
-    synthesize: async () => {
-      throw new Error(
-        "No LLM provider configured. Set OPENAI_API_KEY, TAVILY_API_KEY, or PERPLEXITY_API_KEY."
-      );
-    },
-  };
-}
-
-export { searchItem, type SearchResult } from "./tavily";
-export { generateComparison, generateComparisonWithResearch } from "./openai";
-export { synthesizeResearch } from "./perplexity";

src/lib/llm/providers/openai.ts

@@ -5,7 +5,6 @@ import type {
   DimensionResult,
   ItemResearch,
 } from "../types";
-import type { SearchResult } from "./tavily";
 
 const client = new OpenAI({
   apiKey: process.env.OPENAI_API_KEY,
@@ -141,75 +140,3 @@ Provide a comprehensive comparison with scores, pros/cons, and a recommendation.
     `Failed to generate comparison after ${MAX_RETRIES} attempts: ${lastError?.message}`
   );
 }
-
-export async function generateComparisonWithResearch(
-  request: ComparisonRequest,
-  searchResults: Record<string, SearchResult[]>
-): Promise<ComparisonResult> {
-  const allResults = Object.values(searchResults).flat();
-  if (allResults.length === 0) {
-    return generateComparison(request);
-  }
-
-  let researchContext = "Web research data:\n\n";
-  for (const [itemName, results] of Object.entries(searchResults)) {
-    if (results.length === 0) continue;
-    researchContext += `=== ${itemName} ===\n`;
-    for (const r of results) {
-      researchContext += `- ${r.title}: ${r.content}\n  Source: ${r.url}\n`;
-    }
-    researchContext += "\n";
-  }
-
-  const userPrompt = `Compare the following items: ${request.items.join(", ")}
-${request.query ? `Focus: ${request.query}` : ""}
-${request.dimensions?.length ? `Specific dimensions to include: ${request.dimensions.join(", ")}` : ""}
-
-${researchContext}
-
-Use the web research data above to provide factual, data-driven insights. Reference specific data points in your analysis. Provide a comprehensive comparison with scores, pros/cons, and a recommendation.`;
-
-  let lastError: Error | null = null;
-
-  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
-    try {
-      const response = await client.chat.completions.create({
-        model: "gpt-4o-mini",
-        messages: [
-          { role: "system", content: SYSTEM_PROMPT },
-          {
-            role: "system",
-            content:
-              "You have access to real web search results. Use them to ground your comparison in factual data. Cite specific findings from the research when scoring and analyzing items.",
-          },
-          { role: "user", content: userPrompt },
-        ],
-        response_format: { type: "json_object" },
-        temperature: 0.3,
-      });
-
-      const content = response.choices[0]?.message?.content;
-      if (!content) {
-        throw new Error("Empty response from OpenAI");
-      }
-
-      const parsed: unknown = JSON.parse(content);
-
-      if (!validateComparisonResult(parsed)) {
-        throw new Error("Invalid comparison result structure from OpenAI");
-      }
-
-      return parsed;
-    } catch (error) {
-      lastError = error instanceof Error ? error : new Error(String(error));
-
-      if (attempt < MAX_RETRIES) {
-        await sleep(RETRY_DELAY_MS * attempt);
-      }
-    }
-  }
-
-  throw new Error(
-    `Failed to generate comparison with research after ${MAX_RETRIES} attempts: ${lastError?.message}`
-  );
-}

src/lib/llm/providers/perplexity.ts

@@ -1,117 +0,0 @@
-import type { ComparisonRequest, ComparisonResult } from "../types";
-import type { SearchResult } from "./tavily";
-import { generateComparisonWithResearch } from "./openai";
-
-const PERPLEXITY_API_URL = "https://api.perplexity.ai/chat/completions";
-
-const SYSTEM_PROMPT = `You are a research synthesis engine. Given web search results for multiple items, produce a structured JSON comparison.
-
-You MUST respond with valid JSON matching this exact structure:
-{
-  "items": [
-    {
-      "name": "item name",
-      "description": "brief overview",
-      "overallScore": 7.5,
-      "dimensions": {
-        "Dimension Name": {
-          "score": 8,
-          "summary": "brief assessment",
-          "details": "detailed analysis",
-          "pros": ["pro 1"],
-          "cons": ["con 1"]
-        }
-      },
-      "pros": ["overall pro 1"],
-      "cons": ["overall con 1"],
-      "sources": [{ "title": "source", "url": "https://...", "snippet": "excerpt" }]
-    }
-  ],
-  "dimensions": ["Dimension 1", "Dimension 2"],
-  "summary": "comparison summary",
-  "recommendation": "clear recommendation"
-}`;
-
-export async function synthesizeResearch(
-  request: ComparisonRequest,
-  searchResults: Record<string, SearchResult[]>
-): Promise<ComparisonResult> {
-  const apiKey = process.env.PERPLEXITY_API_KEY;
-  if (!apiKey) {
-    return generateComparisonWithResearch(request, searchResults);
-  }
-
-  const allResults = Object.values(searchResults).flat();
-  if (allResults.length === 0) {
-    return generateComparisonWithResearch(request, searchResults);
-  }
-
-  let researchContext = "Search results for each item:\n\n";
-  for (const [itemName, results] of Object.entries(searchResults)) {
-    if (results.length === 0) continue;
-    researchContext += `=== ${itemName} ===\n`;
-    for (const r of results) {
-      researchContext += `- ${r.title}: ${r.content}\n  Source: ${r.url}\n`;
-    }
-    researchContext += "\n";
-  }
-
-  const userPrompt = `Compare: ${request.items.join(", ")}
-${request.query ? `Focus: ${request.query}` : ""}
-${request.dimensions?.length ? `Dimensions: ${request.dimensions.join(", ")}` : ""}
-
-${researchContext}`;
-
-  try {
-    const response = await fetch(PERPLEXITY_API_URL, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${apiKey}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        model: "sonar",
-        messages: [
-          { role: "system", content: SYSTEM_PROMPT },
-          { role: "user", content: userPrompt },
-        ],
-        temperature: 0.3,
-      }),
-    });
-
-    if (!response.ok) {
-      console.error(
-        `Perplexity API error: ${response.status} ${response.statusText}`
-      );
-      return generateComparisonWithResearch(request, searchResults);
-    }
-
-    const data = await response.json();
-    const content = data.choices?.[0]?.message?.content;
-
-    if (!content) {
-      console.error("Empty response from Perplexity");
-      return generateComparisonWithResearch(request, searchResults);
-    }
-
-    const parsed: unknown = JSON.parse(content);
-
-    if (
-      !parsed ||
-      typeof parsed !== "object" ||
-      !Array.isArray((parsed as Record<string, unknown>).items) ||
-      !Array.isArray((parsed as Record<string, unknown>).dimensions)
-    ) {
-      console.error("Invalid structure from Perplexity, falling back to OpenAI");
-      return generateComparisonWithResearch(request, searchResults);
-    }
-
-    return parsed as ComparisonResult;
-  } catch (error) {
-    console.error(
-      "Perplexity synthesis failed, falling back to OpenAI:",
-      error instanceof Error ? error.message : error
-    );
-    return generateComparisonWithResearch(request, searchResults);
-  }
-}

src/lib/llm/providers/tavily.ts

@@ -1,69 +0,0 @@
-export interface SearchResult {
-  title: string;
-  url: string;
-  content: string;
-  score: number;
-}
-
-const TAVILY_API_URL = "https://api.tavily.com/search";
-
-export async function searchItem(
-  itemName: string,
-  context: string
-): Promise<SearchResult[]> {
-  const apiKey = process.env.TAVILY_API_KEY;
-  if (!apiKey) {
-    return [];
-  }
-
-  try {
-    const query = `${itemName} ${context}`.trim();
-
-    const response = await fetch(TAVILY_API_URL, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        api_key: apiKey,
-        query,
-        max_results: 5,
-        include_answer: false,
-        search_depth: "advanced",
-      }),
-    });
-
-    if (!response.ok) {
-      console.error(
-        `Tavily API error: ${response.status} ${response.statusText}`
-      );
-      return [];
-    }
-
-    const data = await response.json();
-
-    if (!data.results || !Array.isArray(data.results)) {
-      return [];
-    }
-
-    return data.results.map(
-      (result: {
-        title?: string;
-        url?: string;
-        content?: string;
-        score?: number;
-      }) => ({
-        title: result.title ?? "",
-        url: result.url ?? "",
-        content: result.content ?? "",
-        score: result.score ?? 0,
-      })
-    );
-  } catch (error) {
-    console.error(
-      `Tavily search failed for "${itemName}":`,
-      error instanceof Error ? error.message : error
-    );
-    return [];
-  }
-}

src/lib/llm/types.ts

@@ -31,7 +31,6 @@ export interface ComparisonResult {
 
 export type ResearchProgress =
   | { stage: "parsing"; message: string }
-  | { stage: "searching"; item: string; results: number }
   | { stage: "researching"; item: string; progress: number }
   | { stage: "synthesizing"; message: string }
   | { stage: "complete"; result: ComparisonResult }