Merge version_3 into main

Merge version_3 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/cart/page.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import { CartProvider, useCart } from "@/context/cartContext";
+import ProductCart from '@/components/ecommerce/cart/ProductCart';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function CartPage() {
+  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>
+        <CartProvider>
+          <NavbarLayoutFloatingInline
+            navItems={[
+              {
+                name: "Home",                id: "/"},
+              {
+                name: "About",                id: "/#about"},
+              {
+                name: "Products",                id: "/#products"},
+              {
+                name: "Features",                id: "/#features"},
+              {
+                name: "Testimonials",                id: "/#testimonials"},
+              {
+                name: "Contact",                id: "/#contact"},
+              {
+                name: "Cart",                id: "/cart"},
+            ]}
+            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: "View Cart",              href: "/cart"}}
+            animateOnLoad={true}
+          />
+          <CartContent />
+          <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: "Membership",                      href: "/#pricing"},
+                  ],
+                },
+                {
+                  items: [
+                    {
+                      label: "Contact",                      href: "/#contact"},
+                    {
+                      label: "FAQ",                      href: "/#faq"},
+                    {
+                      label: "Careers",                      href: "#"},
+                    {
+                      label: "Press",                      href: "#"},
+                  ],
+                },
+                {
+                  items: [
+                    {
+                      label: "Privacy Policy",                      href: "#"},
+                    {
+                      label: "Terms of Service",                      href: "#"},
+                    {
+                      label: "Shipping & Returns",                      href: "#"},
+                  ],
+                },
+              ]}
+              logoText="Elegance Atelier"
+            />
+          </div>
+        </CartProvider>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
+
+function CartContent() {
+  const { cartItems, removeFromCart, updateQuantity, getTotalPrice } = useCart();
+
+  const handleQuantityChange = (id: string, quantity: number) => {
+    updateQuantity(id, quantity);
+  };
+
+  const handleRemove = (id: string) => {
+    removeFromCart(id);
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-4 lg:p-24">
+      <ProductCart
+        isOpen={true} // Always open for a dedicated cart page
+        onClose={() => {}} // No close action for a dedicated page
+        items={cartItems.map(item => ({...item, variants: item.variant ? [item.variant] : []}))}
+        onQuantityChange={handleQuantityChange}
+        onRemove={handleRemove}
+        total={getTotalPrice()}
+        title="Your Shopping Cart"
+        emptyMessage="Your cart is currently empty. Start exploring our exquisite collection to find your next luxury item!"
+        buttons={[
+          {
+            text: "Continue Shopping",            href: "/"},
+          {
+            text: "Proceed to Checkout",            onClick: () => alert("Proceeding to checkout!"), // Placeholder for checkout logic
+          },
+        ]}
+      />
+    </div>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import Input from "@/components/form/Input";
+import ButtonTextStagger from "@/components/button/ButtonTextStagger/ButtonTextStagger";
+import Link from "next/link";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Login attempt with:", { email, password });
+    // Implement actual login logic here
+  };
+
+  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="flex min-h-[calc(100vh-200px)] items-center justify-center p-4">
+          <div className="w-full max-w-md p-8 space-y-6 rounded-lg shadow-xl bg-card text-foreground">
+            <h2 className="text-3xl font-bold text-center">Login to your Account</h2>
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">Email</label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={setEmail}
+                  placeholder="you@example.com"
+                  required
+                  className="mt-1 block w-full"
+                />
+              </div>
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">Password</label>
+                <Input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={setPassword}
+                  placeholder="••••••••"
+                  required
+                  className="mt-1 block w-full"
+                />
+              </div>
+              <ButtonTextStagger
+                text="Login"
+                type="submit"
+                className="w-full justify-center"
+              />
+            </form>
+            <p className="text-center text-sm text-foreground">
+              Don't have an account?{" "}
+              <Link href="/signup" className="text-primary-cta hover:underline">
+                Sign up
+              </Link>
+            </p>
+          </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/order-history/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 OrderHistoryPage() {
+  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 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>
+        </main>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -34,37 +34,33 @@ export default function LandingPage() {
       <NavbarLayoutFloatingInline
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "#hero"},
-          id: "#hero",
-        },
         {
-          name: "About",
+          name: "About",          id: "#about"},
-          id: "#about",
-        },
         {
-          name: "Products",
+          name: "Products",          id: "#products"},
-          id: "#products",
-        },
         {
-          name: "Features",
+          name: "Shop",          id: "/shop"},
-          id: "#features",
-        },
         {
-          name: "Testimonials",
+          name: "Features",          id: "#features"},
-          id: "#testimonials",
-        },
         {
-          name: "Contact",
+          name: "Testimonials",          id: "#testimonials"},
-          id: "#contact",
+        {
-        },
+          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",
+        text: "Login",        href: "/login"}}
-        href: "#products",
-      }}
       animateOnLoad={true}
     />
   </div>
