Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -7,10 +7,8 @@ import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TeamCardOne from '@/components/sections/team/TeamCardOne';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import { Award, CheckCircle, Heart } from "lucide-react";
 
@@ -32,26 +30,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Team",
-          id: "team",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Book Now",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Book Now", id: "contact" },
+        { name: "Services", id: "services" },
+        { name: "Gallery", id: "gallery" },
+        { name: "Testimonials", id: "testimonials" },
       ]}
       brandName="Diamonds & Pearls"
     />
@@ -59,67 +42,35 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardScroll
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       title="Where Luxury Meets Confidence"
       description="Expert colour, flawless extensions, and a salon experience that makes you feel truly seen."
-      buttons={[
-        {
-          text: "Book Your Appointment",
-          href: "#contact",
-        },
-        {
-          text: "View Transformations",
-          href: "#gallery",
-        },
-      ]}
+      buttons={[{ text: "Book Your Appointment", href: "#contact" }, { text: "View Transformations", href: "#gallery" }]}
       imageSrc="http://img.b2bpic.net/free-photo/view-child-hair-salon_23-2150462479.jpg"
       imageAlt="Luxury salon transformation"
     />
   </div>
 
+  <div id="contact" data-section="contact">
+      <ContactSplit
+      useInvertedBackground={true}
+      background={{ variant: "sparkles-gradient" }}
+      tag="Ready to Transform?"
+      title="Book Your Appointment"
+      description="Love your hair again. Limited spots available this week."
+      imageSrc="http://img.b2bpic.net/free-photo/artist-creating-alternative-bedroom-pop-music_23-2149736739.jpg"
+    />
+  </div>
+
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardTwo
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={true}
       testimonials={[
-        {
-          id: "1",
-          name: "Sarah J.",
-          role: "Client",
-          testimonial: "Matched my extensions perfectly — I was so happy.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-young-woman-posing-studio-photo_1301-6999.jpg",
-        },
-        {
-          id: "2",
-          name: "Michael C.",
-          role: "Client",
-          testimonial: "The staff went above and beyond — so friendly and supportive.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trendy-hairstyle_23-2149478912.jpg",
-        },
-        {
-          id: "3",
-          name: "Emily R.",
-          role: "Client",
-          testimonial: "My hair looked absolutely stunning — thank you!",
-          imageSrc: "http://img.b2bpic.net/free-photo/hairstyling-smiling-young-woman-demonstrating-hairstyling-tips_259150-60121.jpg",
-        },
-        {
-          id: "4",
-          name: "David K.",
-          role: "Client",
-          testimonial: "After everything I’ve been through, they made me feel like me again.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-female-hairdresser-apron-with-brush-comb-stuck-her-hair-light_141793-58786.jpg",
-        },
-        {
-          id: "5",
-          name: "Jane D.",
-          role: "Client",
-          testimonial: "An incredible experience. Felt so cared for.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-girl-dark-sweater-standing-near-lamps_114579-81884.jpg",
-        },
+        { id: "1", name: "Sarah J.", role: "Client", testimonial: "Matched my extensions perfectly — I was so happy." },
+        { id: "2", name: "Michael C.", role: "Client", testimonial: "The staff went above and beyond — so friendly and supportive." },
+        { id: "3", name: "Emily R.", role: "Client", testimonial: "My hair looked absolutely stunning — thank you!" },
       ]}
       title="Client Stories"
       description="Hear how we've helped restore confidence and create stunning looks."
@@ -131,21 +82,9 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="More Than Hair — It’s How You Feel When You Leave"
       metrics={[
-        {
-          icon: Award,
-          label: "Transformation Stories",
-          value: "500+",
-        },
-        {
-          icon: Heart,
-          label: "Personal Consultations",
-          value: "100%",
-        },
-        {
-          icon: CheckCircle,
-          label: "Client Retention",
-          value: "95%",
-        },
+        { icon: Award, label: "Transformation Stories", value: "500+" },
+        { icon: Heart, label: "Personal Consultations", value: "100%" },
+        { icon: CheckCircle, label: "Client Retention", value: "95%" },
       ]}
       metricsAnimation="slide-up"
     />
