design: implement blurred dashboard overlays and 5-item symmetric 2x2 grid with full-width I'm not sure tile at the bottom

This commit is contained in:
2026-06-08 12:12:00 -07:00
parent 54c6a13df9
commit 25583e7b8d

View File

@@ -255,6 +255,8 @@ function LayoutPreview({ styleId }: { styleId: string }) {
background: c.bg,
color: c.text,
overflow: "hidden",
filter: "blur(3.5px)",
pointerEvents: "none",
}}
>
{/* Header */}
@@ -2238,7 +2240,15 @@ function LayoutPreview({ styleId }: { styleId: string }) {
);
}
const SAAS_STYLES = [
interface StyleOption {
id: string;
label: string;
desc: string;
illustration: React.ReactNode;
fullWidth?: boolean;
}
const SAAS_STYLES: StyleOption[] = [
{
id: "sidebar_light",
label: "Vertical Sidebar — Light",
@@ -2263,9 +2273,16 @@ const SAAS_STYLES = [
desc: "Full dark topbar + dark dashboard layouts.",
illustration: <LayoutPreview styleId="topbar_dark" />,
},
{
id: "not_sure",
label: "I'm not sure",
desc: "Let Vibn help you decide based on your description",
fullWidth: true,
illustration: <LayoutPreview styleId="not_sure" />,
},
];
const MARKETPLACE_STYLES = [
const MARKETPLACE_STYLES: StyleOption[] = [
{
id: "flux",
label: "Dark Glass / Flux",
@@ -2280,7 +2297,7 @@ const MARKETPLACE_STYLES = [
},
];
const GENERAL_STYLES = [
const GENERAL_STYLES: StyleOption[] = [
{
id: "bento",
label: "Dark Bento",
@@ -2331,6 +2348,7 @@ function EntrepStyle({ productType, value, onChange }) {
desc: s.desc,
icon: undefined,
illustration: s.illustration,
fullWidth: s.fullWidth,
}))}
value={value}
onChange={onChange}