Link featured examples to pre-generated docs with View Docs buttons

apps/web/src/app/page.tsx

@@ -79,36 +79,42 @@ export default function HomePage() {
       description: "Elegant promise concurrency limiter with a simple API and robust error handling.",
       language: "TypeScript",
       languageColor: "#3178c6",
+      docId: "gen_1770657487236_d9id1pm",
     },
     {
       name: "expressjs/express",
       description: "Fast, unopinionated web framework for Node.js with minimalistic design.",
       language: "JavaScript",
       languageColor: "#f1e05a",
+      docId: "gen_1770657496293_1hcn3m1",
     },
     {
       name: "pallets/flask",
       description: "Lightweight Python web framework with simplicity and flexibility at its core.",
       language: "Python",
       languageColor: "#3572A5",
+      docId: "gen_1770657494422_mabt20p",
     },
     {
       name: "colinhacks/zod",
       description: "TypeScript-first schema validation with static type inference.",
       language: "TypeScript",
       languageColor: "#3178c6",
+      docId: "gen_1770657488091_5hxoyyk",
     },
     {
       name: "tiangolo/fastapi",
       description: "Modern, high-performance Python API framework with automatic OpenAPI docs.",
       language: "Python",
       languageColor: "#3572A5",
+      docId: "gen_1770657495398_10wi8js",
     },
     {
       name: "redis/node-redis",
       description: "High-performance Redis client for Node.js with comprehensive feature support.",
       language: "TypeScript",
       languageColor: "#3178c6",
+      docId: "gen_1770657489049_vxw35dn",
     },
   ];
 
@@ -333,7 +339,7 @@ export default function HomePage() {
               Featured Examples
             </h2>
             <p className="text-zinc-400 max-w-xl mx-auto">
-              Click any repository to instantly generate documentation
+              Pre-generated docs ready to explore — or paste any repo URL above
             </p>
           </div>
 

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

@@ -2,13 +2,14 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { ArrowRight, Loader2 } from "lucide-react";
+import { ArrowRight, Loader2, BookOpen } from "lucide-react";
 
 interface ExampleRepo {
   name: string;
   description: string;
   language: string;
   languageColor: string;
+  docId?: string;
 }
 
 interface ExampleRepoCardProps {
@@ -19,7 +20,12 @@ export function ExampleRepoCard({ repo }: ExampleRepoCardProps) {
   const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
 
-  const handleGenerate = async () => {
+  const handleClick = async () => {
+    if (repo.docId) {
+      router.push(`/docs/${repo.docId}`);
+      return;
+    }
+
     const repoUrl = `https://github.com/${repo.name}`;
     setIsLoading(true);
 
@@ -61,6 +67,12 @@ export function ExampleRepoCard({ repo }: ExampleRepoCardProps) {
           />
           {repo.language}
         </div>
+        {repo.docId && (
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
+            <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
+            Ready
+          </span>
+        )}
       </div>
 
       <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors font-mono">
@@ -72,18 +84,26 @@ export function ExampleRepoCard({ repo }: ExampleRepoCardProps) {
       </p>
 
       <button
-        onClick={handleGenerate}
+        onClick={handleClick}
         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 
+        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
+          ${repo.docId
-          border border-blue-500/30 hover:border-transparent text-blue-300 hover:text-white
+            ? "bg-gradient-to-r from-green-600/20 to-emerald-600/20 hover:from-green-600 hover:to-emerald-600 border border-green-500/30 hover:border-transparent text-green-300 hover:text-white"
-          disabled:opacity-50 disabled:cursor-not-allowed group/btn"
+            : "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>
           </>
+        ) : repo.docId ? (
+          <>
+            <BookOpen className="w-4 h-4" />
+            <span>View Docs</span>
+            <ArrowRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
+          </>
         ) : (
           <>
             <span>Generate Docs</span>