62 Commits

Author SHA1 Message Date
70ed8a764c Update src/app/page.tsx 2026-03-20 20:05:40 +00:00
9437a5cc6c Merge version_32 into main
Merge version_32 into main
2026-03-20 19:42:20 +00:00
caff5387f4 Update src/app/layout.tsx 2026-03-20 19:42:16 +00:00
288e5c2427 Merge version_32 into main
Merge version_32 into main
2026-03-20 18:45:35 +00:00
21dfdcb7c6 Update src/app/page.tsx 2026-03-20 18:45:31 +00:00
3b58d14b05 Merge version_32 into main
Merge version_32 into main
2026-03-20 18:20:24 +00:00
2f7fc96ae5 Update src/app/layout.tsx 2026-03-20 18:20:20 +00:00
dec51e4934 Merge version_32 into main
Merge version_32 into main
2026-03-20 16:40:26 +00:00
6cba71e662 Update src/app/gallery/page.tsx 2026-03-20 16:40:21 +00:00
3b0bc9f259 Merge version_30 into main
Merge version_30 into main
2026-03-19 19:53:52 +00:00
854f4562a4 Update src/app/page.tsx 2026-03-19 19:53:47 +00:00
738d3b38ca Merge version_29 into main
Merge version_29 into main
2026-03-19 14:41:11 +00:00
1ab299ae16 Update src/app/menu/page.tsx 2026-03-19 14:41:07 +00:00
fbe44d3bc3 Merge version_28 into main
Merge version_28 into main
2026-03-19 14:30:37 +00:00
9a8c9db72a Update src/app/order-now/page.tsx 2026-03-19 14:30:27 +00:00
b07b1ee30c Merge version_27 into main
Merge version_27 into main
2026-03-19 14:23:13 +00:00
924a28671c Update src/app/order-now/page.tsx 2026-03-19 14:23:09 +00:00
e72f4170f3 Update src/app/menu/page.tsx 2026-03-19 14:23:09 +00:00
729138561e Merge version_27 into main
Merge version_27 into main
2026-03-19 14:22:48 +00:00
6687390aa1 Update src/app/order-now/page.tsx 2026-03-19 14:22:44 +00:00
1d61908e61 Update src/app/menu/page.tsx 2026-03-19 14:22:43 +00:00
5f1f45e1c6 Merge version_26 into main
Merge version_26 into main
2026-03-19 14:15:29 +00:00
8e16a5ef5b Update src/app/order-now/page.tsx 2026-03-19 14:15:25 +00:00
29b89df3d2 Merge version_25 into main
Merge version_25 into main
2026-03-19 14:06:32 +00:00
42f23b8fa0 Update src/app/order-now/page.tsx 2026-03-19 14:06:28 +00:00
6d7a949444 Merge version_25 into main
Merge version_25 into main
2026-03-19 14:06:07 +00:00
f56b26d8fa Update src/app/order-now/page.tsx 2026-03-19 14:06:03 +00:00
5495578c4d Merge version_24 into main
Merge version_24 into main
2026-03-19 02:51:44 +00:00
4e662cb231 Update src/app/page.tsx 2026-03-19 02:51:40 +00:00
684c38217b Update src/app/contact/page.tsx 2026-03-19 02:51:39 +00:00
fbf51f0ca4 Merge version_23 into main
Merge version_23 into main
2026-03-19 02:36:39 +00:00
d810b7f721 Update src/app/page.tsx 2026-03-19 02:36:35 +00:00
4740d93943 Update src/app/order-now/page.tsx 2026-03-19 02:36:34 +00:00
ed06508ae0 Update src/app/menu/page.tsx 2026-03-19 02:36:34 +00:00
af96eeb04a Merge version_23 into main
Merge version_23 into main
2026-03-19 02:36:13 +00:00
55e89104af Update src/app/page.tsx 2026-03-19 02:36:09 +00:00
722bc301e3 Update src/app/order-now/page.tsx 2026-03-19 02:36:08 +00:00
929ca7f308 Update src/app/menu/page.tsx 2026-03-19 02:36:08 +00:00
134be56516 Merge version_22 into main
Merge version_22 into main
2026-03-19 02:19:42 +00:00
b509ac7ead Update src/app/page.tsx 2026-03-19 02:19:38 +00:00
4c7884224a Update src/app/about/page.tsx 2026-03-19 02:19:37 +00:00
c06f29ce70 Merge version_21 into main
Merge version_21 into main
2026-03-19 02:02:57 +00:00
1dc695ca99 Update src/app/page.tsx 2026-03-19 02:02:53 +00:00
366124ec9d Update src/app/order-now/page.tsx 2026-03-19 02:02:53 +00:00
6568697b32 Merge version_21 into main
Merge version_21 into main
2026-03-19 02:02:32 +00:00
64cd2ad7f7 Update src/app/page.tsx 2026-03-19 02:02:28 +00:00
8b61686144 Update src/app/order-now/page.tsx 2026-03-19 02:02:27 +00:00
2daee3df45 Merge version_20 into main
Merge version_20 into main
2026-03-19 01:45:14 +00:00
561d8ad8f5 Update src/app/order-now/page.tsx 2026-03-19 01:45:10 +00:00
af4d2d98de Merge version_20 into main
Merge version_20 into main
2026-03-19 01:44:49 +00:00
2e2a6cec49 Update src/app/order-now/page.tsx 2026-03-19 01:44:45 +00:00
37ead887b6 Merge version_20 into main
Merge version_20 into main
2026-03-19 01:44:19 +00:00
e8d31bb1e0 Update src/app/page.tsx 2026-03-19 01:44:15 +00:00
1ffc5fb28e Add src/app/order-now/page.tsx 2026-03-19 01:44:14 +00:00
13c418766a Update src/app/menu/page.tsx 2026-03-19 01:44:14 +00:00
6112efc087 Merge version_19 into main
Merge version_19 into main
2026-03-19 01:23:01 +00:00
83b2f02f99 Update src/app/menu/page.tsx 2026-03-19 01:22:57 +00:00
148f81f053 Merge version_18 into main
Merge version_18 into main
2026-03-19 01:19:52 +00:00
20d5cfe282 Update src/app/menu/page.tsx 2026-03-19 01:19:48 +00:00
535bc07992 Merge version_17 into main
Merge version_17 into main
2026-03-18 22:51:25 +00:00
f81b587c74 Update src/app/full-menu/page.tsx 2026-03-18 22:51:15 +00:00
93a4bfcf9c Merge version_16 into main
Merge version_16 into main
2026-03-18 22:35:38 +00:00
8 changed files with 725 additions and 375 deletions

