Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -29,25 +29,17 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Home",
-          id: "home",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "Shop",
-          id: "shop",
-        },
+          name: "Products",          id: "/products"},
         {
-          name: "Collections",
-          id: "collections",
-        },
+          name: "Shop",          id: "shop"},
         {
-          name: "About",
-          id: "about",
-        },
+          name: "Collections",          id: "collections"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "About",          id: "about"},
+        {
+          name: "Contact",          id: "contact"},
       ]}
       brandName="MODERN"
     />
@@ -56,78 +48,49 @@ export default function LandingPage() {
   <div id="home" data-section="home">
       <HeroSplitKpi
       background={{
-        variant: "canvas-reveal",
-      }}
+        variant: "canvas-reveal"}}
       title="Minimalism Redefined."
       description="Discover a curated collection of modern essentials crafted for the urban lifestyle. Elegance in every stitch."
       kpis={[
         {
-          value: "12+",
-          label: "New Collections",
-        },
+          value: "12+",          label: "New Collections"},
         {
-          value: "500+",
-          label: "Happy Customers",
-        },
+          value: "500+",          label: "Happy Customers"},
         {
-          value: "100%",
-          label: "Quality Assured",
-        },
+          value: "100%",          label: "Quality Assured"},
       ]}
       enableKpiAnimation={true}
       buttons={[
         {
-          text: "Shop Now",
-          href: "#shop",
-        },
+          text: "Shop Now",          href: "#shop"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style-lights-evening-cafes_1321-2929.jpg?_wi=1"
       imageAlt="Minimalist clothing brand aesthetic model"
       mediaAnimation="slide-up"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/fashion-girl-standing-summer-city_1157-23107.jpg",
-          alt: "Sarah J.",
-        },
+          src: "http://img.b2bpic.net/free-photo/fashion-girl-standing-summer-city_1157-23107.jpg",          alt: "Sarah J."},
         {
-          src: "http://img.b2bpic.net/free-photo/view-young-man-smiling-camera_197531-33438.jpg",
-          alt: "Michael C.",
-        },
+          src: "http://img.b2bpic.net/free-photo/view-young-man-smiling-camera_197531-33438.jpg",          alt: "Michael C."},
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-albino-woman_23-2150283418.jpg",
-          alt: "Emily R.",
-        },
+          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-albino-woman_23-2150283418.jpg",          alt: "Emily R."},
         {
-          src: "http://img.b2bpic.net/free-photo/full-shot-woman-drinking-coffee-outdoors_23-2149462137.jpg",
-          alt: "David K.",
-        },
+          src: "http://img.b2bpic.net/free-photo/full-shot-woman-drinking-coffee-outdoors_23-2149462137.jpg",          alt: "David K."},
         {
-          src: "http://img.b2bpic.net/free-photo/stylish-sexy-woman-dressed-elegant-tuxedo-suit-walking-city-summer-autumn-day_285396-8004.jpg",
-          alt: "Alice M.",
-        },
+          src: "http://img.b2bpic.net/free-photo/stylish-sexy-woman-dressed-elegant-tuxedo-suit-walking-city-summer-autumn-day_285396-8004.jpg",          alt: "Alice M."},
       ]}
       avatarText="Trusted by 5,000+ fashion enthusiasts."
       marqueeItems={[
         {
-          type: "text",
-          text: "Sustainable Materials",
-        },
+          type: "text",          text: "Sustainable Materials"},
         {
-          type: "text",
-          text: "Ethical Manufacturing",
-        },
+          type: "text",          text: "Ethical Manufacturing"},
         {
-          type: "text",
-          text: "Global Shipping",
-        },
+          type: "text",          text: "Global Shipping"},
         {
-          type: "text",
-          text: "Limited Drops",
-        },
+          type: "text",          text: "Limited Drops"},
         {
-          type: "text",
-          text: "Modern Design",
-        },
+          type: "text",          text: "Modern Design"},
       ]}
     />
   </div>
