Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
@@ -40,19 +40,17 @@ export default function AstanaDetailingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard
-          logoText="Astana Detailing"
-          description="Premier automotive detailing service delivering showroom-quality finishes. Expert care for your vehicle's appearance, protection, and preservation."
+        <HeroOverlay
+          title="Showroom-Quality Finishes for Your Prized Vehicles"
+          description="Expert automotive detailing service delivering exceptional protection and preservation. From luxury vehicles to collector cars, we provide the meticulous care your vehicle deserves."
           buttons={[
             { text: "Book Service", href: "#contact" },
             { text: "View Gallery", href: "#services" }
           ]}
           buttonAnimation="slide-up"
-          background={{ variant: "sparkles-gradient" }}
           imageSrc="http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22321.jpg?_wi=1"
           imageAlt="Premium car detailing showcase"
-          mediaAnimation="blur-reveal"
-          frameStyle="card"
+          showDimOverlay={true}
         />
       </div>
 
@@ -279,4 +277,4 @@ export default function AstanaDetailingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
-  --card: #ffffff;
-  --foreground: #0c1325;
-  --primary-cta: #0798ff;
+  --background: #000000;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #131136;
   --secondary-cta-text: #0c1325;
-  --accent: #93c7ff;
-  --background-accent: #a8cde8;
+  --accent: #44358a;
+  --background-accent: #b597fe;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);