Update src/app/styles/variables.css

Merge version_22 into main

src/app/page.tsx

@@ -1,18 +1,20 @@
 "use client";
 
 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 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 FooterBase from '@/components/sections/footer/FooterBase';
-import { Award, Calendar, Crown, Eye, Feather, Heart, Moon, Shield, Skull, Users, Zap, MapPin, Image } 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"
@@ -27,229 +29,116 @@ export default function LandingPage() {
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered
+        <NavbarStyleApple
           navItems={[
-            { name: "Artists", id: "artists" },
-            { name: "Gallery", id: "gallery" },
-            { name: "About", id: "about" },
-            { name: "Aftercare", id: "aftercare" },
-            { name: "Contact", id: "contact" }
+            { name: "Collection", id: "gallery" },
+            { name: "Manifesto", id: "about" },
+            { name: "Support", id: "faq" },
+            { name: "Get In Touch", id: "contact" }
           ]}
-          button={{ text: "Book Appointment", href: "booking" }}
-          brandName="Cursemarks"
+          brandName="CURSEMARKS"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard
-          logoText="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlavLWOelEmQkqFRvw6DCMXOiw/uploaded-1773171676236-ae47sr53.png"
-          description="Marks that stay. Stories that haunt."
-          buttons={[
-            { text: "Book Your Mark", href: "booking" },
-            { text: "View Gallery", href: "gallery" }
+        <HeroSplitKpi
+          title="Wear Your Subversion"
+          description="Born from the same dark aesthetic as our art, our apparel collection channels the spirit of gothic artistry into streetwear. Intricate designs, premium fits, curated for the bold."
+          background={{ variant: 'rotated-rays-animated' }}
+          kpis={[
+            { value: "2025", label: "Collection" },
+            { value: "100%", label: "Signature Design" },
+            { value: "Limited", label: "Production" }
           ]}
-          background={{ variant: "plain" }}
-          imageSrc="http://img.b2bpic.net/free-vector/chicano-tattoo-vintage-template_225004-1495.jpg"
-          imageAlt="blackwork tattoo close-up detailed ink"
+          buttons={[{ text: "Explore Apparel", href: "#gallery" }]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlavLWOelEmQkqFRvw6DCMXOiw/uploaded-1773180784484-bndqftnj.png"
+          imagePosition="right"
+          enableKpiAnimation={true}
           mediaAnimation="slide-up"
-          frameStyle="card"
-          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"
         />
       </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="The Seasonal Drop"
+          description="Art meets utility. Our apparel features exclusive, hand-drawn motifs printed on heavy-weight, urban-ready silhouettes."
           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: "Signature Hoodies", description: "Oversized fit with detailed back art.", imageSrc: "https://images.unsplash.com/photo-1598371839684-b28bc8870a76?q=80&w=800&_wi=1" },
+            { id: "2", title: "Occult Tees", description: "High-quality fabric, permanent prints.", imageSrc: "https://images.unsplash.com/photo-1598371839684-b28bc8870a76?q=80&w=800&_wi=2" },
+            { id: "3", title: "Street Accessories", description: "Designed for the urban landscape.", imageSrc: "https://images.unsplash.com/photo-1598371839684-b28bc8870a76?q=80&w=800&_wi=3" }
+          ] as any}
+          gridVariant="bento-grid"
           animationType="slide-up"
+          textboxLayout="split"
           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 $150. 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="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="The Brand Standard"
+          tag="Quality"
           metrics={[
-            { icon: Users, label: "Satisfied Clients", value: "2000+" },
-            { icon: Award, label: "Years of Mastery", value: "45+" },
-            { icon: Zap, label: "Original Designs", value: "5000+" },
-            { icon: Heart, label: "Marks That Matter", value: "Every One" }
+            { id: "1", value: "300GSM", description: "Heavy-weight cotton for longevity" },
+            { id: "2", value: "Hand", description: "Every motif created by our artists" },
+            { id: "3", value: "100%", description: "Dedicated to subculture lifestyle" }
           ]}
           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="The Cult Followers"
+          description="Seen in the streets, worn by the visionaries."
+          testimonials={[
+            { 
+              id: "1", 
+              name: "Alex Thorne", 
+              date: "March 2025", 
+              title: "Unmatched Quality", 
+              quote: "The apparel feels just as intentional as the art itself. The fit and print are beyond what you find in standard streetwear.", 
+              tag: "Collector", 
+              avatarSrc: "https://api.dicebear.com/7.x/avataaars/svg?seed=Alex" 
             }
           ]}
           textboxLayout="default"
           useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqBase
+          title="Ordering & Shipping"
+          description="Get the details on drops, shipping, and sizing."
+          faqs={[
+            { id: "1", title: "Where do you ship?", content: "We ship worldwide via tracked courier services." },
+            { id: "2", title: "How do I find my size?", content: "Refer to our fit guide on each product page for precise measurements." }
+          ]}
           faqsAnimation="slide-up"
-          animationType="smooth"
-          tag="Healing"
-          tagIcon={Shield}
+          textboxLayout="split"
+          useInvertedBackground={false}
         />
       </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"
+        <ContactCTA
+          tag="Newsletter"
+          title="Join the Circle"
+          description="Sign up to be the first to hear about new artist drops and private sale events."
+          buttons={[{ text: "Join Community", onClick: handleBooking }]}
+          background={{ variant: "sparkles-gradient" }}
           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"
-          copyrightText="© 2025 Cursemarks Tattoo. All marks are permanent."
+        <FooterLogoEmphasis
+          logoText="CURSEMARKS"
           columns={[
-            {
-              title: "Studio",              items: [
-                { label: "Home", href: "hero" },
-                { label: "Artists", href: "artists" },
-                { 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: "Collection" }, { label: "Manifesto" }] },
+            { items: [{ label: "FAQ" }, { label: "Terms" }] }
           ]}
         />
       </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #efe9df;
-  --card: #f5f1e8;
+  --background: #F1F1F6;
+  --card: #F1F1F6;
   --foreground: #2d2d2d;
-  --primary-cta: #86222a;
+  --primary-cta: #BE9FE1;
   --primary-cta-text: #efe9df;
-  --secondary-cta: #2d2d2d;
+  --secondary-cta: #C9B6E4;
   --secondary-cta-text: #efe9df;
-  --accent: #86222a;
-  --background-accent: #2d2d2d;
+  --accent: #E1CCEC;
+  --background-accent: #F1F1F6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);