Title

Tiered Free vs Premium — Brand Name Wizard & Slogan Generator

Goal

Add a lightweight freemium model:

Free: up to 3 results per run; no tone/style filters; copy allowed.

Premium: 10 results; unlock tone/style filters; export (copy all to clipboard / download .txt).

Use existing Premium modal (same as Brand Kit/AI Logo Creator).

Implementation (micro, no new deps, no route changes)
1) Config (shared)

Create/extend a tiny gating util.

File: client/src/utils/tiers.ts

export const TIERS = {
  free:  { maxResults: 3,  filters: false, exportAll: false },
  pro:   { maxResults: 10, filters: true,  exportAll: true  },
};
export const getTier = (isPremium?: boolean) => (isPremium ? TIERS.pro : TIERS.free);

2) Hook plan status (reuse Brand Kit logic)

If you already have a plan hook:

File: client/src/hooks/useUserPlan.ts

// ensure it returns { isPremium: boolean } consistently
export function useUserPlan(){ /* existing */ return { isPremium: /* ... */ }; }

3) Brand Name Wizard page

Limit results + gate filters + export.

File: client/src/pages/business-development/BrandNameWizard.tsx

+ import { useUserPlan } from "@/hooks/useUserPlan";
+ import { getTier } from "@/utils/tiers";
+ import PremiumModal from "@/components/paywalls/PremiumModal";
...
+ const { isPremium } = useUserPlan() ?? { isPremium:false };
+ const tier = getTier(isPremium);
+ const [showPaywall,setShowPaywall]=React.useState(false);
...
- const results = await generateNames(query, { count: 10, tone, style });
+ const results = await generateNames(query, { count: tier.maxResults, tone: isPremium?tone:undefined, style: isPremium?style:undefined });
...
- <Filters tone={tone} style={style} onChange={...} />
+ {tier.filters ? <Filters .../> : null}
...
- <Button onClick={exportAll}>Export All</Button>
+ <Button onClick={()=> isPremium?exportAll():setShowPaywall(true)} disabled={!tier.exportAll}>Export All</Button>
+ <PremiumModal open={showPaywall} onClose={()=>setShowPaywall(false)} />

4) Slogan Generator page

Mirror the same pattern.

File: client/src/pages/business-development/SloganGenerator.tsx

+ import { useUserPlan } from "@/hooks/useUserPlan";
+ import { getTier } from "@/utils/tiers";
+ import PremiumModal from "@/components/paywalls/PremiumModal";
...
+ const { isPremium } = useUserPlan() ?? { isPremium:false };
+ const tier = getTier(isPremium);
+ const [showPaywall,setShowPaywall]=React.useState(false);
...
- const ideas = await generateSlogans(query, { count: 10, tone, style });
+ const ideas = await generateSlogans(query, { count: tier.maxResults, tone: isPremium?tone:undefined, style: isPremium?style:undefined });
...
- <Filters tone={tone} style={style} onChange={...} />
+ {tier.filters ? <Filters .../> : null}
...
- <Button onClick={exportAll}>Export All</Button>
+ <Button onClick={()=> isPremium?exportAll():setShowPaywall(true)} disabled={!tier.exportAll}>Export All</Button>
+ <PremiumModal open={showPaywall} onClose={()=>setShowPaywall(false)} />

5) Tiny UX hints (optional)

Show a small caption so users know why they got fewer results.

Example (both pages, near results header):

+ {!isPremium && (
+   <div className="text-xs text-gray-500 mt-1">Showing {tier.maxResults} results. Unlock more, filters, and export with Premium.</div>
+ )}

6) QA

Free user: sees 3 results, no filters, “Export All” opens paywall modal.

Premium user: 10 results, filters visible, export all works.

Copy individual result works for both tiers.

No route/style changes; paywall matches Brand Kit modal.