Update src/app/page.tsx

Merge version_20 into main

src/app/page.tsx

@@ -1,17 +1,20 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-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 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, Image, Star } from 'lucide-react';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function LandingPage() {
+  const handleBooking = () => {
+    window.open('https://wa.me/message/JW75UAKA6SF2O1', '_blank');
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
@@ -26,202 +29,116 @@ export default function LandingPage() {
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered
+        <NavbarStyleApple
           navItems={[
             { name: "Gallery", id: "gallery" },
             { name: "About", id: "about" },
             { name: "Aftercare", id: "aftercare" },
             { name: "Contact", id: "contact" }
           ]}
-          button={{ text: "Book Appointment", href: "booking" }}
           brandName="Cursemarks"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <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: "View Gallery", href: "gallery" }
+        <HeroSplitKpi
+          title="Etching Intention into Skin"
+          description="Premium tattoo studio specializing in blackwork, fine line, gothic, and curse-inspired designs. Book your mark today."
+          background={{ variant: 'rotated-rays-animated' }}
+          kpis={[
+            { value: "500+", label: "Custom Designs" },
+            { value: "100+", label: "Happy Clients" },
+            { value: "5*", label: "Rated Quality" }
           ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlavLWOelEmQkqFRvw6DCMXOiw/uploaded-1773171676236-ae47sr53.png"
-          imageAlt="Cursemarks Tattoo Studio"
-          buttonAnimation="slide-up"
-          showDimOverlay={false}
+          buttons={[{ text: "Book Your Mark", onClick: handleBooking }]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlavLWOelEmQkqFRvw6DCMXOiw/uploaded-1773180784484-bndqftnj.png"
+          imagePosition="right"
+          enableKpiAnimation={true}
+          mediaAnimation="slide-up"
         />
       </div>
 
       <div id="gallery" data-section="gallery">
-        <FeatureHoverPattern
-          title="Tattoo Gallery"
-          description="Explore our collection of blackwork, fine line, gothic, and curse-inspired designs. Each piece tells a story etched in ink."
+        <FeatureCardThree
+          title="Artistic Mastery"
+          description="Precision ink work defined by dark aesthetics and fine craftsmanship."
           features={[
-            {
-              icon: Skull,
-              title: "Blackwork & Line Art",              description: "Bold, intricate designs in pure black ink. From geometric patterns to organic forms, each line is placed with precision."
-            },
-            {
-              icon: Zap,
-              title: "Fine Line Mastery",              description: "Delicate, detailed work capturing the finest details. Perfect for minimalist aesthetics and symbolic representations."
-            },
-            {
-              icon: Moon,
-              title: "Gothic Symbolism",              description: "Dark art rooted in occult imagery, mystical symbols, and gothic aesthetics. Meaningful marks for the discerning collector."
-            },
-            {
-              icon: Eye,
-              title: "Curse-Inspired Designs",              description: "Original curse mark concepts blending ancient symbolism with modern artistry. Marks that carry weight and mystery."
-            },
-            {
-              icon: Feather,
-              title: "Custom Concepts",              description: "Personalized designs brought to life. We collaborate to turn your vision into a permanent statement on your skin."
-            },
-            {
-              icon: Crown,
-              title: "Premium Aftercare",              description: "Comprehensive guidance to ensure your tattoo heals beautifully. Your mark deserves the best care from day one."
-            }
-          ]}
-          textboxLayout="default"
+            { id: "1", title: "Blackwork", description: "Deep, bold, and precise.", imageSrc: "https://images.unsplash.com/photo-1598371839684-b28bc8870a76?q=80&w=800&_wi=1" },
+            { id: "2", title: "Fine Line", description: "Delicate, intricate beauty.", imageSrc: "https://images.unsplash.com/photo-1598371839684-b28bc8870a76?q=80&w=800&_wi=2" },
+            { id: "3", title: "Gothic Art", description: "Occult and mystical marks.", imageSrc: "https://images.unsplash.com/photo-1598371839684-b28bc8870a76?q=80&w=800&_wi=3" }
+          ] as any}
+          gridVariant="bento-grid"
           animationType="slide-up"
-          useInvertedBackground={false}
-          tag="Gallery"
-          tagIcon={Image}
-        />
-      </div>
-
-      <div id="booking" data-section="booking">
-        <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" }}
-          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: "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."
-            },
-            {
-              id: "3",              title: "Do you offer custom designs?",              content: "Absolutely. Custom designs are our specialty. We work closely with clients to create original concepts that reflect their vision, story, and personal aesthetic."
-            },
-            {
-              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 $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."
-            }
-          ]}
-          useInvertedBackground={false}
-          animationType="slide-up"
-          accordionAnimationType="smooth"
-        />
-      </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={[
-            { src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop", alt: "Avatar 1" },
-            { src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop", alt: "Avatar 2" },
-            { src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop", alt: "Avatar 3" },
-            { src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop", alt: "Avatar 4" },
-            { src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop", alt: "Avatar 5" },
-            { src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop", alt: "Avatar 6" }
-          ]}
-          ratingAnimation="slide-up"
-          avatarsAnimation="slide-up"
+          textboxLayout="split"
           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."
+      <div id="metrics" data-section="metrics">
+        <MetricCardFourteen
+          title="Impact"
+          tag="Trust"
           metrics={[
-            { 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" }
+            { id: "1", value: "100+", description: "Five Star Reviews" },
+            { id: "2", value: "500+", description: "Original Designs" },
+            { id: "3", value: "100%", description: "Artist Dedication" }
           ]}
           useInvertedBackground={false}
           metricsAnimation="slide-up"
         />
       </div>
 
-      <div id="aftercare" data-section="aftercare">
-        <FaqDouble
-          title="Aftercare Guide"
-          description="Proper aftercare is essential for vibrant, long-lasting tattoos. Follow these guidelines to protect your new mark."
-          faqs={[
-            {
-              id: "1",              title: "How should I clean my new tattoo?",              content: "Gently wash with unscented soap and lukewarm water 2-3 times daily for the first week. Pat dry with a clean paper towel—avoid cloth towels. Do not submerge in water (no baths, pools, or hot tubs) for 2 weeks."
-            },
-            {
-              id: "2",              title: "What moisturizer should I use?",              content: "Use unscented, fragrance-free lotion or specialized tattoo aftercare balm. Apply thin layers 3-4 times daily for the first 2 weeks. Avoid petroleum-based products and heavy creams."
-            },
-            {
-              id: "3",              title: "When will my tattoo stop itching?",              content: "Itching typically peaks 3-7 days after your session as the skin heals. Do not scratch—tap gently or apply lotion if needed. Itching usually subsides by week 2-3."
-            },
-            {
-              id: "4",              title: "Is peeling normal?",              content: "Yes, light peeling is completely normal during the healing process. Do not pick or peel the skin—let it shed naturally. This usually occurs 1-2 weeks post-tattoo."
-            },
-            {
-              id: "5",              title: "Can I exercise or go to the gym?",              content: "Avoid intense exercise for 2-3 weeks. Light walking is fine after day 3. Heavy sweating and friction can compromise healing and increase infection risk. Wait at least 2 weeks before submerging in chlorinated pools."
-            },
-            {
-              id: "6",              title: "What if my tattoo becomes infected?",              content: "Signs of infection include excessive redness, warmth, pus, or severe swelling lasting beyond day 3. Contact us immediately or see a physician. Proper aftercare prevents most infections."
-            },
-            {
-              id: "7",              title: "How long until my tattoo fully heals?",              content: "Surface healing takes 2-3 weeks. Complete internal healing takes 3-4 months. Avoid sun exposure for 2 weeks and use SPF 30+ on healed tattoos to maintain color vibrancy."
-            },
-            {
-              id: "8",              title: "When can I get a follow-up or second session?",              content: "Wait at least 4-6 weeks before additional sessions on the same area. This allows complete healing and ensures optimal results for layered or extended designs."
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardFive
+          title="Client Experiences"
+          description="Trusted by many."
+          testimonials={[
+            { 
+              id: "1", 
+              name: "Elian Vázquez", 
+              date: "Jan 2025", 
+              title: "Exceptional Experience", 
+              quote: "The artists understood my vision perfectly and executed it with incredible precision.", 
+              tag: "Client", 
+              avatarSrc: "https://api.dicebear.com/7.x/avataaars/svg?seed=Elian" 
             }
           ]}
           textboxLayout="default"
           useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqBase
+          title="Questions"
+          description="Everything you need to know about getting your custom tattoo."
+          faqs={[
+            { id: "1", title: "How do I book?", content: "Contact us via WhatsApp to start the process." },
+            { id: "2", title: "What is your policy?", content: "48 hour notice is required for changes." }
+          ]}
           faqsAnimation="slide-up"
-          animationType="smooth"
-          tag="Healing"
-          tagIcon={Shield}
+          textboxLayout="split"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Bookings"
+          title="Ready for your Mark?"
+          description="We're currently accepting appointments for new projects."
+          buttons={[{ text: "Book Session", onClick: handleBooking }]}
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterBase
-          logoText="Cursemarks Tattoo"
-          copyrightText="© 2025 Cursemarks Tattoo. All marks are permanent."
+        <FooterLogoEmphasis
+          logoText="Cursemarks"
           columns={[
-            {
-              title: "Studio",              items: [
-                { label: "Home", href: "hero" },
-                { label: "Gallery", href: "gallery" },
-                { label: "About", href: "about" }
-              ]
-            },
-            {
-              title: "Services",              items: [
-                { label: "Book Appointment", href: "booking" },
-                { label: "Custom Designs", href: "booking" },
-                { label: "Aftercare Guide", href: "aftercare" },
-                { label: "Contact Us", href: "contact" }
-              ]
-            },
-            {
-              title: "Follow",              items: [
-                { label: "Instagram", href: "https://instagram.com/cursemarks" },
-                { label: "TikTok", href: "https://tiktok.com/@cursemarks" },
-                { label: "Discord", href: "https://discord.gg/cursemarks" }
-              ]
-            }
+            { items: [{ label: "Home" }, { label: "Gallery" }] },
+            { items: [{ label: "About" }, { label: "Contact" }] }
           ]}
         />
       </div>