@@ -75,13 +71,9 @@ export default function LandingPage() {
       description="Discover a world of unparalleled luxury and exquisite craftsmanship. Each piece curated for the discerning individual."
       buttons={[
         {
-          text: "Explore Collection",
+          text: "Explore Collection",          href: "#products"},
-          href: "#products",
-        },
         {
-          text: "Learn Our Story",
+          text: "Learn Our Story",          href: "#about"},
-          href: "#about",
-        },
       ]}
       buttonAnimation="slide-up"
       imageSrc="http://img.b2bpic.net/free-photo/beautiful-stylish-elegant-silver-wedding-shoes-chair_8353-75.jpg"
@@ -95,23 +87,15 @@ export default function LandingPage() {
       useInvertedBackground={true}
       heading={[
         {
-          type: "text",
+          type: "text",          content: "Crafting "},
-          content: "Crafting ",
-        },
         {
-          type: "text",
+          type: "text",          content: "Timeless "},
-          content: "Timeless ",
-        },
         {
-          type: "text",
+          type: "text",          content: "Luxury"},
-          content: "Luxury",
-        },
       ]}
       buttons={[
         {
-          text: "Our Philosophy",
+          text: "Our Philosophy",          href: "#"},
-          href: "#",
-        },
       ]}
       buttonAnimation="slide-up"
     />
@@ -125,61 +109,23 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "watch-1",
+          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"},
-          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: "handbag-1",
+          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"},
-          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: "scarf-1",
+          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"},
-          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: "earrings-1",
+          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"},
-          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: "pen-1",
+          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"},
-          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: "cufflinks-1",
+          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"},
-          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",
-        },
       ]}
       title="Our Exquisite Collection"
       description="Indulge in our selection of finely crafted pieces, designed to elevate your lifestyle."
       buttons={[
         {
-          text: "View All Products",
+          text: "View All Products",          href: "#"},
-          href: "#",
-        },
       ]}
       buttonAnimation="slide-up"
     />
