Update src/app/products/page.tsx

Merge version_23 into main

src/app/page.tsx

@@ -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" }
@@ -137,7 +138,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);