Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -18,161 +18,97 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="small"
         sizing="largeSmall"
-        background="fluid"
-        cardStyle="inset"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="glass"
+        background="none"
+        cardStyle="solid"
+        primaryButtonStyle="primary-glow"
+        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"},
-        {
-          name: "Services",          id: "services"},
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Home", id: "hero" },
+        { name: "Services", id: "services" },
+        { name: "About", id: "about" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="SLIM"
-      button={{
-        text: "Book Appointment",        href: "#contact"}}
+      button={{ text: "Book Appointment", href: "#contact" }}
     />
   </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."
       testimonials={[
-        {
-          name: "Marcus A.",          handle: "@autoenthusiast",          testimonial: "Exceptional precision and care. The best in Los Angeles.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-modern-car-outdoors_23-2148510599.jpg?_wi=1",          imageAlt: "luxury sports car dark studio"},
-        {
-          name: "Sarah J.",          handle: "@luxe_driver",          testimonial: "My sports car has never performed better. Truly high-end service.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-vector/medical-hand-drawn-icons-set-infographics_1057-11320.jpg",          imageAlt: "luxury sports car dark studio"},
-        {
-          name: "Robert B.",          handle: "@carcollector",          testimonial: "The attention to detail here is unmatched.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/settings-sign-front-side_187299-39541.jpg",          imageAlt: "luxury sports car dark studio"},
-        {
-          name: "Elena K.",          handle: "@bmw_owner",          testimonial: "Professional, reliable, and premium results.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/competition-upset-company-computer-graphic-technology_1134-1099.jpg",          imageAlt: "luxury sports car dark studio"},
-        {
-          name: "David W.",          handle: "@themechanicguy",          testimonial: "The gold standard for automotive maintenance.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/rag-doll-with-spanner_1160-499.jpg",          imageAlt: "luxury sports car dark studio"},
+        { name: "Marcus A.", handle: "@autoenthusiast", testimonial: "Exceptional precision and care. The best in Los Angeles.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CinHjzkjK8sS0HdPYd5H9FsiVA/uploaded-1776877328300-0rd8wza3.png?_wi=1" },
+        { name: "Sarah J.", handle: "@luxe_driver", testimonial: "My sports car has never performed better. Truly high-end service.", rating: 5 },
+        { name: "Robert B.", handle: "@carcollector", testimonial: "The attention to detail here is unmatched.", rating: 5 },
       ]}
-      buttons={[
-        {
-          text: "Book Now",          href: "#contact"},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/front-view-modern-car-outdoors_23-2148510599.jpg?_wi=2"
-      imageAlt="Luxury black sports car in dark studio"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/monochromatic-urban-minimal-landscape_23-2151012335.jpg",          alt: "Portrait of car enthusiast"},
-        {
-          src: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001285.jpg",          alt: "Portrait of luxury driver"},
-        {
-          src: "http://img.b2bpic.net/free-photo/stylish-headlight-dark-automobile_23-2147963045.jpg",          alt: "Portrait of car collector"},
-        {
-          src: "http://img.b2bpic.net/free-photo/back-black-car-with-red-rear-light_23-2147963062.jpg",          alt: "Portrait of sports car owner"},
-        {
-          src: "http://img.b2bpic.net/free-photo/mechanic-with-tool-wheel-hands-mechanic-blue-work-clothes_1157-46150.jpg",          alt: "Portrait of regular client"},
-      ]}
-      avatarText="Trusted by over 500+ luxury vehicle owners"
+      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"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       features={[
-        {
-          title: "Diagnostics",          description: "State-of-the-art computer diagnostic scanning.",          bentoComponent: "reveal-icon",          icon: Settings,
-        },
-        {
-          title: "Engine Repair",          description: "Expert engine reconstruction and optimization.",          bentoComponent: "reveal-icon",          icon: Wrench,
-        },
-        {
-          title: "Brakes",          description: "Premium braking system performance service.",          bentoComponent: "reveal-icon",          icon: Gauge,
-        },
-        {
-          title: "Maintenance",          description: "Comprehensive scheduled maintenance programs.",          bentoComponent: "reveal-icon",          icon: Settings,
-        },
+        { title: "Diagnostics", description: "Advanced computer diagnostics for luxury platforms.", bentoComponent: "reveal-icon", icon: Settings },
+        { title: "Engine Repair", description: "Expert engine reconstruction and performance tuning.", bentoComponent: "reveal-icon", icon: Wrench },
+        { title: "Precision Brakes", description: "High-performance braking system maintenance.", bentoComponent: "reveal-icon", icon: Gauge },
       ]}
       title="OUR SERVICES"
-      description="Experience superior automotive care with our professional, precision-focused 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={true}
       title="PASSION. SKILL. DEDICATION."
-      description={[
-        "We are car enthusiasts providing elite service with transparent, premium care. Quality is our baseline."]}
-      buttons={[
-        {
-          text: "Learn More",          href: "#"},
-      ]}
+      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: "plain"}}
-      text="PRECISION. PERFORMANCE. PERFECTION. EXCELLENCE IN EVERY DETAIL."
+      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",              href: "#"},
-            {
-              label: "Engine Repair",              href: "#"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "About",              href: "#"},
-            {
-              label: "Contact",              href: "#"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Los Angeles, CA",              href: "#"},
-            {
-              label: "(555) 123-4567",              href: "#"},
-          ],
-        },
+        { items: [{ label: "Diagnostics" }, { label: "Engine Repair" }] },
+        { items: [{ label: "About" }, { label: "Contact" }] },
+        { items: [{ label: "Los Angeles, CA" }, { label: "(555) 123-4567" }] },
       ]}
       logoText="SLIM"
+      className="bg-black"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

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);