@@ -192,40 +138,23 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          id: "feature-1",
+          id: "feature-1",          title: "Bespoke Services",          descriptions: [
-          title: "Bespoke Services",
+            "Tailored creations crafted exclusively for you, ensuring a unique and personal touch."],
-          descriptions: [
+          imageSrc: "http://img.b2bpic.net/free-photo/image-male-hand-pointing-business-document-discussion-meeting_1423-242.jpg",          imageAlt: "Tailor taking measurements for a bespoke suit"},
-            "Tailored creations crafted exclusively for you, ensuring a unique and personal touch.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/image-male-hand-pointing-business-document-discussion-meeting_1423-242.jpg",
-          imageAlt: "Tailor taking measurements for a bespoke suit",
-        },
         {
-          id: "feature-2",
+          id: "feature-2",          title: "Uncompromised Quality",          descriptions: [
-          title: "Uncompromised Quality",
+            "We source only the finest materials, guaranteeing durability, beauty, and lasting value."],
-          descriptions: [
+          imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-shiny-pink-green-yellow-diamonds-colored-backdrop_23-2147948773.jpg",          imageAlt: "Close-up of fine leather texture"},
-            "We source only the finest materials, guaranteeing durability, beauty, and lasting value.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-shiny-pink-green-yellow-diamonds-colored-backdrop_23-2147948773.jpg",
-          imageAlt: "Close-up of fine leather texture",
-        },
         {
-          id: "feature-3",
+          id: "feature-3",          title: "Exclusive Invitations",          descriptions: [
-          title: "Exclusive Invitations",
+            "Gain access to private viewings, launch events, and curated luxury experiences."],
-          descriptions: [
+          imageSrc: "http://img.b2bpic.net/free-photo/mannequins-clothes-shop_23-2147652033.jpg",          imageAlt: "Guests at an exclusive luxury event"},
-            "Gain access to private viewings, launch events, and curated luxury experiences.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/mannequins-clothes-shop_23-2147652033.jpg",
-          imageAlt: "Guests at an exclusive luxury event",
-        },
       ]}
       title="Our Signature Excellence"
       description="Experience the distinction of Elegance Atelier with services and qualities designed for your utmost satisfaction."
       buttons={[
         {
-          text: "Discover More",
+          text: "Discover More",          href: "#"},
-          href: "#",
-        },
       ]}
       buttonAnimation="slide-up"
     />
