Add src/app/checkout/page.tsx

src/app/checkout/page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import React, { useState } from "react";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import Input from '@/components/form/Input';
+import { CreditCard } from "lucide-react";
+
+export default function CheckoutPage() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [address, setAddress] = useState("");
+  const [city, setCity] = useState("");
+  const [zip, setZip] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Simulate order placement
+    console.log("Order placed!", { name, email, address, city, zip });
+    window.location.href = "/order-confirmation";
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="small"
+        sizing="mediumLargeSizeMediumTitles"
+        background="none"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "#hero" },
+              { name: "About Us", id: "#about" },
+              { name: "Features", id: "#features" },
+              { name: "Books", id: "#products" },
+              { name: "Cart", id: "/cart" },
+              { name: "Checkout", id: "/checkout" },
+              { name: "Impact", id: "#metrics" },
+              { name: "Partners", id: "#partners" },
+              { name: "FAQs", id: "#faqs" },
+              { name: "Contact", id: "#contact" },
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/26-january-indian-republic-day-concept-vector-illustration_460848-8774.jpg"
+            logoAlt="Kenbee EduTech Logo"
+            brandName="Kenbee EduTech"
+          />
+        </div>
+
+        <div className="flex flex-col items-center justify-center min-h-[calc(100vh-200px)] py-12 px-4 sm:px-6 lg:px-8">
+          <CreditCard className="h-16 w-16 text-gray-400 mb-6" />
+          <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl mb-4">Checkout</h1>
+          <p className="text-lg text-muted-foreground text-center max-w-md mb-8">
+            Complete your order by filling in your details below.
+          </p>
+          <form onSubmit={handleSubmit} className="w-full max-w-3xl bg-card border border-border rounded-lg shadow-lg p-6 mb-8">
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-foreground">Full Name</label>
+                <Input id="name" type="text" value={name} onChange={setName} placeholder="John Doe" required className="mt-1 block w-full" />
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">Email Address</label>
+                <Input id="email" type="email" value={email} onChange={setEmail} placeholder="john.doe@example.com" required className="mt-1 block w-full" />
+              </div>
+              <div className="sm:col-span-2">
+                <label htmlFor="address" className="block text-sm font-medium text-foreground">Shipping Address</label>
+                <Input id="address" type="text" value={address} onChange={setAddress} placeholder="123 Main St" required className="mt-1 block w-full" />
+              </div>
+              <div>
+                <label htmlFor="city" className="block text-sm font-medium text-foreground">City</label>
+                <Input id="city" type="text" value={city} onChange={setCity} placeholder="New York" required className="mt-1 block w-full" />
+              </div>
+              <div>
+                <label htmlFor="zip" className="block text-sm font-medium text-foreground">Zip Code</label>
+                <Input id="zip" type="text" value={zip} onChange={setZip} placeholder="10001" required className="mt-1 block w-full" />
+              </div>
+            </div>
+            <div className="mt-8 flex justify-center">
+              <button
+                type="submit"
+                className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary-cta hover:bg-primary-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+              >
+                Place Order
+              </button>
+            </div>
+          </form>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoSrc="http://img.b2bpic.net/free-photo/26-january-indian-republic-day-concept-vector-illustration_460848-8774.jpg"
+            logoAlt="Kenbee EduTech Logo"
+            logoText="Kenbee EduTech"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms & Conditions", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}