Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -32,21 +32,13 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Home",
-          id: "#hero",
-        },
+          name: "Home",          id: "#hero"},
         {
-          name: "About",
-          id: "#about",
-        },
+          name: "About",          id: "#about"},
         {
-          name: "Services",
-          id: "#services",
-        },
+          name: "Services",          id: "#services"},
         {
-          name: "Contact",
-          id: "#contact",
-        },
+          name: "Contact",          id: "#contact"},
       ]}
       brandName="2g Coiffure"
     />
@@ -55,23 +47,21 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroSplitKpi
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       title="Excellence in Hair Design at Ermont"
       description="Experience professional care and personalized styles at 2g Coiffure. Your trusted partner for modern hair transformations."
+      buttons={[
+        {
+          text: "Book Appointment",          href: "#contact"
+        }
+      ]}
       kpis={[
         {
-          value: "148+",
-          label: "Verified Reviews",
-        },
+          value: "148+",          label: "Verified Reviews"},
         {
-          value: "4.9",
-          label: "Customer Rating",
-        },
+          value: "4.9",          label: "Customer Rating"},
         {
-          value: "20+",
-          label: "Years Experience",
-        },
+          value: "20+",          label: "Years Experience"},
       ]}
       enableKpiAnimation={true}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3or7iz"
@@ -79,48 +69,28 @@ export default function LandingPage() {
       imageAlt="hair salon interior professional"
       avatars={[
         {
-          src: "asset://h-av1",
-          alt: "Client 1",
-        },
+          src: "asset://h-av1",          alt: "Client 1"},
         {
-          src: "asset://h-av2",
-          alt: "Client 2",
-        },
+          src: "asset://h-av2",          alt: "Client 2"},
         {
-          src: "asset://h-av3",
-          alt: "Client 3",
-        },
+          src: "asset://h-av3",          alt: "Client 3"},
         {
-          src: "asset://h-av4",
-          alt: "Client 4",
-        },
+          src: "asset://h-av4",          alt: "Client 4"},
         {
-          src: "asset://h-av5",
-          alt: "Client 5",
-        },
+          src: "asset://h-av5",          alt: "Client 5"},
       ]}
       avatarText="Join 500+ happy clients"
       marqueeItems={[
         {
-          type: "text",
-          text: "Precision Cuts",
-        },
+          type: "text",          text: "Precision Cuts"},
         {
-          type: "text",
-          text: "Organic Coloring",
-        },
+          type: "text",          text: "Organic Coloring"},
         {
-          type: "text",
-          text: "Barber Services",
-        },
+          type: "text",          text: "Barber Services"},
         {
-          type: "text",
-          text: "Hair Spa",
-        },
+          type: "text",          text: "Hair Spa"},
         {
-          type: "text",
-          text: "Styling",
-        },
+          type: "text",          text: "Styling"},
       ]}
     />
   </div>
@@ -132,19 +102,13 @@ export default function LandingPage() {
       metrics={[
         {
           icon: Scissors,
-          label: "Expert Cuts",
-          value: "Precision",
-        },
+          label: "Expert Cuts",          value: "Precision"},
         {
           icon: Sparkles,
-          label: "Professional Color",
-          value: "Premium",
-        },
+          label: "Professional Color",          value: "Premium"},
         {
           icon: Users,
-          label: "Client Focus",
-          value: "Personalized",
-        },
+          label: "Client Focus",          value: "Personalized"},
       ]}
       metricsAnimation="slide-up"
     />
