Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -61,7 +61,8 @@ export default function LandingPage() {
             icon={Heart}
             imageSrc="http://img.b2bpic.net/free-photo/team-doctors-standing-row_107420-84773.jpg"
             mediaAnimation="blur-reveal"
-            useInvertedBackground={false}
+            useInvertedBackground={true}
+            className="bg-zinc-950 text-white"
           />
         </div>
 
@@ -77,6 +78,7 @@ export default function LandingPage() {
             title="Our Collective Impact"
             description="Building a robust network of volunteers to meet critical medical demands."
             useInvertedBackground={true}
+            className="bg-zinc-950 text-white"
           />
         </div>
 
@@ -101,6 +103,7 @@ export default function LandingPage() {
             description="Three simple steps to make your contribution count."
             textboxLayout="inline-image"
             useInvertedBackground={true}
+            className="bg-zinc-950 text-white"
           />
         </div>
 
@@ -115,7 +118,8 @@ export default function LandingPage() {
               { id: "t1", name: "Sarah M.", handle: "@sarahdonate", testimonial: "The app made it incredibly easy to schedule my donation. I feel proud to be part of this community.", rating: 5 },
               { id: "t2", name: "James T.", handle: "@jdonations", testimonial: "Immediate notification saved me hours. Highly recommend to anyone wanting to contribute.", rating: 5 },
             ]}
-            useInvertedBackground={false}
+            useInvertedBackground={true}
+            className="bg-zinc-950 text-white"
           />
         </div>
 
@@ -130,6 +134,7 @@ export default function LandingPage() {
             sideDescription="Common queries addressed for our donors."
             faqsAnimation="slide-up"
             useInvertedBackground={true}
+            className="bg-zinc-950 text-white"
           />
         </div>
 
@@ -140,7 +145,8 @@ export default function LandingPage() {
             description="Join the largest volunteer network today."
             buttons={[{ text: "Register Now", href: "#" }]}
             background={{ variant: "sparkles-gradient" }}
-            useInvertedBackground={false}
+            useInvertedBackground={true}
+            className="bg-zinc-950 text-white"
           />
         </div>
 

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #09090b;
-  --card: #1a1a1a;
+  --card: #18181b;
-  --foreground: #fff5f5e6;
+  --foreground: #f4f4f5;
-  --primary-cta: #ff7a7a;
+  --primary-cta: #be123c;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #450a0a;
   --secondary-cta-text: #fff5f5e6;
-  --accent: #737373;
+  --accent: #e11d48;
-  --background-accent: #737373;
+  --background-accent: #1f0309;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);