design: integrate 4-step onboarding flow (Type, Idea, Status, Look)

This commit is contained in:
2026-06-08 12:20:18 -07:00
parent c6fe32d9e6
commit ae572efe3d

View File

@@ -8,8 +8,8 @@ import {
PresetGroup,
} from "./onboarding-primitives";
const ENTREP_TOTAL = 3;
const ENTREP_STEP_NAMES = ["Idea", "Status", "Look"];
const ENTREP_TOTAL = 4;
const ENTREP_STEP_NAMES = ["Type", "Idea", "Status", "Look"];
const IDEA_PROMPTS = [
"A community for indie game devs to swap playtesters, with weekly demo nights",
@@ -101,6 +101,68 @@ export function EntrepIdea({ value, onChange }) {
);
}
const ARCHETYPES = [
{
id: "saas",
label: "Web App / SaaS",
desc: "Dashboards, tools, interactive portals",
},
{
id: "marketplace",
label: "Marketplace",
desc: "Directories, bookings, listings",
},
{
id: "marketing",
label: "Marketing Site",
desc: "Portfolios, lead capture, landing pages",
},
{
id: "ecommerce",
label: "Online Store",
desc: "Carts, checkouts, selling physical/digital goods",
},
{
id: "mobile",
label: "Mobile App",
desc: "iOS and Android mobile applications",
},
{
id: "blog",
label: "Blog / Publication",
desc: "Newsletters, articles, content hubs",
},
{
id: "not_sure",
label: "I'm not sure",
desc: "Let Vibn help you decide based on your description",
fullWidth: true,
},
];
function EntrepType({ value, onChange }) {
return (
<>
<WizardQ
title="What kind of product is it?"
sub="Helps Vibn set up the right database, integrations, and starting code."
/>
<PresetGroup
options={ARCHETYPES.map((a) => ({
id: a.id,
label: a.label,
desc: a.desc,
icon: undefined,
fullWidth: a.fullWidth,
}))}
value={value}
onChange={onChange}
columns={2}
/>
</>
);
}
const STATUS_OPTIONS = [
{
id: "scratch",
@@ -279,6 +341,14 @@ export function EntrepreneurPath({
canNext,
onSkip = null;
if (step === 0) {
body = (
<EntrepType
value={data.productType || ""}
onChange={(v) => onUpdate({ productType: v })}
/>
);
canNext = !!data.productType;
} else if (step === 1) {
body = (
<EntrepIdea
value={data.idea || ""}
@@ -286,7 +356,7 @@ export function EntrepreneurPath({
/>
);
canNext = (data.idea || "").trim().length >= 8;
} else if (step === 1) {
} else if (step === 2) {
body = (
<EntrepStatus
value={data.projectStatus || ""}
@@ -305,7 +375,7 @@ export function EntrepreneurPath({
};
}
// 4 total: fork(1) + 3 path steps
// 5 total: fork(1) + 4 path steps
return (
<>
<WizardTop
@@ -314,9 +384,11 @@ export function EntrepreneurPath({
lane={LANE_LABELS.entrepreneur}
stepText={ENTREP_STEP_NAMES[step]}
current={step + 2}
total={4}
total={5}
/>
<WizardBody width={step === 1 || step === 2 ? "wide" : null}>
<WizardBody
width={step === 0 || step === 2 || step === 3 ? "wide" : null}
>
{body}
<WizardFooter
onNext={next}