here’s a tight Replit brief to add Step 1 / Step 2 UX with clear instructions and the new button subtitle. Micro-diffs only, brand-safe, no route changes.

Title

AI Logo Creator — Step 1/Step 2 UX + “Customize Logo” button subtitle

What to do

Goal:

Label the AI generator page as Step 1: Generate a Logo with short instructions.

Rename button to “Customize Logo” and add a subtle subtitle: “Step 2: Fine-tune text, shapes & colors →”.

On the composer page, show a small header: “Step 2: Customize Your Logo” with a short hint: “When finished, click ‘Save to Brand Kit’.”

Keep existing routes and styling. Use minimal JSX—no layout shifts.

Micro-diffs (≤12 lines/file)
1) client/src/pages/business-development/AILogoCreator.tsx

Add Step 1 header + instructions + button subtitle (if not already changed, include the label swap).

--- a/client/src/pages/business-development/AILogoCreator.tsx
+++ b/client/src/pages/business-development/AILogoCreator.tsx
@@ -1,6 +1,8 @@
+import React from "react";
 import { useLocation } from "wouter";
 ...
 export default function AILogoCreator() {
   const [, navigate] = useLocation();
   const handleAiLogoGenerated = (svg: string) => {
@@ -18,6 +20,12 @@ export default function AILogoCreator() {
   return (
     <div>
+      <h2 className="text-xl font-semibold mb-2">Step 1: Generate a Logo</h2>
+      <p className="text-sm text-gray-600 mb-4">
+        Choose a style, enter your brand name, pick colors, then generate. When you’re happy, continue to customize.
+      </p>
-      <Button onClick={handleAiLogoGenerated}>Customize Logo</Button>
+      <Button aria-label="Customize Logo" title="Customize Logo" onClick={handleAiLogoGenerated}>Customize Logo</Button>
+      <div className="text-xs text-gray-500 mt-2">Step 2: Fine-tune text, shapes & colors →</div>
     </div>
   );
 }

2) client/src/pages/LogoCustomizerPage.tsx

Show Step 2 header once the composer has something loaded (draft or template).

--- a/client/src/pages/LogoCustomizerPage.tsx
+++ b/client/src/pages/LogoCustomizerPage.tsx
@@ -720,6 +720,12 @@ useEffect(() => {
   // existing Firebase/template loading continues below...
 }, [composerId]);
 
+// Small Step 2 header once composer is present
+const stepHeader = composer ? (
+  <div className="mb-3">
+    <h2 className="text-xl font-semibold">Step 2: Customize Your Logo</h2>
+    <p className="text-sm text-gray-600">Edit text, shapes, and colors. When finished, click “Save to Brand Kit”.</p>
+  </div>) : null;


Make sure this stepHeader is rendered near the top of your page JSX (e.g., right above the editor panel). If your component’s return starts later, place {stepHeader} just inside the main container.

QA Checklist

Step 1 page shows header + instructions, button reads Customize Logo, subtitle shows Step 2 hint.

Clicking Customize Logo still navigates to /brand-development/ai-logo-creator/logo-composer-draft-{uuid} and loads from sessionStorage.

Step 2 page displays its header and hint once the composer is hydrated (both for draft-* and template IDs).

No layout breaks; existing tools and flows unchanged.