Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -13,6 +13,54 @@ import FooterSimple from "@/components/sections/footer/FooterSimple";
 import { Award, Sparkles, Zap } from "lucide-react";
 
 export default function LandingPage() {
+  const galleryImages = [
+    {
+      id: "1",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-1.jpg",      alt: "Elegante barbershop interior - luxury seating"
+    },
+    {
+      id: "2",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-2.jpg",      alt: "Master barber at work - precision cutting"
+    },
+    {
+      id: "3",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-3.jpg",      alt: "Traditional hot shave service"
+    },
+    {
+      id: "4",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-4.jpg",      alt: "Premium grooming products display"
+    },
+    {
+      id: "5",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-5.jpg",      alt: "Elegant waiting area with leather seating"
+    },
+    {
+      id: "6",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-6.jpg",      alt: "Barber mirrors and station setup"
+    },
+    {
+      id: "7",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-7.jpg",      alt: "Client receiving beard grooming"
+    },
+    {
+      id: "8",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-8.jpg",      alt: "Professional barber tools collection"
+    },
+    {
+      id: "9",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-9.jpg",      alt: "Luxurious haircut service"
+    },
+    {
+      id: "10",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-10.jpg",      alt: "Barbershop exterior storefront"
+    },
+    {
+      id: "11",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-11.jpg",      alt: "Master barber consultation with client"
+    },
+    {
+      id: "12",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-12.jpg",      alt: "Premium aftershave product application"
+    },
+    {
+      id: "13",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-13.jpg",      alt: "Classical barbershop ambiance"
+    },
+    {
+      id: "14",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-14.jpg",      alt: "Client satisfaction moment"
+    },
+    {
+      id: "15",      src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-15.jpg",      alt: "Elegante signature style showcase"
+    }
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-shift"
@@ -31,12 +79,13 @@ export default function LandingPage() {
           navItems={[
             { name: "Home", id: "hero" },
             { name: "Services", id: "services" },
+            { name: "Gallery", id: "gallery" },
             { name: "Team", id: "team" },
             { name: "About", id: "about" },
             { name: "Contact", id: "contact" }
           ]}
           brandName="ELEGANTE"
-          button={{ text: "Book Now", href: "contact" }}
+          button={{ text: "Book Now", href: "https://square.com/appointments" }}
         />
       </div>
 
@@ -46,7 +95,7 @@ export default function LandingPage() {
           description="Crafted grooming for the discerning gentleman. Experience premium barbering with precision, tradition, and contemporary style."
           background={{ variant: "radial-gradient" }}
           buttons={[
-            { text: "Book Appointment", href: "contact" },
+            { text: "Book Appointment", href: "https://square.com/appointments" },
             { text: "Learn More", href: "about" }
           ]}
           layoutOrder="default"
@@ -110,6 +159,28 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="gallery" data-section="gallery">
+        <div className="w-full py-20 px-4 bg-gradient-to-b from-transparent to-transparent">
+          <div className="max-w-7xl mx-auto">
+            <div className="text-center mb-16">
+              <h2 className="text-4xl md:text-5xl font-bold mb-4">Our Gallery</h2>
+              <p className="text-lg text-foreground/70">Explore the elegance and craftsmanship of Elegante Barbershop</p>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+              {galleryImages.map((image) => (
+                <div key={image.id} className="relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
+                  <img
+                    src={image.src}
+                    alt={image.alt}
+                    className="w-full h-64 object-cover hover:scale-105 transition-transform duration-300"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="team" data-section="team">
         <TeamCardTen
           title="Meet Our Master Barbers"
@@ -165,7 +236,7 @@ export default function LandingPage() {
           faqsAnimation="slide-up"
           faqs={[
             {
-              id: "1",              title: "How do I book an appointment?",              content: "You can book an appointment through our website contact form or call us directly. We recommend booking in advance, especially for weekends, as our master barbers maintain a full schedule."
+              id: "1",              title: "How do I book an appointment?",              content: "You can book an appointment through our Square booking system or call us directly. We recommend booking in advance, especially for weekends, as our master barbers maintain a full schedule."
             },
             {
               id: "2",              title: "What is the average appointment duration?",              content: "Classic haircuts take 45 minutes, beard grooming 30 minutes, and traditional hot shaves 35 minutes. We never rush to ensure perfection in every service."
@@ -213,6 +284,7 @@ export default function LandingPage() {
               title: "Navigate",              items: [
                 { label: "Home", href: "#hero" },
                 { label: "Services", href: "#services" },
+                { label: "Gallery", href: "#gallery" },
                 { label: "Team", href: "#team" },
                 { label: "About", href: "#about" }
               ]
@@ -220,7 +292,7 @@ export default function LandingPage() {
             {
               title: "Connect",              items: [
                 { label: "Contact", href: "#contact" },
-                { label: "Book Now", href: "#contact" },
+                { label: "Book Now", href: "https://square.com/appointments" },
                 { label: "Testimonials", href: "#testimonials" },
                 { label: "FAQ", href: "#faq" }
               ]
@@ -240,4 +312,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}