Update src/app/page.tsx

Merge version_24 into main

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
@@ -31,42 +31,35 @@ export default function LandingPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleApple
           navItems={[
-            { name: "Gallery", id: "gallery" },
-            { name: "About", id: "about" },
-            { name: "Aftercare", id: "aftercare" },
-            { name: "Contact", id: "contact" }
+            { name: "Collection", id: "gallery" },
+            { name: "Products", id: "/products" },
+            { name: "Manifesto", id: "about" },
+            { name: "Support", id: "faq" },
+            { name: "Get In Touch", id: "contact" }
           ]}
-          brandName="Cursemarks"
+          brandName="CURSEMARKS"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <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" }
-          ]}
-          buttons={[{ text: "Book Your Mark", onClick: handleBooking }]}
+        <HeroOverlay
+          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."
+          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"
+          showBlur={true}
         />
       </div>
 
       <div id="gallery" data-section="gallery">
         <FeatureCardThree
-          title="Artistic Mastery"
-          description="Precision ink work defined by dark aesthetics and fine craftsmanship."
+          title="The Seasonal Drop"
+          description="Art meets utility. Our apparel features exclusive, hand-drawn motifs printed on heavy-weight, urban-ready silhouettes."
           features={[
-            { 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}
+            { 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" }
+          ]}
           gridVariant="bento-grid"
           animationType="slide-up"
           textboxLayout="split"
@@ -76,12 +69,12 @@ export default function LandingPage() {
 
       <div id="metrics" data-section="metrics">
         <MetricCardFourteen
-          title="Impact"
-          tag="Trust"
+          title="The Brand Standard"
+          tag="Quality"
           metrics={[
-            { id: "1", value: "100+", description: "Five Star Reviews" },
-            { id: "2", value: "500+", description: "Original Designs" },
-            { id: "3", value: "100%", description: "Artist Dedication" }
+            { 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"
@@ -90,17 +83,17 @@ export default function LandingPage() {
 
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardFive
-          title="Client Experiences"
-          description="Trusted by many."
+          title="The Cult Followers"
+          description="Seen in the streets, worn by the visionaries."
           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" 
+              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"
@@ -110,11 +103,11 @@ export default function LandingPage() {
 
       <div id="faq" data-section="faq">
         <FaqBase
-          title="Questions"
-          description="Everything you need to know about getting your custom tattoo."
+          title="Ordering & Shipping"
+          description="Get the details on drops, shipping, and sizing."
           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." }
+            { 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"
           textboxLayout="split"
@@ -124,10 +117,10 @@ export default function LandingPage() {
 
       <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 }]}
+          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}
         />
@@ -135,10 +128,10 @@ export default function LandingPage() {
 
       <div id="footer" data-section="footer">
         <FooterLogoEmphasis
-          logoText="Cursemarks"
+          logoText="CURSEMARKS"
           columns={[
-            { items: [{ label: "Home" }, { label: "Gallery" }] },
-            { items: [{ label: "About" }, { label: "Contact" }] }
+            { items: [{ label: "Collection" }, { label: "Products", href: "/products" }, { label: "Manifesto" }] },
+            { items: [{ label: "FAQ" }, { label: "Terms" }] }
           ]}
         />
       </div>

src/app/products/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="large"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Collection", id: "/#gallery" },
+            { name: "Products", id: "/products" },
+            { name: "Manifesto", id: "/#about" },
+            { name: "Support", id: "/#faq" },
+            { name: "Get In Touch", id: "/#contact" }
+          ]}
+          brandName="CURSEMARKS"
+        />
+      </div>
+
+      <div id="product" data-section="product">
+        <ProductCardTwo
+          title="Our Apparel Collection"
+          description="Browse our latest drops and signature pieces."
+          products={[
+            { id: "1", brand: "Cursemarks", name: "Signature Hoodie", price: "$89", rating: 5, reviewCount: "42", imageSrc: "https://images.unsplash.com/photo-1598371839684-b28bc8870a76?q=80&w=800&_wi=1" },
+            { id: "2", brand: "Cursemarks", name: "Occult Tee", price: "$45", rating: 4.8, reviewCount: "128", imageSrc: "https://images.unsplash.com/photo-1598371839684-b28bc8870a76?q=80&w=800&_wi=2" }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="CURSEMARKS"
+          columns={[
+            { items: [{ label: "Collection", href: "/" }, { label: "Products", href: "/products" }, { label: "Manifesto", href: "/" }] },
+            { items: [{ label: "FAQ", href: "/" }, { label: "Terms", href: "/" }] }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

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);