Update src/app/shop/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -28,22 +28,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Shop", id: "products" },
-          id: "hero",
+        { name: "About", id: "about" },
-        },
+        { name: "Reviews", id: "testimonials" },
-        {
+        { name: "Product", id: "/product-detail" },
-          name: "Shop",
-          id: "products",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Reviews",
-          id: "testimonials",
-        },
       ]}
       brandName="ThreadsCollection"
     />
@@ -51,64 +40,13 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboard
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
-      }}
       title="Timeless Style for Every Season"
       description="Discover ThreadsCollection, where quality meets comfort. Hand-picked pieces to elevate your daily wardrobe."
-      buttons={[
+      buttons={[{ text: "Shop New Arrivals", href: "#products" }]}
-        {
-          text: "Shop New Arrivals",
-          href: "#products",
-        },
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/fashionable-clothing-collection-modern-boutique-store-generated-by-ai_188544-33893.jpg?_wi=1"
       imageAlt="ThreadsCollection storefront collection"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924132.jpg",
-          alt: "Customer 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-caucasian-woman-holding-shopping-bags-make-selfie-by-camera-clothing-store_839833-1916.jpg",
-          alt: "Customer 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/cheerful-young-girl-with-purchases_23-2147652124.jpg",
-          alt: "Customer 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/brunette-woman-standing-bricks-wall-smiling-with-happy-face-looking-pointing-side-with-thumb-up_839833-15096.jpg",
-          alt: "Customer 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/personal-shopper-helping-cutomer_23-2148924084.jpg",
-          alt: "Customer 5",
-        },
-      ]}
       avatarText="Join 5,000+ satisfied customers"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Sustainable Materials",
-        },
-        {
-          type: "text",
-          text: "Free Shipping on Orders Over $100",
-        },
-        {
-          type: "text",
-          text: "Worldwide Delivery",
-        },
-        {
-          type: "text",
-          text: "Curated Quality",
-        },
-        {
-          type: "text",
-          text: "Timeless Aesthetics",
-        },
-      ]}
     />
   </div>
 
@@ -119,42 +57,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "p1", name: "Classic Summer Dress", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-walking-street-fashionable-outfit-holding-purse-wearing-black-leather-jacket-white-lace-dress-spring-autumn-style-full-length_285396-6762.jpg?_wi=1", onProductClick: () => window.location.href = '/product-detail' },
-          id: "p1",
+        { id: "p2", name: "Linen Casual Shirt", price: "$65", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-looking-away_23-2148665449.jpg?_wi=1" },
-          name: "Classic Summer Dress",
+        { id: "p3", name: "Structured Winter Coat", price: "$150", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-talking-phone-street_1303-13380.jpg?_wi=1" },
-          price: "$89",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-walking-street-fashionable-outfit-holding-purse-wearing-black-leather-jacket-white-lace-dress-spring-autumn-style-full-length_285396-6762.jpg",
-        },
-        {
-          id: "p2",
-          name: "Linen Casual Shirt",
-          price: "$65",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-looking-away_23-2148665449.jpg",
-        },
-        {
-          id: "p3",
-          name: "Structured Winter Coat",
-          price: "$150",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-talking-phone-street_1303-13380.jpg",
-        },
-        {
-          id: "p4",
-          name: "Silk Minimalist Blouse",
-          price: "$75",
-          imageSrc: "http://img.b2bpic.net/free-photo/fathers-day-composition-with-jersey-shoes_23-2147790773.jpg",
-        },
-        {
-          id: "p5",
-          name: "Tailored Everyday Trousers",
-          price: "$95",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-fashion-modern-businesswoman-model-white-suit-posing-street-background-blue-sky-walking_158538-11908.jpg",
-        },
-        {
-          id: "p6",
-          name: "Soft Knit Sweater",
-          price: "$80",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-charming-brunette-dressed-stylish-clothes-leaning-against-brick-wall-room-with-loft-interior_613910-9341.jpg",
-        },
       ]}
       title="Curated Essentials"
       description="Our latest collection, designed for those who appreciate lasting quality and minimalist design."
@@ -165,12 +70,7 @@ export default function LandingPage() {
       <TextAbout
       useInvertedBackground={true}
       title="Our Commitment to Quality Threads"
-      buttons={[
+      buttons={[{ text: "Learn More", href: "#" }]}
-        {
-          text: "Learn More",
-          href: "#",
-        },
-      ]}
     />
   </div>
 
@@ -178,48 +78,7 @@ export default function LandingPage() {
       <TestimonialCardTen
       textboxLayout="split"
       useInvertedBackground={false}
-      testimonials={[
+      testimonials={[]}
-        {
-          id: "t1",
-          title: "Great quality!",
-          quote: "I love the fabrics here. Everything is so soft and well-made.",
-          name: "Emily P.",
-          role: "Creative",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924132.jpg",
-        },
-        {
-          id: "t2",
-          title: "Staple pieces",
-          quote: "ThreadsCollection has become my go-to for daily staples.",
-          name: "Mark S.",
-          role: "Designer",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-woman-holding-shopping-bags-make-selfie-by-camera-clothing-store_839833-1916.jpg",
-        },
-        {
-          id: "t3",
-          title: "Perfect fit",
-          quote: "The sizing is always spot on. Finally, clothing that fits just right.",
-          name: "Sarah L.",
-          role: "Architect",
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-girl-with-purchases_23-2147652124.jpg",
-        },
-        {
-          id: "t4",
-          title: "Love the style",
-          quote: "Chic, simple, and elegant pieces. I get compliments all the time.",
-          name: "Anna V.",
-          role: "Marketing",
-          imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-standing-bricks-wall-smiling-with-happy-face-looking-pointing-side-with-thumb-up_839833-15096.jpg",
-        },
-        {
-          id: "t5",
-          title: "Sustainable focus",
-          quote: "I appreciate the attention to detail and sustainable practices.",
-          name: "David W.",
-          role: "Writer",
-          imageSrc: "http://img.b2bpic.net/free-photo/personal-shopper-helping-cutomer_23-2148924084.jpg",
-        },
-      ]}
       title="Trusted by Style Seekers"
       description="Hear what our community says about ThreadsCollection."
     />
@@ -230,28 +89,8 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="Let's Connect"
       description="Have questions about our collections? Our team is here to assist you."
-      imageSrc="http://img.b2bpic.net/free-photo/fashionable-clothing-collection-modern-boutique-store-generated-by-ai_188544-33893.jpg?_wi=2"
+      inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "email", type: "email", placeholder: "Your Email", required: true }]}
-      imageAlt="Contact support"
+      textarea={{ name: "message", placeholder: "How can we help?", rows: 4, required: true }}
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "How can we help?",
-        rows: 4,
-        required: true,
-      }}
     />
   </div>
 