@@ -237,65 +166,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "test-1",
+          id: "test-1",          name: "Isabella Rossi",          date: "March 2024",          title: "Exquisite Craftsmanship",          quote: "The handbag I purchased is a true masterpiece. The attention to detail and quality of the leather are simply breathtaking.",          tag: "Luxury Handbags",          avatarSrc: "http://img.b2bpic.net/free-photo/gorgeous-smiling-blonde-fashion-model-sits-white-suit-soft-armchair_8353-5476.jpg",          avatarAlt: "Isabella Rossi's avatar",          imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-with-cup-coffee-bag-making-thumbs-up-high-quality-photo_114579-52841.jpg",          imageAlt: "Woman admiring a luxury handbag"},
-          name: "Isabella Rossi",
-          date: "March 2024",
-          title: "Exquisite Craftsmanship",
-          quote: "The handbag I purchased is a true masterpiece. The attention to detail and quality of the leather are simply breathtaking.",
-          tag: "Luxury Handbags",
-          avatarSrc: "http://img.b2bpic.net/free-photo/gorgeous-smiling-blonde-fashion-model-sits-white-suit-soft-armchair_8353-5476.jpg",
-          avatarAlt: "Isabella Rossi's avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-with-cup-coffee-bag-making-thumbs-up-high-quality-photo_114579-52841.jpg",
-          imageAlt: "Woman admiring a luxury handbag",
-        },
         {
-          id: "test-2",
+          id: "test-2",          name: "Julian Thorne",          date: "February 2024",          title: "Unmatched Elegance",          quote: "My new timepiece from Elegance Atelier is a statement of sophistication. It's more than a watch; it's a legacy.",          tag: "Fine Watches",          avatarSrc: "http://img.b2bpic.net/free-photo/confident-young-businessman-modern-luxury-office-generated-by-ai_188544-17326.jpg",          avatarAlt: "Julian Thorne's avatar",          imageSrc: "http://img.b2bpic.net/free-photo/cabinetmaker-apprentice-inspecting-lumber-block-damages_482257-84366.jpg",          imageAlt: "Man wearing a luxury watch"},
-          name: "Julian Thorne",
-          date: "February 2024",
-          title: "Unmatched Elegance",
-          quote: "My new timepiece from Elegance Atelier is a statement of sophistication. It's more than a watch; it's a legacy.",
-          tag: "Fine Watches",
-          avatarSrc: "http://img.b2bpic.net/free-photo/confident-young-businessman-modern-luxury-office-generated-by-ai_188544-17326.jpg",
-          avatarAlt: "Julian Thorne's avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/cabinetmaker-apprentice-inspecting-lumber-block-damages_482257-84366.jpg",
-          imageAlt: "Man wearing a luxury watch",
-        },
         {
-          id: "test-3",
+          id: "test-3",          name: "Sophia Dubois",          date: "January 2024",          title: "Jewelry Beyond Compare",          quote: "The diamond earrings are absolutely stunning. Every facet sparkles with exceptional brilliance. A truly special gift.",          tag: "Precious Jewelry",          avatarSrc: "http://img.b2bpic.net/free-photo/joyful-lady-with-dark-curly-hair-sunglasses-white-jacket-sitting-stairs-street-happily-looking-camera-while-showing-two-fingers-gesture_574295-5941.jpg",          avatarAlt: "Sophia Dubois's avatar",          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-love-paying-with-credit-card-jewelry-stor_7502-7614.jpg",          imageAlt: "Woman trying on diamond earrings"},
-          name: "Sophia Dubois",
-          date: "January 2024",
-          title: "Jewelry Beyond Compare",
-          quote: "The diamond earrings are absolutely stunning. Every facet sparkles with exceptional brilliance. A truly special gift.",
-          tag: "Precious Jewelry",
-          avatarSrc: "http://img.b2bpic.net/free-photo/joyful-lady-with-dark-curly-hair-sunglasses-white-jacket-sitting-stairs-street-happily-looking-camera-while-showing-two-fingers-gesture_574295-5941.jpg",
-          avatarAlt: "Sophia Dubois's avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-love-paying-with-credit-card-jewelry-stor_7502-7614.jpg",
-          imageAlt: "Woman trying on diamond earrings",
-        },
         {
-          id: "test-4",
+          id: "test-4",          name: "Marcus Chen",          date: "December 2023",          title: "Superior Service",          quote: "The shopping experience was as luxurious as the products. Impressed by the personalized attention and swift delivery.",          tag: "Exclusive Service",          avatarSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-standing-with-crossed-arms_23-2148095676.jpg",          avatarAlt: "Marcus Chen's avatar",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-posing-with-checkered-plaid-near-christmas-balls_114579-66827.jpg",          imageAlt: "Woman holding a silk scarf"},
-          name: "Marcus Chen",
-          date: "December 2023",
-          title: "Superior Service",
-          quote: "The shopping experience was as luxurious as the products. Impressed by the personalized attention and swift delivery.",
-          tag: "Exclusive Service",
-          avatarSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-standing-with-crossed-arms_23-2148095676.jpg",
-          avatarAlt: "Marcus Chen's avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-posing-with-checkered-plaid-near-christmas-balls_114579-66827.jpg",
-          imageAlt: "Woman holding a silk scarf",
-        },
         {
-          id: "test-5",
+          id: "test-5",          name: "Eleanor Vance",          date: "November 2023",          title: "Investment in Style",          quote: "Each acquisition from Elegance Atelier feels like an investment in timeless style and impeccable quality. Highly recommended.",          tag: "Timeless Appeal",          avatarSrc: "http://img.b2bpic.net/free-photo/low-angle-business-woman-holding-glasses_23-2148317324.jpg",          avatarAlt: "Eleanor Vance's avatar",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-blonde-rich-woman-with-banknotes-purse_23-2149668380.jpg",          imageAlt: "Man browsing a luxury catalog"},
-          name: "Eleanor Vance",
-          date: "November 2023",
-          title: "Investment in Style",
-          quote: "Each acquisition from Elegance Atelier feels like an investment in timeless style and impeccable quality. Highly recommended.",
-          tag: "Timeless Appeal",
-          avatarSrc: "http://img.b2bpic.net/free-photo/low-angle-business-woman-holding-glasses_23-2148317324.jpg",
-          avatarAlt: "Eleanor Vance's avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-blonde-rich-woman-with-banknotes-purse_23-2149668380.jpg",
-          imageAlt: "Man browsing a luxury catalog",
-        },
       ]}
       title="Voices of Distinction"
       description="Our esteemed clientele share their experiences with Elegance Atelier's unparalleled products and service."
