Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
@@ -23,7 +23,7 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="mediumLarge"
         sizing="largeSmallSizeMediumTitles"
-        background="aurora"
+        background="floatingGradient"
         cardStyle="subtle-shadow"
         primaryButtonStyle="diagonal-gradient"
         secondaryButtonStyle="radial-glow"
@@ -54,7 +54,7 @@ export default function LandingPage() {
   </div>
 
   <div id="home" data-section="home">
-      <HeroSplitDualMedia
+      <HeroSplitDoubleCarousel
       background={{
         variant: "plain"}}
       title="Experience the Shine, Delivered to Your Door."
@@ -66,15 +66,22 @@ export default function LandingPage() {
         {
           text: "See Services",          href: "#services"},
       ]}
-      mediaItems={[
+      leftCarouselItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/bubbles-waving-water_23-2147798197.jpg",          imageAlt: "Professional car washing process"},
+          imageSrc: "http://img.b2bpic.net/free-photo/bubbles-foam-water_23-2147798197.jpg",          imageAlt: "Bubbles and foam during car wash"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-hoovering-car-cabin-garage_1157-36597.jpg",          imageAlt: "Interior car detailing"},
+          imageSrc: "http://img.b2bpic.net/free-photo/car-detailing-close-up-green_23-2147798206.jpg",          imageAlt: "Close-up of car detailing with green tint"},
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/clean-car-interior-green-light_23-2147798209.jpg",          imageAlt: "Clean car interior with green light"},
+      ]}
+      rightCarouselItems={[
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/clean-shiny-car-detailing_23-2147798203.jpg",          imageAlt: "Shiny clean car exterior"},
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/water-droplets-on-car_23-2147798207.jpg",          imageAlt: "Water droplets on a clean car surface"},
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/car-wash-foam-soap_23-2147798208.jpg",          imageAlt: "Car wash with rich foam and soap"},
       ]}
-      mediaAnimation="slide-up"
-      rating={5}
-      ratingText="Based on 28+ reviews"
     />
   </div>
 
@@ -124,14 +131,14 @@ export default function LandingPage() {
       useInvertedBackground={true}
       metrics={[
         {
-          id: "customers",          value: "2500+",          title: "Satisfied Customers",          description: "Our community trusts us for a flawless shine every time.",          icon: Users,
+          id: "customers",          value: "2500+",          title: "Satisfied Customers",          description: "Our community trusts us for a flawless shine every time.",          icon: Users
         },
         {
-          id: "experience",          value: "5+",          title: "Years of Expertise",          description: "Delivering professional car care with a passion for perfection.",          icon: Award,
+          id: "experience",          value: "5+",          title: "Years of Expertise",          description: "Delivering professional car care with a passion for perfection.",          icon: Award
         },
         {
-          id: "rating",          value: "5.0",          title: "Star Rating",          description: "Consistently earning top reviews for quality and service.",          icon: Star,
-        },
+          id: "rating",          value: "5.0",          title: "Star Rating",          description: "Consistently earning top reviews for quality and service.",          icon: Star
+        }
       ]}
       title="Why Choose BuildSHINE Carwash Mobile?"
       description="Our commitment to quality, convenience, and customer satisfaction sets us apart as Miami's premier mobile detailing service."
@@ -148,29 +155,29 @@ export default function LandingPage() {
           id: "basic-exterior",          badge: "Popular",          badgeIcon: Sparkles,
           price: "$49",          subtitle: "Perfect for a quick refresh",          buttons: [
             {
-              text: "Book Basic Wash",              href: "#contact"},
+              text: "Book Basic Wash",              href: "#contact"}
           ],
           features: [
-            "Exterior Hand Wash",            "Tire Shine & Rim Cleaning",            "Window Cleaning (Exterior)"],
+            "Exterior Hand Wash",            "Tire Shine & Rim Cleaning",            "Window Cleaning (Exterior)"]
         },
         {
           id: "full-interior",          badge: "Best Value",          badgeIcon: Star,
           price: "$89",          subtitle: "Deep clean for your cabin",          buttons: [
             {
-              text: "Book Interior Detail",              href: "#contact"},
+              text: "Book Interior Detail",              href: "#contact"}
           ],
           features: [
-            "Thorough Interior Vacuum",            "Surface Wipe Down & Protectant",            "Window Cleaning (Interior & Exterior)",            "Odor Neutralizer"],
+            "Thorough Interior Vacuum",            "Surface Wipe Down & Protectant",            "Window Cleaning (Interior & Exterior)",            "Odor Neutralizer"]
         },
         {
           id: "ultimate-shine",          badge: "Premium",          badgeIcon: Crown,
           price: "$129",          subtitle: "Full luxury detailing experience",          buttons: [
             {
-              text: "Book Ultimate Shine",              href: "#contact"},
+              text: "Book Ultimate Shine",              href: "#contact"}
           ],
           features: [
-            "Signature Exterior Wash",            "Premium Interior Detail",            "Leather Conditioning",            "Headlight Restoration (Light)"],
-        },
+            "Signature Exterior Wash",            "Premium Interior Detail",            "Leather Conditioning",            "Headlight Restoration (Light)"]
+        }
       ]}
       title="Our Flexible Detailing Packages"
       description="Choose the perfect wash and detail for your vehicle, delivered right to your location with convenience and professionalism."