@@ -259,45 +98,8 @@ export default function LandingPage() {
       <FooterBaseReveal
       logoText="ThreadsCollection"
       columns={[
-        {
+        { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }] },
-          title: "Company",
+        { title: "Support", items: [{ label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] },
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Shipping",
-              href: "#",
-            },
-            {
-              label: "Returns",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Follow",
-          items: [
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "Twitter",
-              href: "#",
-            },
-          ],
-        },
       ]}
     />
   </div>

src/app/product-detail/page.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
+
+export default function ProductDetailPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="smallMedium"
+        sizing="mediumLarge"
+        background="fluid"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Shop", id: "/#products" },
+              { name: "About", id: "/#about" },
+              { name: "Reviews", id: "/#testimonials" },
+            ]}
+            brandName="ThreadsCollection"
+          />
+        </div>
+
+        <div className="py-20">
+            <ProductDetailCard
+                layout="page"
+                name="Classic Summer Dress"
+                price="$89"
+                description="A timeless summer essential, crafted from breathable, high-quality linen. Designed for comfort and effortless style on any occasion."
+                images={[
+                    { src: "http://img.b2bpic.net/free-photo/young-pretty-woman-walking-street-fashionable-outfit-holding-purse-wearing-black-leather-jacket-white-lace-dress-spring-autumn-style-full-length_285396-6762.jpg", alt: "Front View" },
+                    { src: "http://img.b2bpic.net/free-photo/portrait-young-woman-looking-away_23-2148665449.jpg", alt: "Side View" }
+                ]}
+                variants={[
+                    { label: "Size", options: ["S", "M", "L", "XL"], selected: "M", onChange: (v) => console.log(v) },
+                    { label: "Color", options: ["White", "Beige", "Black"], selected: "White", onChange: (v) => console.log(v) }
+                ]}
+                quantity={{ label: "Quantity", options: ["1", "2", "3"], selected: "1", onChange: (v) => console.log(v) }}
+                buttons={[{ text: "Add to Cart", onClick: () => console.log("Added") }]}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="ThreadsCollection"
+            columns={[
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#about" },
+                  { label: "Careers", href: "#" },
+                ],
+              },
+              {
+                title: "Support",                items: [
+                  { label: "Shipping", href: "#" },
+                  { label: "Returns", href: "#" },
+                ],
+              },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+
+export default function ShopPage() {
+  const products = [
+    { id: "1", name: "Classic Summer Dress", price: "$89", rating: 4.8, imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-walking-street-fashionable-outfit-holding-purse-wearing-black-leather-jacket-white-lace-dress-spring-autumn-style-full-length_285396-6762.jpg?_wi=2" },
+    { id: "2", name: "Linen Casual Shirt", price: "$65", rating: 4.5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-looking-away_23-2148665449.jpg?_wi=2" },
+    { id: "3", name: "Structured Winter Coat", price: "$150", rating: 4.9, imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-talking-phone-street_1303-13380.jpg?_wi=2" },
+    { id: "4", name: "Silk Minimalist Blouse", price: "$75", rating: 4.7, imageSrc: "http://img.b2bpic.net/free-photo/fathers-day-composition-with-jersey-shoes_23-2147790773.jpg" },
+    { id: "5", name: "Tailored Everyday Trousers", price: "$95", rating: 4.6, imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-fashion-modern-businesswoman-model-white-suit-posing-street-background-blue-sky-walking_158538-11908.jpg" },
+    { id: "6", name: "Soft Knit Sweater", price: "$80", rating: 4.8, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-charming-brunette-dressed-stylish-clothes-leaning-against-brick-wall-room-with-loft-interior_613910-9341.jpg" },
+  ];
+
+  const filters = [
+    { label: "Category", options: ["All", "Dresses", "Shirts", "Coats", "Trousers"], selected: "All", onChange: () => {} },
+    { label: "Sort By", options: ["Featured", "Price: Low to High", "Price: High to Low"], selected: "Featured", onChange: () => {} }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="smallMedium"
+        sizing="mediumLarge"
+        background="fluid"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Shop", id: "/shop" },
+            { name: "About", id: "/about" },
+            { name: "Reviews", id: "/testimonials" },
+          ]}
+          brandName="ThreadsCollection"
+        />
+
+        <div className="pt-32 pb-20">
+          <ProductCatalog 
+            layout="page" 
+            products={products}
+            filters={filters}
+          />
+        </div>
+
+        <FooterBaseReveal
+          logoText="ThreadsCollection"
+          columns={[
+            { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Careers", href: "#" }] },
+            { title: "Support", items: [{ label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] },
+            { title: "Follow", items: [{ label: "Instagram", href: "#" }, { label: "Twitter", href: "#" }] },
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}