diff --git a/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx b/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx index 2b5bb83b..c9259597 100644 --- a/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx +++ b/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx @@ -172,21 +172,670 @@ function EntrepType({ value, onChange }) { ); } +function LayoutPreview({ styleId }: { styleId: string }) { + // Styles are 100% width, 104px tall absolute layouts resembling the wireframes. + const isDark = styleId !== "minimal" && styleId !== "swiss"; + const accentColor = "var(--accent)"; + + const wireLine = (w: string | number, opacity = 0.25) => ( +
+ ); + + let content; + if (styleId === "sidebar") { + // Left-side menu column + main dashboard area + content = ( +
+ {/* Sidebar */} +
+
+ {wireLine(16, 0.4)} + {wireLine(12, 0.25)} + {wireLine(14, 0.25)} +
+ {/* Main Dashboard */} +
+
+ {wireLine(24, 0.5)} +
+
+
+
+ {wireLine("100%", 0.3)} + {wireLine("60%", 0.15)} +
+
+
+
+
+ ); + } else if (styleId === "topbar") { + // Top horizontal header bar + multi-column page + content = ( +
+ {/* Topbar */} +
+
+
+ {wireLine(12, 0.3)} + {wireLine(12, 0.3)} +
+ {/* Miniature ⌘K Bar */} +
+ {wireLine(8, 0.15)} +
+
+
+ {/* Main Grid */} +
+ {[1, 2, 3].map((i) => ( +
+ {wireLine("50%", 0.3)} + {wireLine("100%", 0.15)} +
+ ))} +
+
+ ); + } else if (styleId === "rail") { + // Narrow vertical rail + content + content = ( +
+ {/* Rail */} +
+
+ {[1, 2, 3].map((i) => ( +
+ ))} +
+ {/* Content */} +
+ {wireLine(36, 0.4)} +
+
+
+
+ {wireLine("40%", 0.3)} + {wireLine("20%", 0.15)} +
+
+ {wireLine("100%", 0.15)} +
+
+
+ ); + } else if (styleId === "flux") { + // Glass aurora: purple background with a floating card + content = ( +
+ {/* Aurora Glow */} +
+ {/* Frosted Card */} +
+
+
+ {wireLine(18, 0.5)} +
+ {wireLine("80%", 0.3)} + {wireLine("40%", 0.15)} +
+
+ ); + } else if (styleId === "minimal") { + // Classic Minimal: parchment background, gridded rule lines + content = ( +
+
+ {wireLine(24, 0.6)} + {wireLine(12, 0.4)} +
+
+
+ {wireLine("90%", 0.5)} + {wireLine("50%", 0.25)} +
+
+ {wireLine("100%", 0.5)} + {wireLine("70%", 0.25)} +
+
+
+ ); + } else if (styleId === "bento") { + // Dark bento grid + content = ( +
+
+ {wireLine("50%", 0.4)} +
+
+
+
+
+ {wireLine("80%", 0.3)} + {wireLine("40%", 0.15)} +
+
+ {wireLine("100%", 0.3)} +
+
+ ); + } else if (styleId === "swiss") { + // Editorial swiss: White background, bold geometric layouts + content = ( +
+
+ + VIBN. + + {wireLine(16, 0.6)} +
+
+
+
+
+
+
+
+ {wireLine("100%", 0.4)} + {wireLine("100%", 0.4)} + {wireLine("60%", 0.2)} +
+
+
+ ); + } else if (styleId === "brutalist") { + // Neo-brutalist yellow card, thick borders, heavy offsets + content = ( +
+
+
+
+
+ {wireLine(24, 0.85)} +
+ {wireLine("60%", 0.6)} +
+
+ ); + } else { + // I'm not sure / Undecided + content = ( +
+ + + + + + Automatic + +
+ ); + } + + return ( +
+ {content} +
+ ); +} + const SAAS_STYLES = [ { id: "sidebar", label: "Vertical Sidebar", desc: "Left-side collapsible menu, data-dense. Ideal for CRM/dashboards.", + illustration: , }, { id: "topbar", label: "Top Horizontal + ⌘K", desc: "Spacious top navigation with global command search bar.", + illustration: , }, { id: "rail", label: "Slim Icon Rail", desc: "Minimalist vertical narrow icon bar, maximizes workspace area.", + illustration: , }, ]; @@ -195,11 +844,13 @@ const MARKETPLACE_STYLES = [ id: "flux", label: "Dark Glass / Flux", desc: "Modern dark-glass panels with glowing fuchsia aurora backdrops.", + illustration: , }, { id: "minimal", label: "Classic Minimal", desc: "Warm parchment neutrals, high-contrast typography and clean grids.", + illustration: , }, ]; @@ -208,16 +859,19 @@ const GENERAL_STYLES = [ id: "bento", label: "Dark Bento", desc: "Modern dark UI, bento-box card clusters.", + illustration: , }, { id: "swiss", label: "Editorial Swiss", desc: "Type-led, gridded, lots of white space — clean and academic.", + illustration: , }, { id: "brutalist", label: "Neo-Brutalist", desc: "Bold offsets, thick hand-drawn borders, highly tactile and organic.", + illustration: , }, ]; @@ -250,6 +904,7 @@ function EntrepStyle({ productType, value, onChange }) { label: s.label, desc: s.desc, icon: undefined, + illustration: s.illustration, }))} value={value} onChange={onChange}