@@ -157,169 +96,28 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       features={[
-        {
-          id: "s1",
-          title: "Colour & Correction",
-          author: "Expert Precision",
-          description: "Expert tone matching and custom colour transformations to suit your style.",
-          tags: [
-            "Balayage",
-            "Highlights",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-calm-happy-pretty-woman-with-bright-evening-makeup-wearing-summer-yellow-dress-sea-shell-necklace_343596-3827.jpg",
-        },
-        {
-          id: "s2",
-          title: "Hair Extensions",
-          author: "Seamless Blending",
-          description: "Premium quality extensions for volume, length, and flawless blending.",
-          tags: [
-            "Extensions",
-            "Volume",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/view-textured-fur-fabric_23-2149600309.jpg",
-        },
-        {
-          id: "s3",
-          title: "Restorative Care",
-          author: "Regrowth Experts",
-          description: "Confidence-building treatments focused on hair health and wellness.",
-          tags: [
-            "Restore",
-            "Confidence",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-doing-client-s-make-up_23-2149190635.jpg",
-        },
+        { id: "s1", title: "Colour & Correction", author: "Expert Precision", description: "Expert tone matching and custom colour transformations to suit your style.", tags: ["Balayage", "Highlights"], imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-calm-happy-pretty-woman-with-bright-evening-makeup-wearing-summer-yellow-dress-sea-shell-necklace_343596-3827.jpg" },
+        { id: "s2", title: "Hair Extensions", author: "Seamless Blending", description: "Premium quality extensions for volume, length, and flawless blending.", tags: ["Extensions", "Volume"], imageSrc: "http://img.b2bpic.net/free-photo/view-textured-fur-fabric_23-2149600309.jpg" },
       ]}
       title="Signature Services"
       description="Premium treatments tailored to your unique hair journey."
     />
   </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "Expert",
-          title: "Precision Matching",
-          description: "Consistency you can trust.",
-          icon: CheckCircle,
-        },
-        {
-          id: "m2",
-          value: "Caring",
-          title: "Supportive Team",
-          description: "Welcoming and attentive.",
-          icon: Heart,
-        },
-        {
-          id: "m3",
-          value: "Real",
-          title: "Transformational Results",
-          description: "Confidence in every service.",
-          icon: Award,
-        },
-      ]}
-      title="Why Choose Us?"
-      description="Our differentiators in the hair studio industry."
-    />
-  </div>
-
   <div id="gallery" data-section="gallery">
-      <ProductCardOne
+      <ProductCardTwo
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
+      gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={true}
       products={[
-        {
-          id: "p1",
-          name: "Transformation 1",
-          price: "Styling",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-female-friends-posing_273609-7274.jpg",
-        },
-        {
-          id: "p2",
-          name: "Transformation 2",
-          price: "Colour",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-model-sport-bra-blowing-her-hairs-two-sides_114579-21763.jpg",
-        },
-        {
-          id: "p3",
-          name: "Transformation 3",
-          price: "Style",
-          imageSrc: "http://img.b2bpic.net/free-photo/panoramic-view-young-women-touching-their-head_23-2147890650.jpg",
-        },
-        {
-          id: "p4",
-          name: "Transformation 4",
-          price: "Correction",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg",
-        },
-        {
-          id: "p5",
-          name: "Transformation 5",
-          price: "Event",
-          imageSrc: "http://img.b2bpic.net/free-photo/girl-africa-woman-making-eyebrows-girls-beauty-salon_1157-48328.jpg",
-        },
-        {
-          id: "p6",
-          name: "Transformation 6",
-          price: "Complete",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-womwn-wearing-trendy-hairstyle_23-2149478913.jpg",
-        },
+        { id: "t1", brand: "Transformation", name: "Before & After 01", price: "Luxury Blonde", rating: 5, reviewCount: "100", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-female-friends-posing_273609-7274.jpg" },
+        { id: "t2", brand: "Transformation", name: "Before & After 02", price: "Colour Correction", rating: 5, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/female-model-sport-bra-blowing-her-hairs-two-sides_114579-21763.jpg" },
+        { id: "t3", brand: "Transformation", name: "Before & After 03", price: "Seamless Volume", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/panoramic-view-young-women-touching-their-head_23-2147890650.jpg" },
+        { id: "t4", brand: "Transformation", name: "Before & After 04", price: "Signature Style", rating: 5, reviewCount: "90", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg" },
       ]}
-      title="Transformation Gallery"
-      description="Browse our latest transformations and signature looks."
-    />
-  </div>
-
-  <div id="team" data-section="team">
-      <TeamCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      members={[
-        {
-          id: "t1",
-          name: "Masie",
-          role: "Colour Specialist",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-hairdresser-apron-holding-hair-comb-spray-bottle-looking-front-with-serious-face-standing-green-wall_141793-71788.jpg",
-        },
-        {
-          id: "t2",
-          name: "Chloe",
-          role: "Extensions Expert",
-          imageSrc: "http://img.b2bpic.net/free-photo/merry-young-adult-enjoying-christmas-conversation-video-call-room-decorated-festivity-celebration-talking-woman-preparing-drink-wine-kitchen-with-joyful-ornaments_482257-28400.jpg",
-        },
-        {
-          id: "t3",
-          name: "Sarah",
-          role: "Styling Pro",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-black-suit-playing-with-her-hair-while-talking-phone_114579-14175.jpg",
-        },
-      ]}
-      title="Meet Your Stylists"
-      description="The dedicated team behind your new look."
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Ready to Transform?"
-      title="Book Your Appointment"
-      description="Love your hair again. Limited spots available this week."
-      imageSrc="http://img.b2bpic.net/free-photo/artist-creating-alternative-bedroom-pop-music_23-2149736739.jpg"
+      title="Hair Transformation Gallery"
+      description="Real results from our happy clients."
     />
   </div>
 
@@ -327,45 +125,8 @@ export default function LandingPage() {
       <FooterBaseReveal
       logoText="Diamonds & Pearls"
       columns={[
-        {
-          title: "Studio",
-          items: [
-            {
-              label: "Services",
-              href: "#services",
-            },
-            {
-              label: "Team",
-              href: "#team",
-            },
-          ],
-        },
-        {
-          title: "Connect",
-          items: [
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "Facebook",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Booking Policy",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Studio", items: [{ label: "Services", href: "#services" }, { label: "Team", href: "#team" }] },
+        { title: "Connect", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] },
       ]}
     />
   </div>