perf: resize thumbnails to 288px for better quality at display size

- Resize workflow screenshot thumbnails from 1024px to 288px
- Create resized primary thumbnails (288px) from large sample images
- Use static paths instead of dynamic content lookup
- 288px = 2x retina for 144px display

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, getTemplateContent } from "@/lib/quickstart/templates";
+import { getAllPresets, PRESET_TEMPLATES } from "@/lib/quickstart/templates";
 import { QuickstartBackButton } from "./QuickstartBackButton";
 import { TemplateCard } from "./TemplateCard";
 import { CommunityWorkflowMeta, TemplateCategory, TemplateMetadata } from "@/types/quickstart";
@@ -69,20 +69,17 @@ export function TemplateExplorerView({
     return metadata;
   }, []);
 
-  // Get primary thumbnail from template content (first image)
+  // Primary thumbnails (resized content images - 288px for 2x retina)
-  const primaryThumbnails = useMemo(() => {
+  const primaryThumbnails: Record<string, string> = {
-    const images: Record<string, string | undefined> = {};
+    "product-shot": "/template-thumbnails/primary/product-shot.jpg",
-    PRESET_TEMPLATES.forEach((template) => {
+    "model-product": "/template-thumbnails/primary/model-product.jpg",
-      const content = getTemplateContent(template.id, "full");
+    "color-variations": "/template-thumbnails/primary/color-variations.jpg",
-      if (content?.images) {
+    "background-swap": "/template-thumbnails/primary/background-swap.jpg",
-        const imageUrls = Object.values(content.images).map((img) => img.url);
+    "style-transfer": "/template-thumbnails/primary/style-transfer.png",
-        images[template.id] = imageUrls[0];
+    "scene-composite": "/template-thumbnails/primary/scene-composite.jpg",
-      }
+  };
-    });
-    return images;
-  }, []);
 
-  // Hover thumbnails (workflow screenshots)
+  // Hover thumbnails (workflow screenshots - 288px)
   const hoverThumbnails: Record<string, string> = {
     "product-shot": "/template-thumbnails/product-shot.png",
     "model-product": "/template-thumbnails/model-product.png",