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

design: align layout-mockup previews with 100% precision to your actual Lattice CRM templates

Browse Source
This commit is contained in:
mawkone
2026-06-08 11:44:41 -07:00
parent 7d4d034e2a
commit ebec667d62
1 changed files with 489 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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