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

QA: fix dark/light mode rendering across all scaffolds

Browse Source 
Aceternity (critical — light mode was completely broken):
- text/muted/card/border now respond to isDark instead of only forcedLight
- gradient-text h1 was white→transparent gradient (invisible on light bg);
  now switches to indigo gradient in light mode
- Minimal nav background was hardcoded dark; now adapts per isDark
- Floating nav background adapts per isDark
- "Browse components" button bg adapts per isDark
- 9x hardcoded color:"#fff" on content text replaced with color:text
  (lamp h1, typewriter word spans, feature titles, moving card names,
   bento MRR/Users/Uptime values, pricing prices, CTA heading, nav logo)

DaisyUI:
- noise background option now renders a visible SVG fractalNoise pattern

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-06 10:47:45 -08:00
parent a1b605febf
commit 57a4f358d1
1 changed files with 25 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/design-scaffolds/marketing.tsx
View File

@@ -214,6 +214,9 @@ export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor
{bgStyle === "pattern" && ( {bgStyle === "pattern" && (
<div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${p}22 1px, transparent 1px)`, backgroundSize: "20px 20px", pointerEvents: "none", zIndex: 0 }} /> <div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${p}22 1px, transparent 1px)`, backgroundSize: "20px 20px", pointerEvents: "none", zIndex: 0 }} />
)} )}
{bgStyle === "noise" && (
<div style={{ position: "absolute", inset: 0, backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")`, backgroundSize: "200px", opacity: isDark ? 0.06 : 0.04, pointerEvents: "none", zIndex: 0 }} />
)}
{/* Nav */} {/* Nav */}
{navStyle === "pill" ? ( {navStyle === "pill" ? (
@@ -505,10 +508,11 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
const forceShader = bgStyle === "shader"; const forceShader = bgStyle === "shader";
const bg = forcedBlack ? "#000" : forcedLight ? "#f8f9ff" : forceShader ? "#06010e" : isDark ? ACE_BG_BASE : ACE_BG_LIGHT; const bg = forcedBlack ? "#000" : forcedLight ? "#f8f9ff" : forceShader ? "#06010e" : isDark ? ACE_BG_BASE : ACE_BG_LIGHT;
const text = (forcedLight) ? "#1e1b4b" : "#fff"; // text/muted/card/border must respond to isDark (not just forcedLight=aurora)
const muted = forcedLight ? "#6b7280" : "rgba(255,255,255,0.42)"; const text = isDark ? "#fff" : "#1e1b4b";
const card = forcedLight ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.04)"; const muted = isDark ? "rgba(255,255,255,0.42)" : "#6b7280";
const border= forcedLight ? "rgba(0,0,0,0.09)" : "rgba(255,255,255,0.08)"; const card = isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.04)";
const border= isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.1)";
const BgLayer = () => { const BgLayer = () => {
if (bgStyle === "gradient") return ( if (bgStyle === "gradient") return (
@@ -623,7 +627,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
{/* Nav */} {/* Nav */}
{navStyle === "floating" ? ( {navStyle === "floating" ? (
<div style={{ display: "flex", justifyContent: "center", padding: "20px 48px", position: "relative", zIndex: 10 }}> <div style={{ display: "flex", justifyContent: "center", padding: "20px 48px", position: "relative", zIndex: 10 }}>
<nav style={{ display: "flex", alignItems: "center", gap: 32, padding: "14px 32px", borderRadius: 50, background: "rgba(255,255,255,0.06)", border: `1px solid ${p}40`, backdropFilter: "blur(14px)" }}> <nav style={{ display: "flex", alignItems: "center", gap: 32, padding: "14px 32px", borderRadius: 50, background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)", border: `1px solid ${p}40`, backdropFilter: "blur(14px)" }}>
<div style={{ display: "flex", alignItems: "center", gap: 9 }}> <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
<div style={{ width: 26, height: 26, borderRadius: 6, background: `linear-gradient(135deg,${p},#3b82f6)` }} /> <div style={{ width: 26, height: 26, borderRadius: 6, background: `linear-gradient(135deg,${p},#3b82f6)` }} />
<span style={{ fontWeight: 800, fontSize: 17, color: text }}>Acme</span> <span style={{ fontWeight: 800, fontSize: 17, color: text }}>Acme</span>
@@ -633,10 +637,10 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
</nav> </nav>
</div> </div>
) : ( ) : (
<nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 48px", backdropFilter: "blur(8px)", background: "rgba(5,0,16,0.5)", position: "relative", zIndex: 10 }}> <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 48px", backdropFilter: "blur(8px)", background: isDark ? "rgba(5,0,16,0.55)" : "rgba(255,255,255,0.8)", position: "relative", zIndex: 10 }}>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}> <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<div style={{ width: 28, height: 28, borderRadius: 7, background: `linear-gradient(135deg,${p},#3b82f6)` }} /> <div style={{ width: 28, height: 28, borderRadius: 7, background: `linear-gradient(135deg,${p},#3b82f6)` }} />
<span style={{ fontWeight: 800, fontSize: 17, color: "#fff" }}>Acme</span> <span style={{ fontWeight: 800, fontSize: 17, color: text }}>Acme</span>
</div> </div>
<div style={{ display: "flex", gap: 32, fontSize: 15, color: muted }}> <div style={{ display: "flex", gap: 32, fontSize: 15, color: muted }}>
{["Features","Pricing","Docs","Blog"].map(i => <span key={i}>{i}</span>)} {["Features","Pricing","Docs","Blog"].map(i => <span key={i}>{i}</span>)}
@@ -653,7 +657,9 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
</div> </div>
<h1 style={{ <h1 style={{
fontSize: 80, fontWeight: 900, marginBottom: 20, lineHeight: 0.98, letterSpacing: "-0.05em", fontSize: 80, fontWeight: 900, marginBottom: 20, lineHeight: 0.98, letterSpacing: "-0.05em",
background: "linear-gradient(180deg, #fff 35%, rgba(255,255,255,0.3) 100%)", background: isDark
? "linear-gradient(180deg, #fff 35%, rgba(255,255,255,0.3) 100%)"
: "linear-gradient(180deg, #1e1b4b 30%, #6d28d9 100%)",
WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
}}> }}>
Build the future<br />of the web. Build the future<br />of the web.
@@ -663,7 +669,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
</p> </p>
<div style={{ display: "flex", gap: 14, justifyContent: "center" }}> <div style={{ display: "flex", gap: 14, justifyContent: "center" }}>
<button style={{ height: 52, padding: "0 36px", borderRadius: 10, fontSize: 16, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 8px 28px ${p}45` }}>Get started →</button> <button style={{ height: 52, padding: "0 36px", borderRadius: 10, fontSize: 16, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 8px 28px ${p}45` }}>Get started →</button>
<button style={{ height: 52, padding: "0 28px", borderRadius: 10, fontSize: 16, color: muted, border: `1px solid ${border}`, background: "rgba(255,255,255,0.04)", cursor: "pointer", backdropFilter: "blur(4px)" }}>Browse components</button> <button style={{ height: 52, padding: "0 28px", borderRadius: 10, fontSize: 16, color: muted, border: `1px solid ${border}`, background: isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.03)", cursor: "pointer", backdropFilter: "blur(4px)" }}>Browse components</button>
</div> </div>
</div> </div>
)} )}
@@ -673,7 +679,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
<div style={{ padding: "64px 48px 48px", textAlign: "center", position: "relative", zIndex: 1 }}> <div style={{ padding: "64px 48px 48px", textAlign: "center", position: "relative", zIndex: 1 }}>
<div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: "65%", height: 160, background: `conic-gradient(from 263deg at 50% 0%, transparent 0deg, ${p}35 22deg, ${p}20 44deg, transparent 66deg)`, pointerEvents: "none" }} /> <div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: "65%", height: 160, background: `conic-gradient(from 263deg at 50% 0%, transparent 0deg, ${p}35 22deg, ${p}20 44deg, transparent 66deg)`, pointerEvents: "none" }} />
<div style={{ width: 160, height: 2, background: `linear-gradient(90deg, transparent, ${p}, transparent)`, margin: "0 auto 32px", animation: "ace-lamp 3.5s ease-in-out infinite" }} /> <div style={{ width: 160, height: 2, background: `linear-gradient(90deg, transparent, ${p}, transparent)`, margin: "0 auto 32px", animation: "ace-lamp 3.5s ease-in-out infinite" }} />
<h1 style={{ fontSize: 72, fontWeight: 900, marginBottom: 18, color: "#fff", lineHeight: 1.02, letterSpacing: "-0.045em" }}> <h1 style={{ fontSize: 72, fontWeight: 900, marginBottom: 18, color: text, lineHeight: 1.02, letterSpacing: "-0.045em" }}>
Build the future<br />of the web. Build the future<br />of the web.
</h1> </h1>
<p style={{ fontSize: 18, color: muted, maxWidth: 480, margin: "0 auto 28px", lineHeight: 1.75 }}> <p style={{ fontSize: 18, color: muted, maxWidth: 480, margin: "0 auto 28px", lineHeight: 1.75 }}>
@@ -689,8 +695,8 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
<div style={{ fontSize: 14, letterSpacing: "0.2em", color: `${p}90`, marginBottom: 24, textTransform: "uppercase", fontWeight: 600 }}>The future of the web</div> <div style={{ fontSize: 14, letterSpacing: "0.2em", color: `${p}90`, marginBottom: 24, textTransform: "uppercase", fontWeight: 600 }}>The future of the web</div>
<h1 style={{ fontSize: 76, fontWeight: 900, marginBottom: 20, lineHeight: 0.98, letterSpacing: "-0.05em" }}> <h1 style={{ fontSize: 76, fontWeight: 900, marginBottom: 20, lineHeight: 0.98, letterSpacing: "-0.05em" }}>
<span style={{ background: `linear-gradient(135deg,${p},#3b82f6)`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>Build</span> <span style={{ background: `linear-gradient(135deg,${p},#3b82f6)`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>Build</span>
{" "}<span style={{ color: "#fff" }}>the future</span><br /> {" "}<span style={{ color: text }}>the future</span><br />
<span style={{ color: "#fff" }}>of the web</span> <span style={{ color: text }}>of the web</span>
<span style={{ display: "inline-block", width: 4, height: "0.9em", background: p, verticalAlign: "text-bottom", marginLeft: 4, animation: "ace-cursor 0.85s step-end infinite", borderRadius: 1 }} /> <span style={{ display: "inline-block", width: 4, height: "0.9em", background: p, verticalAlign: "text-bottom", marginLeft: 4, animation: "ace-cursor 0.85s step-end infinite", borderRadius: 1 }} />
</h1> </h1>
<p style={{ fontSize: 18, color: muted, maxWidth: 480, margin: "0 auto 28px", lineHeight: 1.75 }}> <p style={{ fontSize: 18, color: muted, maxWidth: 480, margin: "0 auto 28px", lineHeight: 1.75 }}>
@@ -720,7 +726,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
<div style={{ width: 48, height: 48, borderRadius: 12, background: `${p}18`, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}> <div style={{ width: 48, height: 48, borderRadius: 12, background: `${p}18`, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
<Ico d={ICO[f.icon as keyof typeof ICO]} color={p} size={22} /> <Ico d={ICO[f.icon as keyof typeof ICO]} color={p} size={22} />
</div> </div>
<p style={{ fontSize: 17, fontWeight: 700, color: "#fff", marginBottom: 8 }}>{f.title}</p> <p style={{ fontSize: 17, fontWeight: 700, color: text, marginBottom: 8 }}>{f.title}</p>
<p style={{ fontSize: 14, color: muted, lineHeight: 1.7 }}>{f.desc}</p> <p style={{ fontSize: 14, color: muted, lineHeight: 1.7 }}>{f.desc}</p>
</div> </div>
))} ))}
@@ -742,7 +748,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
].map(t => ( ].map(t => (
<div key={t.name + pass} style={{ minWidth: 280, flexShrink: 0, padding: "22px 24px", borderRadius: 16, background: card, border: `1px solid ${p}22`, backdropFilter: "blur(4px)" }}> <div key={t.name + pass} style={{ minWidth: 280, flexShrink: 0, padding: "22px 24px", borderRadius: 16, background: card, border: `1px solid ${p}22`, backdropFilter: "blur(4px)" }}>
<p style={{ fontSize: 14, color: muted, marginBottom: 14, lineHeight: 1.7 }}>{t.text}</p> <p style={{ fontSize: 14, color: muted, marginBottom: 14, lineHeight: 1.7 }}>{t.text}</p>
<p style={{ fontSize: 13, fontWeight: 700, color: "#fff" }}>— {t.name} <span style={{ fontWeight: 400 }}>· {t.role}</span></p> <p style={{ fontSize: 13, fontWeight: 700, color: text }}>— {t.name} <span style={{ fontWeight: 400 }}>· {t.role}</span></p>
</div> </div>
))} ))}
</div> </div>
@@ -756,7 +762,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
<div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gridTemplateRows: "auto auto", gap: 16 }}> <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gridTemplateRows: "auto auto", gap: 16 }}>
<div style={{ padding: "28px", borderRadius: 18, background: card, border: `1px solid ${p}18`, gridRow: "1 / 3", backdropFilter: "blur(4px)" }}> <div style={{ padding: "28px", borderRadius: 18, background: card, border: `1px solid ${p}18`, gridRow: "1 / 3", backdropFilter: "blur(4px)" }}>
<p style={{ fontSize: 13, color: muted, marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.1em" }}>Revenue</p> <p style={{ fontSize: 13, color: muted, marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.1em" }}>Revenue</p>
<p style={{ fontSize: 36, fontWeight: 900, color: "#fff", marginBottom: 20, letterSpacing: "-0.02em" }}>$128k MRR</p> <p style={{ fontSize: 36, fontWeight: 900, color: text, marginBottom: 20, letterSpacing: "-0.02em" }}>$128k MRR</p>
<svg viewBox="0 0 160 70" style={{ width: "100%", overflow: "visible" }}> <svg viewBox="0 0 160 70" style={{ width: "100%", overflow: "visible" }}>
<defs> <defs>
<linearGradient id="bg-chart" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="bg-chart" x1="0" y1="0" x2="0" y2="1">
@@ -774,11 +780,11 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
</div> </div>
<div style={{ padding: "24px", borderRadius: 18, background: `${p}18`, border: `1px solid ${p}30`, backdropFilter: "blur(4px)" }}> <div style={{ padding: "24px", borderRadius: 18, background: `${p}18`, border: `1px solid ${p}30`, backdropFilter: "blur(4px)" }}>
<p style={{ fontSize: 13, color: muted, marginBottom: 6 }}>Users</p> <p style={{ fontSize: 13, color: muted, marginBottom: 6 }}>Users</p>
<p style={{ fontSize: 36, fontWeight: 900, color: "#fff", letterSpacing: "-0.02em" }}>120k+</p> <p style={{ fontSize: 36, fontWeight: 900, color: text, letterSpacing: "-0.02em" }}>120k+</p>
</div> </div>
<div style={{ padding: "24px", borderRadius: 18, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)", gridColumn: "2 / 4" }}> <div style={{ padding: "24px", borderRadius: 18, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)", gridColumn: "2 / 4" }}>
<p style={{ fontSize: 13, color: muted, marginBottom: 6 }}>Uptime</p> <p style={{ fontSize: 13, color: muted, marginBottom: 6 }}>Uptime</p>
<p style={{ fontSize: 36, fontWeight: 900, color: "#fff", letterSpacing: "-0.02em" }}>99.99%</p> <p style={{ fontSize: 36, fontWeight: 900, color: text, letterSpacing: "-0.02em" }}>99.99%</p>
</div> </div>
</div> </div>
</div> </div>
@@ -790,7 +796,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
{[{ plan: "Starter", price: "Free", hi: false }, { plan: "All-Access", price: "$299", hi: true }, { plan: "Team", price: "Custom", hi: false }].map(pl => ( {[{ plan: "Starter", price: "Free", hi: false }, { plan: "All-Access", price: "$299", hi: true }, { plan: "Team", price: "Custom", hi: false }].map(pl => (
<div key={pl.plan} style={{ flex: 1, padding: "28px 24px", borderRadius: 18, background: pl.hi ? `linear-gradient(160deg, ${p}30, #3b82f620)` : card, border: `1px solid ${pl.hi ? `${p}55` : border}`, textAlign: "center", backdropFilter: "blur(4px)" }}> <div key={pl.plan} style={{ flex: 1, padding: "28px 24px", borderRadius: 18, background: pl.hi ? `linear-gradient(160deg, ${p}30, #3b82f620)` : card, border: `1px solid ${pl.hi ? `${p}55` : border}`, textAlign: "center", backdropFilter: "blur(4px)" }}>
<p style={{ fontSize: 14, color: pl.hi ? `${p}dd` : muted, marginBottom: 8 }}>{pl.plan}</p> <p style={{ fontSize: 14, color: pl.hi ? `${p}dd` : muted, marginBottom: 8 }}>{pl.plan}</p>
<p style={{ fontSize: 42, fontWeight: 900, color: "#fff", letterSpacing: "-0.02em" }}>{pl.price}</p> <p style={{ fontSize: 42, fontWeight: 900, color: text, letterSpacing: "-0.02em" }}>{pl.price}</p>
{pl.hi && <div style={{ marginTop: 8, fontSize: 13, color: `${p}aa` }}>lifetime access</div>} {pl.hi && <div style={{ marginTop: 8, fontSize: 13, color: `${p}aa` }}>lifetime access</div>}
</div> </div>
))} ))}
@@ -800,7 +806,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
{comps.includes("cta") && ( {comps.includes("cta") && (
<div style={{ margin: "0 48px 80px", padding: "60px 48px", borderRadius: 20, background: `linear-gradient(135deg, ${p}18, #3b82f614)`, border: `1px solid ${p}28`, textAlign: "center", position: "relative", zIndex: 1, backdropFilter: "blur(6px)" }}> <div style={{ margin: "0 48px 80px", padding: "60px 48px", borderRadius: 20, background: `linear-gradient(135deg, ${p}18, #3b82f614)`, border: `1px solid ${p}28`, textAlign: "center", position: "relative", zIndex: 1, backdropFilter: "blur(6px)" }}>
<p style={{ fontSize: 42, fontWeight: 900, color: "#fff", marginBottom: 12, letterSpacing: "-0.02em" }}>Start building today</p> <p style={{ fontSize: 42, fontWeight: 900, color: text, marginBottom: 12, letterSpacing: "-0.02em" }}>Start building today</p>
<p style={{ fontSize: 17, color: muted, marginBottom: 28 }}>Join 120,000+ developers worldwide.</p> <p style={{ fontSize: 17, color: muted, marginBottom: 28 }}>Join 120,000+ developers worldwide.</p>
<button style={{ height: 52, padding: "0 34px", borderRadius: 10, fontSize: 16, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 6px 24px ${p}40` }}>Get All-Access →</button> <button style={{ height: 52, padding: "0 34px", borderRadius: 10, fontSize: 16, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 6px 24px ${p}40` }}>Get All-Access →</button>
</div> </div>