@@ -185,22 +192,22 @@ export default function LandingPage() {
       testimonials={[
         {
           id: "1",          name: "Joshua Mendel",          handle: "@JoshuaM",          testimonial: "Had an amazing experience with Gonzalo. Great detail and fair pricing. I was golfing at the Biltmore, and I left my car to be detailed while I golfed, he took pictures along the way, and left my car in the shade when I was finished!",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-choosimng-car-car-showroom_1303-26306.jpg",          imageAlt: "Joshua Mendel"},
+          imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-in-white-shirt_23-2148197940.jpg",          imageAlt: "Joshua Mendel"},
         {
           id: "2",          name: "G Qubbe",          handle: "@GQubbe",          testimonial: "Excellent work, a luxury detail... super versatile on any type of vehicle, reliable and with good prices. I can't lose more, thanks Shine Carwash Mobile.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-holding-umbrella-while-taking-selfie_107420-12270.jpg",          imageAlt: "G Qubbe"},
+          imageSrc: "http://img.b2bpic.net/free-photo/young-man-wearing-glasses_23-2148197941.jpg",          imageAlt: "G Qubbe"},
         {
           id: "3",          name: "Virginia Ansaldi",          handle: "@VirginiaA",          testimonial: "Gonzalo and his crew were so easy to schedule a car cleaning with and so efficient! They have everything they need, you don’t even have to supply water or power! I have 3 little kids so you can imagine the state of my car. These guys did a very thorough job and it looks great.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/mother-son-looking-map_23-2148938681.jpg",          imageAlt: "Virginia Ansaldi"},
+          imageSrc: "http://img.b2bpic.net/free-photo/confident-young-woman-with-glasses_23-2148197942.jpg",          imageAlt: "Virginia Ansaldi"},
         {
           id: "4",          name: "Michael S.",          handle: "@MichaelS",          testimonial: "BuildSHINE transformed my car! The convenience of them coming to my office was fantastic, and the results speak for themselves. Highly recommend for anyone in Miami.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-groomed-man-is-washing-his-own-car-car-washing-station_613910-21477.jpg",          imageAlt: "Michael S."},
+          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman_23-2148197943.jpg",          imageAlt: "Michael S."},
         {
           id: "5",          name: "Sarah L.",          handle: "@SarahL",          testimonial: "Prompt, professional, and my car looks brand new every time. As a busy parent, this service is a lifesaver. Thank you, BuildSHINE!",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-polish-salon-car-garage_1157-36594.jpg",          imageAlt: "Sarah L."},
+          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-in-formal-wear_23-2148197944.jpg",          imageAlt: "Sarah L."},
         {
           id: "6",          name: "Carlos R.",          handle: "@CarlosR",          testimonial: "The best mobile car wash in Miami, hands down. The attention to detail is incredible, and the team is always friendly and efficient. My go-to for all my detailing needs.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-gray-sweater-wipes-car-car-wash_1157-35958.jpg",          imageAlt: "Carlos R."},
+          imageSrc: "http://img.b2bpic.net/free-photo/man-with-crossed-arms_23-2148197945.jpg",          imageAlt: "Carlos R."},
       ]}
       showRating={true}
       title="What Our Valued Customers Say"
@@ -266,7 +273,7 @@ export default function LandingPage() {
               label: "Interior Detail",              href: "#services"},
             {
               label: "Full Detailing",              href: "#services"},
-          ],
+          ]
         },
         {
           title: "Company",          items: [
@@ -276,7 +283,7 @@ export default function LandingPage() {
               label: "Testimonials",              href: "#testimonials"},
             {
               label: "FAQs",              href: "#faq"},
-          ],
+          ]
         },
         {
           title: "Contact",          items: [
@@ -286,8 +293,8 @@ export default function LandingPage() {
               label: "Phone: (786) 854-7637",              href: "tel:7868547637"},
             {
               label: "Email: info@buildshine.com",              href: "mailto:info@buildshine.com"},
-          ],
-        },
+          ]
+        }
       ]}
       copyrightText="© 2024 BuildSHINE Carwash Mobile. All rights reserved."
     />
@@ -295,4 +302,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000f06e6;
-  --primary-cta: #0a7039;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000f06e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background: #fffefe;
+  --card: #f6f7f4;
+  --foreground: #080908;
+  --primary-cta: #0e3a29;
+  --primary-cta-text: #fffefe;
+  --secondary-cta: #e7eecd;
+  --secondary-cta-text: #080908;
+  --accent: #35c18b;
+  --background-accent: #ecebe4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);