@@ -307,21 +186,12 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       names={[
-        "Vogue",
+        "Vogue",        "Haute Horlogerie",        "Noble Estates",        "Imperial Fashion",        "Grand Jewels",        "Elite Tailors",        "Gourmet & Co."]}
-        "Haute Horlogerie",
-        "Noble Estates",
-        "Imperial Fashion",
-        "Grand Jewels",
-        "Elite Tailors",
-        "Gourmet & Co.",
-      ]}
       title="Trusted by Luxury Partners"
       description="Collaborating with the most prestigious names in high fashion and exquisite craftsmanship."
       buttons={[
         {
-          text: "Partnership Inquiries",
+          text: "Partnership Inquiries",          href: "#contact"},
-          href: "#contact",
-        },
       ]}
       buttonAnimation="slide-up"
     />
@@ -334,69 +204,32 @@ export default function LandingPage() {
       useInvertedBackground={false}
       plans={[
         {
-          id: "silver",
+          id: "silver",          tag: "Essential",          tagIcon: Star,
-          tag: "Essential",
+          price: "Complimentary",          period: "for all clients",          description: "Access to our standard curated collection and seasonal lookbooks.",          button: {
-          tagIcon: Star,
+            text: "Join Silver",            href: "#"},
-          price: "Complimentary",
+          featuresTitle: "Includes:",          features: [
-          period: "for all clients",
+            "Priority Email Support",            "Member-Exclusive Newsletters",            "Early Sale Access"],
-          description: "Access to our standard curated collection and seasonal lookbooks.",
-          button: {
-            text: "Join Silver",
-            href: "#",
-          },
-          featuresTitle: "Includes:",
-          features: [
-            "Priority Email Support",
-            "Member-Exclusive Newsletters",
-            "Early Sale Access",
-          ],
         },
         {
-          id: "gold",
+          id: "gold",          tag: "Elite",          tagIcon: Award,
-          tag: "Elite",
+          price: "$500",          period: "per annum",          description: "Elevate your experience with personalized services and enhanced privileges.",          button: {
-          tagIcon: Award,
+            text: "Upgrade to Gold",            href: "#"},
-          price: "$500",
+          featuresTitle: "Everything in Silver, plus:",          features: [
-          period: "per annum",
+            "Dedicated Personal Shopper",            "Invitation to Private Viewings",            "Complimentary Gift Wrapping",            "Early Access to New Collections"],
-          description: "Elevate your experience with personalized services and enhanced privileges.",
-          button: {
-            text: "Upgrade to Gold",
-            href: "#",
-          },
-          featuresTitle: "Everything in Silver, plus:",
-          features: [
-            "Dedicated Personal Shopper",
-            "Invitation to Private Viewings",
-            "Complimentary Gift Wrapping",
-            "Early Access to New Collections",
-          ],
         },
         {
-          id: "platinum",
+          id: "platinum",          tag: "Prestige",          tagIcon: Sparkles,
-          tag: "Prestige",
+          price: "$2,000",          period: "per annum",          description: "The ultimate luxury experience, offering bespoke attention and unparalleled access.",          button: {
-          tagIcon: Sparkles,
+            text: "Enroll in Platinum",            href: "#"},
-          price: "$2,000",
+          featuresTitle: "Everything in Gold, plus:",          features: [
-          period: "per annum",
+            "Bespoke Design Consultations",            "Exclusive Concierge Service",            "Private Atelier Appointments",            "First Access to Limited Editions"],
-          description: "The ultimate luxury experience, offering bespoke attention and unparalleled access.",
-          button: {
-            text: "Enroll in Platinum",
-            href: "#",
-          },
-          featuresTitle: "Everything in Gold, plus:",
-          features: [
-            "Bespoke Design Consultations",
-            "Exclusive Concierge Service",
-            "Private Atelier Appointments",
-            "First Access to Limited Editions",
-          ],
         },
       ]}
       title="Elegance Club Membership"
       description="Unlock exclusive benefits and personalize your luxury experience with our tiered membership options."
       buttons={[
         {
-          text: "View Membership Benefits",
+          text: "View Membership Benefits",          href: "#"},
-          href: "#",
-        },
       ]}
       buttonAnimation="slide-up"
     />
