design: replace redundant onboarding audience step with 6 product archetype tiles

This commit is contained in:
2026-06-08 11:00:37 -07:00
parent 1accdc6912
commit a0ae6ed82e

View File

@@ -18,7 +18,7 @@ import {
// Entrepreneur path — 4 steps. Each step is a focused question.
const ENTREP_TOTAL = 4;
const ENTREP_STEP_NAMES = ["Idea", "Audience", "Goal", "Look"];
const ENTREP_STEP_NAMES = ["Idea", "Type", "Goal", "Look"];
const IDEA_PROMPTS = [
"A community for indie game devs to swap playtesters, with weekly demo nights",
@@ -110,36 +110,63 @@ export function EntrepIdea({ value, onChange }) {
);
}
const AUDIENCE_PRESETS = [
"Me and people like me",
"A small community I'm part of",
"Local people in my city",
"Anyone searching for this",
"Other small businesses",
"Hobbyists in a niche I love",
const ARCHETYPES = [
{
id: "saas",
icon: "💻",
label: "Web App / SaaS",
desc: "Dashboards, tools, interactive portals",
},
{
id: "marketplace",
icon: "🤝",
label: "Marketplace",
desc: "Directories, bookings, listings",
},
{
id: "marketing",
icon: "✨",
label: "Marketing Site",
desc: "Portfolios, lead capture, landing pages",
},
{
id: "ecommerce",
icon: "🛒",
label: "Online Store",
desc: "Carts, checkouts, selling physical/digital goods",
},
{
id: "mobile",
icon: "📱",
label: "Mobile App",
desc: "iOS and Android mobile applications",
},
{
id: "blog",
icon: "✍️",
label: "Blog / Publication",
desc: "Newsletters, articles, content hubs",
},
];
function EntrepAudience({ value, onChange }) {
const isPreset = AUDIENCE_PRESETS.includes(value);
function EntrepType({ value, onChange }) {
return (
<>
<WizardQ
title="Who is it for?"
sub="The clearer your audience, the better the copy Vibn writes for it."
title="What kind of product is it?"
sub="Helps Vibn set up the right database, integrations, and starting code."
/>
<ChipGroup
options={AUDIENCE_PRESETS}
values={value ? [value] : []}
onChange={(arr) => onChange(arr[arr.length - 1] || "")}
<PresetGroup
options={ARCHETYPES.map((a) => ({
id: a.id,
label: a.label,
desc: a.desc,
icon: <span style={{ fontSize: 14 }}>{a.icon}</span>,
}))}
value={value}
onChange={onChange}
columns={2}
/>
<Field label="Or describe them in your own words" optional>
<input
className="wiz-input"
placeholder="e.g. dog owners in Brooklyn who walk before work"
value={!isPreset ? value : ""}
onChange={(e) => onChange(e.target.value)}
/>
</Field>
</>
);
}
@@ -351,12 +378,12 @@ export function EntrepreneurPath({
canNext = (data.idea || "").trim().length >= 8;
} else if (step === 1) {
body = (
<EntrepAudience
value={data.audience || ""}
onChange={(v) => onUpdate({ audience: v })}
<EntrepType
value={data.productType || ""}
onChange={(v) => onUpdate({ productType: v })}
/>
);
canNext = (data.audience || "").trim().length >= 3;
canNext = !!data.productType;
} else if (step === 2) {
body = (
<EntrepGoal value={data.goal} onChange={(v) => onUpdate({ goal: v })} />