View File

@@ -102,7 +102,7 @@ export default function AboutPage() {
), ),
media: ( media: (
<div className="bg-gradient-to-br from-green-400 to-emerald-500 rounded-lg h-full flex items-center justify-center text-white text-3xl font-bold"> <div className="bg-gradient-to-br from-green-400 to-emerald-500 rounded-lg h-full flex items-center justify-center text-white text-3xl font-bold">
2025 2026
</div> </div>
), ),
reverse: false, reverse: false,
@@ -271,7 +271,7 @@ export default function AboutPage() {
imageSrc="data:image/svg+xml,%3Csvg xmlns?_wi=25'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=25'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" imageAlt="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair" 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} columns={footerColumns}
/> />
</div> </div>

View File

@@ -19,8 +19,7 @@ export default function ContactPage() {
const footerColumns = [ const footerColumns = [
{ {
title: "Quick Links", title: "Quick Links", items: [
items: [
{ label: "Home", href: "/" }, { label: "Home", href: "/" },
{ label: "Menu", href: "/menu" }, { label: "Menu", href: "/menu" },
{ label: "Gallery", href: "/gallery" }, { label: "Gallery", href: "/gallery" },
@@ -28,8 +27,7 @@ export default function ContactPage() {
], ],
}, },
{ {
title: "Order & Contact", title: "Order & Contact", items: [
items: [
{ label: "Order Online", href: "/order" }, { label: "Order Online", href: "/order" },
{ label: "Call Us", href: "tel:2397850423" }, { label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/locations" }, { label: "Locations & Hours", href: "/locations" },
@@ -37,8 +35,7 @@ export default function ContactPage() {
], ],
}, },
{ {
title: "Connect With Us", title: "Connect With Us", items: [
items: [
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" }, { label: "Facebook", href: "https://facebook.com/caribbeanflair" },
{ label: "About Us", href: "/about" }, { label: "About Us", href: "/about" },
{ label: "Privacy Policy", href: "#privacy" }, { label: "Privacy Policy", href: "#privacy" },
@@ -46,8 +43,7 @@ export default function ContactPage() {
], ],
}, },
{ {
title: "Located In", title: "Located In", items: [
items: [
{ label: "801 Leeland Heights Blvd W", href: "#map" }, { label: "801 Leeland Heights Blvd W", href: "#map" },
{ label: "Lehigh Acres, FL 33936", href: "#map" }, { label: "Lehigh Acres, FL 33936", href: "#map" },
{ label: "Open Until 9PM", href: "/locations" }, { label: "Open Until 9PM", href: "/locations" },
@@ -74,9 +70,7 @@ export default function ContactPage() {
brandName="Caribbean Flair" brandName="Caribbean Flair"
navItems={navItems} navItems={navItems}
button={{ button={{
text: "Order Now", text: "Order Now", href: "/order"}}
href: "/order",
}}
/> />
</div> </div>
@@ -89,13 +83,9 @@ export default function ContactPage() {
tagAnimation="slide-up" tagAnimation="slide-up"
buttons={[ buttons={[
{ {
text: "Call (239) 785-0423", text: "Call (239) 785-0423", href: "tel:2397850423"},
href: "tel:2397850423",
},
{ {
text: "Visit Us Today", text: "Visit Us Today", href: "/order"},
href: "/order",
},
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
textboxLayout="default" textboxLayout="default"
@@ -103,21 +93,15 @@ export default function ContactPage() {
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ {
id: "phone-contact", id: "phone-contact", title: "Call Us Directly", description: "Speak with our team for custom orders, catering, or any questions about our authentic Caribbean menu.", media: {
title: "Call Us Directly", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=4"},
description: "Speak with our team for custom orders, catering, or any questions about our authentic Caribbean menu.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=4",
},
items: [ items: [
{ {
icon: Zap, icon: Zap,
text: "(239) 785-0423", text: "(239) 785-0423"},
},
{ {
icon: Heart, icon: Heart,
text: "Available until 9PM", text: "Available until 9PM"},
},
], ],
reverse: false, reverse: false,
}, },
@@ -134,13 +118,9 @@ export default function ContactPage() {
tagAnimation="slide-up" tagAnimation="slide-up"
buttons={[ buttons={[
{ {
text: "Order Online Now", text: "Order Online Now", href: "/order"},
href: "/order",
},
{ {
text: "View Full Menu", text: "View Full Menu", href: "/menu"},
href: "/menu",
},
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
textboxLayout="default" textboxLayout="default"
@@ -148,21 +128,15 @@ export default function ContactPage() {
useInvertedBackground={true} useInvertedBackground={true}
features={[ features={[
{ {
id: "location-details", id: "location-details", title: "Lehigh Acres, Florida", description: "Experience premium Caribbean fusion at our convenient Lehigh Acres location. Fresh-grilled authentic island cuisine made with love and expertise.", media: {
title: "Lehigh Acres, Florida", imageSrc: "http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=8"},
description: "Experience premium Caribbean fusion at our convenient Lehigh Acres location. Fresh-grilled authentic island cuisine made with love and expertise.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=8",
},
items: [ items: [
{ {
icon: Zap, icon: Zap,
text: "801 Leeland Heights Blvd W", text: "801 Leeland Heights Blvd W"},
},
{ {
icon: Heart, icon: Heart,
text: "Daily Service Until 9PM", text: "Daily Service Until 9PM"},
},
], ],
reverse: true, reverse: true,
}, },
@@ -181,4 +155,4 @@ export default function ContactPage() {
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }

View File

@@ -1,19 +1,13 @@
"use client"; "use client";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroSplit from "@/components/sections/hero/HeroSplit"; import HeroSplit from "@/components/sections/hero/HeroSplit";
import ProductCardFour from "@/components/sections/product/ProductCardFour"; import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FooterMedia from "@/components/sections/footer/FooterMedia"; import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Flame, Lock, X } from "lucide-react"; import { Flame } from "lucide-react";
export default function FullMenuPage() { export default function FullMenuPage() {
const [isPasswordProtected, setIsPasswordProtected] = useState(true);
const [passwordInput, setPasswordInput] = useState("");
const [passwordError, setPasswordError] = useState(false);
const MENU_PASSWORD = "Caribbean2025";
const navItems = [ const navItems = [
{ name: "Home", id: "home" }, { name: "Home", id: "home" },
{ name: "Menu", id: "menu" }, { 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 = [ 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"}, 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> </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 */} {/* Hero Section */}
{!isPasswordProtected && ( <div id="hero" data-section="hero">
<div id="hero" data-section="hero"> <HeroSplit
<HeroSplit title="Complete Island Menu"
title="Complete Island Menu" description="Explore our full selection of authentic Caribbean dishes. Every item is crafted fresh and packed with island soul."
description="Explore our full selection of authentic Caribbean dishes. Every item is crafted fresh and packed with island soul." tag="Exclusive"
tag="Exclusive" tagIcon={Flame}
tagIcon={Flame} tagAnimation="slide-up"
tagAnimation="slide-up" background={{ variant: "glowing-orb" }}
background={{ variant: "glowing-orb" }} buttons={[
buttons={[ {
{ text: "Call to Order", href: "tel:2397850423"},
text: "Call to Order", href: "tel:2397850423"}, ]}
]} buttonAnimation="slide-up"
buttonAnimation="slide-up" imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg?_wi=3"
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg?_wi=3" imageAlt="Caribbean Flair Full Menu"
imageAlt="Caribbean Flair Full Menu" mediaAnimation="opacity"
mediaAnimation="opacity" imagePosition="right"
imagePosition="right" ariaLabel="Full menu page hero section"
ariaLabel="Full menu page hero section" />
/> </div>
</div>
)}
{/* Full Menu Section */} {/* Full Menu Section */}
{!isPasswordProtected && ( <div id="full-menu" data-section="full-menu">
<div id="full-menu" data-section="full-menu"> <ProductCardFour
<ProductCardFour title="All Menu Items"
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."
description="Discover our complete selection of authentic Caribbean dishes, sides, drinks, and specials. All items are fresh and made to order." tag="Complete Selection"
tag="Complete Selection" tagIcon={Flame}
tagIcon={Flame} tagAnimation="slide-up"
tagAnimation="slide-up" buttons={[
buttons={[ {
{ text: "Order Now", href: "/menu"},
text: "Order Now", href: "/menu"}, ]}
]} buttonAnimation="slide-up"
buttonAnimation="slide-up" textboxLayout="default"
textboxLayout="default" gridVariant="three-columns-all-equal-width"
gridVariant="three-columns-all-equal-width" animationType="slide-up"
animationType="slide-up" useInvertedBackground={false}
useInvertedBackground={false} products={allMenuItems}
products={allMenuItems} />
/> </div>
</div>
)}
{/* Footer */} {/* Footer */}
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">

View File

@@ -47,7 +47,7 @@ export default function GalleryPage() {
{ {
title: "Connect With Us", items: [ title: "Connect With Us", items: [
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" }, { label: "Facebook", href: "https://facebook.com/caribbeanflair" },
{ label: "About Us", href: "/about" }, { label: "About Us", href: "/" },
{ label: "Privacy Policy", href: "/" }, { label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" }, { label: "Terms of Service", href: "/" },
], ],
@@ -66,7 +66,7 @@ export default function GalleryPage() {
{ {
id: "user-upload-1", category: "Dishes", title: "Caribbean Delight", excerpt: id: "user-upload-1", category: "Dishes", title: "Caribbean Delight", excerpt:
"Stunning presentation of our signature Caribbean feast with vibrant colors and authentic flavors.", imageSrc: "Stunning presentation of our signature Caribbean feast with vibrant colors and authentic flavors.", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg?_wi=1", imageAlt: "User uploaded Caribbean dish", authorName: "Caribbean Flair Community", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1774024782095-k6jjvf7t.jpg", imageAlt: "User uploaded Caribbean dish", authorName: "Caribbean Flair Community", authorAvatar:
"http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg", date: "Community Upload"}, "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg", date: "Community Upload"},
{ {
id: "user-upload-2", category: "Dishes", title: "Island Feast Experience", excerpt: id: "user-upload-2", category: "Dishes", title: "Island Feast Experience", excerpt:

View File

@@ -4,7 +4,6 @@ import { Inter } from "next/font/google";
import { DM_Sans } from "next/font/google"; import { DM_Sans } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper"; import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script"; import { getVisualEditScript } from "@/utils/visual-edit-script";
const halant = Halant({ const halant = Halant({
@@ -24,16 +23,16 @@ const dmSans = DM_Sans({
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Caribbean Flair Island Jerk Grill | Authentic Jamaican Food | Lehigh Acres", title: 'CaribbeanFlair1',
description: "Premium authentic Jamaican island fusion food truck in Lehigh Acres, FL. Jerk chicken, curry shrimp, conch fritters & more. Black & women-owned by Teria Bryant & Deb Farrell. Order online today!", description: 'Caribbean vibes wrapped in a truck',
keywords: "jamaican food, jerk chicken, caribbean restaurant, food truck, lehigh acres, authentic jamaican cuisine, curry shrimp, conch fritters, black owned business, women owned business", keywords: "jamaican food, jerk chicken, caribbean restaurant, food truck, lehigh acres, authentic jamaican cuisine, curry shrimp, conch fritters, black owned business, women owned business",
metadataBase: new URL("https://caribbeanflairgrill.com"), metadataBase: new URL("https://caribbeanflairgrill.com"),
alternates: { alternates: {
canonical: "https://caribbeanflairgrill.com", canonical: "https://caribbeanflairgrill.com",
}, },
openGraph: { openGraph: {
title: "Caribbean Flair Island Jerk Grill - Authentic Jamaican Island Flavors", title: 'CaribbeanFlair1',
description: "Experience authentic Caribbean fusion. Fresh jerk meats, curry dishes & island soul food. Premium food truck in Lehigh Acres, FL.", description: 'Caribbean vibes wrapped in a truck',
url: "https://caribbeanflairgrill.com", url: "https://caribbeanflairgrill.com",
siteName: "Caribbean Flair Island Jerk Grill", siteName: "Caribbean Flair Island Jerk Grill",
type: "website", type: "website",
@@ -46,9 +45,9 @@ export const metadata: Metadata = {
}, },
twitter: { twitter: {
card: "summary_large_image", card: "summary_large_image",
title: "Caribbean Flair Island Jerk Grill - Authentic Jamaican Flavors", title: 'CaribbeanFlair1',
description: "Order authentic Caribbean food truck fare. Jerk, curry, and soul food made with love.", description: 'Caribbean vibes wrapped in a truck',
images: ["http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg"], images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1774035733410-heoi30la.png"],
}, },
robots: { robots: {
index: true, index: true,
@@ -67,7 +66,7 @@ export default function RootLayout({
<body <body
className={`${halant.variable} ${inter.variable} ${dmSans.variable} antialiased`} className={`${halant.variable} ${inter.variable} ${dmSans.variable} antialiased`}
> >
<Tag />
{children} {children}
<script <script
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{

View File

@@ -1,38 +1,116 @@
"use client"; "use client";
import { useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import { ArrowLeft, Lock } from "lucide-react"; import HeroSplit from "@/components/sections/hero/HeroSplit";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Award, Flame, Phone, ShoppingCart } from "lucide-react";
import { useState, useEffect } from "react";
export default function MenuPage() { export default function MenuPage() {
const [password, setPassword] = useState(""); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [isAuthenticated, setIsAuthenticated] = useState(false); const [isDesktopButtonsVisible, setIsDesktopButtonsVisible] = useState(true);
const [error, setError] = useState(""); 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 = [ const navItems = [
{ name: "Home", id: "home" }, { name: "Home", id: "home" },
{ name: "Menu", id: "signature-dishes" }, { name: "Menu", id: "featured-gallery" },
{ name: "About Us", id: "owners-spotlight" }, { name: "About Us", id: "owners-spotlight" },
{ name: "Gallery", id: "featured-gallery" }, { name: "Gallery", id: "featured-gallery" },
{ name: "Reviews", id: "testimonials" }, { name: "Reviews", id: "testimonials" },
{ name: "Locations", id: "footer" }, { name: "Locations", id: "footer" },
]; ];
const handlePasswordSubmit = (e: React.FormEvent) => { const footerColumns = [
e.preventDefault(); {
// Replace with your actual password title: "Quick Links", items: [
const correctPassword = "caribbean2025"; { label: "Home", href: "/" },
{ label: "Menu", href: "/menu" },
if (password === correctPassword) { { label: "Gallery", href: "/gallery" },
setIsAuthenticated(true); { label: "Reviews", href: "/reviews" },
setError(""); ],
} else { },
setError("Incorrect password. Please try again."); {
setPassword(""); title: "Order & Contact", items: [
} { label: "Order Online", href: "/order-now" },
}; { label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/locations" },
{ label: "Contact", href: "/contact" },
],
},
{
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: "#" },
],
},
];
// All 5 menu pages with their images
const menuPages = [
{
id: "menu-page-1", name: "Menu Page 1", title: "Main Dishes", description: "Signature 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-1773931203656-6q5n09tb.jpg", imageAlt: "Menu Page 1 - Main Dishes", items: [
{ name: "Jerk Chicken Platter", price: "$15.95", variant: "Full Rack" },
{ name: "Curry Goat Platter", price: "$17.95", variant: "Tender & Aromatic" },
{ name: "Jerk Pork Platter", price: "$16.95", variant: "Juicy & Spiced" },
]
},
{
id: "menu-page-2", name: "Menu Page 2", title: "Seafood & Appetizers", description: "Fresh seafood selections and delicious appetizers to start your island feast.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773931203656-k0zmv702.jpg", imageAlt: "Menu Page 2 - Seafood & Appetizers", items: [
{ name: "Escovitch Fish", price: "$18.95", variant: "Island Tradition" },
{ name: "Curry Shrimp Platter", price: "$16.95", variant: "Fresh Daily" },
{ name: "Conch Fritters Combo", price: "$12.95", variant: "6 Pieces" },
]
},
{
id: "menu-page-3", name: "Menu Page 3", title: "Sandwiches & Wraps", description: "Fresh-grilled sandwiches and wraps packed with authentic Caribbean flavors.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773931203656-uswy1139.jpg", imageAlt: "Menu Page 3 - Sandwiches & Wraps", items: [
{ name: "Jerk Chicken Sandwich", price: "$11.95", variant: "Fresh Bread" },
{ name: "Curry Goat Sandwich", price: "$12.95", variant: "Hearty & Flavorful" },
{ name: "Pulled Pork Sandwich", price: "$11.95", variant: "Smoky & Tender" },
]
},
{
id: "menu-page-4", name: "Menu Page 4", title: "Sides & Platters", description: "Classic Caribbean sides and complete platter combinations.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773931203657-pi7z5ykc.jpg", imageAlt: "Menu Page 4 - Sides & Platters", items: [
{ name: "Rice & Peas", price: "$4.95", variant: "Classic Caribbean" },
{ name: "Creamy Mac & Cheese", price: "$5.95", variant: "Comfort Classic" },
{ name: "Festival Dumplings", price: "$4.95", variant: "Golden & Crispy" },
]
},
{
id: "menu-page-5", name: "Menu Page 5", title: "Beverages & Specials", description: "Refreshing tropical beverages and special combo selections.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773931203657-qyiakzyt.jpg", imageAlt: "Menu Page 5 - Beverages & Specials", items: [
{ name: "Sorrel Punch", price: "$3.95", variant: "16 oz" },
{ name: "Island Ginger Beer", price: "$3.95", variant: "Refreshing" },
{ name: "Island Feast Combo", price: "$22.95", variant: "Jerk Chicken + Sides" },
]
},
];
return ( return (
<ThemeProvider <ThemeProvider
@@ -57,6 +135,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 { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@@ -64,181 +176,291 @@ export default function MenuPage() {
body { body {
animation: fadeIn 0.8s ease-out; animation: fadeIn 0.8s ease-out;
} }
[data-section] {
animation: fadeIn 1.2s ease-out forwards;
opacity: 0;
}
#hero [data-section] {
animation-delay: 0.1s;
}
#featured-gallery {
animation-delay: 0.2s;
}
#footer {
animation-delay: 0.3s;
}
img {
animation: slideInFromRight 1s ease-out forwards;
opacity: 0;
}
#hero img {
animation-delay: 0.3s;
}
#featured-gallery img {
animation-delay: 0.4s;
}
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> `}</style>
{/* Navigation Bar */} {/* Persistent Top Navigation Bar */}
<div className="sticky top-0 z-40 w-full bg-white/80 backdrop-blur-md border-b border-gray-200"> <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 <NavbarStyleCentered
brandName="Caribbean Flair" brandName="Caribbean Flair"
navItems={navItems} navItems={navItems}
button={{ button={{
text: "See Full Menu", href: "/menu" text: "Order Now", href: "/order-now"
}} }}
/> />
</div> </div>
{/* Main Content */} {/* Floating Mobile Sidebar Menu */}
<div className="min-h-screen bg-gradient-to-b from-white to-gray-50"> {isMobileMenuOpen && (
{!isAuthenticated ? ( <div className="fixed inset-0 z-30 md:hidden">
// Password Protected View <div
<div className="flex items-center justify-center min-h-[calc(100vh-80px)] px-4"> className="absolute inset-0 bg-black/50"
<div className="w-full max-w-md"> onClick={() => setIsMobileMenuOpen(false)}
<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="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="bg-gradient-to-br from-primary-cta to-accent p-3 rounded-full"> <div className="p-6 space-y-4">
<Lock className="w-8 h-8 text-white" /> {navItems.map((item) => (
</div> <a
</div> key={item.id}
href={`#${item.id}`}
<h1 className="text-3xl font-bold text-center text-gray-900 mb-2"> className="block text-gray-800 hover:text-primary-cta font-medium"
Full Menu onClick={() => setIsMobileMenuOpen(false)}
</h1> >
<p className="text-center text-gray-600 mb-8"> {item.name}
Enter the password to view our complete menu with all available dishes and specials. </a>
</p> ))}
<a href="/order-now" className="w-full bg-primary-cta text-white py-2 rounded-lg font-semibold hover:opacity-90 text-center block">
<form onSubmit={handlePasswordSubmit} className="space-y-4"> Order Now
<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
</a> </a>
</div> </div>
</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="/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"
>
<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 - Menu Header */}
<div id="hero" data-section="hero">
<HeroSplit
title="Complete Menu - All 5 Pages"
description="Explore our full authentic Caribbean menu across all categories. Fresh island flavors, grilled to perfection. Click each menu page to see detailed items and pricing."
tag="Full Menu"
tagIcon={Award}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
buttons={[
{
text: "Order Online Now", href: "/order-now"
},
]}
buttonAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773930101919-ghty3a8u.png?_wi=1"
imageAlt="Caribbean Flair Complete Menu"
mediaAnimation="opacity"
imagePosition="right"
ariaLabel="Menu page hero section"
/>
</div>
{/* All 5 Menu Pages with Interactive Display */}
<div id="featured-gallery" data-section="featured-gallery">
<div className="px-4 py-16 md:px-8">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold mb-4">All 5 Menu Pages</h2>
<p className="text-lg text-gray-600">Browse through our complete menu collection featuring all dishes, sides, and beverages. Click on each page to explore items and pricing.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
{menuPages.map((page) => (
<div
key={page.id}
className="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer bg-white border border-gray-200 hover:border-orange-500"
onClick={() => {
// Open menu page in new context or scroll to details
const details = document.getElementById(`details-${page.id}`);
if (details) {
details.scrollIntoView({ behavior: 'smooth' });
}
}}
>
{/* Menu Page Image */}
<div className="relative overflow-hidden h-64 bg-gray-100">
<img
src={page.imageSrc}
alt={page.imageAlt}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-4">
<div>
<p className="text-orange-400 text-sm font-semibold mb-1">{page.name}</p>
<h3 className="text-white text-xl font-bold">{page.title}</h3>
</div>
</div>
</div>
{/* Menu Page Details */}
<div className="p-4">
<p className="text-gray-600 text-sm mb-4">{page.description}</p>
{/* Items Preview */}
<div className="space-y-2 mb-4">
{page.items.map((item, idx) => (
<div key={idx} className="text-sm border-t pt-2">
<div className="flex justify-between items-start">
<div>
<p className="font-semibold text-gray-800">{item.name}</p>
<p className="text-gray-500 text-xs">{item.variant}</p>
</div>
<p className="font-bold text-orange-600">{item.price}</p>
</div>
</div>
))}
</div>
{/* View More Button */}
<a
href="/order-now"
className="block w-full text-center bg-gradient-to-r from-orange-500 to-orange-600 text-white py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity"
>
Order from {page.name}
</a>
</div>
</div>
))}
</div>
</div>
</div>
</div>
{/* Additional Menu Details Section */}
<div className="px-4 py-16 md:px-8 bg-gray-50">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold mb-12 text-center">Menu Categories Overview</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{menuPages.map((page) => (
<div
key={`details-${page.id}`}
id={`details-${page.id}`}
className="bg-white rounded-lg p-6 shadow-md border-l-4 border-orange-500"
>
<div className="flex items-start gap-4 mb-4">
<img
src={page.imageSrc}
alt={page.imageAlt}
className="w-24 h-24 object-cover rounded-lg flex-shrink-0"
/>
<div>
<h3 className="text-xl font-bold text-gray-900">{page.name}: {page.title}</h3>
<p className="text-gray-600 text-sm mt-1">{page.description}</p>
</div>
</div>
<div className="space-y-3 mt-4">
{page.items.map((item, idx) => (
<div key={idx} className="flex justify-between items-center py-2 border-b border-gray-200 last:border-b-0">
<div>
<p className="font-semibold text-gray-800">{item.name}</p>
<p className="text-gray-500 text-xs">{item.variant}</p>
</div>
<p className="font-bold text-orange-600 text-lg">{item.price}</p>
</div>
))}
</div>
<a
href="/order-now"
className="mt-6 block w-full text-center bg-orange-600 hover:bg-orange-700 text-white py-2 rounded-lg font-semibold transition-colors"
>
Order Now
</a>
</div>
))}
</div>
</div>
</div>
{/* Footer with Local Map Info and Social Links */}
<div id="footer" data-section="footer">
<FooterMedia
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'%3EFooter 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"
columns={footerColumns}
/>
</div> </div>
</ThemeProvider> </ThemeProvider>
); );

224
src/app/order-now/page.tsx Normal file
View File

@@ -0,0 +1,224 @@
"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 SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import {
Award,
Truck,
Phone,
ShoppingCart,
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 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: "Menu", href: "/#signature-dishes" },
{ label: "Gallery", href: "/#featured-gallery" },
{ label: "Reviews", href: "/#testimonials" },
],
},
{
title: "Order & Contact", items: [
{ label: "Order Online", href: "/order-now" },
{ 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: "#" },
],
},
];
const deliveryServices = [
{ name: "Uber Eats", href: "https://www.ubereats.com", logo: "🍔" },
{ name: "DoorDash", href: "https://www.doordash.com", logo: "🚗" },
{ name: "Grubhub", href: "https://www.grubhub.com", logo: "📱" },
{ name: "Seamless", href: "https://www.seamless.com", logo: "🛵" },
];
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);
}
}
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;
}
#delivery-options {
animation-delay: 0.2s;
}
#footer {
animation-delay: 0.3s;
}
`}</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: "Order Now", href: "/order-now"
}}
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroSplit
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: "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-1773930101919-jnf5am09.png?_wi=1"
imageAlt="Caribbean Flair delivery service"
mediaAnimation="opacity"
imagePosition="right"
ariaLabel="Order now section with delivery options"
/>
</div>
{/* Delivery Options Section */}
<div id="delivery-options" data-section="delivery-options">
<div className="px-4 py-12 md:px-8">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold mb-4">Choose Your Delivery Service</h2>
<p className="text-lg text-gray-600">Select your preferred delivery partner to bring Caribbean Flair straight to your table. Fast, reliable service with real-time tracking.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{deliveryServices.map((service) => (
<a
key={service.name}
href={service.href}
target="_blank"
rel="noopener noreferrer"
className="group relative overflow-hidden rounded-lg p-6 bg-white border-2 border-gray-200 hover:border-orange-500 hover:shadow-lg transition-all duration-300 flex flex-col items-center justify-center min-h-40 text-center"
>
<div className="absolute inset-0 bg-gradient-to-r from-orange-500/0 to-orange-500/0 group-hover:from-orange-500/5 group-hover:to-orange-500/10 transition-all duration-300" />
<div className="relative z-10">
<div className="text-4xl mb-3">{service.logo}</div>
<p className="font-bold text-lg mb-1 group-hover:text-orange-600 transition-colors">{service.name}</p>
<p className="text-sm text-gray-500 group-hover:text-gray-700">Order online </p>
</div>
</a>
))}
</div>
</div>
</div>
</div>
{/* 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-1773930101920-zrd23q6i.jpg?_wi=1"
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair"
copyrightText="© 2026 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}

View File

@@ -61,17 +61,17 @@ export default function HomePage() {
{ {
title: "Quick Links", items: [ title: "Quick Links", items: [
{ label: "Home", href: "/" }, { label: "Home", href: "/" },
{ label: "Menu", href: "#signature-dishes" }, { label: "Menu", href: "/menu" },
{ label: "Gallery", href: "#featured-gallery" }, { label: "Gallery", href: "#featured-gallery" },
{ label: "Reviews", href: "#testimonials" }, { label: "Reviews", href: "#testimonials" },
], ],
}, },
{ {
title: "Order & Contact", items: [ title: "Order & Contact", items: [
{ label: "Order Online", href: "#signature-dishes" }, { label: "Order Online", href: "/order-now" },
{ label: "Call Us", href: "tel:2397850423" }, { label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "#footer" }, { label: "Locations & Hours", href: "#footer" },
{ label: "Contact", href: "#footer" }, { label: "Contact", href: "/contact" },
], ],
}, },
{ {
@@ -231,7 +231,7 @@ export default function HomePage() {
brandName="Caribbean Flair" brandName="Caribbean Flair"
navItems={navItems} navItems={navItems}
button={{ button={{
text: "See Full Menu", href: "/menu" text: "Order Now", href: "/order-now"
}} }}
/> />
</div> </div>
@@ -255,8 +255,8 @@ export default function HomePage() {
{item.name} {item.name}
</a> </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">
See Full Menu Order Now
</a> </a>
</div> </div>
</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" /> <Phone className="w-6 h-6 text-primary-cta group-hover:scale-110 transition-transform" />
</a> </a>
<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" 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" /> <ShoppingCart className="w-6 h-6 group-hover:scale-110 transition-transform" />
</a> </a>
@@ -320,14 +320,14 @@ export default function HomePage() {
background={{ variant: "glowing-orb" }} background={{ variant: "glowing-orb" }}
buttons={[ 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: "/menu"
}, },
]} ]}
buttonAnimation="slide-up" 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="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1774037074715-sefatm1w.png"
imageAlt="Red Caribbean Flair Island Jerk Grill Trailer" imageAlt="Red Caribbean Flair Island Jerk Grill Trailer"
mediaAnimation="opacity" mediaAnimation="opacity"
imagePosition="right" imagePosition="right"
@@ -345,7 +345,7 @@ export default function HomePage() {
tagAnimation="slide-up" tagAnimation="slide-up"
buttons={[ buttons={[
{ {
text: "Explore Full Menu", href: "/menu" text: "Order Now", href: "/order-now"
}, },
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
@@ -356,15 +356,15 @@ export default function HomePage() {
products={[ products={[
{ {
id: "jerk-chicken", name: "Jerk Chicken Platter", price: "$15.95", variant: "Full Rack", imageSrc: 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" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1774032291765-7gv1fwjr.jpg", imageAlt: "Jerk chicken grilled on foil with spices"
}, },
{ {
id: "curry-shrimp", name: "Curry Shrimp Platter", price: "$16.95", variant: "Fresh Daily", imageSrc: 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" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1774032307530-eoalvxyb.jpg", imageAlt: "Curry shrimp over rice and peas"
}, },
{ {
id: "conch-fritters", name: "Conch Fritters Combo", price: "$12.95", variant: "6 Pieces", imageSrc: id: "conch-fritters", name: "Jerk Pork Dinner", price: "$15.95", variant: "Over Grill ", 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" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1774032264249-39yd1uqq.jpg", 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: 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: "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=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: "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" "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: 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: "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=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: "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" "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: 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: "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=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:
"Festival dumplings with tropical slaw and mac and cheese", authorName: "Caribbean Flair Team", authorAvatar: "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" "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: 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: "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=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: "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" "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: 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: "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=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: "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" "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: 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: "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=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: "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" "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"
}, },
]} ]}
@@ -469,7 +469,7 @@ export default function HomePage() {
<div id="owners-spotlight" data-section="owners-spotlight"> <div id="owners-spotlight" data-section="owners-spotlight">
<TeamCardTwo <TeamCardTwo
title="Meet the Owners" title="Meet the Owners"
description="Teris Bryan and Deb Farrell: Passionate entrepreneurs bringing authentic Caribbean soul to Lehigh Acres." description="Teria Bryant and Deb Farrell: Passionate entrepreneurs bringing authentic Caribbean soul to Lehigh Acres."
tag="Community Leaders" tag="Community Leaders"
tagIcon={Heart} tagIcon={Heart}
tagAnimation="slide-up" tagAnimation="slide-up"
@@ -491,7 +491,7 @@ export default function HomePage() {
{ {
id: "deb-farrell", name: "Deb Farrell", role: "Co-Owner & Operations Lead", description: 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: "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=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", videoAriaLabel: "Deb Farrell, co-owner of Caribbean Flair", socialLinks: [
{ {
icon: Facebook, icon: Facebook,
url: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr" url: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr"
@@ -512,7 +512,7 @@ export default function HomePage() {
tagAnimation="slide-up" tagAnimation="slide-up"
buttons={[ buttons={[
{ {
text: "Order Online Now", href: "/menu" text: "Order Online Now", href: "/order-now"
}, },
{ {
text: "Call (239) 785-0423", href: "tel:2397850423" text: "Call (239) 785-0423", href: "tel:2397850423"
@@ -527,7 +527,7 @@ export default function HomePage() {
id: "fast-delivery", title: "Fast & Fresh", description: id: "fast-delivery", title: "Fast & Fresh", description:
"Grilled fresh to order. Your meal arrives hot, delicious, and packed with island flavor.", media: { "Grilled fresh to order. Your meal arrives hot, delicious, and packed with island flavor.", media: {
imageSrc: 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=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"
}, },
items: [ items: [
{ {
@@ -548,13 +548,13 @@ export default function HomePage() {
{/* Footer with Local Map Info and Social Links */} {/* Footer with Local Map Info and Social Links */}
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterMedia <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=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="Caribbean Flair Island Jerk Grill Trailer" imageAlt="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair" 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} columns={footerColumns}
/> />
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }