feat: overhaul landing page with demo gallery, preview mockup, and fix links

- Add 'Featured Examples' section with 6 popular repos (express, flask, zod, etc.)
- Add browser window mockup in hero showing what generated docs look like
- Fix all links: company.repi.fun → vectry.tech, github.com → gitea.repi.fun
- Update stats: ~3 min generation, 10+ languages supported
- New ExampleRepos client component with generate-on-click functionality

apps/web/src/app/globals.css

@@ -207,6 +207,29 @@ body {
 .stagger-4 { animation-delay: 0.4s; }
 .stagger-5 { animation-delay: 0.5s; }
 
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.bg-blue-500\/60 {
+  background-color: rgba(59, 130, 246, 0.6);
+}
+
+.bg-purple-500\/60 {
+  background-color: rgba(168, 85, 247, 0.6);
+}
+
+.bg-green-500\/60 {
+  background-color: rgba(34, 197, 94, 0.6);
+}
+
+.bg-orange-500\/60 {
+  background-color: rgba(249, 115, 22, 0.6);
+}
+
 .scrollbar-thin {
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.2) transparent;

apps/web/src/app/page.tsx

@@ -1,15 +1,21 @@
 import { RepoInput } from "@/components/repo-input";
-import { 
+import { ExampleRepoCard } from "@/components/example-repo-card";
-  Link2, 
+import {
-  Code2, 
+  Link2,
-  Sparkles, 
+  Code2,
-  FileText, 
+  Sparkles,
-  GitBranch, 
+  FileText,
-  Boxes, 
+  GitBranch,
-  Search, 
+  Boxes,
+  Search,
   BookOpen,
   ArrowRight,
-  Github
+  Github,
+  Layers,
+  Workflow,
+  Terminal,
+  FileCode,
+  CheckCircle2,
 } from "lucide-react";
 
 export default function HomePage() {
@@ -67,40 +73,193 @@ export default function HomePage() {
     },
   ];
 
+  const exampleRepos = [
+    {
+      name: "sindresorhus/p-limit",
+      description: "Elegant promise concurrency limiter with a simple API and robust error handling.",
+      language: "TypeScript",
+      languageColor: "#3178c6",
+    },
+    {
+      name: "expressjs/express",
+      description: "Fast, unopinionated web framework for Node.js with minimalistic design.",
+      language: "JavaScript",
+      languageColor: "#f1e05a",
+    },
+    {
+      name: "pallets/flask",
+      description: "Lightweight Python web framework with simplicity and flexibility at its core.",
+      language: "Python",
+      languageColor: "#3572A5",
+    },
+    {
+      name: "colinhacks/zod",
+      description: "TypeScript-first schema validation with static type inference.",
+      language: "TypeScript",
+      languageColor: "#3178c6",
+    },
+    {
+      name: "tiangolo/fastapi",
+      description: "Modern, high-performance Python API framework with automatic OpenAPI docs.",
+      language: "Python",
+      languageColor: "#3572A5",
+    },
+    {
+      name: "redis/node-redis",
+      description: "High-performance Redis client for Node.js with comprehensive feature support.",
+      language: "TypeScript",
+      languageColor: "#3178c6",
+    },
+  ];
+
   return (
     <div className="relative">
-      {/* Hero Section */}
       <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center">
-            {/* Badge */}
             <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-8 animate-fade-in opacity-0">
               <Sparkles className="w-4 h-4 text-blue-400" />
               <span className="text-sm text-zinc-300">Powered by AI</span>
             </div>
 
-            {/* Main Headline */}
             <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold tracking-tight mb-6 animate-slide-up opacity-0">
               <span className="gradient-text">Understand any codebase</span>
               <br />
-              <span className="text-white">in 5 minutes</span>
+              <span className="text-white">in minutes</span>
             </h1>
 
-            {/* Subtitle */}
             <p className="text-lg sm:text-xl text-zinc-400 max-w-2xl mx-auto mb-10 animate-slide-up opacity-0 stagger-1">
               Paste a GitHub URL. Get interactive onboarding documentation with
               architecture diagrams, module breakdowns, and getting started guides.
             </p>
 
-            {/* Repo Input */}
             <div className="max-w-xl mx-auto mb-16 animate-slide-up opacity-0 stagger-2">
               <RepoInput />
             </div>
 
-            {/* Stats */}
+            <div className="relative max-w-4xl mx-auto mb-20 animate-slide-up opacity-0 stagger-3">
-            <div className="flex flex-wrap justify-center gap-8 sm:gap-12 animate-fade-in opacity-0 stagger-3">
+              <div className="relative rounded-xl overflow-hidden border border-white/10 shadow-2xl shadow-blue-500/10">
+                <div className="flex items-center gap-2 px-4 py-3 bg-zinc-900/80 border-b border-white/10">
+                  <div className="flex items-center gap-1.5">
+                    <div className="w-3 h-3 rounded-full bg-red-500/80" />
+                    <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
+                    <div className="w-3 h-3 rounded-full bg-green-500/80" />
+                  </div>
+                  <div className="flex-1 text-center">
+                    <span className="text-xs text-zinc-500 font-mono">codeboard-docs.html</span>
+                  </div>
+                  <div className="w-16" />
+                </div>
+
+                <div className="bg-[#0d0d12] p-6">
+                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <div className="lg:col-span-2 space-y-4">
+                      <div className="flex items-center gap-3 mb-4">
+                        <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-blue-500/30">
+                          <Layers className="w-5 h-5 text-blue-400" />
+                        </div>
+                        <div>
+                          <h3 className="text-white font-semibold">Architecture Overview</h3>
+                          <p className="text-xs text-zinc-500">High-level system design</p>
+                        </div>
+                      </div>
+
+                      <div className="rounded-lg border border-white/10 bg-black/40 p-4 font-mono text-xs">
+                        <div className="flex items-center gap-2 text-zinc-400 mb-3">
+                          <Workflow className="w-4 h-4" />
+                          <span>Dependency Graph</span>
+                        </div>
+                        <div className="space-y-2">
+                          <div className="flex items-center gap-2">
+                            <div className="w-3 h-3 rounded bg-blue-500/30 border border-blue-500/50" />
+                            <span className="text-blue-300">src/index.ts</span>
+                            <span className="text-zinc-600">→</span>
+                            <div className="w-3 h-3 rounded bg-purple-500/30 border border-purple-500/50" />
+                            <span className="text-purple-300">lib/core</span>
+                          </div>
+                          <div className="flex items-center gap-2 pl-6">
+                            <span className="text-zinc-600">↳</span>
+                            <div className="w-3 h-3 rounded bg-green-500/30 border border-green-500/50" />
+                            <span className="text-green-300">utils/parser</span>
+                          </div>
+                          <div className="flex items-center gap-2 pl-6">
+                            <span className="text-zinc-600">↳</span>
+                            <div className="w-3 h-3 rounded bg-orange-500/30 border border-orange-500/50" />
+                            <span className="text-orange-300">api/routes</span>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="rounded-lg border border-white/10 bg-black/40 p-4">
+                        <div className="flex items-center gap-2 text-zinc-400 mb-3 text-xs font-mono">
+                          <Terminal className="w-4 h-4" />
+                          <span>Key Metrics</span>
+                        </div>
+                        <div className="grid grid-cols-3 gap-4">
+                          <div className="text-center p-3 rounded-lg bg-white/5">
+                            <div className="text-xl font-bold text-white">24</div>
+                            <div className="text-xs text-zinc-500">Modules</div>
+                          </div>
+                          <div className="text-center p-3 rounded-lg bg-white/5">
+                            <div className="text-xl font-bold text-white">156</div>
+                            <div className="text-xs text-zinc-500">Files</div>
+                          </div>
+                          <div className="text-center p-3 rounded-lg bg-white/5">
+                            <div className="text-xl font-bold text-white">8.2k</div>
+                            <div className="text-xs text-zinc-500">Lines</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="space-y-4">
+                      <div className="flex items-center gap-2 text-zinc-400 mb-2">
+                        <FileCode className="w-4 h-4" />
+                        <span className="text-sm font-medium">Module Breakdown</span>
+                      </div>
+
+                      <div className="space-y-3">
+                        {[
+                          { name: "Core Engine", files: 12, color: "blue" },
+                          { name: "API Layer", files: 8, color: "purple" },
+                          { name: "Utilities", files: 15, color: "green" },
+                          { name: "Tests", files: 23, color: "orange" },
+                        ].map((mod) => (
+                          <div
+                            key={mod.name}
+                            className="p-3 rounded-lg bg-white/5 border border-white/5 hover:border-white/10 transition-colors"
+                          >
+                            <div className="flex items-center justify-between mb-2">
+                              <span className="text-sm text-zinc-300">{mod.name}</span>
+                              <span className="text-xs text-zinc-500">{mod.files} files</span>
+                            </div>
+                            <div className="h-1.5 rounded-full bg-white/10 overflow-hidden">
+                              <div
+                                className={`h-full rounded-full bg-${mod.color}-500/60`}
+                                style={{ width: `${Math.random() * 40 + 60}%` }}
+                              />
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+
+                      <div className="pt-4 border-t border-white/10">
+                        <div className="flex items-center gap-2 text-green-400 text-sm">
+                          <CheckCircle2 className="w-4 h-4" />
+                          <span>Docs generated in 2m 34s</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="absolute -inset-1 bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-indigo-500/20 rounded-xl blur-2xl -z-10 opacity-50" />
+            </div>
+
+            <div className="flex flex-wrap justify-center gap-8 sm:gap-12 animate-fade-in opacity-0 stagger-4">
               <div className="text-center">
-                <div className="text-2xl sm:text-3xl font-bold text-white">5 min</div>
+                <div className="text-2xl sm:text-3xl font-bold text-white">~3 min</div>
                 <div className="text-sm text-zinc-500">Average generation time</div>
               </div>
               <div className="hidden sm:block w-px bg-zinc-800" />
@@ -110,18 +269,16 @@ export default function HomePage() {
               </div>
               <div className="hidden sm:block w-px bg-zinc-800" />
               <div className="text-center">
-                <div className="text-2xl sm:text-3xl font-bold text-white">AI</div>
+                <div className="text-2xl sm:text-3xl font-bold text-white">10+</div>
-                <div className="text-sm text-zinc-500">Powered insights</div>
+                <div className="text-sm text-zinc-500">Languages supported</div>
               </div>
             </div>
           </div>
         </div>
 
-        {/* Background Elements */}
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-blue-500/10 rounded-full blur-3xl pointer-events-none" />
       </section>
 
-      {/* How It Works Section */}
       <section id="how-it-works" className="py-20 lg:py-32">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
@@ -134,35 +291,26 @@ export default function HomePage() {
           </div>
 
           <div className="relative">
-            {/* Connection Line - Desktop */}
             <div className="hidden lg:block absolute top-24 left-[12.5%] right-[12.5%] h-px bg-gradient-to-r from-transparent via-zinc-700 to-transparent" />
 
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
-              {steps.map((step, index) => (
+              {steps.map((step) => (
-                <div
+                <div key={step.number} className="relative group">
-                  key={step.number}
-                  className="relative group"
-                >
                   <div className="text-center">
-                    {/* Step Number */}
                     <div className="text-6xl font-bold text-zinc-800/50 mb-4 group-hover:text-blue-500/20 transition-colors">
                       {step.number}
                     </div>
 
-                    {/* Icon */}
                     <div className="relative inline-flex items-center justify-center w-16 h-16 rounded-2xl glass mb-6 group-hover:border-blue-500/30 transition-colors">
                       <step.icon className="w-7 h-7 text-blue-400" />
-                      
+
-                      {/* Glow effect */}
                       <div className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity" />
                     </div>
 
-                    {/* Title */}
                     <h3 className="text-lg font-semibold text-white mb-2">
                       {step.title}
                     </h3>
 
-                    {/* Description */}
                     <p className="text-sm text-zinc-400 leading-relaxed">
                       {step.description}
                     </p>
@@ -174,7 +322,29 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Features Section */}
+      <section className="py-20 lg:py-32">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-6">
+              <Github className="w-4 h-4 text-blue-400" />
+              <span className="text-sm text-zinc-300">Try It Out</span>
+            </div>
+            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+              Featured Examples
+            </h2>
+            <p className="text-zinc-400 max-w-xl mx-auto">
+              Click any repository to instantly generate documentation
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {exampleRepos.map((repo) => (
+              <ExampleRepoCard key={repo.name} repo={repo} />
+            ))}
+          </div>
+        </div>
+      </section>
+
       <section id="features" className="py-20 lg:py-32">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
@@ -187,21 +357,20 @@ export default function HomePage() {
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {features.map((feature, index) => (
+            {features.map((feature) => (
               <div
                 key={feature.title}
                 className="group relative p-8 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1"
               >
-                {/* Gradient border on hover */}
                 <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-indigo-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity -z-10 blur-xl" />
-                
+
                 <div className="flex items-start gap-5">
                   <div className="flex-shrink-0">
                     <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-white/10 group-hover:border-blue-500/30 transition-colors">
                       <feature.icon className="w-6 h-6 text-blue-400" />
                     </div>
                   </div>
-                  
+
                   <div className="flex-1">
                     <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors">
                       {feature.title}
@@ -217,14 +386,12 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Built by Vectry Section */}
       <section className="py-20 lg:py-32">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="relative rounded-3xl glass-strong p-8 sm:p-12 lg:p-16 overflow-hidden">
-            {/* Background decoration */}
             <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
             <div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-indigo-500/10 to-cyan-500/10 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />
-            
+
             <div className="relative text-center">
               <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8">
                 <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
@@ -245,7 +412,7 @@ export default function HomePage() {
               </p>
 
               <a
-                href="https://company.repi.fun"
+                href="https://vectry.tech"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="inline-flex items-center gap-2 btn-primary animate-pulse-glow"
@@ -257,7 +424,7 @@ export default function HomePage() {
               <div className="mt-12 pt-8 border-t border-white/10">
                 <div className="flex flex-wrap items-center justify-center gap-6 text-sm text-zinc-500">
                   <a
-                    href="https://github.com"
+                    href="https://gitea.repi.fun/repi/codeboard"
                     target="_blank"
                     rel="noopener noreferrer"
                     className="flex items-center gap-2 hover:text-white transition-colors"

apps/web/src/components/example-repo-card.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ArrowRight, Loader2 } from "lucide-react";
+
+interface ExampleRepo {
+  name: string;
+  description: string;
+  language: string;
+  languageColor: string;
+}
+
+interface ExampleRepoCardProps {
+  repo: ExampleRepo;
+}
+
+export function ExampleRepoCard({ repo }: ExampleRepoCardProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  const handleGenerate = async () => {
+    const repoUrl = `https://github.com/${repo.name}`;
+    setIsLoading(true);
+
+    try {
+      const response = await fetch("/api/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ repoUrl }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || "Failed to start generation");
+      }
+
+      const data = await response.json();
+      router.push(`/generate?repo=${encodeURIComponent(repoUrl)}&id=${data.id}`);
+    } catch (err) {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="group relative p-6 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-blue-500/10">
+      <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-indigo-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity -z-10 blur-xl" />
+
+      <div className="flex items-center justify-between mb-4">
+        <div
+          className="flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium"
+          style={{
+            backgroundColor: `${repo.languageColor}20`,
+            color: repo.languageColor,
+            border: `1px solid ${repo.languageColor}40`,
+          }}
+        >
+          <span
+            className="w-2 h-2 rounded-full"
+            style={{ backgroundColor: repo.languageColor }}
+          />
+          {repo.language}
+        </div>
+      </div>
+
+      <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors font-mono">
+        {repo.name}
+      </h3>
+
+      <p className="text-sm text-zinc-400 mb-6 leading-relaxed line-clamp-2">
+        {repo.description}
+      </p>
+
+      <button
+        onClick={handleGenerate}
+        disabled={isLoading}
+        className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200 
+          bg-gradient-to-r from-blue-600/20 to-indigo-600/20 hover:from-blue-600 hover:to-indigo-600
+          border border-blue-500/30 hover:border-transparent text-blue-300 hover:text-white
+          disabled:opacity-50 disabled:cursor-not-allowed group/btn"
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            <span>Starting...</span>
+          </>
+        ) : (
+          <>
+            <span>Generate Docs</span>
+            <ArrowRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
+          </>
+        )}
+      </button>
+    </div>
+  );
+}

apps/web/src/components/footer.tsx

@@ -17,7 +17,7 @@ export function Footer() {
 
           <div className="flex items-center gap-6">
             <a
-              href="https://company.repi.fun"
+              href="https://vectry.tech"
               target="_blank"
               rel="noopener noreferrer"
               className="flex items-center gap-1 text-sm text-zinc-400 hover:text-white transition-colors"
@@ -27,7 +27,7 @@ export function Footer() {
             </a>
             
             <a
-              href="https://github.com"
+              href="https://gitea.repi.fun/repi/codeboard"
               target="_blank"
               rel="noopener noreferrer"
               className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
@@ -42,7 +42,7 @@ export function Footer() {
           <p className="text-sm text-zinc-500">
             © {new Date().getFullYear()} CodeBoard. Built by{" "}
             <a
-              href="https://company.repi.fun"
+              href="https://vectry.tech"
               target="_blank"
               rel="noopener noreferrer"
               className="text-zinc-400 hover:text-white transition-colors"

apps/web/src/components/navbar.tsx

@@ -38,13 +38,13 @@ export function Navbar() {
               ))}
               
               <a
-                href="https://github.com"
+                href="https://gitea.repi.fun/repi/codeboard"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
               >
                 <Github className="w-4 h-4" />
-                GitHub
+                Source
               </a>
             </div>
 
@@ -77,13 +77,13 @@ export function Navbar() {
               ))}
               
               <a
-                href="https://github.com"
+                href="https://gitea.repi.fun/repi/codeboard"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors py-2"
               >
                 <Github className="w-4 h-4" />
-                GitHub
+                Source
               </a>
             </div>
           </div>