Merge version_23 into main #27

Merged
bender merged 3 commits from version_23 into main 2026-03-19 02:36:13 +00:00
3 changed files with 113 additions and 438 deletions

View File

@@ -3,21 +3,10 @@
import Link from "next/link";
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 BlogCardThree from "@/components/sections/blog/BlogCardThree";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import {
Award,
Flame,
Phone,
ShoppingCart,
MapPin,
Clock,
Star,
Heart,
Zap,
TrendingUp,
Facebook,
} from "lucide-react";
import { Award, Camera, Phone, ShoppingCart } from "lucide-react";
import { useState, useEffect } from "react";
export default function MenuPage() {
@@ -43,7 +32,7 @@ export default function MenuPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Menu", id: "signature-dishes" },
{ name: "Menu", id: "featured-gallery" },
{ name: "About Us", id: "owners-spotlight" },
{ name: "Gallery", id: "featured-gallery" },
{ name: "Reviews", id: "testimonials" },
@@ -55,16 +44,16 @@ export default function MenuPage() {
title: "Quick Links", items: [
{ label: "Home", href: "/" },
{ label: "Menu", href: "/menu" },
{ label: "Gallery", href: "/#featured-gallery" },
{ label: "Reviews", href: "/#testimonials" },
{ label: "Gallery", href: "#featured-gallery" },
{ label: "Reviews", href: "#testimonials" },
],
},
{
title: "Order & Contact", items: [
{ label: "Order Online", href: "/menu" },
{ label: "Order Online", href: "/order-now" },
{ label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/#footer" },
{ label: "Contact", href: "/#footer" },
{ label: "Locations & Hours", href: "#footer" },
{ label: "Contact", href: "#footer" },
],
},
{
@@ -154,28 +143,16 @@ export default function MenuPage() {
opacity: 0;
}
#menu-header {
#hero [data-section] {
animation-delay: 0.1s;
}
#full-menu {
#featured-gallery {
animation-delay: 0.2s;
}
#mains {
animation-delay: 0.3s;
}
#sides {
animation-delay: 0.4s;
}
#beverages {
animation-delay: 0.5s;
}
#footer {
animation-delay: 0.6s;
animation-delay: 0.3s;
}
img {
@@ -183,18 +160,14 @@ export default function MenuPage() {
opacity: 0;
}
#full-menu img {
#hero img {
animation-delay: 0.3s;
}
#mains img {
#featured-gallery 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;
@@ -220,7 +193,7 @@ export default function MenuPage() {
brandName="Caribbean Flair"
navItems={navItems}
button={{
text: "Order Now", href: "/menu"
text: "Order Now", href: "/order-now"
}}
/>
</div>
@@ -237,14 +210,14 @@ export default function MenuPage() {
{navItems.map((item) => (
<a
key={item.id}
href={item.id === "home" ? "/" : `/#${item.id}`}
href={`#${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">
<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>
@@ -263,7 +236,7 @@ export default function MenuPage() {
<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="Order Now"
>
@@ -298,168 +271,67 @@ export default function MenuPage() {
</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}
{/* Hero Section - Menu Header */}
<div id="hero" data-section="hero">
<HeroSplit
title="Complete Menu"
description="Explore our complete menu across all 5 pages. Fresh Caribbean flavors, authentic recipes, and island-inspired specialties grilled to perfection."
tag="Full Menu"
tagIcon={Award}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
buttons={[
{
text: "Order Online", href: "#order"
text: "Order Now", href: "/order-now"
},
]}
buttonAnimation="slide-up"
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'%3EMenu Cover%3C/text%3E%3C/svg%3E"
imageAlt="Caribbean Flair Complete Menu"
mediaAnimation="opacity"
imagePosition="right"
ariaLabel="Menu page hero section"
/>
</div>
{/* Full Menu Display - All 5 Pages */}
<div id="featured-gallery" data-section="featured-gallery">
<BlogCardThree
title="All 5 Menu Pages"
description="Browse through our complete menu collection featuring all dishes, sides, and beverages."
tag="Complete Menu"
tagIcon={Camera}
tagAnimation="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
useInvertedBackground={false}
products={[
blogs={[
{
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: "menu-page-1", category: "Menu Page 1", title: "Menu Page 1 - Main Dishes", excerpt: "Our signature main dishes featuring jerk meats, curry specialties, and authentic Caribbean proteins grilled fresh to order.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773887611478-094w00ok.jpg", imageAlt: "Menu Page 1 - Main Dishes", authorName: "Caribbean Flair", 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'%3EMenu%3C/text%3E%3C/svg%3E", date: "Complete Menu"
},
{
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: "menu-page-2", category: "Menu Page 2", title: "Menu Page 2 - Seafood & Sides", excerpt: "Fresh seafood selections including escovitch fish, shrimp dishes, and our famous sides like festival dumplings and tropical slaw.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773887611478-8nakpzaa.jpg", imageAlt: "Menu Page 2 - Seafood & Sides", authorName: "Caribbean Flair", 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'%3EMenu%3C/text%3E%3C/svg%3E", date: "Complete Menu"
},
{
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: "menu-page-3", category: "Menu Page 3", title: "Menu Page 3 - Platters & Combos", excerpt: "Our complete platter offerings with combinations of proteins, rice, peas, plantains, and fresh vegetables grilled together.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773887611478-i3ll7ifz.jpg", imageAlt: "Menu Page 3 - Platters & Combos", authorName: "Caribbean Flair", 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'%3EMenu%3C/text%3E%3C/svg%3E", date: "Complete Menu"
},
{
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: "menu-page-4", category: "Menu Page 4", title: "Menu Page 4 - Appetizers & Starters", excerpt: "Delicious appetizers to begin your meal including conch fritters, fried plantains, croquettes, and other island favorites.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773887611478-60e6tsue.jpg", imageAlt: "Menu Page 4 - Appetizers & Starters", authorName: "Caribbean Flair", 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'%3EMenu%3C/text%3E%3C/svg%3E", date: "Complete Menu"
},
{
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"
id: "menu-page-5", category: "Menu Page 5", title: "Menu Page 5 - Beverages & Desserts", excerpt: "Refresh yourself with authentic Caribbean beverages and indulge in sweet island desserts to complete your meal.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773887611478-gby1l988.jpg", imageAlt: "Menu Page 5 - Beverages & Desserts", authorName: "Caribbean Flair", 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'%3EMenu%3C/text%3E%3C/svg%3E", date: "Complete Menu"
},
]}
/>
</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 */}
{/* Footer with Local Map Info and Social Links */}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773884559172-6jmwoep9.png"
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'%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"
copyrightText="© 2026 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
columns={footerColumns}
/>
</div>

View File

@@ -4,40 +4,22 @@ 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 FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import {
Award,
Zap,
TrendingUp,
Facebook,
Truck,
Phone,
ShoppingCart,
ExternalLink,
MapPin,
Clock,
Facebook,
} 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" },
@@ -52,17 +34,17 @@ export default function OrderNowPage() {
{
title: "Quick Links", items: [
{ label: "Home", href: "/" },
{ label: "Order Now", href: "/order-now" },
{ label: "Menu", href: "/#signature-dishes" },
{ 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: "Order Online", href: "/order-now" },
{ label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/#footer" },
{ label: "Contact", href: "/#footer" },
],
},
{
@@ -127,18 +109,6 @@ export default function OrderNowPage() {
}
}
@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;
}
@@ -156,44 +126,13 @@ export default function OrderNowPage() {
animation-delay: 0.1s;
}
#order-providers {
#delivery-options {
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 */}
@@ -202,224 +141,88 @@ export default function OrderNowPage() {
brandName="Caribbean Flair"
navItems={navItems}
button={{
text: "See Full Menu", href: "/"
text: "Order Now", href: "/order-now"
}}
/>
</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}
title="Order Your Island Feast"
description="Choose your delivery service and get your authentic Caribbean meal fresh and hot. We deliver island flavors straight to your door."
tag="Quick Delivery"
tagIcon={Truck}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
buttons={[
{
text: "Explore Delivery Options", href: "#order-providers"
text: "View Menu", href: "/#signature-dishes"
},
{
text: "Call (239) 785-0423", href: "tel:2397850423"
},
]}
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"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773887611478-094w00ok.jpg"
imageAlt="Caribbean Flair delivery service"
mediaAnimation="opacity"
imagePosition="right"
ariaLabel="Hero section for order now page"
ariaLabel="Order now section with delivery options"
/>
</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}
{/* Delivery Options Section */}
<div id="delivery-options" data-section="delivery-options">
<FeatureCardTwentySeven
title="Choose Your Delivery Service"
description="Select your preferred delivery partner to bring Caribbean Flair straight to your table."
tag="Multiple Options"
tagIcon={Truck}
tagAnimation="slide-up"
buttons={[]}
buttonAnimation="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
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"
},
id: "doordash", title: "DoorDash", descriptions: [
"Fast delivery with real-time tracking", "Easy app-based ordering", "Contactless delivery available"
],
reverse: false,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773887611478-8nakpzaa.jpg", imageAlt: "DoorDash delivery service logo"
},
{
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"
},
id: "ubereats", title: "Uber Eats", descriptions: [
"Seamless ordering experience", "Fast and reliable delivery", "Track your order in real-time"
],
reverse: true,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773887611478-i3ll7ifz.jpg", imageAlt: "Uber Eats delivery service logo"
},
{
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"
},
id: "grubhub", title: "Grubhub", descriptions: [
"Wide reach and convenient ordering", "Loyalty rewards program", "Quick and professional delivery"
],
reverse: false,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773887611478-60e6tsue.jpg", imageAlt: "Grubhub delivery service logo"
},
{
id: "instacart", title: "Instacart", descriptions: [
"Fresh food delivery expertise", "Same-day delivery available", "Easy scheduling options"
],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773887611478-gby1l988.jpg", imageAlt: "Instacart delivery service logo"
},
]}
/>
</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 */}
{/* Footer with Local Map Info and Social Links */}
<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"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773887611478-094w00ok.jpg"
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair"
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
copyrightText="© 2026 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}
}

View File

@@ -61,7 +61,7 @@ export default function HomePage() {
{
title: "Quick Links", items: [
{ label: "Home", href: "/" },
{ label: "Menu", href: "#signature-dishes" },
{ label: "Menu", href: "/menu" },
{ label: "Gallery", href: "#featured-gallery" },
{ label: "Reviews", href: "#testimonials" },
],
@@ -323,11 +323,11 @@ export default function HomePage() {
text: "Order Online Now", href: "/order-now"
},
{
text: "View Full Menu", href: "#signature-dishes"
text: "View Full Menu", href: "/menu"
},
]}
buttonAnimation="slide-up"
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"
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="Red Caribbean Flair Island Jerk Grill Trailer"
mediaAnimation="opacity"
imagePosition="right"
@@ -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=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='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=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='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=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:
"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:
"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=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='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=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='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=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='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=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: [
"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", videoAriaLabel: "Deb Farrell, co-owner of Caribbean Flair", socialLinks: [
{
icon: Facebook,
url: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr"
@@ -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=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"
"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"
},
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=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"
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="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair"
copyrightText="© 2026 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
@@ -557,4 +557,4 @@ export default function HomePage() {
</div>
</ThemeProvider>
);
}
}