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';
@@ -32,6 +32,7 @@ export default function LandingPage() {
         <NavbarStyleApple
           navItems={[
             { name: "Collection", id: "gallery" },
+            { name: "Products", id: "/products" },
             { name: "Manifesto", id: "about" },
             { name: "Support", id: "faq" },
             { name: "Get In Touch", id: "contact" }
@@ -41,20 +42,12 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplitKpi
+        <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."
-          background={{ variant: 'rotated-rays-animated' }}
-          kpis={[
-            { value: "2025", label: "Collection" },
-            { value: "100%", label: "Signature Design" },
-            { value: "Limited", label: "Production" }
-          ]}
           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>
 
@@ -66,7 +59,7 @@ export default function LandingPage() {
             { 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"
@@ -137,7 +130,7 @@ export default function LandingPage() {
         <FooterLogoEmphasis
           logoText="CURSEMARKS"
           columns={[
-            { items: [{ label: "Collection" }, { label: "Manifesto" }] },
+            { items: [{ label: "Collection" }, { label: "Products", href: "/products" }, { label: "Manifesto" }] },
             { items: [{ label: "FAQ" }, { label: "Terms" }] }
           ]}
         />

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