Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -10,9 +10,27 @@ import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCar
 import FaqSplitText from "@/components/sections/faq/FaqSplitText";
 import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Award, Sparkles, Zap } from "lucide-react";
+import { Award, Sparkles, Zap, MessageCircle } 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,26 +49,37 @@ 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>
 
+      <a 
+        href="https://wa.me/1234567890"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="fixed bottom-6 right-6 z-50 bg-[#25D366] text-white p-4 rounded-full shadow-lg hover:scale-110 transition-transform duration-300"
+        aria-label="Contact us on WhatsApp"
+      >
+        <MessageCircle size={28} />
+      </a>
+
       <div id="hero" data-section="hero">
         <HeroLogoBillboardSplit
           logoText="ELEGANTE"
           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: "Learn More", href: "about" }
+            { text: "Book Appointment", href: "https://square.com/appointments" },
+            { text: "Learn More", href: "#about" }
           ]}
           layoutOrder="default"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x6zlvy"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/barber-shop-chair.jpg"
           imageAlt="Luxury barber shop chair"
           frameStyle="card"
           mediaAnimation="blur-reveal"
@@ -65,19 +94,13 @@ export default function LandingPage() {
           description="Elegante has been a sanctuary for discerning gentlemen seeking exceptional grooming experiences. Our master barbers combine traditional techniques with modern innovations to deliver timeless style and impeccable craftsmanship."
           textboxLayout="default"
           useInvertedBackground={false}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rze709"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/barber-tools.jpg"
           imageAlt="Professional barber tools"
           imagePosition="right"
           bulletPoints={[
-            {
-              title: "Master Craftsmen",              description: "Our experienced barbers bring decades of expertise and passion to every cut.",              icon: Award
-            },
-            {
-              title: "Premium Products",              description: "We use only the finest grooming products and tools from prestigious brands worldwide.",              icon: Sparkles
-            },
-            {
-              title: "Timeless Elegance",              description: "Every service delivers sophisticated style that stands the test of time.",              icon: Zap
-            }
+            { title: "Master Craftsmen", description: "Our experienced barbers bring decades of expertise and passion to every cut.", icon: Award },
+            { title: "Premium Products", description: "We use only the finest grooming products and tools from prestigious brands worldwide.", icon: Sparkles },
+            { title: "Timeless Elegance", description: "Every service delivers sophisticated style that stands the test of time.", icon: Zap }
           ]}
           buttons={[{ text: "Our Philosophy", href: "#services" }]}
           buttonAnimation="slide-up"
@@ -94,22 +117,31 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={true}
           features={[
-            {
-              id: "1",              title: "Classic Haircut & Style",              tags: ["Popular", "45 min"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=om13fh",              imageAlt: "Professional haircut service"
-            },
-            {
-              id: "2",              title: "Beard Grooming & Sculpting",              tags: ["Premium", "30 min"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k1t0hz",              imageAlt: "Beard grooming service"
-            },
-            {
-              id: "3",              title: "Traditional Hot Shave",              tags: ["Luxury", "35 min"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zcjfu8",              imageAlt: "Luxury shave service"
-            }
+            { id: "1", title: "Classic Haircut & Style", tags: ["Popular", "45 min"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/haircut-service.jpg", imageAlt: "Professional haircut service" },
+            { id: "2", title: "Beard Grooming & Sculpting", tags: ["Premium", "30 min"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/beard-grooming.jpg", imageAlt: "Beard grooming service" },
+            { id: "3", title: "Traditional Hot Shave", tags: ["Luxury", "35 min"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/hot-shave-service.jpg", imageAlt: "Luxury shave service" }
           ]}
         />
       </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"
@@ -118,15 +150,9 @@ export default function LandingPage() {
           useInvertedBackground={false}
           membersAnimation="slide-up"
           members={[
-            {
-              id: "1",              name: "Marcus Valentino",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wtom78",              imageAlt: "Marcus Valentino"
-            },
-            {
-              id: "2",              name: "Antonio Silva",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qb2wrt",              imageAlt: "Antonio Silva"
-            },
-            {
-              id: "3",              name: "Giovanni Rossi",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=82s9cd",              imageAlt: "Giovanni Rossi"
-            }
+            { id: "1", name: "Marcus Valentino", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/marcus-valentino.jpg", imageAlt: "Marcus Valentino" },
+            { id: "2", name: "Antonio Silva", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/antonio-silva.jpg", imageAlt: "Antonio Silva" },
+            { id: "3", name: "Giovanni Rossi", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/giovanni-rossi.jpg", imageAlt: "Giovanni Rossi" }
           ]}
         />
       </div>
@@ -139,18 +165,10 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={true}
           testimonials={[
-            {
-              id: "1",              title: "Excellence in Every Detail",              quote: "The precision and attention to detail at Elegante is unmatched. My haircuts are always perfect, and the service is incredibly welcoming.",              name: "David Chen",              role: "Executive Director",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o1l5sp",              imageAlt: "David Chen"
-            },
-            {
-              id: "2",              title: "A True Grooming Experience",              quote: "Finally found a barber shop that respects tradition while embracing modern style. The hot shave experience is absolutely luxurious.",              name: "James Mitchell",              role: "Entrepreneur",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7t2802",              imageAlt: "James Mitchell"
-            },
-            {
-              id: "3",              title: "Exceptional Craftsmanship",              quote: "The barbers here are true artists. They understand what you want and deliver beyond expectations every single time.",              name: "Robert Thompson",              role: "Business Owner",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=60jshq",              imageAlt: "Robert Thompson"
-            },
-            {
-              id: "4",              title: "Worth Every Penny",              quote: "Premium pricing for premium service. The atmosphere, expertise, and results make Elegante the only barber shop I visit.",              name: "Michael Anderson",              role: "Professional",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=inwpy9",              imageAlt: "Michael Anderson"
-            }
+            { id: "1", title: "Excellence in Every Detail", quote: "The precision and attention to detail at Elegante is unmatched. My haircuts are always perfect, and the service is incredibly welcoming.", name: "David Chen", role: "Executive Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/david-chen.jpg", imageAlt: "David Chen" },
+            { id: "2", title: "A True Grooming Experience", quote: "Finally found a barber shop that respects tradition while embracing modern style. The hot shave experience is absolutely luxurious.", name: "James Mitchell", role: "Entrepreneur", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/james-mitchell.jpg", imageAlt: "James Mitchell" },
+            { id: "3", title: "Exceptional Craftsmanship", quote: "The barbers here are true artists. They understand what you want and deliver beyond expectations every single time.", name: "Robert Thompson", role: "Business Owner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/robert-thompson.jpg", imageAlt: "Robert Thompson" },
+            { id: "4", title: "Worth Every Penny", quote: "Premium pricing for premium service. The atmosphere, expertise, and results make Elegante the only barber shop I visit.", name: "Michael Anderson", role: "Professional", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/michael-anderson.jpg", imageAlt: "Michael Anderson" }
           ]}
         />
       </div>
@@ -164,24 +182,12 @@ export default function LandingPage() {
           animationType="smooth"
           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: "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."
-            },
-            {
-              id: "3",              title: "Do you offer walk-in services?",              content: "While we accommodate walk-ins when possible, we strongly encourage appointments to guarantee your preferred time slot and barber."
-            },
-            {
-              id: "4",              title: "What products do you use?",              content: "We exclusively use premium grooming products from prestigious international brands to ensure the best results for your hair and skin."
-            },
-            {
-              id: "5",              title: "Are you suitable for first-time clients?",              content: "Absolutely! We welcome gentlemen of all grooming experience levels. Our barbers will consult with you to understand your style preferences and deliver exactly what you envision."
-            },
-            {
-              id: "6",              title: "What is your cancellation policy?",              content: "We require 24 hours notice for cancellations. Late cancellations may incur a fee. We appreciate your understanding as we keep slots reserved for our valued clients."
-            }
+            { 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." },
+            { id: "3", title: "Do you offer walk-in services?", content: "While we accommodate walk-ins when possible, we strongly encourage appointments to guarantee your preferred time slot and barber." },
+            { id: "4", title: "What products do you use?", content: "We exclusively use premium grooming products from prestigious international brands to ensure the best results for your hair and skin." },
+            { id: "5", title: "Are you suitable for first-time clients?", content: "Absolutely! We welcome gentlemen of all grooming experience levels. Our barbers will consult with you to understand your style preferences and deliver exactly what you envision." },
+            { id: "6", title: "What is your cancellation policy?", content: "We require 24 hours notice for cancellations. Late cancellations may incur a fee. We appreciate your understanding as we keep slots reserved for our valued clients." }
           ]}
         />
       </div>
@@ -191,7 +197,7 @@ export default function LandingPage() {
           title="Reserve Your Appointment"
           description="Step into luxury. Schedule your appointment with one of our master barbers and experience the Elegante difference."
           useInvertedBackground={false}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kbg2yt"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/barbershop-interior.jpg"
           imageAlt="Elegante barbershop interior"
           mediaAnimation="slide-up"
           mediaPosition="right"
@@ -209,30 +215,9 @@ export default function LandingPage() {
       <div id="footer" data-section="footer">
         <FooterSimple
           columns={[
-            {
-              title: "Navigate",              items: [
-                { label: "Home", href: "#hero" },
-                { label: "Services", href: "#services" },
-                { label: "Team", href: "#team" },
-                { label: "About", href: "#about" }
-              ]
-            },
-            {
-              title: "Connect",              items: [
-                { label: "Contact", href: "#contact" },
-                { label: "Book Now", href: "#contact" },
-                { label: "Testimonials", href: "#testimonials" },
-                { label: "FAQ", href: "#faq" }
-              ]
-            },
-            {
-              title: "Legal",              items: [
-                { label: "Privacy Policy", href: "#" },
-                { label: "Terms of Service", href: "#" },
-                { label: "Cancellation Policy", href: "#" },
-                { label: "Cookie Policy", href: "#" }
-              ]
-            }
+            { title: "Navigate", items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Gallery", href: "#gallery" }, { label: "Team", href: "#team" }, { label: "About", href: "#about" }] },
+            { title: "Connect", items: [{ label: "Contact", href: "#contact" }, { label: "Book Now", href: "https://square.com/appointments" }, { label: "Testimonials", href: "#testimonials" }, { label: "FAQ", href: "#faq" }] },
+            { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "Cancellation Policy", href: "#" }, { label: "Cookie Policy", href: "#" }] }
           ]}
           bottomLeftText="© 2025 Elegante Barbershop. Crafted for the discerning gentleman."
           bottomRightText="Luxury Grooming Since 1995"
@@ -240,4 +225,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}