From ebec667d626725070bf6bb3d6bad4fa36daeed86 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Mon, 8 Jun 2026 11:44:41 -0700
Subject: [PATCH] design: align layout-mockup previews with 100% precision to
 your actual Lattice CRM templates

---
 .../_onboarding/onboarding-entrepreneur.tsx   | 521 ++++++++++++++++--
 1 file changed, 489 insertions(+), 32 deletions(-)

diff --git a/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx b/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
index 4899f86..5e864f7 100644
--- a/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
+++ b/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
@@ -174,16 +174,15 @@ 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" && styleId !== "sidebar";
+  const isDark = styleId === "rail";
   const accentColor = "var(--accent)";
 
   const wireLine = (w: string | number, opacity = 0.25) => (
     <div
       style={{
-        height: 4,
+        height: 3,
         width: w,
-        borderRadius: 2,
+        borderRadius: 1.5,
         background: isDark ? "rgba(255,255,255,1)" : "rgba(0,0,0,1)",
         opacity,
       }}
@@ -192,7 +191,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
 
   let content;
   if (styleId === "sidebar") {
-    // Left-side menu column + main dashboard area — Light/Minimal CRM theme
+    // Left-side menu column + main dashboard area — Light/Minimal CRM theme (Screen 3)
     content = (
       <div
         style={{
@@ -205,29 +204,423 @@ function LayoutPreview({ styleId }: { styleId: string }) {
         {/* Sidebar */}
         <div
           style={{
-            width: 32,
+            width: 42,
             borderRight: "1px solid #eae6de",
-            padding: 6,
+            padding: "8px 6px",
             display: "flex",
             flexDirection: "column",
-            gap: 5,
-            background: "#f4ece4",
+            gap: 6,
+            background: "#f5f4ef",
+          }}
+        >
+          {/* Logo */}
+          <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
+            <div
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: 3,
+                background: accentColor,
+                opacity: 0.9,
+              }}
+            />
+            {wireLine(18, 0.55)}
+          </div>
+          {/* Mini Search box */}
+          <div
+            style={{
+              width: "100%",
+              height: 8,
+              borderRadius: 3,
+              border: "1px solid #eae6de",
+              background: "#fff",
+            }}
+          />
+          {/* Menu items */}
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              marginTop: 4,
+            }}
+          >
+            {wireLine(24, 0.45)}
+            {wireLine(20, 0.3)}
+            {wireLine(26, 0.3)}
+          </div>
+        </div>
+        {/* Main Dashboard (Light) */}
+        <div
+          style={{
+            flex: 1,
+            padding: 8,
+            display: "flex",
+            flexDirection: "column",
+            gap: 6,
+          }}
+        >
+          {/* Header */}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            {wireLine(36, 0.65)}
+            <div
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: "50%",
+                background: "rgba(0,0,0,0.12)",
+              }}
+            />
+          </div>
+          {/* 4 Mini Cards Grid */}
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(4, 1fr)",
+              gap: 4,
+            }}
+          >
+            {[1, 2, 3, 4].map((i) => (
+              <div
+                key={i}
+                style={{
+                  border: "1px solid #eae6de",
+                  borderRadius: 4,
+                  padding: "4px 6px",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 2,
+                  background: "#fff",
+                }}
+              >
+                {wireLine("50%", 0.3)}
+                <div
+                  style={{
+                    height: 2,
+                    width: "100%",
+                    background:
+                      i === 3 ? "oklch(0.65 0.18 25)" : "oklch(0.78 0.16 155)",
+                    opacity: 0.6,
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+          {/* Charts/Table Row */}
+          <div style={{ display: "flex", gap: 6, flex: 1 }}>
+            <div
+              style={{
+                flex: 1.5,
+                border: "1px solid #eae6de",
+                borderRadius: 5,
+                padding: 6,
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+                background: "#ffffff",
+              }}
+            >
+              {wireLine("40%", 0.4)}
+              {/* Simulated bars */}
+              <div
+                style={{
+                  display: "flex",
+                  gap: 3,
+                  alignItems: "flex-end",
+                  flex: 1,
+                  paddingTop: 4,
+                }}
+              >
+                {[6, 12, 10, 16, 20, 14, 8].map((h, idx) => (
+                  <div
+                    key={idx}
+                    style={{
+                      flex: 1,
+                      height: h,
+                      background:
+                        idx === 4 ? "oklch(0.6 0.18 250)" : "rgba(0,0,0,0.06)",
+                      borderRadius: 1,
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+            <div
+              style={{
+                flex: 1,
+                border: "1px solid #eae6de",
+                borderRadius: 5,
+                background: "#ffffff",
+                padding: 6,
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+              }}
+            >
+              {wireLine("70%", 0.4)}
+              {wireLine("100%", 0.15)}
+              {wireLine("90%", 0.15)}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  } else if (styleId === "topbar") {
+    // Top Horizontal Dark Header Bar + Light Dashboard (Screen 2)
+    content = (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          background: "#fcfbfa",
+        }}
+      >
+        {/* Top Dark Header */}
+        <div
+          style={{
+            height: 20,
+            borderBottom: "1px solid rgba(255,255,255,0.08)",
+            padding: "0 8px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            background: "#121110",
+          }}
+        >
+          <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
+            <div
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: 2,
+                background: accentColor,
+                opacity: 0.9,
+              }}
+            />
+            <div
+              style={{ height: 3, width: 14, background: "#fff", opacity: 0.8 }}
+            />
+            <div
+              style={{ height: 3, width: 12, background: "#fff", opacity: 0.4 }}
+            />
+          </div>
+          {/* Miniature ⌘K Bar */}
+          <div
+            style={{
+              width: 44,
+              height: 10,
+              borderRadius: 4,
+              border: "1px solid rgba(255,255,255,0.15)",
+              background: "rgba(255,255,255,0.05)",
+              display: "flex",
+              alignItems: "center",
+              paddingLeft: 4,
+            }}
+          >
+            <div
+              style={{
+                height: 2,
+                width: 10,
+                background: "#fff",
+                opacity: 0.25,
+              }}
+            />
+          </div>
+          <div
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              background: "rgba(255,255,255,0.2)",
+            }}
+          />
+        </div>
+        {/* Light Dashboard below */}
+        <div
+          style={{
+            flex: 1,
+            padding: 8,
+            display: "flex",
+            flexDirection: "column",
+            gap: 6,
+          }}
+        >
+          {/* Header */}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            {wireLine(36, 0.65)}
+            {wireLine(24, 0.35)}
+          </div>
+          {/* 4 Mini Cards Grid */}
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(4, 1fr)",
+              gap: 4,
+            }}
+          >
+            {[1, 2, 3, 4].map((i) => (
+              <div
+                key={i}
+                style={{
+                  border: "1px solid #eae6de",
+                  borderRadius: 4,
+                  padding: "4px 6px",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 2,
+                  background: "#fff",
+                }}
+              >
+                {wireLine("50%", 0.3)}
+                <div
+                  style={{
+                    height: 2,
+                    width: "100%",
+                    background:
+                      i === 3 ? "oklch(0.65 0.18 25)" : "oklch(0.78 0.16 155)",
+                    opacity: 0.6,
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+          {/* Charts Row */}
+          <div style={{ display: "flex", gap: 6, flex: 1 }}>
+            <div
+              style={{
+                flex: 1.5,
+                border: "1px solid #eae6de",
+                borderRadius: 5,
+                padding: 6,
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+                background: "#ffffff",
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  gap: 3,
+                  alignItems: "flex-end",
+                  flex: 1,
+                  paddingTop: 4,
+                }}
+              >
+                {[6, 12, 10, 16, 20, 14, 8].map((h, idx) => (
+                  <div
+                    key={idx}
+                    style={{
+                      flex: 1,
+                      height: h,
+                      background:
+                        idx === 4 ? "oklch(0.6 0.18 250)" : "rgba(0,0,0,0.06)",
+                      borderRadius: 1,
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+            <div
+              style={{
+                flex: 1,
+                border: "1px solid #eae6de",
+                borderRadius: 5,
+                background: "#ffffff",
+                padding: 6,
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+              }}
+            >
+              {wireLine("70%", 0.4)}
+              {wireLine("100%", 0.15)}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  } else if (styleId === "rail") {
+    // Icon rail + secondary vertical list panel — Complete Dark-mode Dashboard (Screen 1)
+    content = (
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          background: "#0e0f12",
+        }}
+      >
+        {/* Far-left Icon Rail (Black) */}
+        <div
+          style={{
+            width: 18,
+            borderRight: "1px solid rgba(255,255,255,0.08)",
+            padding: "8px 0",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 6,
+            background: "#121110",
           }}
         >
           <div
             style={{
-              width: 12,
-              height: 12,
-              borderRadius: "50%",
+              width: 10,
+              height: 10,
+              borderRadius: 3,
               background: accentColor,
               opacity: 0.9,
             }}
           />
-          {wireLine(16, 0.4)}
-          {wireLine(12, 0.3)}
-          {wireLine(14, 0.3)}
+          {[1, 2, 3, 4].map((i) => (
+            <div
+              key={i}
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: 2,
+                background: "rgba(255,255,255,0.18)",
+              }}
+            />
+          ))}
         </div>
-        {/* Main Dashboard */}
+        {/* Secondary List Panel (Dark) */}
+        <div
+          style={{
+            width: 48,
+            borderRight: "1px solid rgba(255,255,255,0.08)",
+            padding: 6,
+            display: "flex",
+            flexDirection: "column",
+            gap: 5,
+            background: "#1a1918",
+          }}
+        >
+          <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
+            {wireLine(28, 0.45)}
+          </div>
+          <div style={{ height: 1, background: "rgba(255,255,255,0.08)" }} />
+          {wireLine(36, 0.35)}
+          {wireLine(24, 0.2)}
+          {wireLine(32, 0.2)}
+          {wireLine(28, 0.2)}
+        </div>
+        {/* Main Content Area (Dark) */}
         <div
           style={{
             flex: 1,
@@ -244,45 +637,109 @@ function LayoutPreview({ styleId }: { styleId: string }) {
               alignItems: "center",
             }}
           >
-            {wireLine(24, 0.6)}
+            {wireLine(36, 0.65)}
             <div
               style={{
-                width: 10,
-                height: 10,
+                width: 8,
+                height: 8,
                 borderRadius: "50%",
-                background: "rgba(0,0,0,0.12)",
+                background: "rgba(255,255,255,0.2)",
               }}
             />
           </div>
+          {/* 4 Mini Cards Grid (Dark) */}
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(4, 1fr)",
+              gap: 4,
+            }}
+          >
+            {[1, 2, 3, 4].map((i) => (
+              <div
+                key={i}
+                style={{
+                  border: "1px solid rgba(255,255,255,0.06)",
+                  borderRadius: 4,
+                  padding: "4px 6px",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 2,
+                  background: "#1a1918",
+                }}
+              >
+                {wireLine("50%", 0.35)}
+                <div
+                  style={{
+                    height: 2,
+                    width: "100%",
+                    background:
+                      i === 3 ? "oklch(0.65 0.18 25)" : "oklch(0.78 0.16 155)",
+                    opacity: 0.8,
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+          {/* Charts Row (Dark) */}
           <div style={{ display: "flex", gap: 6, flex: 1 }}>
             <div
               style={{
-                flex: 1,
-                border: "1px solid #eae6de",
-                borderRadius: 6,
+                flex: 1.5,
+                border: "1px solid rgba(255,255,255,0.06)",
+                borderRadius: 5,
                 padding: 6,
                 display: "flex",
                 flexDirection: "column",
                 gap: 4,
-                background: "#ffffff",
+                background: "#1a1918",
               }}
             >
-              {wireLine("100%", 0.4)}
-              {wireLine("60%", 0.2)}
+              <div
+                style={{
+                  display: "flex",
+                  gap: 3,
+                  alignItems: "flex-end",
+                  flex: 1,
+                  paddingTop: 4,
+                }}
+              >
+                {[6, 12, 10, 16, 20, 14, 8].map((h, idx) => (
+                  <div
+                    key={idx}
+                    style={{
+                      flex: 1,
+                      height: h,
+                      background:
+                        idx === 4
+                          ? "oklch(0.6 0.18 250)"
+                          : "rgba(255,255,255,0.08)",
+                      borderRadius: 1,
+                    }}
+                  />
+                ))}
+              </div>
             </div>
             <div
               style={{
-                width: 32,
-                border: "1px solid #eae6de",
-                borderRadius: 6,
-                background: "#faf9f6",
+                flex: 1,
+                border: "1px solid rgba(255,255,255,0.06)",
+                borderRadius: 5,
+                background: "#1a1918",
+                padding: 6,
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
               }}
-            />
+            >
+              {wireLine("70%", 0.45)}
+              {wireLine("100%", 0.2)}
+            </div>
           </div>
         </div>
       </div>
     );
-  } else if (styleId === "topbar") {
+  } else if (styleId === "flux") {
     // Top horizontal header bar + multi-column page
     content = (
       <div