Replit Prompt

Title: Logo Templates — Hover Action Preview (Download + Customize)

Prompt for Replit:

Update the /business-assets/logo-templates grid cards to show action buttons only on hover (desktop) and always visible (mobile).

Add a hover overlay with two buttons:

Download SVG → free, instantly downloads template file.

Customize in Composer → if premium, navigate to /brand-development/ai-logo-creator/logo-composer-<id>; if not premium, open PremiumModal.

Default state: clean card (image, title, tags).

On hover (desktop): fade in a dark semi-transparent overlay centered with the two buttons.

On mobile (≤768px), always show the buttons stacked under the logo image.

Use existing button styles (btn, btn-outline, btn-primary) and keep IBrandBiz colors (#00CB51 primary green).

Reuse existing PremiumModal component for paywall gating.

Example Micro-diff (card component)
--- a/client/src/components/logo/LogoTemplateCard.tsx
+++ b/client/src/components/logo/LogoTemplateCard.tsx
@@ -5,6 +5,8 @@
 export function LogoTemplateCard({ template }) {
   const [, navigate] = useLocation();
   const { isPremium } = useUserPlan() ?? { isPremium: false };
   const [showPaywall, setShowPaywall] = React.useState(false);
+
+  const [hover, setHover] = React.useState(false);

   const downloadSvg = () => {
     // existing download logic...
   };
 
   const goCustomize = () => {
     if (!isPremium) return setShowPaywall(true);
     navigate(`/brand-development/ai-logo-creator/logo-composer-${template.id}`);
   };
 
   return (
-    <div className="rounded-xl border p-3">
-      {/* thumbnail, title, tags ... */}
-      <div className="mt-3 flex gap-2">
-        <button onClick={downloadSvg}>Download SVG</button>
-        <button onClick={goCustomize}>Customize in Composer</button>
-      </div>
-      <PremiumModal ... />
-    </div>
+    <div
+      className="relative rounded-xl border overflow-hidden group"
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      {/* Thumbnail + info */}
+      <img src={template.previewUrl} alt={template.name} className="w-full object-contain" />
+      <div className="p-3">
+        <h3 className="font-semibold">{template.name}</h3>
+        <div className="flex flex-wrap gap-1 mt-2 text-xs text-gray-500">
+          {template.tags?.map((tag) => <span key={tag}>{tag}</span>)}
+        </div>
+      </div>
+
+      {/* Hover overlay (desktop only) */}
+      <div className={`absolute inset-0 bg-black/60 flex flex-col items-center justify-center gap-3 transition-opacity ${hover ? "opacity-100" : "opacity-0"} hidden md:flex`}>
+        <button className="btn btn-outline bg-white" onClick={downloadSvg}>Download SVG</button>
+        <button className="btn btn-primary" onClick={goCustomize}>Customize in Composer</button>
+      </div>
+
+      {/* Mobile: always visible under image */}
+      <div className="flex md:hidden flex-col gap-2 p-3">
+        <button className="btn btn-outline" onClick={downloadSvg}>Download SVG</button>
+        <button className="btn btn-primary" onClick={goCustomize}>Customize in Composer</button>
+      </div>
+
+      <PremiumModal open={showPaywall} onClose={() => setShowPaywall(false)} onUpgrade={() => navigate("/pricing")} />
+    </div>
   );
 }

QA

Desktop:

Hover → dark overlay fades in with buttons.

Hover out → clean card again.

Mobile:

Buttons always visible below preview.

Download always works.

Customize → paywall for non-premium, composer for premium.