Update src/app/page.tsx

Merge version_18 into main

src/app/page.tsx

@@ -2,17 +2,20 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
-import TeamCardSix from '@/components/sections/team/TeamCardSix';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Award, Calendar, Crown, Eye, Feather, Heart, Moon, Shield, Skull, Users, Zap, MapPin, Image } from 'lucide-react';
+import { Award, Calendar, Crown, Eye, Feather, Heart, Moon, Shield, Skull, Users, Zap, Image, Star } from 'lucide-react';
 
 export default function LandingPage() {
+  const handleBooking = () => {
+    window.open('https://wa.me/message/JW75UAKA6SF2O1', '_blank');
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
@@ -29,57 +32,31 @@ export default function LandingPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[
-            { name: "Artists", id: "artists" },
             { name: "Gallery", id: "gallery" },
             { name: "About", id: "about" },
             { name: "Aftercare", id: "aftercare" },
             { name: "Contact", id: "contact" }
           ]}
-          button={{ text: "Book Appointment", href: "booking" }}
+          button={{ text: "Book Appointment", onClick: handleBooking }}
           brandName="Cursemarks"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard
-          logoText=""
-          description="Marks that stay. Stories that haunt."
+        <HeroOverlay
+          title="Marks that stay. Stories that haunt."
+          description="Premium tattoo studio specializing in blackwork, fine line, gothic, and curse-inspired designs."
           buttons={[
-            { text: "Book Your Mark", href: "booking" },
+            { text: "Book Your Mark", onClick: handleBooking },
             { text: "View Gallery", href: "gallery" }
           ]}
-          background={{ variant: "plain" }}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlavLWOelEmQkqFRvw6DCMXOiw/uploaded-1773171676236-ae47sr53.png"
-          imageAlt="Cursemarks Tattoo Studio Logo"
-          mediaAnimation="slide-up"
-          frameStyle="card"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlavLWOelEmQkqFRvw6DCMXOiw/uploaded-1773180784484-bndqftnj.png"
+          imageAlt="Cursemarks Tattoo Studio"
           buttonAnimation="slide-up"
-        />
-      </div>
-
-      <div id="artists" data-section="artists">
-        <TeamCardSix
-          title="Our Artists"
-          description="Master tattoo artists specializing in blackwork, fine line, gothic, and curse-inspired designs."
-          members={[
-            {
-              id: "1",              name: "Sable",              role: "Lead Artist | Blackwork Specialist",              imageSrc: "http://img.b2bpic.net/free-photo/senior-artist-studio-painting-with-watercolor_23-2150214807.jpg",              imageAlt: "professional tattoo artist portrait studio"
-            },
-            {
-              id: "2",              name: "Raven",              role: "Fine Line & Occult",              imageSrc: "http://img.b2bpic.net/free-photo/craft-beer-concept-with-tattooed-man_23-2148111207.jpg",              imageAlt: "male tattoo artist portrait professional"
-            },
-            {
-              id: "3",              name: "Ash",              role: "Gothic & Curse Designs",              imageSrc: "http://img.b2bpic.net/free-photo/dilligent-focused-tattoo-artist-is-creating-new-tattoo-young-woman-s-hand-tatao-studio_613910-19581.jpg",              imageAlt: "female tattoo artist occult symbolism"
-            },
-            {
-              id: "4",              name: "Vex",              role: "Dark Art & Symbolism",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-tattooed-male-barber-cuts-beard-black-male_613910-1462.jpg",              imageAlt: "tattoo artist dark studio atmosphere"
-            }
-          ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          uniformGridCustomHeightClasses="min-h-95 2xl:min-h-105"
+          showDimOverlay={false}
+          titleClassName="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight"
+          imageClassName="block md:hidden w-full h-full object-cover"
+          mediaWrapperClassName="hidden md:flex w-full h-full"
         />
       </div>
 
@@ -125,11 +102,11 @@ export default function LandingPage() {
         <ContactFaq
           ctaTitle="Ready to Get Marked?"
           ctaDescription="Schedule a consultation with one of our artists. Let's discuss your vision and bring it to life."
-          ctaButton={{ text: "Book a Session", href: "#booking" }}
+          ctaButton={{ text: "Book a Session", onClick: handleBooking }}
           ctaIcon={Calendar}
           faqs={[
             {
-              id: "1",              title: "How do I book an appointment?",              content: "Contact us via email or phone to discuss your design idea, preferred artist, and availability. We'll guide you through the booking process and answer any questions about the design, size, and placement."
+              id: "1",              title: "How do I book an appointment?",              content: "Contact us via WhatsApp to discuss your design idea, preferred artist, and availability. We'll guide you through the booking process and answer any questions about the design, size, and placement."
             },
             {
               id: "2",              title: "What is your cancellation policy?",              content: "Cancellations made 48 hours in advance receive a full refund. Late cancellations or no-shows forfeit the deposit. We understand life happens—reach out if you need to reschedule."
@@ -141,7 +118,7 @@ export default function LandingPage() {
               id: "4",              title: "What areas do you specialize in?",              content: "We specialize in blackwork, fine line, gothic, and curse-inspired designs. Our artists are experienced across all body placements and can advise on sizing and positioning for optimal results."
             },
             {
-              id: "5",              title: "How much does a tattoo cost?",              content: "Pricing depends on size, complexity, and placement. Simple designs start at $150. Custom work is quoted after consultation. A deposit secures your appointment."
+              id: "5",              title: "How much does a tattoo cost?",              content: "Pricing depends on size, complexity, and placement. Simple designs start at $90. Custom work is quoted after consultation. A deposit secures your appointment."
             },
             {
               id: "6",              title: "What should I expect during my session?",              content: "Your artist will finalize the design, prepare the area, and begin the tattoo. Sessions typically last 1-4 hours depending on the design. You'll receive aftercare instructions to ensure proper healing."
@@ -153,13 +130,25 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardFifteen
+          testimonial="Getting my own mark at Cursemarks was transformative. The artists understood my vision perfectly and executed it with incredible precision. Every detail carries meaning."
+          rating={5}
+          author="Elian Vázquez"
+          avatars={[]}
+          ratingAnimation="slide-up"
+          avatarsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="about" data-section="about">
         <AboutMetric
           title="Cursemarks is a premium tattoo studio dedicated to meaningful body art, dark aesthetics, and artistic excellence. Every mark carries intention."
           metrics={[
-            { icon: Users, label: "Satisfied Clients", value: "2000+" },
-            { icon: Award, label: "Years of Mastery", value: "45+" },
-            { icon: Zap, label: "Original Designs", value: "5000+" },
+            { icon: Users, label: "Satisfied Clients", value: "100+" },
+            { icon: Award, label: "5 Stars Reviews ", value: "100+ " },
+            { icon: Zap, label: "Original Designs", value: "500+" },
             { icon: Heart, label: "Marks That Matter", value: "Every One" }
           ]}
           useInvertedBackground={false}
@@ -206,22 +195,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
-        <SocialProofOne
-          title="Location & Contact"
-          description="Find us in the heart of the city, where ink meets intention. Reach out to book your mark."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          tag="Studio"
-          tagIcon={MapPin}
-          names={[
-            "📍 123 Shadow Street, Downtown District",            "📞 (555) 867-5309",            "📧 marks@cursemarks.studio",            "🕐 Tue-Sat: 12pm-9pm | Sun: 1pm-6pm"
-          ]}
-          speed={30}
-          showCard={true}
-        />
-      </div>
-
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="Cursemarks Tattoo"
@@ -230,7 +203,6 @@ export default function LandingPage() {
             {
               title: "Studio",              items: [
                 { label: "Home", href: "hero" },
-                { label: "Artists", href: "artists" },
                 { label: "Gallery", href: "gallery" },
                 { label: "About", href: "about" }
               ]
@@ -239,15 +211,13 @@ export default function LandingPage() {
               title: "Services",              items: [
                 { label: "Book Appointment", href: "booking" },
                 { label: "Custom Designs", href: "booking" },
-                { label: "Aftercare Guide", href: "aftercare" },
-                { label: "Contact Us", href: "contact" }
+                { label: "Aftercare Guide", href: "aftercare" }
               ]
             },
             {
               title: "Follow",              items: [
-                { label: "Instagram", href: "https://instagram.com/cursemarks" },
-                { label: "TikTok", href: "https://tiktok.com/@cursemarks" },
-                { label: "Discord", href: "https://discord.gg/cursemarks" }
+                { label: "Instagram", href: "https://www.instagram.com/cursemarkz_tattoo?igsh=MW8zeml6N2plaXdreA==" },
+                { label: "TikTok", href: "https://tiktok.com/@cursemarks" }
               ]
             }
           ]}