Merge version_5 into main

Update src/app/page.tsx
2026-05-13 15:14:20 +00:00 · 2026-05-13 15:14:17 +00:00 · 2026-05-13 15:13:51 +00:00 · 2026-05-13 15:13:47 +00:00 · 2026-05-13 15:13:47 +00:00 · 2026-05-13 15:06:17 +00:00
2 changed files with 63 additions and 106 deletions
--- a/src/app/page.tsx
+++ b/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" },
@@ -49,162 +50,118 @@ export default function LandingPage() {
      title="Crafting Legends, One Cut at a Time."
      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: "https://img.b2bpic.net/free-photo/handsome-barber-cutting-hair-customer-barbershop_158538-4205.jpg?_wi=1", imageAlt: "Barber cutting hair" },
-        { 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", imageAlt: "Barber shaving client" },
-        { name: "Chris B.", handle: "@chrisb", testimonial: "Super professional staff and great atmosphere.", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=1", imageAlt: "Barbershop interior" },
-        { name: "David L.", handle: "@dl4life", testimonial: "Finally found my permanent barber spot.", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/barber-tools-table_23-2148298338.jpg", imageAlt: "Barber tools" },
-        { name: "Alex P.", handle: "@alexp", testimonial: "Exceptional attention to detail. Highly recommend.", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/barber-trimming-beard_23-2147778835.jpg?_wi=1", imageAlt: "Barber trimming beard" }
+        { 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="https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=2"
-      avatars={[
-        { src: "https://img.b2bpic.net/free-photo/handsome-barber-cutting-hair-customer-barbershop_158538-4205.jpg", alt: "Barber cutting hair" },
-        { src: "https://img.b2bpic.net/free-photo/barber-using-razor-on-client_23-2148181892.jpg", alt: "Barber shaving client" },
-        { src: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg", alt: "Barbershop interior" },
-        { src: "https://img.b2bpic.net/free-photo/barber-tools-table_23-2148298338.jpg", alt: "Barber tools" },
-        { src: "https://img.b2bpic.net/free-photo/barber-trimming-beard_23-2147778835.jpg", alt: "Barber trimming beard" }
-      ]}
-      avatarText="Join 5,000+ satisfied clients"
      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: "https://img.b2bpic.net/free-photo/handsome-barber-cutting-hair-customer-barbershop_158538-4205.jpg?_wi=2", buttonIcon: Scissors },
-        { 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", buttonIcon: Zap },
-        { 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", buttonIcon: Star },
-        { 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", 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: "R450", imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=4" },
-        { id: "p2", name: "Beard Oil", price: "R320", imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=5" },
-        { id: "p3", name: "Barber Scissors", price: "R450", imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=6" },
-        { id: "p4", name: "Aftershave Balm", price: "R400", imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=7" },
-        { id: "p5", name: "Shaving Brush", price: "R450", imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=8" },
-        { id: "p6", name: "Styling Clay", price: "R400", imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=9" }
+      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: "R350", subtitle: "Precision Cut", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Consultation", "Haircut", "Style"] },
-        { id: "pro", badge: "Most Popular", price: "R450", subtitle: "Legends Experience", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Haircut & Shave", "Beard Trim", "Hot Towel", "Premium Products"] },
-        { id: "premium", badge: "VIP", price: "R450", 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: "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", 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", imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=10" }
-      ]}
      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: "https://img.b2bpic.net/free-photo/handsome-barber-cutting-hair-customer-barbershop_158538-4205.jpg?_wi=4" },
-        { id: "t2", name: "Ethan M.", role: "Consultant", company: "BizLab", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/barber-using-razor-on-client_23-2148181892.jpg?_wi=4" },
-        { id: "t3", name: "Noah J.", role: "Designer", company: "CreativeStudio", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=11" }
-      ]}
-      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 in Alberton"
      title="Book Your Appointment"
-      description="Ready for a legendary transformation? Visit us today in Alberton, South Africa."
+      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"
-      mediaAnimation="slide-up"
    />
  </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>
--- a/src/app/styles/variables.css
+++ b/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);
Author	SHA1	Message	Date
bender	52fa1276da	Merge version_5 into main Merge version_5 into main	2026-05-13 15:14:20 +00:00
bender	e44ef2e909	Update src/app/page.tsx	2026-05-13 15:14:17 +00:00
bender	d5c3598f56	Merge version_5 into main Merge version_5 into main	2026-05-13 15:13:51 +00:00
bender	cce6b77872	Update src/app/styles/variables.css	2026-05-13 15:13:47 +00:00
bender	cc75955874	Update src/app/page.tsx	2026-05-13 15:13:47 +00:00
bender	0d492e252e	Merge version_4 into main Merge version_4 into main	2026-05-13 15:06:17 +00:00
bender	5e5faa8e01	Merge version_4 into main Merge version_4 into main	2026-05-13 15:05:50 +00:00