src/app/cart/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Minus, Plus, Trash2 } from "lucide-react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+
+export default function CartPage() {
+  const [cartItems, setCartItems] = useState([
+    { id: "p1", name: "Classic Margherita Pizza", price: 12.99, quantity: 1 },
+    { id: "p2", name: "Gourmet Beef Burger", price: 14.99, quantity: 2 },
+  ]);
+
+  const updateQuantity = (id: string, delta: number) => {
+    setCartItems(prev => prev.map(item => 
+      item.id === id ? { ...item, quantity: Math.max(1, item.quantity + delta) } : item
+    ));
+  };
+
+  const removeItem = (id: string) => {
+    setCartItems(prev => prev.filter(item => item.id !== id));
+  };
+
+  const subtotal = cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
+
+  return (
+    <ThemeProvider>
+        <NavbarLayoutFloatingOverlay
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "Menu", id: "/#menu" },
+                { name: "Cart", id: "/cart" },
+            ]}
+            brandName="FreshEats"
+        />
+        <main className="container mx-auto py-24 px-6">
+            <h1 className="text-4xl font-light mb-12">Your Cart</h1>
+            <div className="grid lg:grid-cols-3 gap-12">
+                <div className="lg:col-span-2 space-y-6">
+                    {cartItems.map(item => (
+                        <div key={item.id} className="flex items-center justify-between p-6 border rounded-lg">
+                            <div>
+                                <h3 className="text-xl">{item.name}</h3>
+                                <p className="opacity-60">${item.price.toFixed(2)}</p>
+                            </div>
+                            <div className="flex items-center gap-4">
+                                <button onClick={() => updateQuantity(item.id, -1)} className="p-2 hover:bg-black/5 rounded"><Minus size={16}/></button>
+                                <span>{item.quantity}</span>
+                                <button onClick={() => updateQuantity(item.id, 1)} className="p-2 hover:bg-black/5 rounded"><Plus size={16}/></button>
+                                <button onClick={() => removeItem(item.id)} className="p-2 text-red-500 hover:bg-red-50 rounded"><Trash2 size={16}/></button>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+                <div className="p-8 border rounded-lg h-fit space-y-4">
+                    <h2 className="text-2xl">Order Summary</h2>
+                    <div className="flex justify-between py-4 border-b">
+                        <span>Subtotal</span>
+                        <span>${subtotal.toFixed(2)}</span>
+                    </div>
+                    <button className="w-full py-3 bg-black text-white rounded hover:opacity-90">Checkout</button>
+                </div>
+            </div>
+        </main>
+    </ThemeProvider>
+  );
+}

src/app/checkout/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="compact"
+        sizing="mediumSizeLargeTitles"
+        background="fluid"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "Menu", id: "/#menu" },
+              ]}
+              brandName="FreshEats"
+            />
+        </div>
+
+        <div id="checkout-form" data-section="checkout-form" className="pt-32 pb-20">
+          <ContactSplitForm
+            title="Checkout"
+            description="Enter your delivery details and select a payment method to complete your order."
+            inputs={[
+              { name: "fullName", type: "text", placeholder: "Full Name", required: true },
+              { name: "address", type: "text", placeholder: "Delivery Address", required: true },
+              { name: "city", type: "text", placeholder: "City", required: true },
+              { name: "payment", type: "text", placeholder: "Payment Method (Card/Cash)", required: true },
+            ]}
+            textarea={{ name: "notes", placeholder: "Order Summary & Instructions" }}
+            buttonText="Confirm Order"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterBaseReveal
+              logoText="FreshEats"
+              columns={[
+                { title: "Company", items: [{ label: "About", href: "/#about" }] },
+                { title: "Legal", items: [{ label: "Privacy", href: "#" }] },
+              ]}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/orders/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+
+export default function OrdersPage() {
+  return (
+    <ThemeProvider>
+      <ReactLenis root>
+        <NavbarLayoutFloatingOverlay
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "Orders", id: "/orders" },
+            ]}
+            brandName="FreshEats"
+        />
+        <div className="min-h-screen pt-32 px-6 flex flex-col items-center">
+          <h1 className="text-4xl font-bold mb-8">Your Orders</h1>
+          <div className="w-full max-w-4xl p-8 rounded-xl border border-white/10 bg-white/5">
+            <p className="text-lg">Order history is currently empty.</p>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -12,7 +12,7 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { Clock, Leaf, Star } from "lucide-react";
+import { Clock, Leaf, Star, ShoppingCart } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -36,6 +36,8 @@ export default function LandingPage() {
         { name: "About", id: "#about" },
         { name: "FAQ", id: "#faq" },
         { name: "Contact", id: "#contact" },
+        { name: "Orders", id: "/orders" },
+        { name: "Cart (0)", id: "#" },
       ]}
       brandName="FreshEats"
     />