From 4eff014ae6a5bd7e0638664b87b26655aefa6aa7 Mon Sep 17 00:00:00 2001
From: Mark Henderson <mark@getacquired.com>
Date: Fri, 6 Mar 2026 10:53:23 -0800
Subject: [PATCH] Fix Aceternity gradient background in light mode

BgLayer 'gradient' always rendered rgb(8,0,20) dark base regardless
of mode, covering the container's light bg and making the dark
gradient-text h1 invisible. Split into isDark branches: dark mode
keeps the hard-light blob effect, light mode renders soft pastel
blobs on rgb(248,247,255).

Made-with: Cursor
---
 components/design-scaffolds/marketing.tsx | 30 ++++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/components/design-scaffolds/marketing.tsx b/components/design-scaffolds/marketing.tsx
index d1e96ff..86db585 100644
--- a/components/design-scaffolds/marketing.tsx
+++ b/components/design-scaffolds/marketing.tsx
@@ -515,16 +515,28 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
   const border= isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.1)";
 
   const BgLayer = () => {
-    if (bgStyle === "gradient") return (
-      <div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: "rgb(8,0,20)" }}>
-        <div style={{ position: "absolute", inset: 0, filter: "blur(55px)", mixBlendMode: "hard-light" }}>
-          <div style={{ position: "absolute", width: "70%", height: "70%", top: "5%", left: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(18,113,255,0.85) 0%, transparent 65%)`, animation: "ace-blob1 22s ease infinite" }} />
-          <div style={{ position: "absolute", width: "65%", height: "65%", top: "-10%", left: "-5%", borderRadius: "50%", background: `radial-gradient(circle, ${p}cc 0%, transparent 65%)`, animation: "ace-blob2 18s reverse infinite" }} />
-          <div style={{ position: "absolute", width: "55%", height: "55%", bottom: "10%", right: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(100,220,255,0.7) 0%, transparent 65%)`, animation: "ace-blob3 28s linear infinite" }} />
-          <div style={{ position: "absolute", width: "50%", height: "50%", bottom: "-10%", left: "30%", borderRadius: "50%", background: `radial-gradient(circle, rgba(200,50,50,0.65) 0%, transparent 65%)`, animation: "ace-blob4 24s ease infinite" }} />
+    if (bgStyle === "gradient") {
+      if (!isDark) return (
+        <div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: "rgb(248,247,255)" }}>
+          <div style={{ position: "absolute", inset: 0, filter: "blur(70px)", opacity: 0.55 }}>
+            <div style={{ position: "absolute", width: "70%", height: "70%", top: "5%", left: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(196,181,253,0.7) 0%, transparent 65%)`, animation: "ace-blob1 22s ease infinite" }} />
+            <div style={{ position: "absolute", width: "65%", height: "65%", top: "-10%", left: "-5%", borderRadius: "50%", background: `radial-gradient(circle, rgba(147,197,253,0.6) 0%, transparent 65%)`, animation: "ace-blob2 18s reverse infinite" }} />
+            <div style={{ position: "absolute", width: "55%", height: "55%", bottom: "10%", right: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(216,180,254,0.5) 0%, transparent 65%)`, animation: "ace-blob3 28s linear infinite" }} />
+            <div style={{ position: "absolute", width: "50%", height: "50%", bottom: "-10%", left: "30%", borderRadius: "50%", background: `radial-gradient(circle, ${p}40 0%, transparent 65%)`, animation: "ace-blob4 24s ease infinite" }} />
+          </div>
         </div>
-      </div>
-    );
+      );
+      return (
+        <div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: "rgb(8,0,20)" }}>
+          <div style={{ position: "absolute", inset: 0, filter: "blur(55px)", mixBlendMode: "hard-light" }}>
+            <div style={{ position: "absolute", width: "70%", height: "70%", top: "5%", left: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(18,113,255,0.85) 0%, transparent 65%)`, animation: "ace-blob1 22s ease infinite" }} />
+            <div style={{ position: "absolute", width: "65%", height: "65%", top: "-10%", left: "-5%", borderRadius: "50%", background: `radial-gradient(circle, ${p}cc 0%, transparent 65%)`, animation: "ace-blob2 18s reverse infinite" }} />
+            <div style={{ position: "absolute", width: "55%", height: "55%", bottom: "10%", right: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(100,220,255,0.7) 0%, transparent 65%)`, animation: "ace-blob3 28s linear infinite" }} />
+            <div style={{ position: "absolute", width: "50%", height: "50%", bottom: "-10%", left: "30%", borderRadius: "50%", background: `radial-gradient(circle, rgba(200,50,50,0.65) 0%, transparent 65%)`, animation: "ace-blob4 24s ease infinite" }} />
+          </div>
+        </div>
+      );
+    }
     if (bgStyle === "shader") return (
       <div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0 }}>
         <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, #7c3aed 0%, #db2777 35%, #ea580c 65%, #ca8a04 100%)", opacity: 0.92 }} />