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

design: align layout-mockup previews precisely with your high-fidelity SaaS templates

Browse Source
This commit is contained in:
mawkone
2026-06-08 11:37:33 -07:00
parent 188be0ee6b
commit 7d4d034e2a
1 changed files with 53 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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