Update src/app/shop/page.tsx

Merge version_2 into main

src/app/account/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+
+export default function AccountPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="largeSmall"
+        background="circleGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              {name: "Home", id: "/#hero"},
+              {name: "About", id: "/#about"},
+              {name: "Products", id: "/#products"},
+              {name: "Features", id: "/#features"},
+              {name: "Testimonials", id: "/#testimonials"},
+              {name: "Contact", id: "/#contact"},
+              {name: "Signup", id: "/signup"},
+              {name: "Order History", id: "/order-history"},
+              {name: "Account", id: "/account"}
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
+            logoAlt="Elegance Atelier Logo"
+            brandName="Elegance Atelier"
+            button={{
+              text: "Login", href: "/login"}}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <main className="min-h-screen pt-[var(--navbar-height)] flex flex-col items-center justify-center p-4">
+          <div className="max-w-screen-lg mx-auto py-16 text-center">
+            <h1 className="text-4xl md:text-5xl font-bold mb-4 animate-entrance-slide">
+              My Account
+            </h1>
+            <p className="text-lg md:text-xl text-foreground/80 mb-8 animate-entrance-slide delay-100">
+              Manage your personal information, preferences, and security settings.
+            </p>
+            <p className="text-foreground/60 animate-entrance-slide delay-200">
+              Content for interactive account management features will be displayed here.
+            </p>
+          </div>
+        </main>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/order-history/page.tsx