@@ -140,53 +103,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",
-          name: "Essential Hoodie",
-          price: "$89",
-          variant: "Black / L",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style_1321-3388.jpg",
-          imageAlt: "Essential Hoodie",
-        },
+          id: "p1",          name: "Essential Hoodie",          price: "$89",          variant: "Black / L",          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style_1321-3388.jpg?_wi=1",          imageAlt: "Essential Hoodie"},
         {
-          id: "p2",
-          name: "Premium Tee",
-          price: "$45",
-          variant: "White / M",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-beautiful-women-posing_23-2148906929.jpg",
-          imageAlt: "Premium Tee",
-        },
+          id: "p2",          name: "Premium Tee",          price: "$45",          variant: "White / M",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-beautiful-women-posing_23-2148906929.jpg?_wi=1",          imageAlt: "Premium Tee"},
         {
-          id: "p3",
-          name: "Urban Denim",
-          price: "$120",
-          variant: "Indigo / 32",
-          imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-indoors-still-life_23-2150756259.jpg",
-          imageAlt: "Urban Denim",
-        },
+          id: "p3",          name: "Urban Denim",          price: "$120",          variant: "Indigo / 32",          imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-indoors-still-life_23-2150756259.jpg?_wi=1",          imageAlt: "Urban Denim"},
         {
-          id: "p4",
-          name: "Minimalist Sneaks",
-          price: "$150",
-          variant: "Off-White / 10",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-white-ice-skates_23-2148320574.jpg",
-          imageAlt: "Minimalist Sneaks",
-        },
+          id: "p4",          name: "Minimalist Sneaks",          price: "$150",          variant: "Off-White / 10",          imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-white-ice-skates_23-2148320574.jpg?_wi=1",          imageAlt: "Minimalist Sneaks"},
         {
-          id: "p5",
-          name: "City Overcoat",
-          price: "$290",
-          variant: "Charcoal / L",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-portrait_23-2149157733.jpg",
-          imageAlt: "City Overcoat",
-        },
+          id: "p5",          name: "City Overcoat",          price: "$290",          variant: "Charcoal / L",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-portrait_23-2149157733.jpg",          imageAlt: "City Overcoat"},
         {
-          id: "p6",
-          name: "Leather Carryall",
-          price: "$195",
-          variant: "Brown",
-          imageSrc: "http://img.b2bpic.net/free-photo/fedora-hats-arrangement-studio-top-view_23-2150737109.jpg",
-          imageAlt: "Leather Carryall",
-        },
+          id: "p6",          name: "Leather Carryall",          price: "$195",          variant: "Brown",          imageSrc: "http://img.b2bpic.net/free-photo/fedora-hats-arrangement-studio-top-view_23-2150737109.jpg",          imageAlt: "Leather Carryall"},
       ]}
       title="Featured Collection"
       description="Explore our hand-picked styles of the season, designed for ultimate comfort and modern style."
@@ -200,9 +127,7 @@ export default function LandingPage() {
       description="Born from a passion for urban minimalism, we believe that fashion should be effortless, functional, and timeless. Every piece is an extension of modern lifestyle, built for the city and beyond."
       buttons={[
         {
-          text: "Learn More",
-          href: "#",
-        },
+          text: "Learn More",          href: "#"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/beautiful-girl-stylish-white-suit-sits-white-cube-gallery_8353-10744.jpg"
       imageAlt="Brand Story studio workshop"
@@ -216,45 +141,20 @@ export default function LandingPage() {
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "t1",
-          name: "Sarah J.",
-          handle: "@sarahj",
-          testimonial: "The most comfortable hoodies I've ever owned. Perfectly minimalist design.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/fashion-girl-standing-summer-city_1157-23107.jpg",
-        },
+          id: "t1",          name: "Sarah J.",          handle: "@sarahj",          testimonial: "The most comfortable hoodies I've ever owned. Perfectly minimalist design.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/fashion-girl-standing-summer-city_1157-23107.jpg"},
         {
-          id: "t2",
-          name: "Michael C.",
-          handle: "@mchen",
-          testimonial: "Quality is unmatched. These pieces look great even after months of daily wear.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/view-young-man-smiling-camera_197531-33438.jpg",
-        },
+          id: "t2",          name: "Michael C.",          handle: "@mchen",          testimonial: "Quality is unmatched. These pieces look great even after months of daily wear.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/view-young-man-smiling-camera_197531-33438.jpg"},
         {
-          id: "t3",
-          name: "Emily R.",
-          handle: "@emilyr",
-          testimonial: "Fast shipping, beautiful packaging, and even better product. MODERN is my go-to.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-albino-woman_23-2150283418.jpg",
-        },
+          id: "t3",          name: "Emily R.",          handle: "@emilyr",          testimonial: "Fast shipping, beautiful packaging, and even better product. MODERN is my go-to.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-albino-woman_23-2150283418.jpg"},
         {
-          id: "t4",
-          name: "David K.",
-          handle: "@dkim",
-          testimonial: "Clean aesthetic and premium materials. Worth every single penny.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-drinking-coffee-outdoors_23-2149462137.jpg",
-        },
+          id: "t4",          name: "David K.",          handle: "@dkim",          testimonial: "Clean aesthetic and premium materials. Worth every single penny.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-drinking-coffee-outdoors_23-2149462137.jpg"},
         {
-          id: "t5",
-          name: "Alice M.",
-          handle: "@alicem",
-          testimonial: "I love how versatile these basics are. Can dress them up or down easily.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-sexy-woman-dressed-elegant-tuxedo-suit-walking-city-summer-autumn-day_285396-8004.jpg",
-        },
+          id: "t5",          name: "Alice M.",          handle: "@alicem",          testimonial: "I love how versatile these basics are. Can dress them up or down easily.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/stylish-sexy-woman-dressed-elegant-tuxedo-suit-walking-city-summer-autumn-day_285396-8004.jpg"},
       ]}
       showRating={true}
       title="Hear From Our Community"
