Update src/app/order/page.tsx
This commit is contained in:
@@ -1,11 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import { Flame } from "lucide-react";
|
||||
import ProductCartItem from "@/components/ecommerce/cart/ProductCartItem";
|
||||
import {
|
||||
CreditCard,
|
||||
Heart,
|
||||
ShoppingCart,
|
||||
Lock,
|
||||
Check,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function OrderPage() {
|
||||
const navItems = [
|
||||
@@ -15,47 +22,329 @@ export default function OrderPage() {
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Locations", id: "locations" },
|
||||
{ name: "Order Online", id: "order" },
|
||||
];
|
||||
|
||||
const [cart, setCart] = useState<
|
||||
Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
variants?: string[];
|
||||
price: string;
|
||||
quantity: number;
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
}>
|
||||
>([
|
||||
{
|
||||
id: "jerk-chicken", name: "Jerk Chicken Platter", price: "$15.95", quantity: 1,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/from-shrimps-batter-with-red-rice-greens-white-plate_176474-2654.jpg?_wi=1", imageAlt: "Jerk chicken platter", variants: ["Full Rack"],
|
||||
},
|
||||
{
|
||||
id: "curry-shrimp", name: "Curry Shrimp Platter", price: "$16.95", quantity: 1,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=1", imageAlt: "Curry shrimp platter", variants: ["Fresh Daily"],
|
||||
},
|
||||
]);
|
||||
|
||||
const [paymentMethod, setPaymentMethod] = useState<
|
||||
"credit-card" | "apple-pay" | "paypal"
|
||||
>("credit-card");
|
||||
const [orderStage, setOrderStage] = useState<
|
||||
"cart" | "checkout" | "confirmation"
|
||||
>("cart");
|
||||
|
||||
const handleQuantityChange = (id: string, quantity: number) => {
|
||||
setCart((prev) =>
|
||||
prev.map((item) =>
|
||||
item.id === id ? { ...item, quantity } : item
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleRemove = (id: string) => {
|
||||
setCart((prev) => prev.filter((item) => item.id !== id));
|
||||
};
|
||||
|
||||
const subtotal = cart.reduce(
|
||||
(sum, item) =>
|
||||
sum + parseFloat(item.price.replace("$", "")) * item.quantity,
|
||||
0
|
||||
);
|
||||
const tax = subtotal * 0.07;
|
||||
const total = subtotal + tax;
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Menu", href: "/menu" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Reviews", href: "/reviews" },
|
||||
{ label: "Gallery", href: "/" },
|
||||
{ label: "Reviews", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Order & Contact",
|
||||
items: [
|
||||
title: "Order & Contact", items: [
|
||||
{ label: "Order Online", href: "/order" },
|
||||
{ label: "Call Us", href: "tel:2397850423" },
|
||||
{ label: "Locations & Hours", href: "/locations" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Contact", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect With Us",
|
||||
items: [
|
||||
title: "Connect With Us", items: [
|
||||
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Privacy Policy", href: "#privacy" },
|
||||
{ label: "Terms of Service", href: "#terms" },
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Located In",
|
||||
items: [
|
||||
{ label: "801 Leeland Heights Blvd W", href: "#map" },
|
||||
{ label: "Lehigh Acres, FL 33936", href: "#map" },
|
||||
{ label: "Open Until 9PM", href: "/locations" },
|
||||
{ label: "Delivery Available", href: "/order" },
|
||||
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: "/" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
if (orderStage === "confirmation") {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Caribbean Flair"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Order Now", href: "/order"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="confirmation" data-section="confirmation" className="min-h-screen flex items-center justify-center px-4 py-12">
|
||||
<div className="max-w-md w-full text-center">
|
||||
<div className="mb-6 flex justify-center">
|
||||
<div className="rounded-full bg-green-100 p-4">
|
||||
<Check className="w-12 h-12 text-green-600" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold mb-2">Order Confirmed!</h1>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Thank you for your order. Your Caribbean Flair meal will be ready in approximately 20 minutes.
|
||||
</p>
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-6 text-left">
|
||||
<p className="text-sm text-gray-600 mb-2">Order #: CF-2025-001234</p>
|
||||
<p className="font-semibold text-lg mb-1">Total: ${total.toFixed(2)}</p>
|
||||
<p className="text-sm text-gray-600">Payment: {paymentMethod === "credit-card" ? "Credit Card" : paymentMethod === "apple-pay" ? "Apple Pay" : "PayPal"}</p>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
setOrderStage("cart");
|
||||
setCart([]);
|
||||
}}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition"
|
||||
>
|
||||
Place Another Order
|
||||
</button>
|
||||
<a
|
||||
href="/"
|
||||
className="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 rounded-lg transition text-center"
|
||||
>
|
||||
Back to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
|
||||
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
|
||||
logoText="Caribbean Flair"
|
||||
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
if (orderStage === "checkout") {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Caribbean Flair"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Order Now", href: "/order"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="checkout" data-section="checkout" className="min-h-screen px-4 py-12">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-8">Secure Checkout</h1>
|
||||
|
||||
{/* Order Summary */}
|
||||
<div className="bg-gray-50 rounded-lg p-6 mb-8">
|
||||
<h2 className="text-lg font-semibold mb-4">Order Summary</h2>
|
||||
<div className="space-y-2 mb-4">
|
||||
{cart.map((item) => (
|
||||
<div key={item.id} className="flex justify-between text-sm">
|
||||
<span>
|
||||
{item.name} × {item.quantity}
|
||||
</span>
|
||||
<span>
|
||||
${(parseFloat(item.price.replace("$", "")) * item.quantity).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t pt-4 space-y-1">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Subtotal:</span>
|
||||
<span>${subtotal.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Tax (7%):</span>
|
||||
<span>${tax.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between font-bold text-lg pt-2 border-t">
|
||||
<span>Total:</span>
|
||||
<span>${total.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Methods */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center">
|
||||
<Lock className="w-5 h-5 mr-2" />
|
||||
Secure Payment
|
||||
</h2>
|
||||
|
||||
{/* Credit Card */}
|
||||
<div
|
||||
className={`border-2 rounded-lg p-4 mb-4 cursor-pointer transition ${
|
||||
paymentMethod === "credit-card"
|
||||
? "border-blue-600 bg-blue-50"
|
||||
: "border-gray-200"
|
||||
}`}
|
||||
onClick={() => setPaymentMethod("credit-card")}
|
||||
>
|
||||
<div className="flex items-center mb-4">
|
||||
<CreditCard className="w-6 h-6 mr-3" />
|
||||
<span className="font-semibold">Credit Card</span>
|
||||
</div>
|
||||
{paymentMethod === "credit-card" && (
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Card Number"
|
||||
className="w-full px-3 py-2 border rounded-lg text-sm"
|
||||
/>
|
||||
<div className="flex gap-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="MM/YY"
|
||||
className="flex-1 px-3 py-2 border rounded-lg text-sm"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="CVV"
|
||||
className="flex-1 px-3 py-2 border rounded-lg text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Apple Pay */}
|
||||
<div
|
||||
className={`border-2 rounded-lg p-4 mb-4 cursor-pointer transition ${
|
||||
paymentMethod === "apple-pay"
|
||||
? "border-blue-600 bg-blue-50"
|
||||
: "border-gray-200"
|
||||
}`}
|
||||
onClick={() => setPaymentMethod("apple-pay")}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="font-bold text-xl mr-3">🍎</span>
|
||||
<span className="font-semibold">Apple Pay</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PayPal */}
|
||||
<div
|
||||
className={`border-2 rounded-lg p-4 cursor-pointer transition ${
|
||||
paymentMethod === "paypal"
|
||||
? "border-blue-600 bg-blue-50"
|
||||
: "border-gray-200"
|
||||
}`}
|
||||
onClick={() => setPaymentMethod("paypal")}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="font-bold text-blue-600 mr-3">PP</span>
|
||||
<span className="font-semibold">PayPal</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => setOrderStage("cart")}
|
||||
className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 rounded-lg transition"
|
||||
>
|
||||
Back to Cart
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setOrderStage("confirmation")}
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition"
|
||||
>
|
||||
Complete Order
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
|
||||
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
|
||||
logoText="Caribbean Flair"
|
||||
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
@@ -69,143 +358,111 @@ export default function OrderPage() {
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Caribbean Flair"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Order Now",
|
||||
href: "/order",
|
||||
}}
|
||||
text: "Order Now", href: "/order"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="signature-dishes" data-section="signature-dishes">
|
||||
<ProductCardFour
|
||||
title="Signature Island Flavors"
|
||||
description="Discover our most beloved authentic Caribbean dishes, expertly crafted and grilled fresh daily. Order your favorites now and experience premium island cuisine delivered hot and delicious."
|
||||
tag="Most Ordered"
|
||||
tagIcon={Flame}
|
||||
{/* Hero Section */}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
title="Order Your Caribbean Feast Online"
|
||||
description="Build your custom order from our signature island dishes. Fast, secure checkout with multiple payment options."
|
||||
tag="Quick & Easy Ordering"
|
||||
tagIcon={ShoppingCart}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Full Menu",
|
||||
href: "/menu",
|
||||
text: "Proceed to Checkout", onClick: () => setOrderStage("checkout"),
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "jerk-chicken",
|
||||
name: "Jerk Chicken Platter",
|
||||
price: "$15.95",
|
||||
variant: "Full Rack",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/from-shrimps-batter-with-red-rice-greens-white-plate_176474-2654.jpg?_wi=3",
|
||||
imageAlt: "Jerk chicken grilled on foil with spices",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "curry-shrimp",
|
||||
name: "Curry Shrimp Platter",
|
||||
price: "$16.95",
|
||||
variant: "Fresh Daily",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=4",
|
||||
imageAlt: "Curry shrimp over rice and peas",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "conch-fritters",
|
||||
name: "Conch Fritters Combo",
|
||||
price: "$12.95",
|
||||
variant: "6 Pieces",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/chicken-nuggets-served-with-french-fries-sauces_140725-5759.jpg?_wi=3",
|
||||
imageAlt: "Golden conch fritters with dipping sauce",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg"
|
||||
imageAlt="Caribbean Flair food display"
|
||||
mediaAnimation="opacity"
|
||||
imagePosition="right"
|
||||
ariaLabel="Order online hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="order-featured" data-section="order-featured">
|
||||
<ProductCardFour
|
||||
title="Premium Island Combinations"
|
||||
description="Build your perfect Caribbean meal with our curated combinations. Each platter includes fresh sides and authentic island flavors prepared fresh on the grill."
|
||||
tag="Customer Favorites"
|
||||
tagIcon={Flame}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "View All Platters",
|
||||
href: "/menu",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "jerk-pork-combo",
|
||||
name: "Jerk Pork Festival Combo",
|
||||
price: "$17.95",
|
||||
variant: "Complete Platter",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hot-spicy-grilled-pork-salad-with-berry-rice_1339-6325.jpg?_wi=4",
|
||||
imageAlt: "Jerk pork platter with rice and tropical slaw",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "curry-goat-combo",
|
||||
name: "Curry Goat Island Feast",
|
||||
price: "$18.95",
|
||||
variant: "Family Style",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rice-dish-with-sauce-near-spices_23-2147894777.jpg?_wi=4",
|
||||
imageAlt: "Rich curry goat served over rice and peas",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "escovitch-fish-combo",
|
||||
name: "Escovitch Fish Special",
|
||||
price: "$16.95",
|
||||
variant: "Fresh Catch",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/grilled-chicken-served-with-aubergine-lemon-parsley_140725-1554.jpg?_wi=3",
|
||||
imageAlt: "Escovitch fish with pickled vegetables and lime",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "seafood-festival",
|
||||
name: "Seafood Festival Platter",
|
||||
price: "$19.95",
|
||||
variant: "Premium Mix",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/deep-fried-samosas-rustic-crockery-plate-generated-by-ai_188544-41080.jpg?_wi=4",
|
||||
imageAlt: "Festival dumplings with tropical slaw and mac and cheese",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{/* Shopping Cart Section */}
|
||||
<div id="cart" data-section="cart" className="px-4 py-12">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-8">Your Cart</h1>
|
||||
|
||||
{cart.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<ShoppingCart className="w-16 h-16 mx-auto text-gray-400 mb-4" />
|
||||
<p className="text-xl text-gray-600">Your cart is empty</p>
|
||||
<a
|
||||
href="/menu"
|
||||
className="inline-block mt-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition"
|
||||
>
|
||||
Browse Menu
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-4 mb-8">
|
||||
{cart.map((item) => (
|
||||
<ProductCartItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
onQuantityChange={handleQuantityChange}
|
||||
onRemove={handleRemove}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Cart Summary */}
|
||||
<div className="bg-gray-50 rounded-lg p-6 mb-6">
|
||||
<div className="space-y-2 mb-4">
|
||||
<div className="flex justify-between">
|
||||
<span>Subtotal:</span>
|
||||
<span>${subtotal.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Tax (7%):</span>
|
||||
<span>${tax.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="border-t pt-4 flex justify-between font-bold text-lg">
|
||||
<span>Total:</span>
|
||||
<span>${total.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-4">
|
||||
<a
|
||||
href="/menu"
|
||||
className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 rounded-lg transition text-center"
|
||||
>
|
||||
Continue Shopping
|
||||
</a>
|
||||
<button
|
||||
onClick={() => setOrderStage("checkout")}
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition flex items-center justify-center"
|
||||
>
|
||||
<Lock className="w-5 h-5 mr-2" />
|
||||
Proceed to Checkout
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=10"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
|
||||
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
|
||||
logoText="Caribbean Flair"
|
||||
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
||||
|
||||
Reference in New Issue
Block a user