@@ -2,17 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 
 export default function OrderHistoryPage() {
-  // Placeholder for order history data
-  const orders = [
-    { id: "ORD001", date: "2024-03-15", total: "$1,250", status: "Delivered", items: ["Chronos Elegance Watch"] },
-    { id: "ORD002", date: "2024-02-28", total: "$450", status: "Shipped", items: ["Versailles Silk Scarf"] },
-    { id: "ORD003", date: "2024-01-10", total: "$8,900", status: "Delivered", items: ["Empress Alligator Handbag"] },
-  ];
-
   return (
     <ThemeProvider
         defaultButtonVariant="text-shift"
@@ -30,15 +22,15 @@ export default function OrderHistoryPage() {
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingInline
             navItems={[
-              { name: "Home", id: "#hero" },
-              { name: "About", id: "#about" },
-              { name: "Products", id: "#products" },
-              { name: "Features", id: "#features" },
-              { name: "Testimonials", id: "#testimonials" },
-              { name: "Contact", id: "#contact" },
-              { name: "Signup", id: "/signup" },
-              { name: "Order History", id: "/order-history" },
-              { name: "Account", id: "/account" },
+              {name: "Home", id: "/#hero"},
+              {name: "About", id: "/#about"},
+              {name: "Products", id: "/#products"},
+              {name: "Features", id: "/#features"},
+              {name: "Testimonials", id: "/#testimonials"},
+              {name: "Contact", id: "/#contact"},
+              {name: "Signup", id: "/signup"},
+              {name: "Order History", id: "/order-history"},
+              {name: "Account", id: "/account"}
             ]}
             logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
             logoAlt="Elegance Atelier Logo"
@@ -49,70 +41,19 @@ export default function OrderHistoryPage() {
           />
         </div>
 
-        <main className="container mx-auto py-12 px-4 min-h-[calc(100vh-200px)]">
-          <h1 className="text-4xl font-bold mb-8 text-center">Your Order History</h1>
-          {
-            orders.length === 0 ? (
-              <p className="text-center text-lg text-foreground">You haven't placed any orders yet.</p>
-            ) : (
-              <div className="space-y-6">
-                {orders.map((order) => (
-                  <div key={order.id} className="p-6 rounded-lg shadow-md bg-card border border-border">
-                    <div className="flex justify-between items-center mb-4">
-                      <h2 className="text-xl font-semibold text-foreground">Order ID: {order.id}</h2>
-                      <span className="text-sm font-medium text-accent">{order.status}</span>
+        <main className="min-h-screen pt-[var(--navbar-height)] flex flex-col items-center justify-center p-4">
+          <div className="max-w-screen-lg mx-auto py-16 text-center">
+            <h1 className="text-4xl md:text-5xl font-bold mb-4 animate-entrance-slide">
+              My Order History
+            </h1>
+            <p className="text-lg md:text-xl text-foreground/80 mb-8 animate-entrance-slide delay-100">
+              View your past orders, track shipments, and manage returns.
+            </p>
+            <p className="text-foreground/60 animate-entrance-slide delay-200">
+              Content for interactive order tracking and management will be displayed here.
+            </p>
           </div>
-                    <p className="text-foreground mb-2">Date: {order.date}</p>
-                    <p className="text-foreground mb-4">Total: {order.total}</p>
-                    <div className="border-t border-border pt-4">
-                      <h3 className="text-lg font-medium text-foreground mb-2">Items:</h3>
-                      <ul className="list-disc list-inside text-foreground">
-                        {order.items.map((item, index) => (
-                          <li key={index}>{item}</li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )
-          }
         </main>
-
-        <div id="footer" data-section="footer">
-          <FooterLogoEmphasis
-            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
-            logoAlt="Elegance Atelier Logo"
-            columns={[
-              {
-                items: [
-                  { label: "Home", href: "#hero" },
-                  { label: "About Us", href: "#about" },
-                  { label: "Collections", href: "#products" },
-                  { label: "Membership", href: "#pricing" },
-                ],
-              },
-              {
-                items: [
-                  { label: "Contact", href: "#contact" },
-                  { label: "FAQ", href: "#faq" },
-                  { label: "Login", href: "/login" },
-                  { label: "Signup", href: "/signup" },
-                  { label: "Order History", href: "/order-history" },
-                  { label: "Account", href: "/account" },
-                ],
-              },
-              {
-                items: [
-                  { label: "Privacy Policy", href: "#" },
-                  { label: "Terms of Service", href: "#" },
-                  { label: "Shipping & Returns", href: "#" },
-                ],
-              },
-            ]}
-            logoText="Elegance Atelier"
-          />
-        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/page.tsx

@@ -39,12 +39,16 @@ export default function LandingPage() {
           name: "About",          id: "#about"},
         {
           name: "Products",          id: "#products"},
+        {
+          name: "Shop",          id: "/shop"},
         {
           name: "Features",          id: "#features"},
         {
           name: "Testimonials",          id: "#testimonials"},
         {
           name: "Contact",          id: "#contact"},
+        {
+          name: "Cart",          id: "/cart"},
         {
           name: "Signup",          id: "/signup"},
         {
@@ -105,17 +109,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "watch-1",          name: "Chronos Elegance Watch",          price: "$5,200",          variant: "Rose Gold",          imageSrc: "http://img.b2bpic.net/free-photo/groom-fastens-buttons-his-wedding-suit_8353-10664.jpg",          imageAlt: "Luxury rose gold watch"},
+          id: "watch-1",          name: "Chronos Elegance Watch",          price: "$5,200",          variant: "Rose Gold",          imageSrc: "http://img.b2bpic.net/free-photo/groom-fastens-buttons-his-wedding-suit_8353-10664.jpg?_wi=1",          imageAlt: "Luxury rose gold watch"},
         {
-          id: "handbag-1",          name: "Empress Alligator Handbag",          price: "$8,900",          variant: "Midnight Black",          imageSrc: "http://img.b2bpic.net/free-photo/happy-father-s-day-composition-father-s-day-top-view_185193-109773.jpg",          imageAlt: "Designer alligator handbag"},
+          id: "handbag-1",          name: "Empress Alligator Handbag",          price: "$8,900",          variant: "Midnight Black",          imageSrc: "http://img.b2bpic.net/free-photo/happy-father-s-day-composition-father-s-day-top-view_185193-109773.jpg?_wi=1",          imageAlt: "Designer alligator handbag"},
         {
-          id: "scarf-1",          name: "Versailles Silk Scarf",          price: "$450",          variant: "Emerald Green",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63513.jpg",          imageAlt: "Elegant silk scarf"},
+          id: "scarf-1",          name: "Versailles Silk Scarf",          price: "$450",          variant: "Emerald Green",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63513.jpg?_wi=1",          imageAlt: "Elegant silk scarf"},
         {
-          id: "earrings-1",          name: "Celestial Diamond Earrings",          price: "$3,800",          variant: "Platinum",          imageSrc: "http://img.b2bpic.net/free-photo/moment-before-kiss-young-beautiful-caucasian-couple-sunny-day-outdoors_8353-10690.jpg",          imageAlt: "Sparkling diamond earrings"},
+          id: "earrings-1",          name: "Celestial Diamond Earrings",          price: "$3,800",          variant: "Platinum",          imageSrc: "http://img.b2bpic.net/free-photo/moment-before-kiss-young-beautiful-caucasian-couple-sunny-day-outdoors_8353-10690.jpg?_wi=1",          imageAlt: "Sparkling diamond earrings"},
         {
-          id: "pen-1",          name: "Sovereign Fountain Pen",          price: "$1,100",          variant: "Obsidian Black",          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-pen-ai-generated_23-2150695517.jpg",          imageAlt: "Luxury fountain pen"},
+          id: "pen-1",          name: "Sovereign Fountain Pen",          price: "$1,100",          variant: "Obsidian Black",          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-pen-ai-generated_23-2150695517.jpg?_wi=1",          imageAlt: "Luxury fountain pen"},
         {
-          id: "cufflinks-1",          name: "Aristocrat Cufflinks",          price: "$680",          variant: "Sterling Silver",          imageSrc: "http://img.b2bpic.net/free-photo/grooms-morning-preparation_1328-1774.jpg",          imageAlt: "Sterling silver cufflinks"},
+          id: "cufflinks-1",          name: "Aristocrat Cufflinks",          price: "$680",          variant: "Sterling Silver",          imageSrc: "http://img.b2bpic.net/free-photo/grooms-morning-preparation_1328-1774.jpg?_wi=1",          imageAlt: "Sterling silver cufflinks"},
       ]}
       title="Our Exquisite Collection"
       description="Indulge in our selection of finely crafted pieces, designed to elevate your lifestyle."
@@ -282,6 +286,8 @@ export default function LandingPage() {
               label: "About Us",              href: "#about"},
             {
               label: "Collections",              href: "#products"},
+            {
+              label: "Shop",              href: "/shop"},
             {
               label: "Membership",              href: "#pricing"},
           ],
@@ -296,6 +302,8 @@ export default function LandingPage() {
               label: "Login",              href: "/login"},
             {
               label: "Signup",              href: "/signup"},
+            {
+              label: "Cart",              href: "/cart"},
             {
               label: "Order History",              href: "/order-history"},
             {

src/app/shop/[productId]/page.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+
+export default function ProductDetailPage({ params }: { params: { productId: string } }) {
+  const { productId } = params;
+
+  // In a real application, you would fetch product details using productId
+  const dummyProduct = {
+    id: productId,
+    name: "Luxury Product " + productId,
+    description: `This is a placeholder for the detailed description of ${productId}. Discover its exquisite craftsmanship, premium materials, and timeless elegance.`,
+    price: "$X,XXX",    imageSrc: "http://img.b2bpic.net/free-photo/fashionable-womens-accessories-pink-background-high-quality-photo_185193-108744.jpg"
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="largeSmall"
+        background="circleGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              {
+                name: "Home",          id: "/"},
+              {
+                name: "About",          id: "#about"},
+              {
+                name: "Products",          id: "#products"},
+              {
+                name: "Shop",          id: "/shop"},
+              {
+                name: "Features",          id: "#features"},
+              {
+                name: "Testimonials",          id: "#testimonials"},
+              {
+                name: "Contact",          id: "#contact"},
+              {
+                name: "Cart",          id: "/cart"},
+              {
+                name: "Signup",          id: "/signup"},
+              {
+                name: "Order History",          id: "/order-history"},
+              {
+                name: "Account",          id: "/account"},
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
+            logoAlt="Elegance Atelier Logo"
+            brandName="Elegance Atelier"
+            button={{
+              text: "Login",        href: "/login"}}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <main className="container mx-auto p-4 md:p-8 min-h-screen">
+          <div className="flex flex-col md:flex-row gap-8 items-start">
+            <div className="md:w-1/2">
+              <img src={dummyProduct.imageSrc} alt={dummyProduct.name} className="w-full h-auto object-cover rounded-lg shadow-lg" />
+            </div>
+            <div className="md:w-1/2 flex flex-col gap-4">
+              <h1 className="text-4xl font-light text-foreground">{dummyProduct.name}</h1>
+              <p className="text-2xl font-semibold text-primary-cta">{dummyProduct.price}</p>
+              <p className="text-foreground-secondary leading-relaxed">{dummyProduct.description}</p>
+              <div className="mt-6 flex flex-col sm:flex-row gap-4">
+                <button className="px-6 py-3 bg-primary-cta text-primary-cta-foreground rounded-full shadow-md hover:bg-opacity-90 transition-colors">Add to Cart</button>
+                <button className="px-6 py-3 border border-secondary-cta text-secondary-cta rounded-full shadow-md hover:bg-secondary-cta hover:text-secondary-cta-foreground transition-colors">Buy Now</button>
+              </div>
+            </div>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
+            logoAlt="Elegance Atelier Logo"
+            columns={[
+              {
+                items: [
+                  {
+                    label: "Home",              href: "/"},
+                  {
+                    label: "About Us",              href: "#about"},
+                  {
+                    label: "Collections",              href: "#products"},
+                  {
+                    label: "Shop",              href: "/shop"},
+                  {
+                    label: "Membership",              href: "#pricing"},
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "Contact",              href: "#contact"},
+                  {
+                    label: "FAQ",              href: "#faq"},
+                  {
+                    label: "Login",              href: "/login"},
+                  {
+                    label: "Signup",              href: "/signup"},
+                  {
+                    label: "Cart",              href: "/cart"},
+                  {
+                    label: "Order History",              href: "/order-history"},
+                  {
+                    label: "Account",              href: "/account"}
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "Privacy Policy",              href: "#"},
+                  {
+                    label: "Terms of Service",              href: "#"},
+                  {
+                    label: "Shipping & Returns",              href: "#"},
+                ],
+              },
+            ]}
+            logoText="Elegance Atelier"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -1,107 +1,12 @@
 "use client";
 
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import ProductCardFour from "@/components/sections/product/ProductCardFour";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import { useState } from "react";
-
-const productsData = [
-  {
-    id: "watch-1",    name: "Chronos Elegance Watch",    brand: "Elegance Atelier",    price: "$5,200",    rating: 4.5,
-    reviewCount: "120 reviews",    variant: "Rose Gold",    description: "A timeless masterpiece combining classic design with modern precision. Featuring a rose gold casing, automatic movement, and a genuine leather strap. Water-resistant up to 50 meters.",    imageSrc: "http://img.b2bpic.net/free-photo/groom-fastens-buttons-his-wedding-suit_8353-10664.jpg?_wi=1",    imageAlt: "Luxury rose gold watch",    images: [
-      { src: "http://img.b2bpic.net/free-photo/groom-fastens-buttons-his-wedding-suit_8353-10664.jpg", alt: "Luxury rose gold watch" },
-      { src: "http://img.b2bpic.net/free-photo/wedding-watch-rings-flowers-shoes-pink-background_140725-63863.jpg", alt: "Watch on display" },
-      { src: "http://img.b2bpic.net/free-photo/men-s-accessories-set-gentleman-wearing-classic-rose-gold-watch-dark-leather-strap-wrist-close-up-view-with-cufflinks-sunglasses-table_23-2148095697.jpg", alt: "Watch detail" }
-    ],
-    variants: [
-      { label: "Color", options: ["Rose Gold", "Silver", "Black"] }
-    ]
-  },
-  {
-    id: "handbag-1",    name: "Empress Alligator Handbag",    brand: "Elegance Atelier",    price: "$8,900",    rating: 4.8,
-    reviewCount: "85 reviews",    variant: "Midnight Black",    description: "Exquisitely crafted from genuine alligator leather, this handbag embodies sophistication. Featuring a spacious interior, gold-tone hardware, and a detachable shoulder strap. Perfect for grand occasions.",    imageSrc: "http://img.b2bpic.net/free-photo/happy-father-s-day-composition-father-s-day-top-view_185193-109773.jpg?_wi=1",    imageAlt: "Designer alligator handbag",    images: [
-      { src: "http://img.b2bpic.net/free-photo/happy-father-s-day-composition-father-s-day-top-view_185193-109773.jpg", alt: "Designer alligator handbag" },
-      { src: "http://img.b2bpic.net/free-photo/leather-handbag_23-2147743936.jpg", alt: "Handbag detail" },
-      { src: "http://img.b2bpic.net/free-photo/luxury-handbag-white-background_23-2147743922.jpg", alt: "Handbag opened" }
-    ],
-    variants: [
-      { label: "Color", options: ["Midnight Black", "Emerald Green", "Ruby Red"] }
-    ]
-  },
-  {
-    id: "scarf-1",    name: "Versailles Silk Scarf",    brand: "Elegance Atelier",    price: "$450",    rating: 4.2,
-    reviewCount: "60 reviews",    variant: "Emerald Green",    description: "A luxurious silk scarf inspired by the gardens of Versailles. Made from 100% pure Mulberry silk, featuring a vibrant emerald green pattern. Adds a touch of refined elegance to any outfit.",    imageSrc: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63513.jpg?_wi=1",    imageAlt: "Elegant silk scarf",    images: [
-      { src: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63513.jpg", alt: "Elegant silk scarf" },
-      { src: "http://img.b2bpic.net/free-photo/flat-lay-elegant-silk-scarf_23-2148671691.jpg", alt: "Scarf pattern" },
-      { src: "http://img.b2bpic.net/free-photo/elegant-silk-scarf-display_23-2148719941.jpg", alt: "Scarf on mannequin" }
-    ],
-    variants: [
-      { label: "Color", options: ["Emerald Green", "Royal Blue", "Crimson Red"] }
-    ]
-  },
-  {
-    id: "earrings-1",    name: "Celestial Diamond Earrings",    brand: "Elegance Atelier",    price: "$3,800",    rating: 4.9,
-    reviewCount: "95 reviews",    variant: "Platinum",    description: "Dazzling diamond earrings crafted in platinum, featuring brilliant-cut diamonds. Each stone is ethically sourced and meticulously set to maximize sparkle. A perfect gift for special occasions.",    imageSrc: "http://img.b2bpic.net/free-photo/moment-before-kiss-young-beautiful-caucasian-couple-sunny-day-outdoors_8353-10690.jpg?_wi=1",    imageAlt: "Sparkling diamond earrings",    images: [
-      { src: "http://img.b2bpic.net/free-photo/moment-before-kiss-young-beautiful-caucasian-couple-sunny-day-outdoors_8353-10690.jpg", alt: "Sparkling diamond earrings" },
-      { src: "http://img.b2bpic.net/free-photo/close-up-diamond-earrings-jewelry_23-2148680798.jpg", alt: "Earrings close-up" },
-      { src: "http://img.b2bpic.net/free-photo/woman-wearing-diamond-earrings_23-2148720000.jpg", alt: "Earrings worn" }
-    ],
-    variants: [
-      { label: "Metal", options: ["Platinum", "White Gold", "Yellow Gold"] }
-    ]
-  },
-  {
-    id: "pen-1",    name: "Sovereign Fountain Pen",    brand: "Elegance Atelier",    price: "$1,100",    rating: 4.7,
-    reviewCount: "70 reviews",    variant: "Obsidian Black",    description: "Experience the art of writing with our Sovereign Fountain Pen. Crafted with a polished obsidian black finish and 18k gold nib, it offers a smooth, luxurious writing experience.",    imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-pen-ai-generated_23-2150695517.jpg?_wi=1",    imageAlt: "Luxury fountain pen",    images: [
-      { src: "http://img.b2bpic.net/free-photo/3d-rendering-pen-ai-generated_23-2150695517.jpg", alt: "Luxury fountain pen" },
-      { src: "http://img.b2bpic.net/free-photo/fountain-pen-writing-pad_23-2147743950.jpg", alt: "Pen with ink" },
-      { src: "http://img.b2bpic.net/free-photo/elegant-writing-utensil_23-2147743945.jpg", alt: "Pen on desk" }
-    ],
-    variants: [
-      { label: "Finish", options: ["Obsidian Black", "Deep Blue", "Emerald Green"] }
-    ]
-  },
-  {
-    id: "cufflinks-1",    name: "Aristocrat Cufflinks",    brand: "Elegance Atelier",    price: "$680",    rating: 4.6,
-    reviewCount: "55 reviews",    variant: "Sterling Silver",    description: "Elevate your formal wear with these meticulously crafted sterling silver cufflinks. Featuring a unique geometric design and a polished finish. A statement of refined taste.",    imageSrc: "http://img.b2bpic.net/free-photo/grooms-morning-preparation_1328-1774.jpg?_wi=1",    imageAlt: "Sterling silver cufflinks",    images: [
-      { src: "http://img.b2bpic.net/free-photo/grooms-morning-preparation_1328-1774.jpg", alt: "Sterling silver cufflinks" },
-      { src: "http://img.b2bpic.net/free-photo/cufflinks-on-white-shirt_23-2147743960.jpg", alt: "Cufflinks close-up" },
-      { src: "http://img.b2bpic.net/free-photo/elegant-cufflinks-on-shirt_23-2147743965.jpg", alt: "Cufflinks on shirt" }
-    ],
-    variants: [
-      { label: "Material", options: ["Sterling Silver", "Rose Gold Plated", "Gold Plated"] }
-    ]
-  },
-];
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 
 export default function ShopPage() {
-  const [filter, setFilter] = useState('All');
-
-  const filteredProducts = productsData.filter(product => {
-    if (filter === 'All') return true;
-    if (filter === 'Watches' && product.id.includes('watch')) return true;
-    if (filter === 'Handbags' && product.id.includes('handbag')) return true;
-    if (filter === 'Jewelry' && (product.id.includes('earrings') || product.id.includes('cufflinks'))) return true;
-    if (filter === 'Accessories' && (product.id.includes('scarf') || product.id.includes('pen'))) return true;
-    return false;
-  });
-
-  const handleFilterChange = (newFilter: string) => {
-    setFilter(newFilter);
-  };
-
-  const shopProducts = filteredProducts.map(product => ({
-    id: product.id,
-    name: product.name,
-    price: product.price,
-    variant: product.variant,
-    imageSrc: product.imageSrc,
-    imageAlt: product.imageAlt,
-    onProductClick: () => window.location.href = `/products/${product.id}`,
-  }));
-
   return (
     <ThemeProvider
         defaultButtonVariant="text-shift"
@@ -120,59 +25,86 @@ export default function ShopPage() {
           <NavbarLayoutFloatingInline
             navItems={[
               {
-                name: "Home",                id: "#hero"},
+                name: "Home",          id: "/"},
               {
                 name: "About",          id: "#about"},
               {
-                name: "Shop",                id: "/shop"},
+                name: "Products",          id: "#products"},
               {
-                name: "Products",                id: "/products"},
+                name: "Shop",          id: "/shop"},
               {
                 name: "Features",          id: "#features"},
               {
                 name: "Testimonials",          id: "#testimonials"},
               {
                 name: "Contact",          id: "#contact"},
+              {
+                name: "Cart",          id: "/cart"},
+              {
+                name: "Signup",          id: "/signup"},
+              {
+                name: "Order History",          id: "/order-history"},
+              {
+                name: "Account",          id: "/account"},
             ]}
             logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
             logoAlt="Elegance Atelier Logo"
             brandName="Elegance Atelier"
             button={{
-              text: "Shop Now",              href: "/shop"}}
+              text: "Login",        href: "/login"}}
             animateOnLoad={true}
           />
         </div>
 
         <div id="shop-products" data-section="shop-products">
-          <div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
-            <h1 className="text-center text-4xl font-light tracking-tight text-foreground sm:text-5xl lg:text-6xl">Our Shop</h1>
-            <p className="mt-4 text-center text-lg text-foreground/70">Browse our curated collection of luxury items.</p>
-
-            <div className="mt-8 flex justify-center space-x-4 mb-8">
-              {['All', 'Watches', 'Handbags', 'Jewelry', 'Accessories'].map(category => (
-                <button
-                  key={category}
-                  onClick={() => handleFilterChange(category)}
-                  className={`px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200
-                    ${filter === category ? 'bg-primary-cta text-white' : 'bg-card text-foreground hover:bg-card/80'}`}
-                >
-                  {category}
-                </button>
-              ))}
-            </div>
-
-            <ProductCardFour
+          <ProductCardTwo
             animationType="slide-up"
             textboxLayout="default"
             gridVariant="three-columns-all-equal-width"
             useInvertedBackground={false}
-              products={shopProducts}
-              title=""
-              description=""
-              buttons={[]}
+            products={[
+              {
+                id: "watch-1",                brand: "Elegance Atelier",                name: "Chronos Elegance Watch",                price: "$5,200",                rating: 4.5,
+                reviewCount: "25 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/groom-fastens-buttons-his-wedding-suit_8353-10664.jpg?_wi=2",                imageAlt: "Luxury rose gold watch",                onProductClick: () => window.location.href = "/shop/watch-1"
+              },
+              {
+                id: "handbag-1",                brand: "Elegance Atelier",                name: "Empress Alligator Handbag",                price: "$8,900",                rating: 4.8,
+                reviewCount: "18 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/happy-father-s-day-composition-father-s-day-top-view_185193-109773.jpg?_wi=2",                imageAlt: "Designer alligator handbag",                onProductClick: () => window.location.href = "/shop/handbag-1"
+              },
+              {
+                id: "scarf-1",                brand: "Elegance Atelier",                name: "Versailles Silk Scarf",                price: "$450",                rating: 4.2,
+                reviewCount: "30 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63513.jpg?_wi=2",                imageAlt: "Elegant silk scarf",                onProductClick: () => window.location.href = "/shop/scarf-1"
+              },
+              {
+                id: "earrings-1",                brand: "Elegance Atelier",                name: "Celestial Diamond Earrings",                price: "$3,800",                rating: 4.9,
+                reviewCount: "12 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/moment-before-kiss-young-beautiful-caucasian-couple-sunny-day-outdoors_8353-10690.jpg?_wi=2",                imageAlt: "Sparkling diamond earrings",                onProductClick: () => window.location.href = "/shop/earrings-1"
+              },
+              {
+                id: "pen-1",                brand: "Elegance Atelier",                name: "Sovereign Fountain Pen",                price: "$1,100",                rating: 4.7,
+                reviewCount: "20 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-pen-ai-generated_23-2150695517.jpg?_wi=2",                imageAlt: "Luxury fountain pen",                onProductClick: () => window.location.href = "/shop/pen-1"
+              },
+              {
+                id: "cufflinks-1",                brand: "Elegance Atelier",                name: "Aristocrat Cufflinks",                price: "$680",                rating: 4.6,
+                reviewCount: "15 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/grooms-morning-preparation_1328-1774.jpg?_wi=2",                imageAlt: "Sterling silver cufflinks",                onProductClick: () => window.location.href = "/shop/cufflinks-1"
+              },
+              {
+                id: "ring-1",                brand: "Elegance Atelier",                name: "Emerald Solitaire Ring",                price: "$7,500",                rating: 4.9,
+                reviewCount: "9 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/diamond-ring-isolated_1203-4927.jpg",                imageAlt: "Emerald solitaire ring",                onProductClick: () => window.location.href = "/shop/ring-1"
+              },
+              {
+                id: "watch-2",                brand: "Elegance Atelier",                name: "Daytona Platinum Watch",                price: "$12,000",                rating: 4.7,
+                reviewCount: "22 Reviews",                imageSrc: "http://img.b2bpic.net/free-photo/luxury-watch-still-life_23-2150993077.jpg",                imageAlt: "Daytona Platinum Watch",                onProductClick: () => window.location.href = "/shop/watch-2"
+              }
+            ]}
+            title="Explore Our Full Collection"
+            description="Discover the complete range of our luxury products, meticulously crafted for perfection."
+            buttons={[
+              {
+                text: "View All",          href: "#"},
+            ]}
+            buttonAnimation="slide-up"
           />
         </div>
-        </div>
 
         <div id="footer" data-section="footer">
           <FooterLogoEmphasis
@@ -182,13 +114,13 @@ export default function ShopPage() {
               {
                 items: [
                   {
-                    label: "Home",                    href: "#hero"},
+                    label: "Home",              href: "/"},
                   {
                     label: "About Us",              href: "#about"},
                   {
-                    label: "Shop",                    href: "/shop"},
+                    label: "Collections",              href: "#products"},
                   {
-                    label: "Products",                    href: "/products"},
+                    label: "Shop",              href: "/shop"},
                   {
                     label: "Membership",              href: "#pricing"},
                 ],
@@ -200,9 +132,15 @@ export default function ShopPage() {
                   {
                     label: "FAQ",              href: "#faq"},
                   {
-                    label: "Careers",                    href: "#"},
+                    label: "Login",              href: "/login"},
                   {
-                    label: "Press",                    href: "#"},
+                    label: "Signup",              href: "/signup"},
+                  {
+                    label: "Cart",              href: "/cart"},
+                  {
+                    label: "Order History",              href: "/order-history"},
+                  {
+                    label: "Account",              href: "/account"}
                 ],
               },
               {