@@ -269,22 +169,14 @@ export default function LandingPage() {
       description="Have questions or just want to say hi? We'd love to hear from you."
       inputs={[
         {
-          name: "name",
-          type: "text",
-          placeholder: "Name",
-          required: true,
+          name: "name",          type: "text",          placeholder: "Name",          required: true,
         },
         {
-          name: "email",
-          type: "email",
-          placeholder: "Email",
-          required: true,
+          name: "email",          type: "email",          placeholder: "Email",          required: true,
         },
       ]}
       textarea={{
-        name: "message",
-        placeholder: "How can we help you?",
-        required: true,
+        name: "message",        placeholder: "How can we help you?",        required: true,
       }}
       imageSrc="http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style-lights-evening-cafes_1321-2929.jpg?_wi=2"
       imageAlt="Minimalist clothing background"
@@ -294,58 +186,37 @@ export default function LandingPage() {
 
   <div id="footer" data-section="footer">
       <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/copy-space-white-marble-wall_23-2148801210.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/copy-space-white-marble-wall_23-2148801210.jpg?_wi=1"
       logoText="MODERN"
       columns={[
         {
-          title: "Shop",
-          items: [
+          title: "Shop",          items: [
             {
-              label: "New Arrivals",
-              href: "#",
-            },
+              label: "New Arrivals",              href: "#"},
             {
-              label: "Best Sellers",
-              href: "#",
-            },
+              label: "Best Sellers",              href: "#"},
             {
-              label: "Collections",
-              href: "#",
-            },
+              label: "Collections",              href: "#"},
           ],
         },
         {
-          title: "Brand",
-          items: [
+          title: "Brand",          items: [
             {
-              label: "About Us",
-              href: "#",
-            },
+              label: "About Us",              href: "#"},
             {
-              label: "Our Story",
-              href: "#",
-            },
+              label: "Our Story",              href: "#"},
             {
-              label: "Sustainability",
-              href: "#",
-            },
+              label: "Sustainability",              href: "#"},
           ],
         },
         {
-          title: "Support",
-          items: [
+          title: "Support",          items: [
             {
-              label: "Contact",
-              href: "#",
-            },
+              label: "Contact",              href: "#"},
             {
-              label: "FAQ",
-              href: "#",
-            },
+              label: "FAQ",              href: "#"},
             {
-              label: "Returns",
-              href: "#",
-            },
+              label: "Returns",              href: "#"},
           ],
         },
       ]}

src/app/products/page.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="largeSmallSizeLargeTitles"
+        background="circleGradient"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Products", id: "/products" },
+              { name: "Shop", id: "shop" },
+              { name: "Collections", id: "collections" },
+              { name: "About", id: "about" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="MODERN"
+          />
+        </div>
+
+        <div id="products" data-section="products">
+          <ProductCardThree
+            title="All Products"
+            description="Browse our complete collection of modern, minimalist essentials."
+            gridVariant="four-items-2x2-equal-grid"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", name: "Essential Hoodie", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style_1321-3388.jpg?_wi=2" },
+              { id: "p2", name: "Premium Tee", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-beautiful-women-posing_23-2148906929.jpg?_wi=2" },
+              { id: "p3", name: "Urban Denim", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-indoors-still-life_23-2150756259.jpg?_wi=2" },
+              { id: "p4", name: "Minimalist Sneaks", price: "$150", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-white-ice-skates_23-2148320574.jpg?_wi=2" },
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/copy-space-white-marble-wall_23-2148801210.jpg?_wi=2"
+            logoText="MODERN"
+            columns={[]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -12,11 +12,11 @@
 
   --background: #ffffff;
   --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
+  --foreground: #120a00e6;
+  --primary-cta: #ff8c42;
   --primary-cta-text: #ffffff;
   --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000612e6;
+  --secondary-cta-text: #120a00e6;
   --accent: #e2e2e2;
   --background-accent: #c4c4c4;