Add src/app/checkout/page.tsx

src/app/checkout/page.tsx

@@ -0,0 +1,194 @@
+"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, CreditCard } from 'lucide-react';
+import { useState } from 'react';
+import Input from '@/components/form/Input';
+
+export default function CheckoutPage() {
+  const [email, setEmail] = useState('');
+  const [fullName, setFullName] = useState('');
+  const [address, setAddress] = useState('');
+  const [city, setCity] = useState('');
+  const [postalCode, setPostalCode] = useState('');
+  const [cardNumber, setCardNumber] = useState('');
+
+  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="Checkout"
+          description="Complete your order and receive your premium OAC merchandise. Secure payment processing ensures safe transactions."
+          tag="Secure Checkout"
+          tagIcon={CreditCard}
+          tagAnimation="blur-reveal"
+          buttons={[
+            { text: "Back to Cart", href: "/cart" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
+          imageAlt="Secure checkout"
+          showDimOverlay={false}
+          showBlur={true}
+          ariaLabel="Checkout Page Hero"
+        />
+      </div>
+
+      <div id="checkout-form" data-section="checkout-form">
+        <div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-2xl">
+          <form className="space-y-8">
+            {/* Shipping Information */}
+            <div>
+              <h3 className="text-xl font-bold mb-4">Shipping Information</h3>
+              <div className="space-y-4">
+                <Input
+                  value={email}
+                  onChange={setEmail}
+                  type="email"
+                  placeholder="Email address"
+                  required
+                />
+                <Input
+                  value={fullName}
+                  onChange={setFullName}
+                  type="text"
+                  placeholder="Full name"
+                  required
+                />
+                <Input
+                  value={address}
+                  onChange={setAddress}
+                  type="text"
+                  placeholder="Street address"
+                  required
+                />
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    value={city}
+                    onChange={setCity}
+                    type="text"
+                    placeholder="City"
+                    required
+                  />
+                  <Input
+                    value={postalCode}
+                    onChange={setPostalCode}
+                    type="text"
+                    placeholder="Postal code"
+                    required
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Payment Information */}
+            <div>
+              <h3 className="text-xl font-bold mb-4">Payment Information</h3>
+              <div className="space-y-4">
+                <Input
+                  value={cardNumber}
+                  onChange={setCardNumber}
+                  type="text"
+                  placeholder="Card number"
+                  required
+                />
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    value=""
+                    onChange={() => {}}
+                    type="text"
+                    placeholder="MM/YY"
+                    required
+                  />
+                  <Input
+                    value=""
+                    onChange={() => {}}
+                    type="text"
+                    placeholder="CVV"
+                    required
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Order Summary */}
+            <div className="bg-foreground/5 rounded-lg p-6">
+              <h3 className="text-lg font-bold mb-4">Order Summary</h3>
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span>Subtotal</span>
+                  <span>$0.00</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Shipping</span>
+                  <span>$0.00</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Tax</span>
+                  <span>$0.00</span>
+                </div>
+                <div className="flex justify-between font-bold text-lg border-t border-foreground/10 pt-2 mt-2">
+                  <span>Total</span>
+                  <span className="text-primary-cta">$0.00</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Buttons */}
+            <div className="flex gap-4">
+              <button
+                type="submit"
+                className="flex-1 bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90"
+              >
+                Complete Purchase
+              </button>
+              <button
+                type="button"
+                className="flex-1 border border-foreground/20 py-3 rounded-lg font-semibold hover:bg-foreground/5"
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="OAC Command Center"
+          leftLink={{ text: "Shop", href: "/shop" }}
+          rightLink={{ text: "Cart", href: "/cart" }}
+          ariaLabel="Footer Navigation"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}