From 11c52158f55de191aebdec0ae55481942a6a0ab9 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 9 Jun 2026 22:50:34 +0000
Subject: [PATCH] Add src/app/checkout/page.tsx

---
 src/app/checkout/page.tsx | 242 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 242 insertions(+)
 create mode 100644 src/app/checkout/page.tsx

diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
new file mode 100644
index 0000000..72b834b
--- /dev/null
+++ b/src/app/checkout/page.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';
+import { useState } from 'react';
+
+export default function CheckoutPage() {
+  const [formData, setFormData] = useState({
+    fullName: '',
+    email: '',
+    address: '',
+    city: '',
+    zip: '',
+    cardName: '',
+    cardNumber: '',
+    expDate: '',
+    cvv: ''
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Checkout form submitted:", formData);
+    // In a real app, process payment and redirect to order confirmation
+    window.location.href = "/order-confirmation";
+  };
+
+  const footerColumns = [
+    {
+      title: "Quick Links",      items: [
+        { label: "Home", href: "/" },
+        { label: "About Us", href: "/#about" },
+        { label: "Services", href: "/#services" },
+        { label: "Team", href: "/#team" },
+        { label: "Shopping Cart", href: "/shopping-cart" },
+        { label: "Checkout", href: "/checkout" },
+        { label: "Order Confirmation", href: "/order-confirmation" }
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "FAQ", href: "/#faq" },
+        { label: "Contact Us", href: "/#contact" },
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+      ],
+    },
+    {
+      title: "Connect",      items: [
+        { label: "info@fcplus.com", href: "mailto:info@fcplus.com" },
+        { label: "+1 (555) 123-4567", href: "tel:+15551234567" },
+        { label: "456 Gentleman's Way", href: "#" },
+        { label: "Fashion District, NY 10018", href: "#" },
+      ],
+    },
+  ];
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/#about" },
+    { name: "Services", id: "/#services" },
+    { name: "Team", id: "/#team" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "FAQ", id: "/#faq" },
+    { name: "Contact", id: "/#contact" },
+    { name: "Cart", id: "/shopping-cart" },
+    { name: "Checkout", id: "/checkout" },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmallSizeLargeTitles"
+        background="floatingGradient"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="layered"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={navItems}
+            brandName="FCplus Center"
+          />
+        </div>
+
+        <main className="min-h-screen py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto">
+          <h1 className="text-4xl font-bold text-center mb-12">Checkout</h1>
+          <form onSubmit={handleSubmit} className="space-y-8 p-8 border rounded-lg shadow-lg bg-card">
+            {/* Shipping Information */}
+            <section>
+              <h2 className="text-2xl font-semibold mb-4">Shipping Information</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="fullName" className="block text-sm font-medium text-foreground">Full Name</label>
+                  <input
+                    type="text"
+                    id="fullName"
+                    name="fullName"
+                    value={formData.fullName}
+                    onChange={handleChange}
+                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
+                    required
+                  />
+                </div>
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-foreground">Email Address</label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
+                    required
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label htmlFor="address" className="block text-sm font-medium text-foreground">Address</label>
+                  <input
+                    type="text"
+                    id="address"
+                    name="address"
+                    value={formData.address}
+                    onChange={handleChange}
+                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
+                    required
+                  />
+                </div>
+                <div>
+                  <label htmlFor="city" className="block text-sm font-medium text-foreground">City</label>
+                  <input
+                    type="text"
+                    id="city"
+                    name="city"
+                    value={formData.city}
+                    onChange={handleChange}
+                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
+                    required
+                  />
+                </div>
+                <div>
+                  <label htmlFor="zip" className="block text-sm font-medium text-foreground">ZIP Code</label>
+                  <input
+                    type="text"
+                    id="zip"
+                    name="zip"
+                    value={formData.zip}
+                    onChange={handleChange}
+                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
+                    required
+                  />
+                </div>
+              </div>
+            </section>
+
+            {/* Payment Information */}
+            <section>
+              <h2 className="text-2xl font-semibold mb-4">Payment Information</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="md:col-span-2">
+                  <label htmlFor="cardName" className="block text-sm font-medium text-foreground">Name on Card</label>
+                  <input
+                    type="text"
+                    id="cardName"
+                    name="cardName"
+                    value={formData.cardName}
+                    onChange={handleChange}
+                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
+                    required
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label htmlFor="cardNumber" className="block text-sm font-medium text-foreground">Card Number</label>
+                  <input
+                    type="text"
+                    id="cardNumber"
+                    name="cardNumber"
+                    value={formData.cardNumber}
+                    onChange={handleChange}
+                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
+                    required
+                  />
+                </div>
+                <div>
+                  <label htmlFor="expDate" className="block text-sm font-medium text-foreground">Expiration Date (MM/YY)</label>
+                  <input
+                    type="text"
+                    id="expDate"
+                    name="expDate"
+                    value={formData.expDate}
+                    onChange={handleChange}
+                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
+                    required
+                  />
+                </div>
+                <div>
+                  <label htmlFor="cvv" className="block text-sm font-medium text-foreground">CVV</label>
+                  <input
+                    type="text"
+                    id="cvv"
+                    name="cvv"
+                    value={formData.cvv}
+                    onChange={handleChange}
+                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
+                    required
+                  />
+                </div>
+              </div>
+            </section>
+
+            <ButtonElasticEffect
+              text="Pay Now"
+              type="submit"
+              className="w-full"
+            />
+          </form>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/blue-suit-hangers-dark-background_107420-101413.jpg"
+            imageAlt="Blue suits on hangers in a dark setting"
+            logoText="FCplus Center"
+            columns={footerColumns}
+            copyrightText="© 2024 FCplus Center. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}