Update src/app/styles/variables.css

Merge version_22 into main

src/app/page.tsx

@@ -1,15 +1,14 @@
 "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 = () => {
@@ -30,195 +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" }
+            { name: "Collection", id: "gallery" },
+            { name: "Manifesto", id: "about" },
+            { name: "Support", id: "faq" },
+            { name: "Get In Touch", id: "contact" }
           ]}
-          button={{ text: "Book Appointment", onClick: handleBooking }}
-          brandName="Cursemarks"
+          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", onClick: handleBooking },
-            { 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" }
           ]}
-          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}
-          titleClassName="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight"
-          imageClassName="hidden md:block"
+          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"
         />
       </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"
-          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", onClick: handleBooking }}
-          ctaIcon={Calendar}
-          faqs={[
-            {
-              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."
-            },
-            {
-              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={[]}
-          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="The Brand Standard"
+          tag="Quality"
           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: "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">
+        <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}
         />
       </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" }
-              ]
-            },
-            {
-              title: "Follow",              items: [
-                { label: "Instagram", href: "https://www.instagram.com/cursemarkz_tattoo?igsh=MW8zeml6N2plaXdreA==" },
-                { label: "TikTok", href: "https://tiktok.com/@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);