Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -2,13 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 
 export default function LandingPage() {
   return (
@@ -19,236 +19,104 @@ export default function LandingPage() {
         contentWidth="compact"
         sizing="largeSmallSizeMediumTitles"
         background="blurBottom"
-        cardStyle="glass-depth"
+        cardStyle="glass-elevated"
         primaryButtonStyle="radial-glow"
         secondaryButtonStyle="solid"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Reviews",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Wicked Clipper"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Features", id: "features" },
+              { name: "Pricing", id: "pricing" },
+              { name: "Reviews", id: "testimonials" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="Wicked Clipper"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardRotatedCarousel
-      background={{
-        variant: "rotated-rays-static",
-      }}
-      title="Precision Grooming Redefined"
-      description="Experience top-tier grooming services tailored to your style. Expert care, classic techniques, and modern precision."
-      buttons={[
-        {
-          text: "Book Appointment",
-          href: "#contact",
-        },
-      ]}
-      carouselItems={[
-        {
-          id: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg",
-          imageAlt: "Barbershop interior",
-        },
-        {
-          id: "2",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-asmr-recording_23-2149313884.jpg",
-          imageAlt: "Barber tools",
-        },
-        {
-          id: "3",
-          imageSrc: "http://img.b2bpic.net/free-photo/content-client-hairdresser-salon_23-2147769866.jpg",
-          imageAlt: "Satisfied client",
-        },
-        {
-          id: "4",
-          imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167448.jpg",
-          imageAlt: "Barbershop interior",
-        },
-        {
-          id: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-getting-haircut_23-2148506230.jpg",
-          imageAlt: "Precision styling",
-        },
-        {
-          id: "6",
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-zero-waste-concept_23-2148591668.jpg",
-          imageAlt: "Grooming kit",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardRotatedCarousel
+            background={{ variant: "rotated-rays-static" }}
+            title="Precision Grooming Redefined"
+            description="Experience top-tier grooming services tailored to your style. Expert care, classic techniques, and modern precision."
+            buttons={[{ text: "Book Appointment", href: "#contact" }]}
+            carouselItems={[
+              { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg?_wi=1", imageAlt: "Barbershop interior" },
+              { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/close-up-asmr-recording_23-2149313884.jpg", imageAlt: "Barber tools" },
+              { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/content-client-hairdresser-salon_23-2147769866.jpg", imageAlt: "Satisfied client" },
+              { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167448.jpg?_wi=1", imageAlt: "Barbershop interior" },
+              { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-getting-haircut_23-2148506230.jpg?_wi=1", imageAlt: "Precision styling" },
+              { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-zero-waste-concept_23-2148591668.jpg", imageAlt: "Grooming kit" },
+            ]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentyEight
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "f1",
-          title: "Expert Styling",
-          subtitle: "Trained professionals",
-          category: "Service",
-          value: "Elite",
-        },
-        {
-          id: "f2",
-          title: "Modern Tools",
-          subtitle: "Precision equipment",
-          category: "Tech",
-          value: "Top",
-        },
-        {
-          id: "f3",
-          title: "Classic Vibe",
-          subtitle: "Traditional atmosphere",
-          category: "Experience",
-          value: "Best",
-        },
-      ]}
-      title="Why Choose Wicked Clipper"
-      description="Our services blend tradition with cutting-edge styling."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardThree
+            title="Why Choose Wicked Clipper"
+            description="Our services blend tradition with cutting-edge styling."
+            gridVariant="bento-grid"
+            animationType="blur-reveal"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { title: "Expert Styling", description: "Trained professionals delivering excellence.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167448.jpg?_wi=2" },
+              { title: "Modern Tools", description: "Precision equipment for refined results.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-getting-haircut_23-2148506230.jpg?_wi=2" },
+              { title: "Classic Vibe", description: "Traditional atmosphere meeting contemporary needs.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg?_wi=2" },
+            ]}
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      plans={[
-        {
-          id: "p1",
-          badge: "Basic",
-          price: "$30",
-          subtitle: "Standard Cut & Trim",
-          features: [
-            "Haircut",
-            "Neck trim",
-          ],
-        },
-        {
-          id: "p2",
-          badge: "Premium",
-          price: "$50",
-          subtitle: "Full Grooming Experience",
-          features: [
-            "Haircut",
-            "Beard trim",
-            "Hot towel",
-          ],
-        },
-        {
-          id: "p3",
-          badge: "Elite",
-          price: "$80",
-          subtitle: "The Ultimate Refinement",
-          features: [
-            "Full service",
-            "Scalp treatment",
-            "Facial massage",
-          ],
-        },
-      ]}
-      title="Grooming Packages"
-      description="Simple pricing for superior results."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardEight
+            title="Grooming Packages"
+            description="Simple pricing for superior results."
+            animationType="blur-reveal"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            plans={[
+              { id: "p1", badge: "Basic", price: "$30", subtitle: "Standard Cut & Trim", buttons: [{ text: "Select" }], features: ["Haircut", "Neck trim"] },
+              { id: "p2", badge: "Premium", price: "$50", subtitle: "Full Grooming Experience", buttons: [{ text: "Select" }], features: ["Haircut", "Beard trim", "Hot towel"] },
+              { id: "p3", badge: "Elite", price: "$80", subtitle: "The Ultimate Refinement", buttons: [{ text: "Select" }], features: ["Full service", "Scalp treatment", "Facial massage"] },
+            ]}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "John Doe",
-          role: "Architect",
-          testimonial: "The best haircut I've had in years. Professional and clean.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cuddling-pet_1098-14675.jpg",
-        },
-        {
-          id: "t2",
-          name: "Jane Smith",
-          role: "Designer",
-          testimonial: "I love the vibe here. Always on point with trends.",
-          imageSrc: "http://img.b2bpic.net/free-photo/barber-giving-high-five-client_23-2147737095.jpg",
-        },
-        {
-          id: "t3",
-          name: "Bob Miller",
-          role: "Tech Lead",
-          testimonial: "Consistent, clean, and fast. Wicked Clipper is my go-to.",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-young-man-wearing-jacket-checkered-shirt-looking-camera-studio_613910-21142.jpg",
-        },
-        {
-          id: "t4",
-          name: "Sam Wilson",
-          role: "Chef",
-          testimonial: "Great service, relaxed atmosphere. Always leave happy.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-doctor-checking-dog_23-2149271818.jpg",
-        },
-        {
-          id: "t5",
-          name: "Mike Ross",
-          role: "Lawyer",
-          testimonial: "Top quality precision. Highly recommend for any business look.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-hair-salon-looking-sideways_23-2148242781.jpg",
-        },
-      ]}
-      title="Trusted by Locals"
-      description="See why our clients choose Wicked Clipper."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardFifteen
+            testimonial="The best haircut I've had in years. Professional and clean."
+            rating={5}
+            author="John Doe"
+            ratingAnimation="blur-reveal"
+            avatarsAnimation="blur-reveal"
+            useInvertedBackground={false}
+            avatars={[{ src: "http://img.b2bpic.net/free-photo/cuddling-pet_1098-14675.jpg", alt: "John Doe" }]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={true}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="Booking"
-      title="Ready for your next cut?"
-      description="Get in touch or book online today."
-      buttons={[
-        {
-          text: "Book Appointment",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            tag="Booking"
+            title="Ready for your next cut?"
+            description="Get in touch or book online today."
+            background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
+            imageSrc="http://img.b2bpic.net/free-photo/barber-giving-high-five-client_23-2147737095.jpg"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="Wicked Clipper"
-      copyrightText="© 2025 Wicked Clipper. All rights reserved."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            logoText="Wicked Clipper"
+            columns={[{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Privacy", href: "#" }] }]}
+            copyrightText="© 2025 Wicked Clipper. All rights reserved."
+            imageSrc="http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg?_wi=3"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -12,11 +12,11 @@
 
   --background: #ffffff;
   --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
+  --foreground: #000f06e6;
+  --primary-cta: #0a7039;
   --primary-cta-text: #ffffff;
   --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000612e6;
+  --secondary-cta-text: #000f06e6;
   --accent: #e2e2e2;
   --background-accent: #c4c4c4;