@@ -408,25 +241,13 @@ export default function LandingPage() {
       useInvertedBackground={true}
       faqs={[
         {
-          id: "faq-1",
+          id: "faq-1",          title: "What is your return policy for luxury items?",          content: "Due to the exclusive nature of our luxury items, returns are accepted within 14 days of purchase, provided the item is in its original condition with all tags and packaging intact. Bespoke items are non-returnable."},
-          title: "What is your return policy for luxury items?",
-          content: "Due to the exclusive nature of our luxury items, returns are accepted within 14 days of purchase, provided the item is in its original condition with all tags and packaging intact. Bespoke items are non-returnable.",
-        },
         {
-          id: "faq-2",
+          id: "faq-2",          title: "Do you offer international shipping?",          content: "Yes, Elegance Atelier provides insured international shipping to most countries. Shipping costs and delivery times vary by destination. Please refer to our shipping policy for details."},
-          title: "Do you offer international shipping?",
-          content: "Yes, Elegance Atelier provides insured international shipping to most countries. Shipping costs and delivery times vary by destination. Please refer to our shipping policy for details.",
-        },
         {
-          id: "faq-3",
+          id: "faq-3",          title: "How can I authenticate my purchase?",          content: "Every item from Elegance Atelier comes with a certificate of authenticity and a unique serial number. For further verification, you may contact our customer service team."},
-          title: "How can I authenticate my purchase?",
-          content: "Every item from Elegance Atelier comes with a certificate of authenticity and a unique serial number. For further verification, you may contact our customer service team.",
-        },
         {
-          id: "faq-4",
+          id: "faq-4",          title: "Do you offer repair or maintenance services?",          content: "We offer complimentary cleaning and minor repair services for all our products within the first year of purchase. Extended warranties and comprehensive maintenance plans are also available."},
-          title: "Do you offer repair or maintenance services?",
-          content: "We offer complimentary cleaning and minor repair services for all our products within the first year of purchase. Extended warranties and comprehensive maintenance plans are also available.",
-        },
       ]}
       title="Frequently Asked Questions"
       description="Find answers to common inquiries regarding our luxury products, services, and ordering process."
@@ -438,20 +259,15 @@ export default function LandingPage() {
       <ContactCTA
       useInvertedBackground={false}
       background={{
-        variant: "radial-gradient",
+        variant: "radial-gradient"}}
-      }}
       tag="Get in Touch"
       title="Experience Personalized Luxury"
       description="Our dedicated team is here to assist you with bespoke requests, product inquiries, or any special needs."
       buttons={[
         {
-          text: "Schedule a Consultation",
+          text: "Schedule a Consultation",          href: "#"},
-          href: "#",
-        },
         {
-          text: "Email Us Directly",
+          text: "Email Us Directly",          href: "mailto:info@eleganceatelier.com"},
-          href: "mailto:info@eleganceatelier.com",
-        },
       ]}
       buttonAnimation="slide-up"
     />
