Replace placeholder images with contextual annotation demo scenes

apps/web/app/docs/layout.tsx

@@ -49,14 +49,17 @@ export default async function DocumentationLayout({
   }
 
   // Group docs by category
-  const docsByCategory = docs.reduce((acc, doc) => {
-    const category = doc.category || "General"
-    if (!acc[category]) {
-      acc[category] = []
-    }
-    acc[category].push(doc)
-    return acc
-  }, {} as Record<string, typeof docs>)
+  const docsByCategory = docs.reduce(
+    (acc, doc) => {
+      const category = doc.category || "General"
+      if (!acc[category]) {
+        acc[category] = []
+      }
+      acc[category].push(doc)
+      return acc
+    },
+    {} as Record<string, typeof docs>
+  )
 
   // Sort categories
   const sortedCategories = Object.keys(docsByCategory).sort((a, b) => {

apps/web/components/DemoSection.tsx

@@ -84,4 +84,4 @@ const DemoSection = () => {
   )
 }
 
-export default DemoSection
+export default DemoSection

apps/web/components/DownloadButton.tsx

@@ -60,10 +60,7 @@ const DownloadButton: React.FC = () => {
             assetMap.mac = asset.browser_download_url
           if (/amd64\.deb$/.test(asset.name))
             assetMap.linux = asset.browser_download_url
-          else if (
-            !assetMap.linux &&
-            /\.AppImage$|\.tar\.gz$/.test(asset.name)
-          )
+          else if (!assetMap.linux && /\.AppImage$|\.tar\.gz$/.test(asset.name))
             assetMap.linux = asset.browser_download_url
         })
         setReleaseAssets(assetMap)

apps/web/components/HeroSection.tsx

@@ -33,36 +33,36 @@ const HeroSection = () => {
     {
       name: "Box Tool",
       icon: <Square className="w-5 h-5" />,
-      image: "/dog.jpg",
+      image: "/demo-cars.svg",
       color: "bg-blue-500",
       description: "Create bounding boxes around objects for quick labeling",
     },
     {
       name: "Polygon Tool",
       icon: <Hexagon className="w-5 h-5" />,
-      image: "/placeholder.svg?height=720&width=1280",
+      image: "/demo-people.svg",
       color: "bg-purple-500",
       description:
         "Draw precise polygons for irregular shapes and detailed annotations",
     },
     {
       name: "Brush Tool",
       icon: <Pencil className="w-5 h-5" />,
-      image: "/placeholder.svg?height=720&width=1280",
+      image: "/demo-nature.svg",
       color: "bg-green-500",
       description: "Free-form drawing for pixel-perfect segmentation masks",
     },
     {
       name: "AI Assist",
       icon: <Wand2 className="w-5 h-5" />,
-      image: "/placeholder.svg?height=720&width=1280",
+      image: "/demo-warehouse.svg",
       color: "bg-amber-500",
       description: "Auto-label with YOLOv8 AI detection for 5x faster workflow",
     },
     {
       name: "Layer Manager",
       icon: <Layers className="w-5 h-5" />,
-      image: "/placeholder.svg?height=720&width=1280",
+      image: "/demo-layers.svg",
       color: "bg-pink-500",
       description: "Organize and manage annotation layers for complex projects",
     },

apps/web/components/documentation-sidebar-client.tsx

@@ -16,12 +16,15 @@ interface SidebarProps {
 
 export function DocumentationSidebarClient({ docs }: SidebarProps) {
   // Group docs by category
-  const docsByCategory = docs.reduce((acc, doc) => {
-    const category = doc.category || "General"
-    if (!acc[category]) acc[category] = []
-    acc[category].push(doc)
-    return acc
-  }, {} as Record<string, Doc[]>)
+  const docsByCategory = docs.reduce(
+    (acc, doc) => {
+      const category = doc.category || "General"
+      if (!acc[category]) acc[category] = []
+      acc[category].push(doc)
+      return acc
+    },
+    {} as Record<string, Doc[]>
+  )
   const sortedCategories = Object.keys(docsByCategory).sort((a, b) => {
     if (a === "General") return -1
     if (b === "General") return 1

apps/web/docs/api-reference.md

@@ -8,4 +8,4 @@ lastUpdated: September 24, 2025
 
 # API Reference
 
-API Reference will be updated here...
+API Reference will be updated here...

apps/web/docs/examples.md

@@ -8,4 +8,4 @@ lastUpdated: September 24, 2025
 
 # Examples
 
-Examples will be updated here...
+Examples will be updated here...

apps/web/docs/tutorials.md

@@ -8,4 +8,4 @@ lastUpdated: September 24, 2025
 
 # Tutorials
 
-Tutorials will be updated here...
+Tutorials will be updated here...

apps/web/package.json

@@ -85,4 +85,4 @@
     "tailwindcss": "^3.4.17",
     "typescript": "^5"
   }
-}
+}