Switch to version 2: added src/app/cart/page.tsx

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>
+  );
+}