From a6d0688c94733cb79a31de35768ee109f521a9c2 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Mon, 8 Jun 2026 10:52:13 -0700
Subject: [PATCH] design: increase entrepreneur onboarding textarea to 200px
 and add reassuring subheader text, resolve unused label import error

---
 .../_onboarding/onboarding-entrepreneur.tsx   | 222 ++++++++++++++----
 1 file changed, 173 insertions(+), 49 deletions(-)

diff --git a/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx b/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
index d38fa34e..bc52054a 100644
--- a/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
+++ b/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
@@ -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,
     </>
   );
 }
-
-