Compare commits
19 Commits
version_16
...
version_21
| Author | SHA1 | Date | |
|---|---|---|---|
| 1dc695ca99 | |||
| 366124ec9d | |||
| 64cd2ad7f7 | |||
| 8b61686144 | |||
| 2daee3df45 | |||
| 561d8ad8f5 | |||
| af4d2d98de | |||
| 2e2a6cec49 | |||
| 37ead887b6 | |||
| e8d31bb1e0 | |||
| 1ffc5fb28e | |||
| 13c418766a | |||
| 6112efc087 | |||
| 83b2f02f99 | |||
| 148f81f053 | |||
| 20d5cfe282 | |||
| 535bc07992 | |||
| f81b587c74 | |||
| 93a4bfcf9c |
@@ -1,19 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import { Flame, Lock, X } from "lucide-react";
|
||||
import { Flame } from "lucide-react";
|
||||
|
||||
export default function FullMenuPage() {
|
||||
const [isPasswordProtected, setIsPasswordProtected] = useState(true);
|
||||
const [passwordInput, setPasswordInput] = useState("");
|
||||
const [passwordError, setPasswordError] = useState(false);
|
||||
const MENU_PASSWORD = "Caribbean2025";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Menu", id: "menu" },
|
||||
@@ -58,16 +52,6 @@ export default function FullMenuPage() {
|
||||
},
|
||||
];
|
||||
|
||||
const handlePasswordSubmit = () => {
|
||||
if (passwordInput === MENU_PASSWORD) {
|
||||
setIsPasswordProtected(false);
|
||||
setPasswordError(false);
|
||||
} else {
|
||||
setPasswordError(true);
|
||||
setPasswordInput("");
|
||||
}
|
||||
};
|
||||
|
||||
const allMenuItems = [
|
||||
{
|
||||
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=1", imageAlt: "Jerk chicken grilled on foil with spices"},
|
||||
@@ -126,101 +110,48 @@ export default function FullMenuPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password Protection Modal */}
|
||||
{isPasswordProtected && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-lg shadow-2xl max-w-md w-full p-8">
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<Lock className="w-8 h-8 text-orange-500 mr-2" />
|
||||
<h2 className="text-2xl font-bold">Full Menu Access</h2>
|
||||
</div>
|
||||
<p className="text-gray-600 text-center mb-6">
|
||||
This full menu is password protected. Please enter the password to continue.
|
||||
</p>
|
||||
<input
|
||||
type="password"
|
||||
value={passwordInput}
|
||||
onChange={(e) => {
|
||||
setPasswordInput(e.target.value);
|
||||
setPasswordError(false);
|
||||
}}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
handlePasswordSubmit();
|
||||
}
|
||||
}}
|
||||
placeholder="Enter password"
|
||||
className={`w-full px-4 py-3 border-2 rounded-lg mb-4 focus:outline-none transition ${
|
||||
passwordError
|
||||
? "border-red-500 focus:border-red-600"
|
||||
: "border-gray-300 focus:border-orange-500"
|
||||
}`}
|
||||
/>
|
||||
{passwordError && (
|
||||
<p className="text-red-600 text-sm mb-4">Incorrect password. Please try again.</p>
|
||||
)}
|
||||
<button
|
||||
onClick={handlePasswordSubmit}
|
||||
className="w-full bg-gradient-to-r from-orange-500 to-red-500 text-white font-semibold py-3 rounded-lg hover:opacity-90 transition mb-3"
|
||||
>
|
||||
Unlock Menu
|
||||
</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>
|
||||
)}
|
||||
|
||||
{/* Hero Section */}
|
||||
{!isPasswordProtected && (
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
title="Complete Island Menu"
|
||||
description="Explore our full selection of authentic Caribbean dishes. Every item is crafted fresh and packed with island soul."
|
||||
tag="Exclusive"
|
||||
tagIcon={Flame}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Call to Order", href: "tel:2397850423"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg?_wi=3"
|
||||
imageAlt="Caribbean Flair Full Menu"
|
||||
mediaAnimation="opacity"
|
||||
imagePosition="right"
|
||||
ariaLabel="Full menu page hero section"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
title="Complete Island Menu"
|
||||
description="Explore our full selection of authentic Caribbean dishes. Every item is crafted fresh and packed with island soul."
|
||||
tag="Exclusive"
|
||||
tagIcon={Flame}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Call to Order", href: "tel:2397850423"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg?_wi=3"
|
||||
imageAlt="Caribbean Flair Full Menu"
|
||||
mediaAnimation="opacity"
|
||||
imagePosition="right"
|
||||
ariaLabel="Full menu page hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Full Menu Section */}
|
||||
{!isPasswordProtected && (
|
||||
<div id="full-menu" data-section="full-menu">
|
||||
<ProductCardFour
|
||||
title="All Menu Items"
|
||||
description="Discover our complete selection of authentic Caribbean dishes, sides, drinks, and specials. All items are fresh and made to order."
|
||||
tag="Complete Selection"
|
||||
tagIcon={Flame}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Order Now", href: "/menu"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={allMenuItems}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div id="full-menu" data-section="full-menu">
|
||||
<ProductCardFour
|
||||
title="All Menu Items"
|
||||
description="Discover our complete selection of authentic Caribbean dishes, sides, drinks, and specials. All items are fresh and made to order."
|
||||
tag="Complete Selection"
|
||||
tagIcon={Flame}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Order Now", href: "/menu"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={allMenuItems}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
|
||||
@@ -1,15 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import { ArrowLeft, Lock } from "lucide-react";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import {
|
||||
Award,
|
||||
Flame,
|
||||
Phone,
|
||||
ShoppingCart,
|
||||
MapPin,
|
||||
Clock,
|
||||
Star,
|
||||
Heart,
|
||||
Zap,
|
||||
TrendingUp,
|
||||
Facebook,
|
||||
} from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function MenuPage() {
|
||||
const [password, setPassword] = useState("");
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isDesktopButtonsVisible, setIsDesktopButtonsVisible] = useState(true);
|
||||
const [showCookiePreferences, setShowCookiePreferences] = useState(false);
|
||||
const [cookiesAccepted, setCookiesAccepted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const cookieConsent = localStorage.getItem("cookie-consent");
|
||||
if (!cookieConsent) {
|
||||
setShowCookiePreferences(true);
|
||||
} else {
|
||||
setCookiesAccepted(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCookieAccept = () => {
|
||||
localStorage.setItem("cookie-consent", "accepted");
|
||||
setCookiesAccepted(true);
|
||||
setShowCookiePreferences(false);
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
@@ -20,19 +50,39 @@ export default function MenuPage() {
|
||||
{ name: "Locations", id: "footer" },
|
||||
];
|
||||
|
||||
const handlePasswordSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Replace with your actual password
|
||||
const correctPassword = "caribbean2025";
|
||||
|
||||
if (password === correctPassword) {
|
||||
setIsAuthenticated(true);
|
||||
setError("");
|
||||
} else {
|
||||
setError("Incorrect password. Please try again.");
|
||||
setPassword("");
|
||||
}
|
||||
};
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Menu", href: "/menu" },
|
||||
{ label: "Gallery", href: "/#featured-gallery" },
|
||||
{ label: "Reviews", href: "/#testimonials" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Order & Contact", items: [
|
||||
{ label: "Order Online", href: "/menu" },
|
||||
{ label: "Call Us", href: "tel:2397850423" },
|
||||
{ label: "Locations & Hours", href: "/#footer" },
|
||||
{ label: "Contact", href: "/#footer" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect With Us", items: [
|
||||
{ label: "Facebook", href: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr" },
|
||||
{ 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: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -57,6 +107,40 @@ export default function MenuPage() {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-60px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(60px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowHover {
|
||||
0% {
|
||||
box-shadow: 0 0 0px rgba(227, 68, 0, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(227, 68, 0, 0.6);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 30px rgba(227, 68, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@@ -64,182 +148,321 @@ export default function MenuPage() {
|
||||
body {
|
||||
animation: fadeIn 0.8s ease-out;
|
||||
}
|
||||
|
||||
[data-section] {
|
||||
animation: fadeIn 1.2s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#menu-header {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
#full-menu {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
#mains {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
#sides {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
#beverages {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
#footer {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
img {
|
||||
animation: slideInFromRight 1s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#full-menu img {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
#mains img {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
#sides img {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
button, [role="button"], a[href*="#"], a[href*="/"] {
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover, [role="button"]:hover, a[href*="#"]:hover, a[href*="/"]:hover {
|
||||
animation: glowHover 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.bg-gradient-to-r, .bg-primary-cta, [class*="bg-blue"], [class*="bg-orange"], [class*="bg-red"] {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.bg-gradient-to-r:hover, .bg-primary-cta:hover, [class*="bg-blue"]:hover, [class*="bg-orange"]:hover, [class*="bg-red"]:hover {
|
||||
filter: brightness(1.1);
|
||||
animation: glowHover 0.6s ease-in-out;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{/* Navigation Bar */}
|
||||
<div className="sticky top-0 z-40 w-full bg-white/80 backdrop-blur-md border-b border-gray-200">
|
||||
{/* Persistent Top Navigation Bar */}
|
||||
<div id="nav" data-section="nav" className="sticky top-0 z-40 w-full bg-white/80 backdrop-blur-md border-b border-gray-200">
|
||||
<NavbarStyleCentered
|
||||
brandName="Caribbean Flair"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "See Full Menu", href: "/menu"
|
||||
text: "Order Now", href: "/menu"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="min-h-screen bg-gradient-to-b from-white to-gray-50">
|
||||
{!isAuthenticated ? (
|
||||
// Password Protected View
|
||||
<div className="flex items-center justify-center min-h-[calc(100vh-80px)] px-4">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-white/90 backdrop-blur-lg rounded-2xl shadow-2xl border border-white/20 p-8 md:p-10">
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="bg-gradient-to-br from-primary-cta to-accent p-3 rounded-full">
|
||||
<Lock className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl font-bold text-center text-gray-900 mb-2">
|
||||
Full Menu
|
||||
</h1>
|
||||
<p className="text-center text-gray-600 mb-8">
|
||||
Enter the password to view our complete menu with all available dishes and specials.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handlePasswordSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Enter password"
|
||||
className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-lg">
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-gradient-to-r from-primary-cta to-accent text-white py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Unlock Menu
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-xs text-gray-500 mt-6">
|
||||
For password assistance, please contact us
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// Full Menu View
|
||||
<div className="max-w-6xl mx-auto px-4 py-12 md:py-20">
|
||||
<div className="mb-8 flex items-center gap-4">
|
||||
<Link
|
||||
href="/#signature-dishes"
|
||||
className="flex items-center gap-2 text-primary-cta hover:opacity-70 transition-opacity"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
Back to Home
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Full Menu
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 mb-12">
|
||||
Discover all of our authentic Caribbean dishes, crafted with love and served fresh off the grill.
|
||||
</p>
|
||||
|
||||
{/* Menu Sections */}
|
||||
<div className="space-y-12">
|
||||
{/* Main Dishes */}
|
||||
<div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/20 p-8 md:p-10">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-8">Main Dishes</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="pb-6 border-b md:border-b-0 md:pb-0">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Jerk Chicken Platter</h3>
|
||||
<p className="text-gray-600 text-sm mt-1 mb-3">Marinated in authentic Caribbean spices, grilled to perfection. Served with rice & peas, festival dumplings, and tropical slaw.</p>
|
||||
<p className="text-primary-cta font-bold text-lg">$15.95</p>
|
||||
</div>
|
||||
<div className="pb-6 border-b md:border-b-0 md:pb-0">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Curry Shrimp Platter</h3>
|
||||
<p className="text-gray-600 text-sm mt-1 mb-3">Fresh shrimp in our signature curry sauce with Caribbean seasonings. Includes rice & peas, festival dumplings, and tropical slaw.</p>
|
||||
<p className="text-primary-cta font-bold text-lg">$16.95</p>
|
||||
</div>
|
||||
<div className="pb-6 md:pb-0">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Curry Goat</h3>
|
||||
<p className="text-gray-600 text-sm mt-1 mb-3">Tender goat meat cooked in rich curry sauce with traditional island spices. Served with rice & peas and festival dumplings.</p>
|
||||
<p className="text-primary-cta font-bold text-lg">$17.95</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">Escovitch Fish</h3>
|
||||
<p className="text-gray-600 text-sm mt-1 mb-3">Fresh fish prepared Jamaican style with pickled vegetables. Authentic island flavors in every bite.</p>
|
||||
<p className="text-primary-cta font-bold text-lg">$16.95</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sides & Appetizers */}
|
||||
<div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/20 p-8 md:p-10">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-8">Sides & Appetizers</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="pb-6 border-b md:border-b-0 md:pb-0">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Conch Fritters Combo</h3>
|
||||
<p className="text-gray-600 text-sm mt-1 mb-3">6 pieces of golden, crispy conch fritters. Served with house-made dipping sauce.</p>
|
||||
<p className="text-primary-cta font-bold text-lg">$12.95</p>
|
||||
</div>
|
||||
<div className="pb-6 border-b md:border-b-0 md:pb-0">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Festival Dumplings</h3>
|
||||
<p className="text-gray-600 text-sm mt-1 mb-3">Crispy, golden fried dumplings. A Caribbean classic that pairs perfectly with any main dish.</p>
|
||||
<p className="text-primary-cta font-bold text-lg">$4.95</p>
|
||||
</div>
|
||||
<div className="pb-6 md:pb-0">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Creamy Island Mac & Cheese</h3>
|
||||
<p className="text-gray-600 text-sm mt-1 mb-3">Smooth, rich, and soul-warming. The perfect comfort food complement to our island mains.</p>
|
||||
<p className="text-primary-cta font-bold text-lg">$5.95</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">Tropical Slaw</h3>
|
||||
<p className="text-gray-600 text-sm mt-1 mb-3">Fresh, crisp coleslaw with a tropical twist. Light and refreshing alongside any dish.</p>
|
||||
<p className="text-primary-cta font-bold text-lg">$3.95</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Beverages */}
|
||||
<div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/20 p-8 md:p-10">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-8">Beverages</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="pb-6 border-b md:border-b-0 md:pb-0">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Island Ginger Beer</h3>
|
||||
<p className="text-gray-600 text-sm mt-1 mb-3">Refreshing traditional Caribbean ginger beer. Perfectly spiced and ice-cold.</p>
|
||||
<p className="text-primary-cta font-bold text-lg">$2.95</p>
|
||||
</div>
|
||||
<div className="pb-6 md:pb-0">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Fresh Tropical Juice</h3>
|
||||
<p className="text-gray-600 text-sm mt-1 mb-3">Mango, passion fruit, or guava. Fresh squeezed island flavors in every sip.</p>
|
||||
<p className="text-primary-cta font-bold text-lg">$3.95</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Call to Action */}
|
||||
<div className="mt-12 bg-gradient-to-r from-primary-cta to-accent rounded-2xl shadow-lg p-8 md:p-10 text-white text-center">
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-4">Ready to Order?</h2>
|
||||
<p className="text-white/90 mb-6">Call us at (239) 785-0423 or visit our location for fresh Caribbean flavors made to order.</p>
|
||||
<a
|
||||
href="tel:2397850423"
|
||||
className="inline-block bg-white text-primary-cta px-8 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Call Now
|
||||
{/* Floating Mobile Sidebar Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="fixed inset-0 z-30 md:hidden">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
<div className="absolute right-0 top-16 w-64 bg-white/95 backdrop-blur-lg rounded-lg shadow-2xl m-4 border border-white/20">
|
||||
<div className="p-6 space-y-4">
|
||||
{navItems.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.id === "home" ? "/" : `/#${item.id}`}
|
||||
className="block text-gray-800 hover:text-primary-cta font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
<a href="/menu" className="w-full bg-primary-cta text-white py-2 rounded-lg font-semibold hover:opacity-90 text-center block">
|
||||
Order Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Floating Desktop Action Buttons */}
|
||||
{isDesktopButtonsVisible && (
|
||||
<div className="hidden md:fixed md:right-6 md:bottom-6 md:z-20 md:flex md:flex-col md:gap-3">
|
||||
<a
|
||||
href="tel:2397850423"
|
||||
className="bg-white/90 backdrop-blur-lg border border-white/20 rounded-full p-4 shadow-lg hover:shadow-xl hover:bg-white transition-all flex items-center justify-center group"
|
||||
title="Call Us"
|
||||
>
|
||||
<Phone className="w-6 h-6 text-primary-cta group-hover:scale-110 transition-transform" />
|
||||
</a>
|
||||
<a
|
||||
href="/menu"
|
||||
className="bg-gradient-to-r from-primary-cta to-accent text-white rounded-full p-4 shadow-lg hover:shadow-xl transition-all flex items-center justify-center group font-semibold"
|
||||
title="Order Now"
|
||||
>
|
||||
<ShoppingCart className="w-6 h-6 group-hover:scale-110 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Cookie Preferences Popup */}
|
||||
{showCookiePreferences && !cookiesAccepted && (
|
||||
<div className="fixed bottom-6 left-6 right-6 z-50 max-w-sm bg-white/95 backdrop-blur-lg rounded-lg shadow-2xl border border-white/20 p-4 md:p-6">
|
||||
<div className="space-y-3">
|
||||
<h3 className="font-semibold text-gray-900">Cookie Preferences</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
We use cookies to enhance your experience, personalize content, and analyze site traffic.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleCookieAccept}
|
||||
className="flex-1 bg-primary-cta text-white py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Accept All
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowCookiePreferences(false)}
|
||||
className="flex-1 border border-gray-300 text-gray-800 py-2 rounded-lg font-semibold hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Decline
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Menu Header Section */}
|
||||
<div id="menu-header" data-section="menu-header" className="py-12 md:py-20 px-4 bg-gradient-to-b from-white to-gray-50">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-4">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900">Full Island Menu</h1>
|
||||
<p className="text-lg text-gray-600">Authentic Caribbean dishes crafted fresh daily by our expert grill masters. Every meal is made with love and island passion.</p>
|
||||
<div className="flex flex-wrap justify-center gap-4 mt-6">
|
||||
<a href="tel:2397850423" className="inline-flex items-center gap-2 px-6 py-3 bg-white border-2 border-primary-cta text-primary-cta rounded-full font-semibold hover:bg-primary-cta hover:text-white transition-all">
|
||||
<Phone className="w-5 h-5" />
|
||||
Call (239) 785-0423
|
||||
</a>
|
||||
<div className="inline-flex items-center gap-2 text-gray-700">
|
||||
<Clock className="w-5 h-5 text-primary-cta" />
|
||||
Open Until 9PM
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Dishes Section */}
|
||||
<div id="mains" data-section="mains">
|
||||
<ProductCardFour
|
||||
title="Main Island Dishes"
|
||||
description="Signature mains grilled to perfection with authentic Caribbean spices and flavors."
|
||||
tag="Must Try"
|
||||
tagIcon={Flame}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Order Online", href: "#order"
|
||||
},
|
||||
]}
|
||||
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 | Rice & Peas", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773884559172-6jmwoep9.png", imageAlt: "Jerk chicken grilled on foil with spices"
|
||||
},
|
||||
{
|
||||
id: "curry-shrimp", name: "Curry Shrimp Platter", price: "$16.95", variant: "Fresh Daily | Festival Dumplings", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Curry shrimp over rice and peas"
|
||||
},
|
||||
{
|
||||
id: "conch-fritters", name: "Conch Fritters Combo", price: "$12.95", variant: "6 Pieces | Dipping Sauce", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Golden conch fritters with dipping sauce"
|
||||
},
|
||||
{
|
||||
id: "curry-goat", name: "Curry Goat Platter", price: "$17.95", variant: "Tender & Aromatic | Bread", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Rich curry goat served over rice and peas"
|
||||
},
|
||||
{
|
||||
id: "escovitch-fish", name: "Escovitch Fish", price: "$16.95", variant: "Fresh Fish | Pickled Veggies", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Escovitch fish with pickled vegetables and lime"
|
||||
},
|
||||
{
|
||||
id: "jerk-pork", name: "Jerk Pork Ribs", price: "$18.95", variant: "Half Rack | Mac & Cheese", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Perfectly seasoned jerk pork ribs with island spices"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sides & Extras Section */}
|
||||
<div id="sides" data-section="sides">
|
||||
<ProductCardFour
|
||||
title="Sides & Extras"
|
||||
description="Perfect complements to your main dish. All made fresh daily with authentic Caribbean flavors."
|
||||
tag="Sides & Accompaniments"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Add to Order", href: "#order"
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "rice-peas", name: "Rice & Peas", price: "$4.95", variant: "Island Classic | Per Side", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Fluffy rice and peas side dish"
|
||||
},
|
||||
{
|
||||
id: "mac-cheese", name: "Creamy Mac & Cheese", price: "$5.95", variant: "Soul Food Special | Comfort Classic", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Creamy mac and cheese side dish"
|
||||
},
|
||||
{
|
||||
id: "festival", name: "Festival Dumplings", price: "$3.95", variant: "6 Pieces | Golden & Crispy", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Crispy golden festival dumplings"
|
||||
},
|
||||
{
|
||||
id: "tropical-slaw", name: "Tropical Slaw", price: "$4.95", variant: "Fresh Veggies | Island Dressing", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Fresh tropical slaw with island dressing"
|
||||
},
|
||||
{
|
||||
id: "plantain-chips", name: "Plantain Chips", price: "$5.95", variant: "Crispy & Salted | Caribbean Favorite", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Crispy plantain chips"
|
||||
},
|
||||
{
|
||||
id: "johnny-cakes", name: "Johnny Cakes", price: "$4.95", variant: "4 Pieces | Fresh Baked", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Fresh baked johnny cakes"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Beverages Section */}
|
||||
<div id="beverages" data-section="beverages">
|
||||
<ProductCardFour
|
||||
title="Beverages & Drinks"
|
||||
description="Cool off with our refreshing Caribbean drinks and island favorites."
|
||||
tag="Quench Your Thirst"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Add Drink", href: "#order"
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "ginger-beer", name: "Ginger Beer", price: "$3.95", variant: "Bottle | Refreshing & Spicy", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Cold ginger beer bottle"
|
||||
},
|
||||
{
|
||||
id: "sorrel", name: "Sorrel Drink", price: "$4.95", variant: "Seasonal | Caribbean Favorite", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Traditional sorrel drink"
|
||||
},
|
||||
{
|
||||
id: "mango-juice", name: "Fresh Mango Juice", price: "$5.95", variant: "Fresh Pressed | No Sugar Added", imageSrc: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Fresh mango juice"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Order CTA Section */}
|
||||
<div id="order" data-section="order" className="py-16 md:py-24 px-4 bg-gradient-to-r from-primary-cta to-accent">
|
||||
<div className="max-w-2xl mx-auto text-center space-y-6 text-white">
|
||||
<h2 className="text-3xl md:text-4xl font-bold">Ready to Order?</h2>
|
||||
<p className="text-lg opacity-90">Call us now or visit our location to experience authentic Caribbean island flavors made fresh daily.</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center mt-8">
|
||||
<a href="tel:2397850423" className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white text-primary-cta rounded-full font-bold text-lg hover:bg-gray-100 transition-all">
|
||||
<Phone className="w-6 h-6" />
|
||||
Call (239) 785-0423
|
||||
</a>
|
||||
<a href="https://www.google.com/maps/search/caribbean+flair+island+jerk+grill+lehigh+acres" target="_blank" className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white/20 border-2 border-white text-white rounded-full font-bold text-lg hover:bg-white/30 transition-all">
|
||||
<MapPin className="w-6 h-6" />
|
||||
Visit Us
|
||||
</a>
|
||||
</div>
|
||||
<div className="pt-6 border-t border-white/30 space-y-2 text-sm">
|
||||
<p>📍 801 Leeland Heights Blvd W, Lehigh Acres, FL 33936</p>
|
||||
<p>🕐 Open Until 9PM Daily</p>
|
||||
<p>🚚 Delivery Available</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773884559172-6jmwoep9.png"
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
425
src/app/order-now/page.tsx
Normal file
425
src/app/order-now/page.tsx
Normal file
@@ -0,0 +1,425 @@
|
||||
"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 {
|
||||
Award,
|
||||
Zap,
|
||||
TrendingUp,
|
||||
Facebook,
|
||||
Phone,
|
||||
ShoppingCart,
|
||||
ExternalLink,
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function OrderNowPage() {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isDesktopButtonsVisible, setIsDesktopButtonsVisible] = useState(true);
|
||||
const [showCookiePreferences, setShowCookiePreferences] = useState(false);
|
||||
const [cookiesAccepted, setCookiesAccepted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const cookieConsent = localStorage.getItem("cookie-consent");
|
||||
if (!cookieConsent) {
|
||||
setShowCookiePreferences(true);
|
||||
} else {
|
||||
setCookiesAccepted(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCookieAccept = () => {
|
||||
localStorage.setItem("cookie-consent", "accepted");
|
||||
setCookiesAccepted(true);
|
||||
setShowCookiePreferences(false);
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Menu", id: "signature-dishes" },
|
||||
{ name: "About Us", id: "owners-spotlight" },
|
||||
{ name: "Gallery", id: "featured-gallery" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Locations", id: "footer" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Order Now", href: "/order-now" },
|
||||
{ label: "Gallery", href: "/#featured-gallery" },
|
||||
{ label: "Reviews", href: "/#testimonials" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Order & Contact", items: [
|
||||
{ label: "Uber Eats", href: "https://www.ubereats.com/search?q=caribbean%20flair&location=Lehigh%20Acres%2C%20FL" },
|
||||
{ label: "DoorDash", href: "https://www.doordash.com/search?q=caribbean%20flair&location=Lehigh%20Acres%2C%20FL" },
|
||||
{ label: "Grubhub", href: "https://www.grubhub.com/search?q=caribbean%20flair&location=Lehigh%20Acres%2C%20FL" },
|
||||
{ label: "Call Us", href: "tel:2397850423" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect With Us", items: [
|
||||
{ label: "Facebook", href: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr" },
|
||||
{ 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: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
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"
|
||||
>
|
||||
<style>{`
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-60px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(60px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowHover {
|
||||
0% {
|
||||
box-shadow: 0 0 0px rgba(227, 68, 0, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(227, 68, 0, 0.6);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 30px rgba(227, 68, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
animation: fadeIn 0.8s ease-out;
|
||||
}
|
||||
|
||||
[data-section] {
|
||||
animation: fadeIn 1.2s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#hero [data-section] {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
#order-providers {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
#final-cta {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
#footer {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
img {
|
||||
animation: slideInFromRight 1s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#hero img {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
button, [role="button"], a[href*="#"], a[href*="/"] {
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover, [role="button"]:hover, a[href*="#"]:hover, a[href*="/"]:hover {
|
||||
animation: glowHover 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.bg-gradient-to-r, .bg-primary-cta, [class*="bg-blue"], [class*="bg-orange"], [class*="bg-red"] {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.bg-gradient-to-r:hover, .bg-primary-cta:hover, [class*="bg-blue"]:hover, [class*="bg-orange"]:hover, [class*="bg-red"]:hover {
|
||||
filter: brightness(1.1);
|
||||
animation: glowHover 0.6s ease-in-out;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{/* Persistent Top Navigation Bar */}
|
||||
<div id="nav" data-section="nav" className="sticky top-0 z-40 w-full bg-white/80 backdrop-blur-md border-b border-gray-200">
|
||||
<NavbarStyleCentered
|
||||
brandName="Caribbean Flair"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "See Full Menu", href: "/"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Floating Mobile Sidebar Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="fixed inset-0 z-30 md:hidden">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
<div className="absolute right-0 top-16 w-64 bg-white/95 backdrop-blur-lg rounded-lg shadow-2xl m-4 border border-white/20">
|
||||
<div className="p-6 space-y-4">
|
||||
{navItems.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={`#${item.id}`}
|
||||
className="block text-gray-800 hover:text-primary-cta font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
<a href="/" className="w-full bg-primary-cta text-white py-2 rounded-lg font-semibold hover:opacity-90 text-center block">
|
||||
Back to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Floating Desktop Action Buttons */}
|
||||
{isDesktopButtonsVisible && (
|
||||
<div className="hidden md:fixed md:right-6 md:bottom-6 md:z-20 md:flex md:flex-col md:gap-3">
|
||||
<a
|
||||
href="tel:2397850423"
|
||||
className="bg-white/90 backdrop-blur-lg border border-white/20 rounded-full p-4 shadow-lg hover:shadow-xl hover:bg-white transition-all flex items-center justify-center group"
|
||||
title="Call Us"
|
||||
>
|
||||
<Phone className="w-6 h-6 text-primary-cta group-hover:scale-110 transition-transform" />
|
||||
</a>
|
||||
<a
|
||||
href="/"
|
||||
className="bg-gradient-to-r from-primary-cta to-accent text-white rounded-full p-4 shadow-lg hover:shadow-xl transition-all flex items-center justify-center group font-semibold"
|
||||
title="Back to Home"
|
||||
>
|
||||
<ShoppingCart className="w-6 h-6 group-hover:scale-110 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Cookie Preferences Popup */}
|
||||
{showCookiePreferences && !cookiesAccepted && (
|
||||
<div className="fixed bottom-6 left-6 right-6 z-50 max-w-sm bg-white/95 backdrop-blur-lg rounded-lg shadow-2xl border border-white/20 p-4 md:p-6">
|
||||
<div className="space-y-3">
|
||||
<h3 className="font-semibold text-gray-900">Cookie Preferences</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
We use cookies to enhance your experience, personalize content, and analyze site traffic.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleCookieAccept}
|
||||
className="flex-1 bg-primary-cta text-white py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Accept All
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowCookiePreferences(false)}
|
||||
className="flex-1 border border-gray-300 text-gray-800 py-2 rounded-lg font-semibold hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Decline
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hero Section */}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
title="Order Your Caribbean Feast"
|
||||
description="Fresh off the grill. Order authentic Jamaican jerk, curry, and soul food through your favorite delivery service. Get it delivered hot, fresh, and delicious."
|
||||
tag="Multiple Delivery Options"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Delivery Options", href: "#order-providers"
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773884559172-6jmwoep9.png"
|
||||
imageAlt="Caribbean Flair Island Jerk Grill Order Now"
|
||||
mediaAnimation="opacity"
|
||||
imagePosition="right"
|
||||
ariaLabel="Hero section for order now page"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Delivery Providers Section */}
|
||||
<div id="order-providers" data-section="order-providers">
|
||||
<FeatureCardTen
|
||||
title="Choose Your Delivery Partner"
|
||||
description="Order your Caribbean Flair favorites through these trusted delivery platforms. Fast, reliable, and convenient delivery straight to your door."
|
||||
tag="Seamless Ordering"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "uber-eats", title: "Uber Eats", description: "Order on Uber Eats for fast, convenient delivery. Browse our full menu and track your order in real-time.", media: {
|
||||
imageSrc: "data:image/svg+xml,%3Csvg xmlns=?_wi=1'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23000000' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='20' font-weight='bold' text-anchor='middle' dominant-baseline='middle' fill='%23FFFFFF'%3EUber Eats%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: ExternalLink,
|
||||
text: "Fast delivery available"
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
text: "Real-time order tracking"
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "doordash", title: "DoorDash", description: "Order via DoorDash for reliable delivery service. Enjoy exclusive deals and quick service to your location.", media: {
|
||||
imageSrc: "data:image/svg+xml,%3Csvg xmlns=?_wi=2'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23FF3008' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='20' font-weight='bold' text-anchor='middle' dominant-baseline='middle' fill='%23FFFFFF'%3EDoorDash%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: ExternalLink,
|
||||
text: "Exclusive DoorDash deals"
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
text: "Reliable delivery service"
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "grubhub", title: "Grubhub", description: "Order through Grubhub for convenient food delivery. Discover our menu and enjoy delicious Caribbean cuisine at home.", media: {
|
||||
imageSrc: "data:image/svg+xml,%3Csvg xmlns=?_wi=3'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23FF8000' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='20' font-weight='bold' text-anchor='middle' dominant-baseline='middle' fill='%23FFFFFF'%3EGrubhub%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: ExternalLink,
|
||||
text: "Easy menu browsing"
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
text: "Convenient home delivery"
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Direct Ordering CTA Section */}
|
||||
<div id="final-cta" data-section="final-cta">
|
||||
<FeatureCardTen
|
||||
title="Can't Wait? Call Us Directly"
|
||||
description="Want to place a quick order or have special requests? Call Caribbean Flair directly and speak with our team. We're here to serve you!"
|
||||
tag="Direct Ordering"
|
||||
tagIcon={Phone}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Call (239) 785-0423", href: "tel:2397850423"
|
||||
},
|
||||
{
|
||||
text: "Back to Home", href: "/"
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "direct-call", title: "Phone Orders", description: "Skip the apps and call us directly for personalized service and custom orders.", media: {
|
||||
imageSrc: "data:image/svg+xml,%3Csvg xmlns=?_wi=4'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ECall Us Today%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Phone,
|
||||
text: "(239) 785-0423"
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
text: "Open until 9PM daily"
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="data:image/svg+xml,%3Csvg xmlns=?_wi=5'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EFooter Image%3C/text%3E%3C/svg%3E"
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -68,7 +68,7 @@ export default function HomePage() {
|
||||
},
|
||||
{
|
||||
title: "Order & Contact", items: [
|
||||
{ label: "Order Online", href: "#signature-dishes" },
|
||||
{ label: "Order Online", href: "/order-now" },
|
||||
{ label: "Call Us", href: "tel:2397850423" },
|
||||
{ label: "Locations & Hours", href: "#footer" },
|
||||
{ label: "Contact", href: "#footer" },
|
||||
@@ -231,7 +231,7 @@ export default function HomePage() {
|
||||
brandName="Caribbean Flair"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "See Full Menu", href: "/menu"
|
||||
text: "Order Now", href: "/order-now"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -255,8 +255,8 @@ export default function HomePage() {
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
<a href="/menu" className="w-full bg-primary-cta text-white py-2 rounded-lg font-semibold hover:opacity-90 text-center block">
|
||||
See Full Menu
|
||||
<a href="/order-now" className="w-full bg-primary-cta text-white py-2 rounded-lg font-semibold hover:opacity-90 text-center block">
|
||||
Order Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -274,9 +274,9 @@ export default function HomePage() {
|
||||
<Phone className="w-6 h-6 text-primary-cta group-hover:scale-110 transition-transform" />
|
||||
</a>
|
||||
<a
|
||||
href="/menu"
|
||||
href="/order-now"
|
||||
className="bg-gradient-to-r from-primary-cta to-accent text-white rounded-full p-4 shadow-lg hover:shadow-xl transition-all flex items-center justify-center group font-semibold"
|
||||
title="See Full Menu"
|
||||
title="Order Now"
|
||||
>
|
||||
<ShoppingCart className="w-6 h-6 group-hover:scale-110 transition-transform" />
|
||||
</a>
|
||||
@@ -320,14 +320,14 @@ export default function HomePage() {
|
||||
background={{ variant: "glowing-orb" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Order Online Now", href: "/menu"
|
||||
text: "Order Online Now", href: "/order-now"
|
||||
},
|
||||
{
|
||||
text: "View Full Menu", href: "/menu"
|
||||
text: "View Full Menu", href: "#signature-dishes"
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="data:image/svg+xml,%3Csvg xmlns=?_wi=1'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E"
|
||||
imageSrc="data:image/svg+xml,%3Csvg xmlns=?_wi=6'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E"
|
||||
imageAlt="Red Caribbean Flair Island Jerk Grill Trailer"
|
||||
mediaAnimation="opacity"
|
||||
imagePosition="right"
|
||||
@@ -345,7 +345,7 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Full Menu", href: "/menu"
|
||||
text: "Order Now", href: "/order-now"
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -356,15 +356,15 @@ export default function HomePage() {
|
||||
products={[
|
||||
{
|
||||
id: "jerk-chicken", name: "Jerk Chicken Platter", price: "$15.95", variant: "Full Rack", imageSrc:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=2'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Jerk chicken grilled on foil with spices"
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=7'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Jerk chicken grilled on foil with spices"
|
||||
},
|
||||
{
|
||||
id: "curry-shrimp", name: "Curry Shrimp Platter", price: "$16.95", variant: "Fresh Daily", imageSrc:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=3'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Curry shrimp over rice and peas"
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=8'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Curry shrimp over rice and peas"
|
||||
},
|
||||
{
|
||||
id: "conch-fritters", name: "Conch Fritters Combo", price: "$12.95", variant: "6 Pieces", imageSrc:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=4'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Golden conch fritters with dipping sauce"
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=9'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Golden conch fritters with dipping sauce"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@@ -385,38 +385,38 @@ export default function HomePage() {
|
||||
{
|
||||
id: "jerk-pork", category: "Main Dishes", title: "Jerk Pork Did Not Disappoint", excerpt:
|
||||
"Perfectly seasoned and grilled, bursting with island spices and authentic Jamaican flavor.", imageSrc:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=5'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Jerk pork platter with rice and tropical slaw", authorName: "Caribbean Flair Team", authorAvatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=10'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Jerk pork platter with rice and tropical slaw", authorName: "Caribbean Flair Team", authorAvatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e8e8e8'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EAuthor%3C/text%3E%3C/svg%3E", date: "Fresh Daily"
|
||||
},
|
||||
{
|
||||
id: "curry-goat", category: "Featured", title: "Curry Goat - A Community Favorite", excerpt:
|
||||
"Tender, aromatic, and cooked to perfection. Every bite transports you straight to Jamaica.", imageSrc:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=6'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Rich curry goat served over rice and peas", authorName: "Caribbean Flair Team", authorAvatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=11'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Rich curry goat served over rice and peas", authorName: "Caribbean Flair Team", authorAvatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e8e8e8'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EAuthor%3C/text%3E%3C/svg%3E", date: "Popular Choice"
|
||||
},
|
||||
{
|
||||
id: "festival-sides", category: "Sides", title: "Festival Dumplings & Tropical Slaw", excerpt:
|
||||
"Crispy, golden festival dumplings paired with our signature tropical slaw for the perfect complement.", imageSrc:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=7'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=12'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt:
|
||||
"Festival dumplings with tropical slaw and mac and cheese", authorName: "Caribbean Flair Team", authorAvatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e8e8e8'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EAuthor%3C/text%3E%3C/svg%3E", date: "Must Try"
|
||||
},
|
||||
{
|
||||
id: "escovitch-fish", category: "Seafood", title: "Escovitch Fish - Island Tradition", excerpt:
|
||||
"Fresh fish prepared in authentic Jamaican style with pickled vegetables and bold island flavors.", imageSrc:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=8'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Escovitch fish with pickled vegetables and lime", authorName: "Caribbean Flair Team", authorAvatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=13'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Escovitch fish with pickled vegetables and lime", authorName: "Caribbean Flair Team", authorAvatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e8e8e8'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EAuthor%3C/text%3E%3C/svg%3E", date: "Customer Favorite"
|
||||
},
|
||||
{
|
||||
id: "mac-cheese", category: "Sides", title: "Creamy Island Mac & Cheese", excerpt:
|
||||
"Smooth, rich, and soul-warming comfort food that pairs perfectly with any of our signature mains.", imageSrc:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=9'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Creamy mac and cheese side dish", authorName: "Caribbean Flair Team", authorAvatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=14'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Creamy mac and cheese side dish", authorName: "Caribbean Flair Team", authorAvatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e8e8e8'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EAuthor%3C/text%3E%3C/svg%3E", date: "Comfort Classic"
|
||||
},
|
||||
{
|
||||
id: "grill-action", category: "Behind the Scenes", title: "Fresh Off The Grill - Live Action", excerpt:
|
||||
"Watch our expert grill masters prepare your meal with passion, precision, and authentic Caribbean technique.", imageSrc:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=10'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Chef grilling jerk meats on foil with smoke", authorName: "Caribbean Flair Team", authorAvatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=15'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Chef grilling jerk meats on foil with smoke", authorName: "Caribbean Flair Team", authorAvatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e8e8e8'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EAuthor%3C/text%3E%3C/svg%3E", date: "Daily Special"
|
||||
},
|
||||
]}
|
||||
@@ -491,7 +491,7 @@ export default function HomePage() {
|
||||
{
|
||||
id: "deb-farrell", name: "Deb Farrell", role: "Co-Owner & Operations Lead", description:
|
||||
"Deb ensures every customer experience is smooth, welcoming, and unforgettable. Together with Teria, they are building a thriving Black- and women-owned business that celebrates Caribbean culture and community impact.", videoSrc:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=18'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", videoAriaLabel: "Deb Farrell, co-owner of Caribbean Flair", socialLinks: [
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=16'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", videoAriaLabel: "Deb Farrell, co-owner of Caribbean Flair", socialLinks: [
|
||||
{
|
||||
icon: Facebook,
|
||||
url: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr"
|
||||
@@ -512,7 +512,7 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Order Online Now", href: "/menu"
|
||||
text: "Order Online Now", href: "/order-now"
|
||||
},
|
||||
{
|
||||
text: "Call (239) 785-0423", href: "tel:2397850423"
|
||||
@@ -527,7 +527,7 @@ export default function HomePage() {
|
||||
id: "fast-delivery", title: "Fast & Fresh", description:
|
||||
"Grilled fresh to order. Your meal arrives hot, delicious, and packed with island flavor.", media: {
|
||||
imageSrc:
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=19'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E"
|
||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=17'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E"
|
||||
},
|
||||
items: [
|
||||
{
|
||||
@@ -548,7 +548,7 @@ export default function HomePage() {
|
||||
{/* Footer with Local Map Info and Social Links */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="data:image/svg+xml,%3Csvg xmlns=?_wi=20'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E"
|
||||
imageSrc="data:image/svg+xml,%3Csvg xmlns=?_wi=18'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E"
|
||||
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
|
||||
logoText="Caribbean Flair"
|
||||
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
||||
@@ -557,4 +557,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user