mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: increase entrepreneur onboarding textarea to 200px and add reassuring subheader text, resolve unused label import error

Browse Source
This commit is contained in:
mawkone
2026-06-08 10:52:13 -07:00
parent 0d8e982f81
commit a6d0688c94
1 changed files with 173 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
View File

@@ -1,5 +1,20 @@
import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
import { WizardTop, WizardBody, WizardQ, WizardFooter, Label, LANE_LABELS, ChipGroup, PresetGroup, Field } from "./onboarding-primitives";
import React, {
useState,
useEffect,
useRef,
useMemo,
useCallback,
} from "react";
import {
WizardTop,
WizardBody,
WizardQ,
WizardFooter,
LANE_LABELS,
ChipGroup,
PresetGroup,
Field,
} from "./onboarding-primitives";
// Entrepreneur path — 4 steps. Each step is a focused question.
const ENTREP_TOTAL = 4;
@@ -28,7 +43,10 @@ export function EntrepIdea({ value, onChange }) {
else setTimeout(() => setDeleting(true), 1500);
} else {
if (phChars > 0) setPhChars(phChars - 1);
else { setDeleting(false); setPhIdx((phIdx + 1) % IDEA_PROMPTS.length); }
else {
setDeleting(false);
setPhIdx((phIdx + 1) % IDEA_PROMPTS.length);
}
}
}, speed);
return () => clearTimeout(t);
@@ -38,12 +56,12 @@ export function EntrepIdea({ value, onChange }) {
<>
<WizardQ
title="What are you building?"
sub="One paragraph is enough. Talk like you would to a friend."
sub="Don't worry if it's not crisp yet — just dump your thoughts. Talk like you would to a friend."
/>
<div style={{ position: "relative" }}>
<textarea
className="wiz-input"
style={{ minHeight: 140, fontSize: 15 }}
style={{ minHeight: 200, fontSize: 15 }}
value={value}
onChange={(e) => onChange(e.target.value)}
autoFocus
@@ -52,7 +70,10 @@ export function EntrepIdea({ value, onChange }) {
{value.length === 0 && (
<div
style={{
position: "absolute", top: 12, left: 14, right: 14,
position: "absolute",
top: 12,
left: 14,
right: 14,
pointerEvents: "none",
color: "var(--fg-faint)",
font: "14.5px/1.5 var(--font-sans)",
@@ -62,8 +83,11 @@ export function EntrepIdea({ value, onChange }) {
<span
style={{
display: "inline-block",
width: 7, height: 14, verticalAlign: "-2px",
background: "var(--accent)", marginLeft: 1,
width: 7,
height: 14,
verticalAlign: "-2px",
background: "var(--accent)",
marginLeft: 1,
animation: "blink 1s steps(2) infinite",
boxShadow: "0 0 10px var(--accent-glow)",
}}
@@ -73,7 +97,12 @@ export function EntrepIdea({ value, onChange }) {
</div>
<div
className="mono"
style={{ fontSize: 11, color: "var(--fg-faint)", letterSpacing: "0.06em", marginTop: -16 }}
style={{
fontSize: 11,
color: "var(--fg-faint)",
letterSpacing: "0.06em",
marginTop: -16,
}}
>
{value.length} chars · be specific where it matters
</div>
@@ -116,18 +145,42 @@ function EntrepAudience({ value, onChange }) {
}
const GOALS = [
{ id: "first_customer", icon: "🎯", label: "First real customer",
desc: "Someone I don't know pays me. Even once." },
{ id: "ten_users", icon: "👥", label: "Ten weekly users",
desc: "A signal the thing actually does something useful." },
{ id: "mrr_1k", icon: "📈", label: "$1k MRR",
desc: "Enough to take it seriously." },
{ id: "side_quit", icon: "🚪", label: "Replace my day job",
desc: "The long road. Make this the main thing." },
{ id: "audience", icon: "📣", label: "Build a tiny audience",
desc: "200 emails, a community, something I can talk to." },
{ id: "ship_it", icon: "🚀", label: "Just ship it",
desc: "I want the thing to exist." },
{
id: "first_customer",
icon: "🎯",
label: "First real customer",
desc: "Someone I don't know pays me. Even once.",
},
{
id: "ten_users",
icon: "👥",
label: "Ten weekly users",
desc: "A signal the thing actually does something useful.",
},
{
id: "mrr_1k",
icon: "📈",
label: "$1k MRR",
desc: "Enough to take it seriously.",
},
{
id: "side_quit",
icon: "🚪",
label: "Replace my day job",
desc: "The long road. Make this the main thing.",
},
{
id: "audience",
icon: "📣",
label: "Build a tiny audience",
desc: "200 emails, a community, something I can talk to.",
},
{
id: "ship_it",
icon: "🚀",
label: "Just ship it",
desc: "I want the thing to exist.",
},
];
function EntrepGoal({ value, onChange }) {
@@ -139,7 +192,9 @@ function EntrepGoal({ value, onChange }) {
/>
<PresetGroup
options={GOALS.map((g) => ({
id: g.id, label: g.label, desc: g.desc,
id: g.id,
label: g.label,
desc: g.desc,
icon: <span style={{ fontSize: 14 }}>{g.icon}</span>,
}))}
value={value}
@@ -151,18 +206,43 @@ function EntrepGoal({ value, onChange }) {
}
const VIBES = [
{ id: "warm", name: "Warm coral", swatch: "linear-gradient(135deg, #E27855, #B33B2A)",
desc: "Confident, hand-built, warm." },
{ id: "ink", name: "Ink & paper", swatch: "linear-gradient(135deg, #1d1d1d, #4a4a4a)",
desc: "Editorial, serif, quiet." },
{ id: "sage", name: "Sage matte", swatch: "linear-gradient(135deg, #7BA890, #3F6B57)",
desc: "Calm, modern, slightly herbal." },
{ id: "neon", name: "Neon arcade", swatch: "linear-gradient(135deg, #5B6CFF, #FF3DDB)",
desc: "Loud, fun, late-night." },
{ id: "cream", name: "Cream linen", swatch: "linear-gradient(135deg, #F2E7D5, #C9A977)",
desc: "Cozy and beige." },
{ id: "later", name: "Decide later", swatch: "repeating-linear-gradient(45deg, oklch(0.30 0.010 60), oklch(0.30 0.010 60) 6px, oklch(0.22 0.010 60) 6px, oklch(0.22 0.010 60) 12px)",
desc: "Vibn picks one that fits." },
{
id: "warm",
name: "Warm coral",
swatch: "linear-gradient(135deg, #E27855, #B33B2A)",
desc: "Confident, hand-built, warm.",
},
{
id: "ink",
name: "Ink & paper",
swatch: "linear-gradient(135deg, #1d1d1d, #4a4a4a)",
desc: "Editorial, serif, quiet.",
},
{
id: "sage",
name: "Sage matte",
swatch: "linear-gradient(135deg, #7BA890, #3F6B57)",
desc: "Calm, modern, slightly herbal.",
},
{
id: "neon",
name: "Neon arcade",
swatch: "linear-gradient(135deg, #5B6CFF, #FF3DDB)",
desc: "Loud, fun, late-night.",
},
{
id: "cream",
name: "Cream linen",
swatch: "linear-gradient(135deg, #F2E7D5, #C9A977)",
desc: "Cozy and beige.",
},
{
id: "later",
name: "Decide later",
swatch:
"repeating-linear-gradient(45deg, oklch(0.30 0.010 60), oklch(0.30 0.010 60) 6px, oklch(0.22 0.010 60) 6px, oklch(0.22 0.010 60) 12px)",
desc: "Vibn picks one that fits.",
},
];
function EntrepVibe({ value, onChange }) {
@@ -190,26 +270,45 @@ function EntrepVibe({ value, onChange }) {
padding: "10px 10px 10px",
borderRadius: 11,
border: `1px solid ${active ? "var(--accent)" : "var(--hairline)"}`,
background: active ? "oklch(0.20 0.04 35 / 0.4)" : "oklch(0.18 0.009 60 / 0.6)",
boxShadow: active ? "0 0 0 3px oklch(0.74 0.175 35 / 0.1)" : "none",
background: active
? "oklch(0.20 0.04 35 / 0.4)"
: "oklch(0.18 0.009 60 / 0.6)",
boxShadow: active
? "0 0 0 3px oklch(0.74 0.175 35 / 0.1)"
: "none",
textAlign: "left",
color: "var(--fg)",
display: "flex", flexDirection: "column", gap: 8,
display: "flex",
flexDirection: "column",
gap: 8,
transition: "border-color .15s, background .15s",
}}
>
<span
style={{
height: 52, borderRadius: 7,
height: 52,
borderRadius: 7,
background: v.swatch,
border: "1px solid oklch(1 0 0 / 0.08)",
boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.18)",
}}
/>
<span style={{ fontSize: 13, fontWeight: 500, letterSpacing: "-0.005em" }}>
<span
style={{
fontSize: 13,
fontWeight: 500,
letterSpacing: "-0.005em",
}}
>
{v.name}
</span>
<span style={{ fontSize: 11.5, color: "var(--fg-mute)", lineHeight: 1.4 }}>
<span
style={{
fontSize: 11.5,
color: "var(--fg-mute)",
lineHeight: 1.4,
}}
>
{v.desc}
</span>
</button>
@@ -221,7 +320,15 @@ function EntrepVibe({ value, onChange }) {
}
// ── Path wrapper ───────────────────────────────────────────────────────────
export function EntrepreneurPath({ data, onUpdate, onBack, onClose, onComplete, onJumpToStep, step }) {
export function EntrepreneurPath({
data,
onUpdate,
onBack,
onClose,
onComplete,
onJumpToStep,
step,
}) {
const next = () => {
if (step < ENTREP_TOTAL - 1) onJumpToStep(step + 1);
else onComplete();
@@ -231,20 +338,39 @@ export function EntrepreneurPath({ data, onUpdate, onBack, onClose, onComplete,
else onJumpToStep(step - 1);
};
let body, canNext, onSkip = null;
let body,
canNext,
onSkip = null;
if (step === 0) {
body = <EntrepIdea value={data.idea || ""} onChange={(v) => onUpdate({ idea: v })} />;
body = (
<EntrepIdea
value={data.idea || ""}
onChange={(v) => onUpdate({ idea: v })}
/>
);
canNext = (data.idea || "").trim().length >= 8;
} else if (step === 1) {
body = <EntrepAudience value={data.audience || ""} onChange={(v) => onUpdate({ audience: v })} />;
body = (
<EntrepAudience
value={data.audience || ""}
onChange={(v) => onUpdate({ audience: v })}
/>
);
canNext = (data.audience || "").trim().length >= 3;
} else if (step === 2) {
body = <EntrepGoal value={data.goal} onChange={(v) => onUpdate({ goal: v })} />;
body = (
<EntrepGoal value={data.goal} onChange={(v) => onUpdate({ goal: v })} />
);
canNext = !!data.goal;
} else {
body = <EntrepVibe value={data.vibe} onChange={(v) => onUpdate({ vibe: v })} />;
body = (
<EntrepVibe value={data.vibe} onChange={(v) => onUpdate({ vibe: v })} />
);
canNext = !!data.vibe;
onSkip = () => { onUpdate({ vibe: "later" }); next(); };
onSkip = () => {
onUpdate({ vibe: "later" });
next();
};
}
// 5 total: fork(1) + 4 path steps
@@ -272,5 +398,3 @@ export function EntrepreneurPath({ data, onUpdate, onBack, onClose, onComplete,
</>
);
}