fix: swap primary/hover thumbnails - content images as primary, workflow screenshots as hover

- Primary thumbnail: first image from template content (product, model, etc.)
- Hover thumbnail: workflow screenshot showing node layout
- Remove unused hover variant images

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/quickstart/TemplateExplorerView.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { WorkflowFile } from "@/store/workflowStore";
-import { getAllPresets, PRESET_TEMPLATES } from "@/lib/quickstart/templates";
+import { getAllPresets, PRESET_TEMPLATES, getTemplateContent } from "@/lib/quickstart/templates";
 import { QuickstartBackButton } from "./QuickstartBackButton";
 import { TemplateCard } from "./TemplateCard";
 import { CommunityWorkflowMeta, TemplateCategory, TemplateMetadata } from "@/types/quickstart";
@@ -69,20 +69,27 @@ export function TemplateExplorerView({
     return metadata;
   }, []);
 
-  // Template thumbnail images (static paths)
+  // Get primary thumbnail from template content (first image)
-  const templateThumbnails: Record<string, { primary: string; hover?: string }> = {
+  const primaryThumbnails = useMemo(() => {
-    "product-shot": { primary: "/template-thumbnails/product-shot.png" },
+    const images: Record<string, string | undefined> = {};
-    "model-product": {
+    PRESET_TEMPLATES.forEach((template) => {
-      primary: "/template-thumbnails/model-product.png",
+      const content = getTemplateContent(template.id, "full");
-      hover: "/template-thumbnails/model-product-hover.png"
+      if (content?.images) {
-    },
+        const imageUrls = Object.values(content.images).map((img) => img.url);
-    "color-variations": { primary: "/template-thumbnails/color-variations.png" },
+        images[template.id] = imageUrls[0];
-    "background-swap": { primary: "/template-thumbnails/background-swap.png" },
+      }
-    "style-transfer": {
+    });
-      primary: "/template-thumbnails/style-transfer.png",
+    return images;
-      hover: "/template-thumbnails/style-transfer-hover.png"
+  }, []);
-    },
+
-    "scene-composite": { primary: "/template-thumbnails/scene-composite.png" },
+  // Hover thumbnails (workflow screenshots)
+  const hoverThumbnails: Record<string, string> = {
+    "product-shot": "/template-thumbnails/product-shot.png",
+    "model-product": "/template-thumbnails/model-product.png",
+    "color-variations": "/template-thumbnails/color-variations.png",
+    "background-swap": "/template-thumbnails/background-swap.png",
+    "style-transfer": "/template-thumbnails/style-transfer.png",
+    "scene-composite": "/template-thumbnails/scene-composite.png",
   };
 
   // Filter presets based on search, category, and tags
@@ -408,8 +415,8 @@ export function TemplateExplorerView({
                     key={preset.id}
                     template={preset}
                     nodeCount={presetMetadata[preset.id]?.nodeCount ?? 0}
-                    previewImage={templateThumbnails[preset.id]?.primary}
+                    previewImage={primaryThumbnails[preset.id]}
-                    hoverImage={templateThumbnails[preset.id]?.hover}
+                    hoverImage={hoverThumbnails[preset.id]}
                     isLoading={loadingWorkflowId === preset.id}
                     onUseWorkflow={() => handlePresetSelect(preset.id)}
                     disabled={isLoading && loadingWorkflowId !== preset.id}