@@ -465,57 +281,43 @@ export default function LandingPage() {
         {
           items: [
             {
-              label: "Home",
+              label: "Home",              href: "#hero"},
-              href: "#hero",
-            },
             {
-              label: "About Us",
+              label: "About Us",              href: "#about"},
-              href: "#about",
-            },
             {
-              label: "Collections",
+              label: "Collections",              href: "#products"},
-              href: "#products",
-            },
             {
-              label: "Membership",
+              label: "Shop",              href: "/shop"},
-              href: "#pricing",
+            {
-            },
+              label: "Membership",              href: "#pricing"},
           ],
         },
         {
           items: [
             {
-              label: "Contact",
+              label: "Contact",              href: "#contact"},
-              href: "#contact",
-            },
             {
-              label: "FAQ",
+              label: "FAQ",              href: "#faq"},
-              href: "#faq",
-            },
             {
-              label: "Careers",
+              label: "Login",              href: "/login"},
-              href: "#",
-            },
             {
-              label: "Press",
+              label: "Signup",              href: "/signup"},
-              href: "#",
+            {
-            },
+              label: "Cart",              href: "/cart"},
+            {
+              label: "Order History",              href: "/order-history"},
+            {
+              label: "Account",              href: "/account"}
           ],
         },
         {
           items: [
             {
-              label: "Privacy Policy",
+              label: "Privacy Policy",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Terms of Service",
+              label: "Terms of Service",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Shipping & Returns",
+              label: "Shipping & Returns",              href: "#"},
-              href: "#",
-            },
           ],
         },
       ]}

src/app/products/page.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+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";
+
+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=2",    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=2",    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=2",    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=2",    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=2",    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=2",    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"] }
+    ]
+  },
+];
+
+export default function ProductListingPage() {
+  const productCards = productsData.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"
+      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: "Shop",                id: "/shop"},
+              {
+                name: "Products",                id: "/products"},
+              {
+                name: "Features",                id: "#features"},
+              {
+                name: "Testimonials",                id: "#testimonials"},
+              {
+                name: "Contact",                id: "#contact"},
+            ]}
+            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"}}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div id="product-listing" data-section="product-listing">
+          <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 Collections</h1>
+            <p className="mt-4 text-center text-lg text-foreground/70">Explore our full range of luxury products.</p>
+            <ProductCardFour
+              animationType="slide-up"
+              textboxLayout="default"
+              gridVariant="three-columns-all-equal-width"
+              useInvertedBackground={false}
+              products={productCards}
+              title=""
+              description=""
+              buttons={[]}
+            />
+          </div>
+        </div>
+
+        <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: "Shop",                    href: "/shop"},
+                  {
+                    label: "Products",                    href: "/products"},
+                  {
+                    label: "Membership",                    href: "#pricing"},
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "Contact",                    href: "#contact"},
+                  {
+                    label: "FAQ",                    href: "#faq"},
+                  {
+                    label: "Careers",                    href: "#"},
+                  {
+                    label: "Press",                    href: "#"},
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "Privacy Policy",                    href: "#"},
+                  {
+                    label: "Terms of Service",                    href: "#"},
+                  {
+                    label: "Shipping & Returns",                    href: "#"},
+                ],
+              },
+            ]}
+            logoText="Elegance Atelier"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

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

