Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -3,36 +3,36 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FeatureBento from '@/components/sections/feature/FeatureBento';
+import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
+import HeroPersonalLinks from '@/components/sections/hero/HeroPersonalLinks';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import MediaAbout from '@/components/sections/about/MediaAbout';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
-import TextAbout from '@/components/sections/about/TextAbout';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import { Droplets, Zap } from "lucide-react";
+import { Droplets, Zap, ShieldCheck, Smile } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
-        defaultTextAnimation="background-highlight"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
+        borderRadius="soft"
         contentWidth="medium"
-        sizing="largeSizeMediumTitles"
+        sizing="mediumLargeSizeMediumTitles"
-        background="noise"
+        background="none"
-        cardStyle="gradient-bordered"
+        cardStyle="outline"
         primaryButtonStyle="flat"
-        secondaryButtonStyle="layered"
+        secondaryButtonStyle="glass"
-        headingFontWeight="semibold"
+        headingFontWeight="medium"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleCentered
+      <NavbarStyleApple
       navItems={[
         { name: "Home", id: "hero" },
         { name: "About", id: "about" },
-        { name: "Services", id: "features" },
+        { name: "Features", id: "features" },
         { name: "Pricing", id: "pricing" },
         { name: "Contact", id: "contact" },
       ]}
@@ -41,98 +41,87 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardRotatedCarousel
+      <HeroPersonalLinks
-      background={{ variant: "rotated-rays-static-grid" }}
+      background={{ variant: "plain" }}
-      title="Sparkling Clean. Every Single Time."
+      title="Self Service Excellence"
-      description="Experience premium self-service car wash facilities designed to get your vehicle shining like new. Fast, effective, and always available."
+      linkCards={[
-      buttons={[{ text: "Visit Us", href: "#contact" }]}
+        { title: "High Pressure Wash", description: "Powerful cleaning action for road grime.", button: { text: "Start Wash" }, icon: Zap },
-      carouselItems={[
+        { title: "Spot-Free Rinse", description: "Flawless shine with purified water.", button: { text: "Start Wash" }, icon: Droplets },
-        { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/man-washing-his-car-washing-station_1157-27219.jpg", imageAlt: "self service car wash bay" },
+        { title: "Vehicle Protection", description: "Premium wax for lasting finish.", button: { text: "Start Wash" }, icon: ShieldCheck },
-        { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/bubbles-marine-water_23-2147798195.jpg", imageAlt: "car foam washing suds" },
-        { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/man-washing-car-using-shampoo-water_1150-6984.jpg", imageAlt: "high pressure water spray car" },
-        { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/driver-washing-his-car-by-sponge-with-soap-solution_651396-3234.jpg", imageAlt: "car wash brush cleaning" },
-        { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/close-up-bubbles-splashing-water_23-2147798199.jpg", imageAlt: "car wash bay interior lighting" },
-        { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/south-asian-man-indian-male-washing-his-white-transportation-car-wash_627829-5021.jpg", imageAlt: "happy driver washing car" },
       ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextAbout
+      <MediaAbout
-      useInvertedBackground={true}
+      useInvertedBackground={false}
-      title="Built for Convenience and Quality"
+      title="Designed for Perfection"
-      buttons={[{ text: "Learn More" }]}
+      description="Sun City Self Service Wash provides top-tier facilities for the discerning owner. We combine high-quality soap solutions with advanced pressurized cleaning equipment to deliver professional results in minutes."
+      imageSrc="http://img.b2bpic.net/free-photo/man-washing-his-car-washing-station_1157-27219.jpg"
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureBento
+      <FeatureCardSixteen
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
-      features={[
+      title="Why Choose Us?"
-        { title: "High-Pressure Wash", description: "Powerful cleaning action to remove road grime and dirt instantly.", bentoComponent: "reveal-icon", icon: Zap },
+      description="Experience the difference of a well-maintained facility."
-        { title: "Foaming Brush", description: "Deep cleaning suds to gently scrub away stubborn surface debris.", bentoComponent: "reveal-icon", icon: Droplets },
+      positiveCard={{ items: ["24/7 Accessibility", "High-Quality Soap", "Powerful Pressure", "Clean Bays"] }}
-        { title: "Spot-Free Rinse", description: "High-purity water filtration for a flawless, shiny finish every time.", bentoComponent: "reveal-icon", icon: Droplets },
+      negativeCard={{ items: ["No Long Queues", "No Harsh Chemicals", "No Hidden Costs"] }}
-      ]}
-      title="Our Professional Services"
-      description="We offer a wide range of cleaning options to ensure your vehicle gets the care it deserves, using top-tier equipment."
     />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardEight
+      <PricingCardFive
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
-      useInvertedBackground={true}
+      useInvertedBackground={false}
+      title="Simple Pricing"
+      description="Choose the plan that fits your vehicle needs."
       plans={[
-        { id: "basic", badge: "Basic", price: "$5", subtitle: "Essential Wash", features: ["Quick Rinse", "Foam Brush", "High-Pressure Wash"], buttons: [{ text: "Select Plan" }] },
+        { id: "1", tag: "Standard", price: "$5", period: "per wash", description: "Basic cleaning for busy days.", button: { text: "Buy Now" }, featuresTitle: "Everything included:", features: ["Pressure Wash", "Foam Brush", "Rinse"] },
-        { id: "standard", badge: "Standard", price: "$10", subtitle: "Complete Clean", features: ["All Basic Features", "Wax Treatment", "Tire Clean"], buttons: [{ text: "Select Plan" }] },
+        { id: "2", tag: "Advanced", price: "$10", period: "per wash", description: "Complete care package.", button: { text: "Buy Now" }, featuresTitle: "Includes standard plus:", features: ["Wax Treatment", "Tire Polish", "Undercarriage Spray"] },
-        { id: "premium", badge: "Premium", price: "$15", subtitle: "Total Detail", features: ["All Standard Features", "Spot-Free Rinse", "Undercarriage Wash"], buttons: [{ text: "Select Plan" }] },
       ]}
-      title="Affordable Wash Options"
-      description="Flexible pricing tailored to your cleaning needs."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
+      <TestimonialCardThirteen
+      showRating={true}
+      animationType="blur-reveal"
+      textboxLayout="default"
       useInvertedBackground={false}
-      cardTag="Reviews"
+      title="Customer Feedback"
+      description="See why our community trusts us."
       testimonials={[
-        { id: "1", name: "John Doe", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-woman-wearing-casual-sweater-standing-red-background-pointing-fingers-camera-with-happy-funny-face-good-energy-vibes_839833-6469.jpg" },
+        { id: "1", name: "Alex P.", handle: "@alexwash", testimonial: "The cleanest bay in the city. Always a great result.", rating: 5, icon: Smile },
-        { id: "2", name: "Jane Smith", imageSrc: "http://img.b2bpic.net/free-photo/young-blond-girl-happy-expression_1194-4509.jpg" },
+        { id: "2", name: "Jordan W.", handle: "@jordan_car", testimonial: "The wax treatment is incredible. Shine lasts for weeks!", rating: 5, icon: Smile },
-        { id: "3", name: "Mike Brown", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-hugging-car_1303-15118.jpg" },
-        { id: "4", name: "Sarah Davis", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-making-ok-sign_1368-6336.jpg" },
-        { id: "5", name: "Chris Wilson", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-posing_23-2148920100.jpg" },
       ]}
-      cardTitle="Loved by Our Community"
-      cardAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplitForm
-      useInvertedBackground={true}
+        title="Contact Us"
-      title="Visit Us Today"
+        description="We are here to answer your questions and provide support for our facilities."
-      description="Have questions about our facilities? Reach out to us."
+        inputs={[{ name: "name", type: "text", placeholder: "Full Name" }, { name: "email", type: "email", placeholder: "Email Address" }]}
-      inputs={[
+        textarea={{ name: "message", placeholder: "How can we help?" }}
-        { name: "name", type: "text", placeholder: "Your Name", required: true },
+        imageSrc="http://img.b2bpic.net/free-photo/car-wash-station_1157-27220.jpg"
-        { name: "email", type: "email", placeholder: "Your Email", required: true },
+        useInvertedBackground={false}
-      ]}
+      />
-      textarea={{ name: "message", placeholder: "Your Message", rows: 4, required: true }}
-      imageSrc="http://img.b2bpic.net/free-photo/man-washing-his-car-washing-station_1157-27217.jpg"
-    />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBaseReveal
-      logoText="Sun City Wash"
+        logoText="Sun City Wash"
-      columns={[
+        columns={[
-        { title: "Quick Links", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
+          { title: "Services", items: [{ label: "Wash Bays", href: "#" }, { label: "Detailing Supplies", href: "#" }] },
-        { title: "Contact", items: [{ label: "Support", href: "#contact" }, { label: "Locations", href: "#" }] },
+          { title: "Company", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
-      ]}
+        ]}
-    />
+        copyrightText="© 2024 Sun City Wash"
+      />
   </div>
       </ReactLenis>
     </ThemeProvider>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4f0;
+  --background: #ffffff;
-  --card: #ffffff;
+  --card: #f8f9fa;
-  --foreground: #1a1a1a;
+  --foreground: #000612;
-  --primary-cta: #2c2c2c;
+  --primary-cta: #15479c;
   --primary-cta-text: #f5f4f0;
-  --secondary-cta: #f5f4f0;
+  --secondary-cta: #eff6ff;
   --secondary-cta-text: #1a1a1a;
-  --accent: #8a8a8a;
+  --accent: #dbeafe;
-  --background-accent: #e8e6e1;
+  --background-accent: #f1f5f9;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);