src/app/page.tsx

@@ -18,14 +18,14 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="small"
         sizing="largeSmall"
-        background="fluid"
-        cardStyle="glass-depth"
+        background="none"
+        cardStyle="solid"
         primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="glass"
+        secondaryButtonStyle="solid"
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+  <div id="nav" data-section="nav" className="bg-black">
       <NavbarLayoutFloatingOverlay
       navItems={[
         { name: "Home", id: "hero" },
@@ -38,7 +38,7 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="hero" data-section="hero">
+  <div id="hero" data-section="hero" className="bg-black">
       <HeroOverlayTestimonial
       title="SLIM AUTO MECHANIC"
       description="Precision performance for the modern machine. Where cinematic quality meets automotive mastery."
@@ -50,10 +50,11 @@ export default function LandingPage() {
       buttons={[{ text: "Book Now", href: "#contact" }]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CinHjzkjK8sS0HdPYd5H9FsiVA/uploaded-1776877328300-0rd8wza3.png?_wi=2"
       imageAlt="Luxury car service studio"
+      containerClassName="bg-black"
     />
   </div>
 
-  <div id="services" data-section="services">
+  <div id="services" data-section="services" className="bg-black">
       <FeatureBento
       animationType="blur-reveal"
       textboxLayout="default"
@@ -65,34 +66,38 @@ export default function LandingPage() {
       ]}
       title="OUR SERVICES"
       description="Excellence in every mechanical detail."
+      containerClassName="bg-black"
     />
   </div>
 
-  <div id="about" data-section="about">
+  <div id="about" data-section="about" className="bg-black">
       <TextSplitAbout
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="PASSION. SKILL. DEDICATION."
       description={["We believe in preserving the engineering excellence of your vehicle. Our studio delivers bespoke care for automotive enthusiasts."]}
+      className="bg-black"
     />
   </div>
 
-  <div id="tagline" data-section="tagline">
+  <div id="tagline" data-section="tagline" className="bg-black">
       <ContactText
       useInvertedBackground={true}
-      background={{ variant: "gradient-bars" }}
+      background={{ variant: "plain" }}
       text="LUXURY AUTOMOTIVE PERFORMANCE."
+      containerClassName="bg-black"
     />
   </div>
 
-  <div id="contact" data-section="contact">
+  <div id="contact" data-section="contact" className="bg-black">
       <ContactText
-      useInvertedBackground={false}
-      background={{ variant: "canvas-reveal" }}
+      useInvertedBackground={true}
+      background={{ variant: "plain" }}
       text="BOOK YOUR APPOINTMENT. 1234 Luxe Drive, Los Angeles, CA. Mon-Fri 9am-6pm."
+      containerClassName="bg-black"
     />
   </div>
 
-  <div id="footer" data-section="footer">
+  <div id="footer" data-section="footer" className="bg-black">
       <FooterLogoEmphasis
       columns={[
         { items: [{ label: "Diagnostics" }, { label: "Engine Repair" }] },
@@ -100,6 +105,7 @@ export default function LandingPage() {
         { items: [{ label: "Los Angeles, CA" }, { label: "(555) 123-4567" }] },
       ]}
       logoText="SLIM"
+      className="bg-black"
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #000000;
-  --card: #121212;
+  --card: #000000;
   --foreground: #ffffff;
-  --primary-cta: #C9A34E;
+  --primary-cta: #ffffff;
   --primary-cta-text: #000000;
-  --secondary-cta: #1A1A1A;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;
-  --accent: #C9A34E;
-  --background-accent: #1A1A1A;
+  --accent: #333333;
+  --background-accent: #1a1a1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);