src/app/checkout/page.tsx

@@ -3,10 +3,17 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ContactForm from '@/components/form/ContactForm';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { useState } from 'react';
 
 export default function CheckoutPage() {
+  const [cart] = useState([
+    { id: "p1", name: "Roasted Macadamias", price: 15.00, quantity: 1 },
+    { id: "p2", name: "Artisan Truffles", price: 22.00, quantity: 2 },
+  ]);
+
+  const subtotal = cart.reduce((acc, item) => acc + (item.price * item.quantity), 0);
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -22,33 +29,56 @@ export default function CheckoutPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarLayoutFloatingOverlay
-            navItems={[
-              { name: "Home", id: "/" },
-              { name: "Products", id: "/products" },
-              { name: "Checkout", id: "/checkout" },
-            ]}
-            brandName="Nuts & Sweets"
-          />
-        </div>
-        
-        <div className="min-h-screen py-24 flex items-center justify-center">
-          <ContactForm
-            title="Secure Checkout"
-            description="Please provide your details to finalize your order."
-            tag="Checkout"
-            buttonText="Pay Now"
-            useInvertedBackground={false}
-            onSubmit={(email) => console.log("Processing order for:", email)}
-          />
+            <NavbarLayoutFloatingOverlay
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "Products", id: "/products" },
+                { name: "Checkout", id: "/checkout" },
+              ]}
+              brandName="Nuts & Sweets"
+            />
         </div>
 
+        <main className="container mx-auto py-20 px-6">
+          <h1 className="text-4xl font-bold mb-10">Checkout</h1>
+          <div className="grid md:grid-cols-2 gap-12">
+            <div className="bg-white/5 p-8 rounded-3xl">
+              <h2 className="text-2xl font-semibold mb-6">Your Cart</h2>
+              <div className="space-y-4">
+                {cart.map((item) => (
+                  <div key={item.id} className="flex justify-between">
+                    <span>{item.name} (x{item.quantity})</span>
+                    <span>${(item.price * item.quantity).toFixed(2)}</span>
+                  </div>
+                ))}
+                <div className="border-t pt-4 mt-4 font-bold text-xl flex justify-between">
+                  <span>Total</span>
+                  <span>${subtotal.toFixed(2)}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white/5 p-8 rounded-3xl">
+              <h2 className="text-2xl font-semibold mb-6">Shipping & Payment</h2>
+              <form className="space-y-4">
+                <input type="text" placeholder="Full Address" className="w-full p-3 rounded-xl bg-white/10 border border-white/10" />
+                <input type="email" placeholder="Contact Email" className="w-full p-3 rounded-xl bg-white/10 border border-white/10" />
+                <select className="w-full p-3 rounded-xl bg-white/10 border border-white/10">
+                  <option>Credit Card</option>
+                  <option>PayPal</option>
+                </select>
+                <button type="submit" className="w-full p-4 rounded-xl bg-primary text-white font-bold">Complete Order</button>
+              </form>
+            </div>
+          </div>
+        </main>
+
         <div id="footer" data-section="footer">
-            <FooterLogoReveal
+          <FooterLogoReveal
             logoText="Nuts & Sweets"
             leftLink={{ text: "Products", href: "/products" }}
             rightLink={{ text: "Terms", href: "#" }}
-            />
+          />
         </div>
       </ReactLenis>
     </ThemeProvider>

src/app/page.tsx

@@ -160,4 +160,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}