Add src/app/cart/page.tsx

src/app/cart/page.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { ShoppingCart } from 'lucide-react';
+
+export default function CartPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="OAC"
+          navItems={[
+            { name: "Shop", id: "shop" },
+            { name: "Tournament", id: "tournament" },
+            { name: "Gallery", id: "gallery" },
+            { name: "Community", id: "community" },
+            { name: "Power Stats", id: "power-stats" }
+          ]}
+          button={{ text: "Cart", href: "/cart" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Shopping Cart"
+          description="Review your selected merchandise and proceed to checkout. Your power level awaits elevation through premium OAC gear."
+          tag="Order Summary"
+          tagIcon={ShoppingCart}
+          tagAnimation="blur-reveal"
+          buttons={[
+            { text: "Continue Shopping", href: "/shop" },
+            { text: "Proceed to Checkout", href: "/checkout" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
+          imageAlt="Shopping cart showcase"
+          showDimOverlay={false}
+          showBlur={true}
+          ariaLabel="Cart Page Hero"
+        />
+      </div>
+
+      <div id="cart-items" data-section="cart-items">
+        <div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-4xl">
+          <div className="space-y-6">
+            <h2 className="text-2xl font-bold">Your Cart</h2>
+            <div className="text-foreground/70 py-12 text-center">
+              <p className="mb-4">Your cart is currently empty.</p>
+              <button className="text-primary-cta font-semibold hover:underline">
+                Continue shopping to add items
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="checkout" data-section="checkout">
+        <div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-2xl mt-8">
+          <h3 className="text-xl font-bold mb-6">Order Summary</h3>
+          <div className="space-y-4">
+            <div className="flex justify-between py-2 border-b border-foreground/10">
+              <span>Subtotal</span>
+              <span className="font-semibold">$0.00</span>
+            </div>
+            <div className="flex justify-between py-2 border-b border-foreground/10">
+              <span>Shipping</span>
+              <span className="font-semibold">$0.00</span>
+            </div>
+            <div className="flex justify-between py-2 border-b border-foreground/10">
+              <span>Tax</span>
+              <span className="font-semibold">$0.00</span>
+            </div>
+            <div className="flex justify-between py-3 bg-foreground/5 px-4 rounded-lg">
+              <span className="font-bold text-lg">Total</span>
+              <span className="font-bold text-lg text-primary-cta">$0.00</span>
+            </div>
+            <button className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 mt-6">
+              Proceed to Checkout
+            </button>
+            <button className="w-full border border-foreground/20 py-3 rounded-lg font-semibold hover:bg-foreground/5">
+              Continue Shopping
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="OAC Command Center"
+          leftLink={{ text: "Shop", href: "/shop" }}
+          rightLink={{ text: "Home", href: "/" }}
+          ariaLabel="Footer Navigation"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}