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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user