@@ -153,33 +117,26 @@ export default function LandingPage() {
   <div id="services" data-section="services">
       <FeatureCardTwentySeven
       animationType="slide-up"
-      textboxLayout="split"
+      textboxLayout="split-actions"
       useInvertedBackground={true}
       features={[
         {
-          id: "f1",
-          title: "Precision Cuts",
-          descriptions: [
-            "Expert cutting techniques for all hair types.",
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2l1mvz",
-        },
+          id: "f1",          title: "Precision Cuts",          descriptions: [
+            "Achieve a sculpted look that complements your facial structure with our high-precision cutting services."],
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2l1mvz"},
         {
-          id: "f2",
-          title: "Expert Coloring",
-          descriptions: [
-            "Custom color matching and advanced dyeing.",
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y1obwm",
-        },
+          id: "f2",          title: "Expert Coloring",          descriptions: [
+            "Enhance your natural radiance with vibrant, long-lasting color tailored specifically to your skin tone."],
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y1obwm"},
         {
-          id: "f3",
-          title: "Grooming",
-          descriptions: [
-            "Detailed styling for men and women.",
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qa1y0n",
-        },
+          id: "f3",          title: "Grooming",          descriptions: [
+            "Enjoy a refreshed appearance with professional styling and grooming for a polished, confident finish."],
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qa1y0n"},
+      ]}
+      buttons={[
+        {
+          text: "Book Appointment",          href: "#contact"
+        }
       ]}
       title="Our Professional Services"
       description="We offer a wide range of services to cater to your specific hair needs."
@@ -193,40 +150,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
-          name: "Sarah",
-          handle: "@sarah",
-          testimonial: "Excellent service and very professional staff.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5lxkka",
-        },
+          id: "1",          name: "Sarah",          handle: "@sarah",          testimonial: "Excellent service and very professional staff.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5lxkka"},
         {
-          id: "2",
-          name: "Michael",
-          handle: "@mike",
-          testimonial: "The best haircut in Ermont. Very welcoming.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ksshe9",
-        },
+          id: "2",          name: "Michael",          handle: "@mike",          testimonial: "The best haircut in Ermont. Very welcoming.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ksshe9"},
         {
-          id: "3",
-          name: "Julie",
-          handle: "@julie",
-          testimonial: "Superb attention to detail, highly recommended.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bg5rcc",
-        },
+          id: "3",          name: "Julie",          handle: "@julie",          testimonial: "Superb attention to detail, highly recommended.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bg5rcc"},
         {
-          id: "4",
-          name: "Thomas",
-          handle: "@thomas",
-          testimonial: "Friendly team and great atmosphere.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gi980f",
-        },
+          id: "4",          name: "Thomas",          handle: "@thomas",          testimonial: "Friendly team and great atmosphere.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gi980f"},
         {
-          id: "5",
-          name: "Claire",
-          handle: "@claire",
-          testimonial: "Always perfect results, consistently great quality.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4mpu6f",
-        },
+          id: "5",          name: "Claire",          handle: "@claire",          testimonial: "Always perfect results, consistently great quality.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4mpu6f"},
       ]}
       title="What Our Clients Say"
       description="Read about experiences from our satisfied customers."
@@ -238,20 +170,11 @@ export default function LandingPage() {
       useInvertedBackground={true}
       faqs={[
         {
-          id: "q1",
-          title: "Where are you located?",
-          content: "7 Rue du 18 Juin, 95120 Ermont, France",
-        },
+          id: "q1",          title: "Where are you located?",          content: "7 Rue du 18 Juin, 95120 Ermont, France"},
         {
-          id: "q2",
-          title: "What are your hours?",
-          content: "Opens at 9 AM.",
-        },
+          id: "q2",          title: "What are your hours?",          content: "Opens at 9 AM."},
         {
-          id: "q3",
-          title: "How can I book?",
-          content: "Call us at +33 1 34 14 30 00.",
-        },
+          id: "q3",          title: "How can I book?",          content: "Call us at +33 1 34 14 30 00."},
       ]}
       sideTitle="Common Questions"
       faqsAnimation="slide-up"
@@ -265,26 +188,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "m1",
-          value: "148+",
-          title: "Reviews",
-          description: "Happy clients.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j6s3jq",
-        },
+          id: "m1",          value: "148+",          title: "Reviews",          description: "Happy clients.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j6s3jq"},
         {
-          id: "m2",
-          value: "4.9",
-          title: "Rating",
-          description: "Google average.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bjnwb8",
-        },
+          id: "m2",          value: "4.9",          title: "Rating",          description: "Google average.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bjnwb8"},
         {
-          id: "m3",
-          value: "20",
-          title: "Years",
-          description: "Expertise.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ro04kj",
-        },
+          id: "m3",          value: "20",          title: "Years",          description: "Expertise.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ro04kj"},
       ]}
       title="Salon Metrics"
       description="Serving Ermont with dedication."
@@ -295,8 +203,7 @@ export default function LandingPage() {
       <ContactCenter
       useInvertedBackground={true}
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       tag="Contact Us"
       title="Book Your Appointment"
       description="Visit us at 7 Rue du 18 Juin, 95120 Ermont or call +33 1 34 14 30 00."
@@ -307,25 +214,17 @@ export default function LandingPage() {
       <FooterSimple
       columns={[
         {
-          title: "2g Coiffure",
-          items: [
+          title: "2g Coiffure",          items: [
             {
-              label: "About",
-              href: "#about",
-            },
+              label: "About",              href: "#about"},
             {
-              label: "Services",
-              href: "#services",
-            },
+              label: "Services",              href: "#services"},
           ],
         },
         {
-          title: "Contact",
-          items: [
+          title: "Contact",          items: [
             {
-              label: "Call +33 1 34 14 30 00",
-              href: "tel:+33134143000",
-            },
+              label: "Call +33 1 34 14 30 00",              href: "tel:+33134143000"},
           ],
         },
       ]}
@@ -336,4 +235,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}