@@ -0,0 +1,163 @@
+"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 ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+
+export default function ShopPage() {
+  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>
+
+        <div id="shop-products" data-section="shop-products">
+          <ProductCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            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 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/signup/page.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import Input from "@/components/form/Input";
+import ButtonTextStagger from "@/components/button/ButtonTextStagger/ButtonTextStagger";
+import Link from "next/link";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+
+export default function SignupPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const handleSignup = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      alert("Passwords do not match!");
+      return;
+    }
+    console.log("Signup attempt with:", { email, password });
+    // Implement actual signup logic here
+  };
+
+  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="flex min-h-[calc(100vh-200px)] items-center justify-center p-4">
+          <div className="w-full max-w-md p-8 space-y-6 rounded-lg shadow-xl bg-card text-foreground">
+            <h2 className="text-3xl font-bold text-center">Create an Account</h2>
+            <form onSubmit={handleSignup} className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">Email</label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={setEmail}
+                  placeholder="you@example.com"
+                  required
+                  className="mt-1 block w-full"
+                />
+              </div>
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">Password</label>
+                <Input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={setPassword}
+                  placeholder="••••••••"
+                  required
+                  className="mt-1 block w-full"
+                />
+              </div>
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">Confirm Password</label>
+                <Input
+                  id="confirmPassword"
+                  type="password"
+                  value={confirmPassword}
+                  onChange={setConfirmPassword}
+                  placeholder="••••••••"
+                  required
+                  className="mt-1 block w-full"
+                />
+              </div>
+              <ButtonTextStagger
+                text="Sign Up"
+                type="submit"
+                className="w-full justify-center"
+              />
+            </form>
+            <p className="text-center text-sm text-foreground">
+              Already have an account?{" "}
+              <Link href="/login" className="text-primary-cta hover:underline">
+                Login
+              </Link>
+            </p>
+          </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/context/cartContext.tsx

@@ -0,0 +1,91 @@
+import React, { createContext, useContext, useState, ReactNode, useEffect } from 'react';
+
+interface CartItem {
+  id: string;
+  name: string;
+  price: string; // Storing as string for display, will parse for calculations
+  quantity: number;
+  imageSrc: string;
+  imageAlt?: string;
+  variant?: string;
+}
+
+interface CartContextType {
+  cartItems: CartItem[];
+  addToCart: (item: Omit<CartItem, 'quantity'>) => void;
+  removeFromCart: (id: string) => void;
+  updateQuantity: (id: string, quantity: number) => void;
+  getTotalPrice: () => string;
+}
+
+const CartContext = createContext<CartContextType | undefined>(undefined);
+
+export const CartProvider = ({ children }: { children: ReactNode }) => {
+  const [cartItems, setCartItems] = useState<CartItem[]>(() => {
+    if (typeof window !== 'undefined') {
+      const savedCart = localStorage.getItem('cart');
+      return savedCart ? JSON.parse(savedCart) : [];
+    }
+    return [];
+  });
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('cart', JSON.stringify(cartItems));
+    }
+  }, [cartItems]);
+
+  const addToCart = (item: Omit<CartItem, 'quantity'>) => {
+    setCartItems((prevItems) => {
+      const existingItem = prevItems.find((cartItem) => cartItem.id === item.id);
+      if (existingItem) {
+        return prevItems.map((cartItem) =>
+          cartItem.id === item.id
+            ? { ...cartItem, quantity: cartItem.quantity + 1 }
+            : cartItem
+        );
+      } else {
+        return [...prevItems, { ...item, quantity: 1 }];
+      }
+    });
+  };
+
+  const removeFromCart = (id: string) => {
+    setCartItems((prevItems) => prevItems.filter((item) => item.id !== id));
+  };
+
+  const updateQuantity = (id: string, quantity: number) => {
+    setCartItems((prevItems) => {
+      if (quantity <= 0) {
+        return prevItems.filter((item) => item.id !== id);
+      }
+      return prevItems.map((item) =>
+        item.id === id ? { ...item, quantity: quantity } : item
+      );
+    });
+  };
+
+  const getTotalPrice = () => {
+    const total = cartItems.reduce((sum, item) => {
+      const priceValue = parseFloat(item.price.replace(/[^0-9.-]+/g, ""));
+      return sum + priceValue * item.quantity;
+    }, 0);
+    return `$${total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  };
+
+  return (
+    <CartContext.Provider
+      value={{ cartItems, addToCart, removeFromCart, updateQuantity, getTotalPrice }}
+    >
+      {children}
+    </CartContext.Provider>
+  );
+};
+
+export const useCart = () => {
+  const context = useContext(CartContext);
+  if (context === undefined) {
+    throw new Error('useCart must be used within a CartProvider');
+  }
+  return context;
+};