From 7d4d034e2ac16fd4ed73551d467f2188aca11bfe Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Mon, 8 Jun 2026 11:37:33 -0700
Subject: [PATCH] design: align layout-mockup previews precisely with your
 high-fidelity SaaS templates

---
 .../_onboarding/onboarding-entrepreneur.tsx   | 77 +++++++++++++------
 1 file changed, 53 insertions(+), 24 deletions(-)

diff --git a/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx b/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
index c925959..4899f86 100644
--- a/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
+++ b/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
@@ -174,7 +174,8 @@ 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 isDark =
+    styleId !== "minimal" && styleId !== "swiss" && styleId !== "sidebar";
   const accentColor = "var(--accent)";
 
   const wireLine = (w: string | number, opacity = 0.25) => (
@@ -191,19 +192,26 @@ function LayoutPreview({ styleId }: { styleId: string }) {
 
   let content;
   if (styleId === "sidebar") {
-    // Left-side menu column + main dashboard area
+    // Left-side menu column + main dashboard area — Light/Minimal CRM theme
     content = (
-      <div style={{ display: "flex", width: "100%", height: "100%" }}>
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          background: "#fcfbfa",
+        }}
+      >
         {/* Sidebar */}
         <div
           style={{
-            width: 28,
-            borderRight: "1px solid var(--hairline)",
+            width: 32,
+            borderRight: "1px solid #eae6de",
             padding: 6,
             display: "flex",
             flexDirection: "column",
             gap: 5,
-            background: "oklch(0.19 0.009 60 / 0.3)",
+            background: "#f4ece4",
           }}
         >
           <div
@@ -212,12 +220,12 @@ function LayoutPreview({ styleId }: { styleId: string }) {
               height: 12,
               borderRadius: "50%",
               background: accentColor,
-              opacity: 0.7,
+              opacity: 0.9,
             }}
           />
           {wireLine(16, 0.4)}
-          {wireLine(12, 0.25)}
-          {wireLine(14, 0.25)}
+          {wireLine(12, 0.3)}
+          {wireLine(14, 0.3)}
         </div>
         {/* Main Dashboard */}
         <div
@@ -236,13 +244,13 @@ function LayoutPreview({ styleId }: { styleId: string }) {
               alignItems: "center",
             }}
           >
-            {wireLine(24, 0.5)}
+            {wireLine(24, 0.6)}
             <div
               style={{
                 width: 10,
                 height: 10,
                 borderRadius: "50%",
-                background: "rgba(255,255,255,0.15)",
+                background: "rgba(0,0,0,0.12)",
               }}
             />
           </div>
@@ -250,23 +258,24 @@ function LayoutPreview({ styleId }: { styleId: string }) {
             <div
               style={{
                 flex: 1,
-                border: "1px solid var(--hairline)",
+                border: "1px solid #eae6de",
                 borderRadius: 6,
                 padding: 6,
                 display: "flex",
                 flexDirection: "column",
                 gap: 4,
+                background: "#ffffff",
               }}
             >
-              {wireLine("100%", 0.3)}
-              {wireLine("60%", 0.15)}
+              {wireLine("100%", 0.4)}
+              {wireLine("60%", 0.2)}
             </div>
             <div
               style={{
                 width: 32,
-                border: "1px solid var(--hairline)",
+                border: "1px solid #eae6de",
                 borderRadius: 6,
-                background: "rgba(255,255,255,0.03)",
+                background: "#faf9f6",
               }}
             />
           </div>
@@ -362,10 +371,10 @@ function LayoutPreview({ styleId }: { styleId: string }) {
       </div>
     );
   } else if (styleId === "rail") {
-    // Narrow vertical rail + content
+    // Icon rail + secondary vertical list panel — Dark CRM/SaaS theme
     content = (
       <div style={{ display: "flex", width: "100%", height: "100%" }}>
-        {/* Rail */}
+        {/* Far-left Icon Rail */}
         <div
           style={{
             width: 18,
@@ -375,7 +384,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
             flexDirection: "column",
             alignItems: "center",
             gap: 6,
-            background: "oklch(0.19 0.009 60 / 0.3)",
+            background: "oklch(0.14 0.008 60 / 0.9)",
           }}
         >
           <div
@@ -384,7 +393,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
               height: 10,
               borderRadius: 3,
               background: accentColor,
-              opacity: 0.7,
+              opacity: 0.8,
             }}
           />
           {[1, 2, 3].map((i) => (
@@ -394,12 +403,31 @@ function LayoutPreview({ styleId }: { styleId: string }) {
                 width: 8,
                 height: 8,
                 borderRadius: 2,
-                background: "rgba(255,255,255,0.15)",
+                background: "rgba(255,255,255,0.12)",
               }}
             />
           ))}
         </div>
-        {/* Content */}
+        {/* Secondary Vertical List Panel */}
+        <div
+          style={{
+            width: 48,
+            borderRight: "1px solid var(--hairline)",
+            padding: 6,
+            display: "flex",
+            flexDirection: "column",
+            gap: 5,
+            background: "oklch(0.17 0.008 60 / 0.5)",
+          }}
+        >
+          {wireLine(36, 0.4)}
+          <div style={{ height: 1, background: "var(--hairline)" }} />
+          {wireLine(28, 0.25)}
+          {wireLine(32, 0.15)}
+          {wireLine(24, 0.25)}
+          {wireLine(28, 0.15)}
+        </div>
+        {/* Main Content Area */}
         <div
           style={{
             flex: 1,
@@ -409,7 +437,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
             gap: 6,
           }}
         >
-          {wireLine(36, 0.4)}
+          {wireLine(36, 0.45)}
           <div
             style={{
               flex: 1,
@@ -419,6 +447,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
               display: "flex",
               flexDirection: "column",
               gap: 5,
+              background: "rgba(255,255,255,0.02)",
             }}
           >
             <div style={{ display: "flex", gap: 6 }}>
@@ -427,7 +456,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
                   width: 12,
                   height: 12,
                   borderRadius: 3,
-                  background: "rgba(255,255,255,0.1)",
+                  background: "rgba(255,255,255,0.08)",
                 }}
               />
               <div