Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -2,18 +2,18 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TeamCardOne from '@/components/sections/team/TeamCardOne';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import { Award, Scissors, Users, Zap, Star } from "lucide-react";
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import { Scissors, Zap, Star, Award } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -34,6 +34,7 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
         { name: "Services", id: "features" },
         { name: "Pricing", id: "pricing" },
         { name: "Contact", id: "contact" },
@@ -47,166 +48,120 @@ export default function LandingPage() {
       useInvertedBackground={true}
       background={{ variant: "gradient-bars" }}
       title="Crafting Legends, One Cut at a Time."
-      description="Welcome to Legends Barbershop, where traditional technique meets modern precision. Experience the ultimate grooming experience tailored to your style."
+      description="Welcome to Legends Barbershop in Alberton, South Africa, where traditional technique meets modern precision. Experience the ultimate grooming experience tailored to your style."
       testimonials={[
-        { name: "James R.", handle: "@jr_style", testimonial: "Best haircut I've had in years. Legends never misses.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg?_wi=1", imageAlt: "barber shop interior vintage style" },
-        { name: "Mike T.", handle: "@miket", testimonial: "The classic shave experience here is unmatched.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4205.jpg?_wi=1", imageAlt: "barber shop interior vintage style" },
-        { name: "Chris B.", handle: "@chrisb", testimonial: "Super professional staff and great atmosphere.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/using-towel-beard-aged-male-barbershop_23-2148181892.jpg?_wi=1", imageAlt: "barber shop interior vintage style" },
-        { name: "David L.", handle: "@dl4life", testimonial: "Finally found my permanent barber spot.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/high-angle-items-spa-therapy_23-2148290933.jpg?_wi=1", imageAlt: "barber shop interior vintage style" },
-        { name: "Alex P.", handle: "@alexp", testimonial: "Exceptional attention to detail. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-trimming-moustache-client_23-2147778835.jpg?_wi=1", imageAlt: "barber shop interior vintage style" }
+        { name: "James R.", handle: "@jr_style", testimonial: "Best haircut I've had in years. Legends never misses.", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/handsome-barber-cutting-hair-customer-barbershop_158538-4205.jpg?_wi=1" },
+        { name: "Mike T.", handle: "@miket", testimonial: "The classic shave experience here is unmatched.", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/barber-using-razor-on-client_23-2148181892.jpg?_wi=1" }
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg?_wi=2"
-      avatars={[
-        { src: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506339.jpg", alt: "Front view of baber shop chiar" },
-        { src: "http://img.b2bpic.net/free-photo/barbershop-washbasin-with-professional-chairs_23-2148298338.jpg", alt: "Barbershop washbasin with professional chairs" },
-        { src: "http://img.b2bpic.net/free-photo/close-up-expensive-barber-shop-chair_23-2148256916.jpg", alt: "Close-up expensive barber shop chair" },
-        { src: "http://img.b2bpic.net/free-photo/comfortable-old-fashioned-chair-rustic-antique-elegance-indoors-generated-by-ai_188544-29043.jpg", alt: "Comfortable old fashioned chair" },
-        { src: "http://img.b2bpic.net/free-photo/barber-man-apron-holding-scissors-comb-making-stop-gesture-with-hands-standing-orange-background_141793-67572.jpg", alt: "Barber man in apron" }
-      ]}
-      avatarText="Join 5,000+ satisfied clients"
+      imageSrc="https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=2"
       marqueeItems={[
         { type: "text", text: "PRECISION CUTS" },
         { type: "text", text: "TRADITIONAL SHAVES" },
-        { type: "text", text: "MODERN GROOMING" },
-        { type: "text", text: "PREMIUM CARE" },
         { type: "text", text: "LEGENDARY SERVICE" }
       ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <AboutMetric
+      <TextSplitAbout
       useInvertedBackground={false}
       title="Our Legacy"
-      metrics={[
-        { icon: Award, label: "Years Experience", value: "15+" },
-        { icon: Users, label: "Happy Clients", value: "5000+" },
-        { icon: Scissors, label: "Expert Barbers", value: "8" }
-      ]}
-      metricsAnimation="slide-up"
+      description={["Established over 15 years ago, we bring together traditional barbering artistry with the modern standards of grooming excellence.", "Our mission is to provide an unmatched experience for every gentleman who steps into our shop."]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwentySix
+      <FeatureCardSix
       textboxLayout="default"
       useInvertedBackground={true}
-      features={[
-        { title: "Precision Cuts", description: "Classic and modern styles customized to your hair texture.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4205.jpg?_wi=2", buttonIcon: Scissors },
-        { title: "Classic Shaves", description: "Hot towel treatment and traditional straight razor shave.", imageSrc: "http://img.b2bpic.net/free-photo/using-towel-beard-aged-male-barbershop_23-2148181892.jpg?_wi=2", buttonIcon: Zap },
-        { title: "Premium Products", description: "High-quality pomades, oils, and balms for home maintenance.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-items-spa-therapy_23-2148290933.jpg?_wi=2", buttonIcon: Star },
-        { title: "Beard Sculpting", description: "Professional beard shape-up and grooming for refined looks.", imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-trimming-moustache-client_23-2147778835.jpg?_wi=2", buttonIcon: Award }
-      ]}
       title="Mastery in Every Service"
       description="We specialize in precision grooming for the modern gentleman."
-    />
-  </div>
-
-  <div id="products" data-section="products">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
-      products={[
-        { id: "p1", name: "Signature Pomade", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/impressed-slavic-middle-aged-male-barber-uniform-holding-water-spray-bottle-isolated-orange-wall_141793-82847.jpg" },
-        { id: "p2", name: "Beard Oil", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-bottle-oils-with-pipette_23-2148317664.jpg" },
-        { id: "p3", name: "Barber Scissors", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/set-razors-table_23-2147736987.jpg" },
-        { id: "p4", name: "Aftershave Balm", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-his-face-care-routine_23-2149288066.jpg" },
-        { id: "p5", name: "Shaving Brush", price: "$30", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-shaving-objects_23-2148121997.jpg" },
-        { id: "p6", name: "Styling Clay", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/containers-with-cosmetics_23-2147803536.jpg" }
+      features={[
+        { title: "Precision Cuts", description: "Classic and modern styles customized to your hair texture.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-barber-cutting-hair-customer-barbershop_158538-4205.jpg?_wi=2" },
+        { title: "Classic Shaves", description: "Hot towel treatment and traditional straight razor shave.", imageSrc: "https://img.b2bpic.net/free-photo/barber-using-razor-on-client_23-2148181892.jpg?_wi=2" },
+        { title: "Premium Products", description: "High-quality pomades, oils, and balms for home maintenance.", imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=3" },
+        { title: "Beard Sculpting", description: "Professional beard shape-up and grooming for refined looks.", imageSrc: "https://img.b2bpic.net/free-photo/barber-trimming-beard_23-2147778835.jpg?_wi=2" }
       ]}
-      title="Shop Our Essentials"
-      description="Professional products curated by our experts."
     />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardEight
+      <PricingCardTwo
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
-      plans={[
-        { id: "basic", badge: "Essential", price: "$35", subtitle: "Precision Cut", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Consultation", "Haircut", "Style"] },
-        { id: "pro", badge: "Most Popular", price: "$55", subtitle: "Legends Experience", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Haircut & Shave", "Beard Trim", "Hot Towel", "Premium Products"] },
-        { id: "premium", badge: "VIP", price: "$75", subtitle: "Ultimate Grooming", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Full Grooming", "Scalp Massage", "Face Treatment", "Priority Booking"] }
-      ]}
       title="Transparent Pricing"
       description="Choose the service that fits your needs."
+      plans={[
+        { id: "basic", badge: "Essential", price: "R350", subtitle: "Precision Cut", buttons: [{ text: "Book Now" }], features: ["Haircut", "Style"] },
+        { id: "pro", badge: "Most Popular", price: "R450", subtitle: "Legends Experience", buttons: [{ text: "Book Now" }], features: ["Haircut & Shave", "Beard Trim", "Hot Towel"] }
+      ]}
     />
   </div>
 
   <div id="team" data-section="team">
-      <TeamCardOne
+      <TeamCardTwo
       animationType="slide-up"
-      textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
+      textboxLayout="default"
       useInvertedBackground={false}
-      members={[
-        { id: "m1", name: "Marcus V.", role: "Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-caucasian-male-barber-wearing-glasses-wavy-hair-band-uniform-holding-hair-clippers-isolated-crimson-background-with-copy-space_141793-31955.jpg" },
-        { id: "m2", name: "Daniel S.", role: "Senior Stylist", imageSrc: "http://img.b2bpic.net/free-photo/client-barber-greeting-each-other-barbershop_23-2148181951.jpg" },
-        { id: "m3", name: "Leo C.", role: "Barber Expert", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg" }
-      ]}
       title="Our Experts"
       description="Meet the artisans behind the chair."
+      members={[
+        { id: "m1", name: "Marcus V.", role: "Master Barber", description: "Leading our shop with 15 years of experience.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-barber-cutting-hair-customer-barbershop_158538-4205.jpg?_wi=3" },
+        { id: "m2", name: "Daniel S.", role: "Senior Stylist", description: "Specialist in modern fades and styling.", imageSrc: "https://img.b2bpic.net/free-photo/barber-using-razor-on-client_23-2148181892.jpg?_wi=3" },
+        { id: "m3", name: "Leo C.", role: "Barber Expert", description: "Classic shave and beard grooming expert.", imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=10" }
+      ]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
+      <TestimonialCardSix
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
-      testimonials={[
-        { id: "t1", name: "Liam K.", role: "Architect", company: "DesignCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/expressive-middle-aged-woman-posing_344912-2831.jpg" },
-        { id: "t2", name: "Ethan M.", role: "Consultant", company: "BizLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-half-his-face-wearing-different-clothes_23-2148784403.jpg" },
-        { id: "t3", name: "Noah J.", role: "Designer", company: "CreativeStudio", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-male-sitting-chair_329181-1673.jpg" },
-        { id: "t4", name: "Mason T.", role: "Executive", company: "CorpGroup", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-sunbathed-fashion-man-model-wearing-white-shirt-clothes-posing-street_158538-2385.jpg" },
-        { id: "t5", name: "Lucas P.", role: "Tech Lead", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg" }
-      ]}
-      kpiItems={[
-        { value: "4.9/5", label: "Avg Rating" },
-        { value: "100+", label: "Daily Clients" },
-        { value: "10k+", label: "Cuts Per Year" }
-      ]}
       title="Hear From Our Legends"
       description="Join our community of satisfied clients."
+      testimonials={[
+        { id: "t1", name: "Liam K.", handle: "@architect", testimonial: "Perfect cut every single time.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-barber-cutting-hair-customer-barbershop_158538-4205.jpg?_wi=4" },
+        { id: "t2", name: "Ethan M.", handle: "@consultant", testimonial: "Highly professional atmosphere.", imageSrc: "https://img.b2bpic.net/free-photo/barber-using-razor-on-client_23-2148181892.jpg?_wi=4" }
+      ]}
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqSplitMedia
       useInvertedBackground={false}
-      faqs={[
-        { id: "f1", title: "Do I need an appointment?", content: "We recommend booking ahead to guarantee your preferred time, but walk-ins are welcome if space is available." },
-        { id: "f2", title: "What payment methods are accepted?", content: "We accept all major credit cards, digital wallets, and cash." },
-        { id: "f3", title: "Is parking available?", content: "Yes, complimentary parking is available behind the shop for all our clients." }
-      ]}
-      sideTitle="Questions?"
-      sideDescription="We've got you covered."
       faqsAnimation="slide-up"
+      textboxLayout="default"
+      title="Questions?"
+      description="We've got you covered with everything you need to know."
+      faqs={[
+        { id: "f1", title: "Do I need an appointment?", content: "We recommend booking ahead." },
+        { id: "f2", title: "Is parking available?", content: "Yes, complimentary parking behind the shop." }
+      ]}
+      imageSrc="https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=12"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
+      <ContactSplitForm
       useInvertedBackground={true}
-      background={{ variant: "plain" }}
-      tag="Visit Us"
       title="Book Your Appointment"
-      description="Ready for a legendary transformation? Contact us today."
-      imageSrc="http://img.b2bpic.net/free-photo/young-man-barber-s-shop-getting-his-beard-trimmed_23-2149186493.jpg"
-      mediaAnimation="slide-up"
+      description="Ready for a legendary transformation? Fill out the form below."
+      inputs={[
+          { name: "name", type: "text", placeholder: "Full Name" },
+          { name: "email", type: "email", placeholder: "Email Address" }
+      ]}
+      imageSrc="https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=12"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        { items: [{ label: "Services", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Location", href: "#contact" }] },
-        { items: [{ label: "About", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
-      ]}
+      <FooterLogoReveal
       logoText="LEGENDS"
+      leftLink={{ text: "Privacy Policy", href: "#" }}
+      rightLink={{ text: "Terms of Service", href: "#" }}
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
+  --background: #ffffff;
+  --card: #f0f0f0;
+  --foreground: #000000;
+  --primary-cta: #000000;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);