From db3ea172732663b71ddf39102205d803a50a515e Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 18 Mar 2026 16:05:19 +0000 Subject: [PATCH] Add src/app/order-online/page.tsx --- src/app/order-online/page.tsx | 420 ++++++++++++++++++++++++++++++++++ 1 file changed, 420 insertions(+) create mode 100644 src/app/order-online/page.tsx diff --git a/src/app/order-online/page.tsx b/src/app/order-online/page.tsx new file mode 100644 index 0000000..3627fc3 --- /dev/null +++ b/src/app/order-online/page.tsx @@ -0,0 +1,420 @@ +"use client"; + +import Link from "next/link"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; +import HeroSplit from "@/components/sections/hero/HeroSplit"; +import FeatureCardTen from "@/components/sections/feature/FeatureCardTen"; +import FooterMedia from "@/components/sections/footer/FooterMedia"; +import { + ShoppingCart, + CreditCard, + Apple, + DollarSign, + CheckCircle, + Zap, + TrendingUp, + Facebook, +} from "lucide-react"; +import { useState } from "react"; + +export default function OrderOnlinePage() { + const [cartItems, setCartItems] = useState>([ + { id: "jerk-chicken", name: "Jerk Chicken Platter", price: 15.95, quantity: 1 }, + ]); + const [showCheckout, setShowCheckout] = useState(false); + const [paymentMethod, setPaymentMethod] = useState<"card" | "apple-pay" | "paypal" | null>(null); + const [orderConfirmed, setOrderConfirmed] = useState(false); + + const navItems = [ + { name: "Home", id: "/" }, + { name: "Order Online", id: "/order-online" }, + { name: "Contact", id: "/contact" }, + { name: "Gallery", id: "/" }, + { name: "Reviews", id: "/" }, + { name: "Locations", id: "/" }, + ]; + + const footerColumns = [ + { + title: "Quick Links", items: [ + { label: "Home", href: "/" }, + { label: "Order Online", href: "/order-online" }, + { label: "Gallery", href: "/" }, + { label: "Reviews", href: "/" }, + ], + }, + { + title: "Order & Contact", items: [ + { label: "Order Online", href: "/order-online" }, + { label: "Call Us", href: "tel:2397850423" }, + { label: "Locations & Hours", href: "/" }, + { label: "Contact", href: "/contact" }, + ], + }, + { + title: "Connect With Us", items: [ + { label: "Facebook", href: "https://facebook.com/caribbeanflair" }, + { label: "About Us", href: "/" }, + { label: "Privacy Policy", href: "/" }, + { label: "Terms of Service", href: "/" }, + ], + }, + { + title: "Located In", items: [ + { label: "801 Leeland Heights Blvd W", href: "/" }, + { label: "Lehigh Acres, FL 33936", href: "/" }, + { label: "Open Until 9PM", href: "/" }, + { label: "Delivery Available", href: "/" }, + ], + }, + ]; + + const cartTotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0); + + const handleAddToCart = (productName: string, price: number) => { + const existingItem = cartItems.find((item) => item.name === productName); + if (existingItem) { + setCartItems( + cartItems.map((item) => + item.id === existingItem.id ? { ...item, quantity: item.quantity + 1 } : item + ) + ); + } else { + setCartItems([ + ...cartItems, + { id: Date.now().toString(), name: productName, price, quantity: 1 }, + ]); + } + }; + + const handleRemoveFromCart = (id: string) => { + setCartItems(cartItems.filter((item) => item.id !== id)); + }; + + const handleCheckout = () => { + setShowCheckout(true); + }; + + const handlePaymentSubmit = (method: "card" | "apple-pay" | "paypal") => { + setPaymentMethod(method); + // Simulate payment processing + setTimeout(() => { + setOrderConfirmed(true); + // In a real app, send receipt via email here + }, 1500); + }; + + return ( + + {/* Navbar */} + + + {/* Hero Section */} +
+ +
+ + {/* Cart & Checkout Section */} +
+
+ {!orderConfirmed ? ( +
+ {/* Menu Items */} +
+

Select Your Items

+
+ {[ + { id: "jerk-chicken", name: "Jerk Chicken Platter", price: 15.95, desc: "Full Rack" }, + { id: "curry-shrimp", name: "Curry Shrimp Platter", price: 16.95, desc: "Fresh Daily" }, + { id: "conch-fritters", name: "Conch Fritters Combo", price: 12.95, desc: "6 Pieces" }, + { id: "escovitch-fish", name: "Escovitch Fish", price: 17.95, desc: "Island Tradition" }, + { id: "curry-goat", name: "Curry Goat", price: 16.95, desc: "Community Favorite" }, + { id: "festival-sides", name: "Festival & Slaw", price: 8.95, desc: "Must Try" }, + ].map((item) => ( +
+
+

{item.name}

+

{item.desc}

+
+
+

${item.price.toFixed(2)}

+ +
+
+ ))} +
+
+ + {/* Cart Summary */} +
+
+

Your Cart

+
+ {cartItems.map((item) => ( +
+
+

{item.name}

+

Qty: {item.quantity}

+
+
+

${(item.price * item.quantity).toFixed(2)}

+ +
+
+ ))} +
+
+
+ Total: + ${cartTotal.toFixed(2)} +
+ +
+
+
+
+ ) : null} + + {/* Checkout Form */} + {showCheckout && !orderConfirmed && ( +
+

Secure Checkout

+ + {/* Payment Methods */} +
+

Select Payment Method

+
+ + + +
+
+ + {/* Credit Card Form */} + {paymentMethod === "card" && ( +
+

Credit Card Details

+ + +
+ + +
+
+ )} + + {/* Billing Address */} +
+

Billing Address

+ + + +
+ + {/* Order Summary */} +
+

Order Summary

+ {cartItems.map((item) => ( +
+ {item.name} x{item.quantity} + ${(item.price * item.quantity).toFixed(2)} +
+ ))} +
+ Total: + ${cartTotal.toFixed(2)} +
+
+ + +
+ )} + + {/* Order Confirmation */} + {orderConfirmed && ( +
+
+ +
+

Order Confirmed!

+

+ Your order has been successfully placed. A receipt has been sent to your email. +

+
+

Order Details

+ {cartItems.map((item) => ( +
+ {item.name} x{item.quantity} + ${(item.price * item.quantity).toFixed(2)} +
+ ))} +
+ Total: + ${cartTotal.toFixed(2)} +
+
+

Payment Method: {paymentMethod}

+

Your meal will be ready for pickup in approximately 15-20 minutes.

+ + Return Home + +
+ )} +
+
+ + {/* Features Section */} +
+ +
+ + {/* Footer */} + + + ); +} \ No newline at end of file