Merge version_6 into main #2

Merged
bender merged 9 commits from version_6 into main 2026-03-18 16:05:24 +00:00
9 changed files with 1771 additions and 871 deletions

View File

@@ -1,12 +1,14 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import Link from "next/link";
import { Heart, Facebook, Zap, TrendingUp } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
import TimelineHorizontalCardStack from "@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Award, Heart, Zap, TrendingUp, Facebook } from "lucide-react";
export default function AboutPage() {
const navItems = [
@@ -18,57 +20,37 @@ export default function AboutPage() {
{ name: "Locations", id: "locations" },
];
const navItemsWithLinks = navItems.map((item) => ({
...item,
href:
item.id === "home"
? "/"
: item.id === "menu"
? "/#menu"
: item.id === "about"
? "/about"
: item.id === "gallery"
? "/gallery"
: item.id === "reviews"
? "/#reviews"
: "/#locations",
}));
const footerColumns = [
{
title: "Quick Links",
items: [
title: "Quick Links", items: [
{ label: "Home", href: "/" },
{ label: "Menu", href: "/#menu" },
{ label: "Gallery", href: "/gallery" },
{ label: "Reviews", href: "/#reviews" },
{ label: "Menu", href: "/menu" },
{ label: "Gallery", href: "/" },
{ label: "Reviews", href: "/" },
],
},
{
title: "Order & Contact",
items: [
{ label: "Order Online", href: "/#order" },
title: "Order & Contact", items: [
{ label: "Order Online", href: "/" },
{ label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/#locations" },
{ label: "Contact", href: "#contact" },
{ label: "Locations & Hours", href: "/" },
{ label: "Contact", href: "/" },
],
},
{
title: "Connect With Us",
items: [
title: "Connect With Us", items: [
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
{ label: "About Us", href: "/about" },
{ label: "Privacy Policy", href: "#privacy" },
{ label: "Terms of Service", href: "#terms" },
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
],
},
{
title: "Located In",
items: [
{ label: "801 Leeland Heights Blvd W", href: "#map" },
{ label: "Lehigh Acres, FL 33936", href: "#map" },
{ label: "Open Until 9PM", href: "#locations" },
{ label: "Delivery Available", href: "/#order" },
title: "Located In", items: [
{ label: "801 Leeland Heights Blvd W", href: "/" },
{ label: "Lehigh Acres, FL 33936", href: "/" },
{ label: "Open Until 9PM", href: "/" },
{ label: "Delivery Available", href: "/" },
],
},
];
@@ -86,19 +68,44 @@ export default function AboutPage() {
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Caribbean Flair"
navItems={navItems}
button={{ text: "Order Now", href: "/#order" }}
button={{
text: "Order Now", href: "/menu"}}
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroSplit
title="Our Caribbean Journey"
description="Meet the visionaries behind Caribbean Flair: Teria Bryant and Deb Farrell. Bringing authentic island flavors and Black & women-owned excellence to Lehigh Acres."
tag="About Our Story"
tagIcon={Award}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
buttons={[
{
text: "Order Online Now", href: "/menu"},
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg"
imageAlt="Caribbean Flair Story"
mediaAnimation="opacity"
imagePosition="right"
ariaLabel="About us hero section"
/>
</div>
{/* Meet the Owners Section */}
<div id="owners-spotlight" data-section="owners-spotlight">
<TeamCardTwo
title="Meet the Island Visionaries"
description="Teria Bryant and Deb Farrell: Passionate Black-owned, women-owned entrepreneurs bringing authentic Caribbean soul to Lehigh Acres."
tag="Community Leaders"
description="Teria Bryant and Deb Farrell: Passionate Black-owned, women-owned entrepreneurs bringing authentic Caribbean soul to Lehigh Acres with decades of culinary expertise and community commitment."
tag="Our Founders"
tagIcon={Heart}
tagAnimation="slide-up"
textboxLayout="default"
@@ -107,65 +114,132 @@ export default function AboutPage() {
gridVariant="two-columns-alternating-heights"
members={[
{
id: "teria-bryant",
name: "Teria Bryant",
role: "Founder & Head Chef",
description: "Teria brings 15+ years of Caribbean culinary expertise and authentic island passion to every dish. Her vision transformed Caribbean Flair from a dream into a premium dining destination serving Lehigh Acres with pride.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-professional-chef-working_23-2151232185.jpg?_wi=2",
imageAlt: "Teria Bryant, founder of Caribbean Flair",
socialLinks: [
id: "teria-bryant", name: "Teria Bryant", role: "Founder & Head Chef", description:
"Teria brings 15+ years of Caribbean culinary expertise and authentic island passion to every dish. Her vision transformed Caribbean Flair from a dream into a premium dining destination serving Lehigh Acres with pride. With deep roots in Jamaican cooking traditions, Teria ensures every plate delivers the bold flavors and soul that define our brand.", imageSrc:
"http://img.b2bpic.net/free-photo/medium-shot-professional-chef-working_23-2151232185.jpg?_wi=1", imageAlt: "Teria Bryant, founder of Caribbean Flair", socialLinks: [
{
icon: Facebook,
url: "https://facebook.com/caribbeanflair",
},
url: "https://facebook.com/caribbeanflair"},
],
},
{
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, she's building a thriving Black- and women-owned business that celebrates Caribbean culture and community impact.",
imageSrc: "http://img.b2bpic.net/free-photo/successful-business-woman-blue-suit_158595-5024.jpg?_wi=2",
imageAlt: "Deb Farrell, co-owner of Caribbean Flair",
socialLinks: [
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, she's building a thriving Black- and women-owned business that celebrates Caribbean culture and community impact. With a passion for hospitality and business excellence, Deb has been instrumental in creating the warm, authentic atmosphere that defines Caribbean Flair.", imageSrc:
"http://img.b2bpic.net/free-photo/successful-business-woman-blue-suit_158595-5024.jpg?_wi=1", imageAlt: "Deb Farrell, co-owner of Caribbean Flair", socialLinks: [
{
icon: Facebook,
url: "https://facebook.com/caribbeanflair",
},
url: "https://facebook.com/caribbeanflair"},
],
},
]}
/>
</div>
<div id="about-mission" data-section="about-mission">
{/* Brand Story Timeline */}
<div id="brand-story" data-section="brand-story">
<TimelineHorizontalCardStack
title="Our Island Journey"
description="From concept to community favorite: the authentic story of Caribbean Flair's growth and commitment to excellence."
tag="Our Timeline"
tagIcon={Zap}
tagAnimation="slide-up"
buttons={[
{
text: "Explore Our Menu", href: "/menu"},
]}
buttonAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
>
<div className="flex gap-6 overflow-x-auto pb-6 px-4">
{[
{
year: "2020", milestone: "The Dream Begins", description: "Teria and Deb unite their culinary passion and business vision to create Caribbean Flair, dreaming of bringing authentic island flavors to Lehigh Acres."},
{
year: "2021", milestone: "Launch Day", description: "Caribbean Flair opens its doors with a full menu of signature dishes, jerk specialties, and authentic Caribbean sides prepared fresh daily."},
{
year: "2022", milestone: "Community Love", description: "Rapidly becomes a local favorite. Customers praise the authenticity, quality, and genuine warmth of Teria and Deb's hospitality."},
{
year: "2023", milestone: "Expansion & Recognition", description: "Expanded menu offerings, grew customer base, and received recognition as a standout Black & women-owned business in the community."},
{
year: "2024", milestone: "Island Excellence", description: "Continues to deliver premium authentic Caribbean cuisine while expanding delivery options and growing community presence."},
].map((item, index) => (
<div
key={index}
className="flex-shrink-0 w-80 bg-[var(--card)] rounded-lg p-6 border border-[var(--accent)]/20 hover:border-[var(--accent)]/50 transition-colors"
>
<div className="text-3xl font-bold text-[var(--primary-cta)] mb-2">
{item.year}
</div>
<h3 className="text-xl font-semibold text-[var(--foreground)] mb-2">
{item.milestone}
</h3>
<p className="text-[var(--foreground)]/70">{item.description}</p>
</div>
))}
</div>
</TimelineHorizontalCardStack>
</div>
{/* Community Impact Section */}
<div id="community-impact" data-section="community-impact">
<FeatureCardTen
title="Our Mission & Story"
description="Caribbean Flair was born from a simple belief: authentic Caribbean cuisine should be accessible, affordable, and made with love. Teria and Deb partnered to create a space where island flavors, community values, and culinary excellence come together on every plate."
tag="Built on Values"
title="Community Impact & Our Commitment"
description="Caribbean Flair is more than a food truck—we're committed to celebrating Black and women-owned excellence, supporting local communities, and bringing authentic Caribbean culture to Lehigh Acres."
tag="Community First"
tagIcon={Heart}
tagAnimation="slide-up"
buttons={[
{
text: "Support Local", href: "/menu"},
]}
buttonAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={true}
useInvertedBackground={false}
features={[
{
id: "authenticity",
title: "Authentic Island Recipes",
description: "Every dish honors traditional Caribbean cooking methods with modern quality standards. Fresh ingredients, time-tested techniques, and genuine island spirit in every bite.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271905.jpg?_wi=2",
imageAlt: "Chef grilling jerk meats with expertise",
},
id: "authentic-flavors", title: "Authentic Island Flavors", description:
"Every dish is prepared with traditional Jamaican techniques and the freshest ingredients, honoring Caribbean culinary heritage.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg"},
items: [
{
icon: Zap,
text: "Fresh daily preparation",
},
icon: Award,
text: "Authentic recipes passed down through generations"},
{
icon: TrendingUp,
text: "Premium quality ingredients",
},
text: "Fresh ingredients sourced with care"},
],
reverse: false,
},
{
id: "women-empowerment", title: "Women & Black Business Excellence", description:
"As a Black & women-owned enterprise, we're proud to inspire our community and demonstrate the power of entrepreneurship, passion, and determination.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-wha24yfi.jpg"},
items: [
{
icon: Heart,
text: "Celebrating Black & women entrepreneurs"},
{
icon: Zap,
text: "Building generational wealth through excellence"},
],
reverse: true,
},
{
id: "community-engagement", title: "Community Engagement & Support", description:
"We're invested in our Lehigh Acres community, supporting local events, collaborations, and initiatives that strengthen our neighborhood.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-qcfdeh7f.jpg"},
items: [
{
icon: Award,
text: "Active in local community events"},
{
icon: TrendingUp,
text: "Supporting neighborhood growth & connection"},
],
reverse: false,
},
@@ -173,9 +247,10 @@ export default function AboutPage() {
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=3"
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair"
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"

436
src/app/account/page.tsx Normal file
View File

@@ -0,0 +1,436 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Heart, Package, Settings, LogOut, Menu, X, Phone, Mail, MapPin, Facebook, Instagram } from "lucide-react";
import { useState } from "react";
export default function AccountPage() {
const [sidebarOpen, setSidebarOpen] = useState(false);
const [activeTab, setActiveTab] = useState("orders");
const navItems = [
{ name: "Home", id: "home" },
{ name: "Menu", id: "menu" },
{ name: "About Us", id: "about" },
{ name: "Gallery", id: "gallery" },
{ name: "Reviews", id: "reviews" },
{ name: "Locations", id: "locations" },
];
const footerColumns = [
{
title: "Quick Links", items: [
{ label: "Home", href: "/" },
{ label: "Menu", href: "/menu" },
{ label: "Gallery", href: "/" },
{ label: "Reviews", href: "/" },
],
},
{
title: "Order & Contact", items: [
{ label: "Order Online", href: "/" },
{ label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/" },
{ label: "Contact", href: "/" },
],
},
{
title: "Connect With Us", items: [
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
{ label: "About Us", href: "/" },
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
],
},
{
title: "Located In", items: [
{ label: "801 Leeland Heights Blvd W", href: "/" },
{ label: "Lehigh Acres, FL 33936", href: "/" },
{ label: "Open Until 9PM", href: "/" },
{ label: "Delivery Available", href: "/" },
],
},
];
const orderHistory = [
{
id: "order-001", date: "Jan 15, 2025", items: "Jerk Chicken Platter x2, Curry Shrimp Platter x1", total: "$49.85", status: "Delivered"},
{
id: "order-002", date: "Jan 10, 2025", items: "Conch Fritters Combo x3, Mac & Cheese x2", total: "$45.75", status: "Delivered"},
{
id: "order-003", date: "Jan 5, 2025", items: "Curry Goat Platter x1, Festival Dumplings x1", total: "$38.90", status: "Delivered"},
];
const favorites = [
{
id: "fav-1", name: "Jerk Chicken Platter", price: "$15.95", image: "http://img.b2bpic.net/free-photo/from-shrimps-batter-with-red-rice-greens-white-plate_176474-2654.jpg?_wi=1"},
{
id: "fav-2", name: "Curry Shrimp Platter", price: "$16.95", image: "http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=1"},
{
id: "fav-3", name: "Conch Fritters Combo", price: "$12.95", image: "http://img.b2bpic.net/free-photo/chicken-nuggets-served-with-french-fries-sauces_140725-5759.jpg?_wi=1"},
];
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"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Caribbean Flair"
navItems={navItems}
button={{
text: "Order Now", href: "/menu"}}
/>
</div>
{/* Main Content */}
<main className="min-h-screen bg-gradient-to-br from-background to-card pt-8 pb-20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Header */}
<div className="mb-12">
<h1 className="text-4xl font-bold text-foreground mb-2">My Account</h1>
<p className="text-foreground/70">Welcome back! Manage your orders and favorites.</p>
</div>
{/* Mobile Hamburger Menu */}
<div className="lg:hidden mb-6">
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary-cta text-foreground hover:opacity-90 transition-opacity"
aria-label="Toggle menu"
>
{sidebarOpen ? <X size={20} /> : <Menu size={20} />}
<span>{sidebarOpen ? "Close" : "Menu"}</span>
</button>
</div>
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
{/* Sidebar Navigation */}
<aside
className={`lg:col-span-1 ${
sidebarOpen ? "block" : "hidden lg:block"
} lg:sticky lg:top-24 h-fit`}
>
<nav
className="space-y-2 bg-card rounded-lg p-6 border border-card/50 backdrop-blur-sm"
role="navigation"
aria-label="Account navigation"
>
<button
onClick={() => setActiveTab("orders")}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
activeTab === "orders"
? "bg-primary-cta text-foreground"
: "text-foreground/70 hover:text-foreground hover:bg-background/50"
}`}
aria-current={activeTab === "orders" ? "page" : undefined}
>
<Package size={20} />
<span>Order History</span>
</button>
<button
onClick={() => setActiveTab("favorites")}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
activeTab === "favorites"
? "bg-primary-cta text-foreground"
: "text-foreground/70 hover:text-foreground hover:bg-background/50"
}`}
aria-current={activeTab === "favorites" ? "page" : undefined}
>
<Heart size={20} />
<span>Favorites</span>
</button>
<button
onClick={() => setActiveTab("settings")}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
activeTab === "settings"
? "bg-primary-cta text-foreground"
: "text-foreground/70 hover:text-foreground hover:bg-background/50"
}`}
aria-current={activeTab === "settings" ? "page" : undefined}
>
<Settings size={20} />
<span>Settings</span>
</button>
<hr className="my-2 border-card/30" />
<button
className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-foreground/70 hover:text-foreground hover:bg-background/50 transition-all"
aria-label="Logout"
>
<LogOut size={20} />
<span>Logout</span>
</button>
</nav>
</aside>
{/* Main Content Area */}
<div className="lg:col-span-3">
{/* Order History Tab */}
{activeTab === "orders" && (
<section id="orders" className="space-y-6">
<div>
<h2 className="text-2xl font-bold text-foreground mb-4">Order History</h2>
<p className="text-foreground/70 mb-6">View all your previous orders and reorder your favorites.</p>
</div>
<div className="space-y-4">
{orderHistory.map((order) => (
<div
key={order.id}
className="bg-card rounded-lg p-6 border border-card/50 backdrop-blur-sm hover:border-primary-cta/50 transition-all"
>
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
<div className="flex-1">
<div className="flex items-center gap-2 mb-2">
<span className="text-sm font-semibold text-primary-cta">Order #{order.id}</span>
<span
className="px-3 py-1 rounded-full text-xs font-medium bg-accent/20 text-accent"
role="status"
>
{order.status}
</span>
</div>
<p className="text-foreground/70 text-sm mb-1">{order.date}</p>
<p className="text-foreground mb-2">{order.items}</p>
</div>
<div className="text-right">
<p className="text-xl font-bold text-primary-cta mb-3">{order.total}</p>
<button
className="px-4 py-2 bg-primary-cta text-foreground rounded-lg hover:opacity-90 transition-opacity text-sm font-medium"
aria-label={`Reorder items from ${order.id}`}
>
Reorder
</button>
</div>
</div>
</div>
))}
</div>
</section>
)}
{/* Favorites Tab */}
{activeTab === "favorites" && (
<section id="favorites" className="space-y-6">
<div>
<h2 className="text-2xl font-bold text-foreground mb-4">Favorite Items</h2>
<p className="text-foreground/70 mb-6">Quick access to your most loved Caribbean Flair dishes.</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{favorites.map((item) => (
<div
key={item.id}
className="bg-card rounded-lg overflow-hidden border border-card/50 backdrop-blur-sm hover:border-primary-cta/50 transition-all group"
>
<div className="relative overflow-hidden aspect-square bg-background/50">
<img
src={item.image}
alt={item.name}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
<button
className="absolute top-3 right-3 p-2 bg-primary-cta rounded-full text-foreground hover:opacity-90 transition-opacity"
aria-label={`Remove ${item.name} from favorites`}
>
<Heart size={18} className="fill-current" />
</button>
</div>
<div className="p-4">
<h3 className="font-semibold text-foreground mb-1">{item.name}</h3>
<p className="text-primary-cta font-bold mb-3">{item.price}</p>
<button
className="w-full px-3 py-2 bg-primary-cta text-foreground rounded-lg hover:opacity-90 transition-opacity text-sm font-medium"
aria-label={`Add ${item.name} to cart`}
>
Add to Cart
</button>
</div>
</div>
))}
</div>
</section>
)}
{/* Settings Tab */}
{activeTab === "settings" && (
<section id="settings" className="space-y-6">
<div>
<h2 className="text-2xl font-bold text-foreground mb-4">Account Settings</h2>
<p className="text-foreground/70 mb-6">Manage your profile and communication preferences.</p>
</div>
<div className="space-y-6">
{/* Profile Information */}
<div className="bg-card rounded-lg p-6 border border-card/50 backdrop-blur-sm">
<h3 className="text-lg font-semibold text-foreground mb-4">Profile Information</h3>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-foreground mb-2">Full Name</label>
<input
type="text"
placeholder="John Doe"
className="w-full px-4 py-2 bg-background border border-card/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta"
aria-label="Full name"
/>
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">Email</label>
<input
type="email"
placeholder="john@example.com"
className="w-full px-4 py-2 bg-background border border-card/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta"
aria-label="Email address"
/>
</div>
<button className="px-6 py-2 bg-primary-cta text-foreground rounded-lg hover:opacity-90 transition-opacity font-medium">
Save Changes
</button>
</div>
</div>
{/* Delivery Address */}
<div className="bg-card rounded-lg p-6 border border-card/50 backdrop-blur-sm">
<h3 className="text-lg font-semibold text-foreground mb-4">Default Delivery Address</h3>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-foreground mb-2">Street Address</label>
<input
type="text"
placeholder="123 Main Street"
className="w-full px-4 py-2 bg-background border border-card/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta"
aria-label="Street address"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-foreground mb-2">City</label>
<input
type="text"
placeholder="Lehigh Acres"
className="w-full px-4 py-2 bg-background border border-card/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta"
aria-label="City"
/>
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">ZIP Code</label>
<input
type="text"
placeholder="33936"
className="w-full px-4 py-2 bg-background border border-card/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta"
aria-label="ZIP code"
/>
</div>
</div>
<button className="px-6 py-2 bg-primary-cta text-foreground rounded-lg hover:opacity-90 transition-opacity font-medium">
Update Address
</button>
</div>
</div>
{/* Notification Preferences */}
<div className="bg-card rounded-lg p-6 border border-card/50 backdrop-blur-sm">
<h3 className="text-lg font-semibold text-foreground mb-4">Notifications</h3>
<div className="space-y-3">
<label className="flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
defaultChecked
className="w-5 h-5 rounded border-card/30 text-primary-cta focus:ring-primary-cta"
aria-label="Email notifications for orders"
/>
<span className="text-foreground">Email me order updates</span>
</label>
<label className="flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
defaultChecked
className="w-5 h-5 rounded border-card/30 text-primary-cta focus:ring-primary-cta"
aria-label="SMS notifications"
/>
<span className="text-foreground">Text me special offers</span>
</label>
<label className="flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
className="w-5 h-5 rounded border-card/30 text-primary-cta focus:ring-primary-cta"
aria-label="Marketing emails"
/>
<span className="text-foreground">Marketing emails and promotions</span>
</label>
</div>
</div>
</div>
</section>
)}
</div>
</div>
</div>
</main>
{/* Quick Contact Section */}
<section className="bg-card/50 backdrop-blur-sm py-12 border-t border-card/30" aria-labelledby="quick-contact-heading">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 id="quick-contact-heading" className="text-2xl font-bold text-foreground text-center mb-8">
Need Help? Get in Touch
</h2>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
<div className="flex flex-col items-center text-center">
<div className="p-3 bg-primary-cta rounded-full mb-3">
<Phone size={24} className="text-foreground" />
</div>
<h3 className="font-semibold text-foreground mb-1">Call Us</h3>
<p className="text-foreground/70">
<a href="tel:2397850423" className="hover:text-primary-cta transition-colors">
(239) 785-0423
</a>
</p>
</div>
<div className="flex flex-col items-center text-center">
<div className="p-3 bg-primary-cta rounded-full mb-3">
<Mail size={24} className="text-foreground" />
</div>
<h3 className="font-semibold text-foreground mb-1">Email</h3>
<p className="text-foreground/70">
<a href="mailto:info@caribbeanflair.com" className="hover:text-primary-cta transition-colors">
info@caribbeanflair.com
</a>
</p>
</div>
<div className="flex flex-col items-center text-center">
<div className="p-3 bg-primary-cta rounded-full mb-3">
<MapPin size={24} className="text-foreground" />
</div>
<h3 className="font-semibold text-foreground mb-1">Visit Us</h3>
<p className="text-foreground/70">801 Leeland Heights Blvd W<br />Lehigh Acres, FL 33936</p>
</div>
</div>
</div>
</section>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair"
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}

View File

@@ -3,59 +3,82 @@
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 ContactSplit from "@/components/sections/contact/ContactSplit";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Heart, Zap } from "lucide-react";
import { Phone, MessageCircle, Facebook, MessageSquare, MapPin, Clock } from "lucide-react";
import { useState } from "react";
export default function ContactPage() {
const [showLiveChat, setShowLiveChat] = useState(false);
const [chatMessages, setChatMessages] = useState<Array<{ id: string; sender: "user" | "bot"; text: string }>>([]);
const [chatInput, setChatInput] = useState("");
const navItems = [
{ name: "Home", id: "home" },
{ name: "Menu", id: "menu" },
{ name: "About Us", id: "about" },
{ name: "Gallery", id: "gallery" },
{ name: "Reviews", id: "reviews" },
{ name: "Locations", id: "locations" },
{ name: "Home", id: "/" },
{ name: "Order Online", id: "/order-online" },
{ name: "Contact", id: "/contact" },
{ name: "Gallery", id: "/" },
{ name: "Reviews", id: "/" },
{ name: "Locations", id: "/" },
];
const footerColumns = [
{
title: "Quick Links",
items: [
title: "Quick Links", items: [
{ label: "Home", href: "/" },
{ label: "Menu", href: "/menu" },
{ label: "Gallery", href: "/gallery" },
{ label: "Reviews", href: "/reviews" },
{ label: "Order Online", href: "/order-online" },
{ label: "Gallery", href: "/" },
{ label: "Reviews", href: "/" },
],
},
{
title: "Order & Contact",
items: [
{ label: "Order Online", href: "/order" },
title: "Order & Contact", items: [
{ label: "Order Online", href: "/order-online" },
{ label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/locations" },
{ label: "Locations & Hours", href: "/" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect With Us",
items: [
title: "Connect With Us", items: [
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
{ label: "About Us", href: "/about" },
{ label: "Privacy Policy", href: "#privacy" },
{ label: "Terms of Service", href: "#terms" },
{ label: "About Us", href: "/" },
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
],
},
{
title: "Located In",
items: [
{ label: "801 Leeland Heights Blvd W", href: "#map" },
{ label: "Lehigh Acres, FL 33936", href: "#map" },
{ label: "Open Until 9PM", href: "/locations" },
{ label: "Delivery Available", href: "/order" },
title: "Located In", items: [
{ label: "801 Leeland Heights Blvd W", href: "/" },
{ label: "Lehigh Acres, FL 33936", href: "/" },
{ label: "Open Until 9PM", href: "/" },
{ label: "Delivery Available", href: "/" },
],
},
];
const handleChatSend = () => {
if (!chatInput.trim()) return;
const newMessage = { id: Date.now().toString(), sender: "user" as const, text: chatInput };
setChatMessages([...chatMessages, newMessage]);
setChatInput("");
// Simulate bot response
setTimeout(() => {
const responses = [
"Thanks for reaching out! How can we help you today?", "Great question! Our team is here to assist you.", "We appreciate your inquiry. One moment while we connect you with our team.", "Caribbean Flair is committed to excellent customer service. What can we do for you?"];
const botResponse = {
id: (Date.now() + 1).toString(),
sender: "bot" as const,
text: responses[Math.floor(Math.random() * responses.length)],
};
setChatMessages((prev) => [...prev, botResponse]);
}, 800);
};
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
@@ -69,55 +92,202 @@ export default function ContactPage() {
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Caribbean Flair"
navItems={navItems}
button={{
text: "Order Now",
href: "/order",
text: "Order Now", href: "/order-online"}}
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroSplit
title="Get in Touch with Caribbean Flair"
description="We'd love to hear from you! Whether you have questions about our menu, want to place a bulk order, or just want to say hello, reach out to us through any of these channels."
tag="We're Here to Help"
tagIcon={MessageCircle}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
buttons={[
{
text: "Start Live Chat", href: "#live-chat"},
]}
buttonAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-qcfdeh7f.jpg"
imageAlt="Contact Caribbean Flair"
mediaAnimation="opacity"
imagePosition="right"
ariaLabel="Contact hero section"
/>
</div>
{/* Contact Methods Section */}
<div id="contact-methods" data-section="contact-methods" className="py-16 px-4 bg-gray-50">
<div className="max-w-6xl mx-auto">
<h2 className="text-4xl font-bold text-center mb-12">Contact Us</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{/* Call Button */}
<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition text-center">
<Phone className="w-12 h-12 mx-auto mb-4 text-primary-cta" />
<h3 className="text-lg font-semibold mb-2">Call Us</h3>
<p className="text-gray-600 mb-4">Speak directly with our team</p>
<a
href="tel:2397850423"
className="inline-block px-4 py-2 bg-primary-cta text-white rounded-lg hover:opacity-90 transition font-semibold"
>
Call (239) 785-0423
</a>
</div>
{/* Text Option */}
<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition text-center">
<MessageSquare className="w-12 h-12 mx-auto mb-4 text-primary-cta" />
<h3 className="text-lg font-semibold mb-2">Text Us</h3>
<p className="text-gray-600 mb-4">Quick responses via SMS</p>
<a
href="sms:2397850423?body=Hi%20Caribbean%20Flair"
className="inline-block px-4 py-2 bg-primary-cta text-white rounded-lg hover:opacity-90 transition font-semibold"
>
Send a Text
</a>
</div>
{/* Facebook Link */}
<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition text-center">
<Facebook className="w-12 h-12 mx-auto mb-4 text-primary-cta" />
<h3 className="text-lg font-semibold mb-2">Facebook</h3>
<p className="text-gray-600 mb-4">Follow and message us</p>
<a
href="https://facebook.com/caribbeanflair"
target="_blank"
rel="noopener noreferrer"
className="inline-block px-4 py-2 bg-primary-cta text-white rounded-lg hover:opacity-90 transition font-semibold"
>
Visit Page
</a>
</div>
{/* Live Chat */}
<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition text-center">
<MessageCircle className="w-12 h-12 mx-auto mb-4 text-primary-cta" />
<h3 className="text-lg font-semibold mb-2">Live Chat</h3>
<p className="text-gray-600 mb-4">Chat with our support team</p>
<button
onClick={() => setShowLiveChat(!showLiveChat)}
className="inline-block px-4 py-2 bg-primary-cta text-white rounded-lg hover:opacity-90 transition font-semibold"
>
Open Chat
</button>
</div>
</div>
</div>
</div>
{/* Live Chat Widget */}
{showLiveChat && (
<div id="live-chat" data-section="live-chat" className="fixed bottom-6 right-6 w-96 bg-white rounded-lg shadow-2xl border border-gray-200 z-50 flex flex-col max-h-96">
<div className="bg-primary-cta text-white p-4 rounded-t-lg flex justify-between items-center">
<h3 className="font-semibold">Caribbean Flair Support</h3>
<button
onClick={() => setShowLiveChat(false)}
className="text-white hover:opacity-80 transition"
>
</button>
</div>
<div className="flex-1 overflow-y-auto p-4 space-y-3">
{chatMessages.length === 0 ? (
<div className="text-center text-gray-500 py-4">
<p className="mb-2">👋 Welcome to Caribbean Flair!</p>
<p className="text-sm">How can we assist you today?</p>
</div>
) : (
chatMessages.map((msg) => (
<div
key={msg.id}
className={`flex ${msg.sender === "user" ? "justify-end" : "justify-start"}`}
>
<div
className={`max-w-xs px-3 py-2 rounded-lg ${
msg.sender === "user"
? "bg-primary-cta text-white"
: "bg-gray-100 text-gray-800"
}`}
>
<p className="text-sm">{msg.text}</p>
</div>
</div>
))
)}
</div>
<div className="border-t p-3 flex gap-2">
<input
type="text"
value={chatInput}
onChange={(e) => setChatInput(e.target.value)}
onKeyPress={(e) => e.key === "Enter" && handleChatSend()}
placeholder="Type your message..."
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-primary-cta"
/>
<button
onClick={handleChatSend}
className="px-3 py-2 bg-primary-cta text-white rounded-lg hover:opacity-90 transition"
>
Send
</button>
</div>
</div>
)}
{/* Contact Form Section */}
<div id="contact-form" data-section="contact-form">
<ContactSplit
tag="Get in Touch"
title="Send us a Message"
description="Fill out the form below and we'll get back to you as soon as possible with all the information you need."
background={{ variant: "glowing-orb" }}
useInvertedBackground={false}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-dk53z92a.jpg"
imageAlt="Contact form - Caribbean Flair"
mediaAnimation="opacity"
mediaPosition="left"
inputPlaceholder="Enter your email"
buttonText="Send Message"
termsText="By sending this message, you agree to our Terms of Service and Privacy Policy."
onSubmit={(email) => {
console.log("Contact form submitted:", email);
alert("Thank you for contacting us! We'll be in touch soon.");
}}
/>
</div>
<div id="contact-hero" data-section="contact-hero">
{/* Location & Hours Section */}
<div id="location-hours" data-section="location-hours">
<FeatureCardTen
title="Get in Touch with Caribbean Flair"
description="Have questions about our menu, catering options, or special requests? Contact us directly. We're here to make your Caribbean dining experience unforgettable."
tag="We Love Hearing From You"
tagIcon={Heart}
title="Visit Us Today"
description="Come experience authentic Caribbean flavors at our Lehigh Acres location. We're open daily until 9 PM with delivery available."
tag="Find Us"
tagIcon={MapPin}
tagAnimation="slide-up"
buttons={[
{
text: "Call (239) 785-0423",
href: "tel:2397850423",
},
{
text: "Visit Us Today",
href: "/order",
},
]}
buttonAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
useInvertedBackground={true}
features={[
{
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: {
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=4",
},
id: "location-hours", title: "Location & Hours", description:
"801 Leeland Heights Blvd W, Lehigh Acres, FL 33936. Open daily until 9 PM. Delivery available within service area.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-y2tu4f81.jpg"},
items: [
{
icon: Zap,
text: "(239) 785-0423",
},
icon: MapPin,
text: "Lehigh Acres, FL 33936"},
{
icon: Heart,
text: "Available until 9PM",
},
icon: Clock,
text: "Open Until 9 PM Daily"},
],
reverse: false,
},
@@ -125,54 +295,10 @@ export default function ContactPage() {
/>
</div>
<div id="contact-details" data-section="contact-details">
<FeatureCardTen
title="Find Us at Our Location"
description="Visit Caribbean Flair Island Jerk Grill at our Lehigh Acres location. We're a premium food truck dedicated to bringing authentic Jamaican island flavors to your community."
tag="Black & Women-Owned"
tagIcon={Heart}
tagAnimation="slide-up"
buttons={[
{
text: "Order Online Now",
href: "/order",
},
{
text: "View Full Menu",
href: "/menu",
},
]}
buttonAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={true}
features={[
{
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: {
imageSrc: "http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=8",
},
items: [
{
icon: Zap,
text: "801 Leeland Heights Blvd W",
},
{
icon: Heart,
text: "Daily Service Until 9PM",
},
],
reverse: true,
},
]}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=9"
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair"
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"

View File

@@ -1,12 +1,12 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import Link from "next/link";
import { Camera, Zap, TrendingUp } from "lucide-react";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Award, Camera, Zap, TrendingUp, Facebook } from "lucide-react";
export default function GalleryPage() {
const navItems = [
@@ -20,39 +20,35 @@ export default function GalleryPage() {
const footerColumns = [
{
title: "Quick Links",
items: [
title: "Quick Links", items: [
{ label: "Home", href: "/" },
{ label: "Menu", href: "/#menu" },
{ label: "Menu", href: "/menu" },
{ label: "Gallery", href: "/gallery" },
{ label: "Reviews", href: "/#reviews" },
{ label: "Reviews", href: "/reviews" },
],
},
{
title: "Order & Contact",
items: [
{ label: "Order Online", href: "/#order" },
title: "Order & Contact", items: [
{ label: "Order Online", href: "/menu" },
{ label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/#locations" },
{ label: "Contact", href: "#contact" },
{ label: "Locations & Hours", href: "/locations" },
{ label: "Contact", href: "/" },
],
},
{
title: "Connect With Us",
items: [
title: "Connect With Us", items: [
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
{ label: "About Us", href: "/about" },
{ label: "Privacy Policy", href: "#privacy" },
{ label: "Terms of Service", href: "#terms" },
{ label: "About Us", href: "/" },
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
],
},
{
title: "Located In",
items: [
{ label: "801 Leeland Heights Blvd W", href: "#map" },
{ label: "Lehigh Acres, FL 33936", href: "#map" },
{ label: "Open Until 9PM", href: "#locations" },
{ label: "Delivery Available", href: "/#order" },
title: "Located In", items: [
{ label: "801 Leeland Heights Blvd W", href: "/locations" },
{ label: "Lehigh Acres, FL 33936", href: "/locations" },
{ label: "Open Until 9PM", href: "/locations" },
{ label: "Delivery Available", href: "/" },
],
},
];
@@ -70,19 +66,44 @@ export default function GalleryPage() {
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Caribbean Flair"
navItems={navItems}
button={{ text: "Order Now", href: "/#order" }}
button={{
text: "Order Now", href: "/menu"}}
/>
</div>
<div id="featured-gallery" data-section="featured-gallery">
<BlogCardThree
title="Island Feast Gallery"
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroSplit
title="Gallery - Visual Island Journey"
description="Explore our vibrant collection of authentic Caribbean dishes, fresh ingredients, and behind-the-scenes moments from the grill."
tag="Visual Journey"
tag="Visual Feast"
tagIcon={Camera}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
buttons={[
{
text: "Order Online Now", href: "/menu"},
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271905.jpg?_wi=1"
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
mediaAnimation="opacity"
imagePosition="right"
ariaLabel="Gallery hero section showcasing Caribbean Flair dishes"
/>
</div>
{/* Full Gallery Section with Tags and Horizontal Scrolling */}
<div id="gallery-items" data-section="gallery-items">
<BlogCardThree
title="Complete Island Feast Gallery"
description="Browse our complete collection of authentic Caribbean cuisine with detailed photography and descriptions."
tag="Tagged Gallery"
tagIcon={Camera}
tagAnimation="slide-up"
textboxLayout="default"
@@ -90,113 +111,71 @@ export default function GalleryPage() {
useInvertedBackground={false}
blogs={[
{
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: "http://img.b2bpic.net/free-photo/hot-spicy-grilled-pork-salad-with-berry-rice_1339-6325.jpg?_wi=3",
imageAlt: "Jerk pork platter with rice and tropical slaw",
authorName: "Caribbean Flair Team",
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: "Fresh Daily",
},
id: "jerk-pork", category: "Main Dishes | Grilled", title: "Jerk Pork Did Not Disappoint", excerpt:
"Perfectly seasoned and grilled, bursting with island spices and authentic Jamaican flavor. Our signature jerk pork is marinated for hours and grilled fresh to order.", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg", imageAlt: "Jerk pork platter with rice and tropical slaw", authorName: "Caribbean Flair Team", 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: "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: "http://img.b2bpic.net/free-photo/rice-dish-with-sauce-near-spices_23-2147894777.jpg?_wi=3",
imageAlt: "Rich curry goat served over rice and peas",
authorName: "Caribbean Flair Team",
authorAvatar: "http://img.b2bpic.net/free-vector/colorful-avatars_23-2147502919.jpg",
date: "Popular Choice",
},
id: "curry-goat", category: "Main Dishes | Featured", title: "Curry Goat - A Community Favorite", excerpt:
"Tender, aromatic, and cooked to perfection. Every bite transports you straight to Jamaica. Our signature curry goat is slow-cooked with Caribbean spices.", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-wha24yfi.jpg", imageAlt: "Rich curry goat served over rice and peas", authorName: "Caribbean Flair Team", authorAvatar:
"http://img.b2bpic.net/free-vector/colorful-avatars_23-2147502919.jpg", 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: "http://img.b2bpic.net/free-photo/deep-fried-samosas-rustic-crockery-plate-generated-by-ai_188544-41080.jpg?_wi=3",
imageAlt: "Festival dumplings with tropical slaw and mac and cheese",
authorName: "Caribbean Flair Team",
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",
date: "Must Try",
},
id: "festival-sides", category: "Sides | Favorites", title: "Festival Dumplings & Tropical Slaw", excerpt:
"Crispy, golden festival dumplings paired with our signature tropical slaw for the perfect complement. Handmade daily and fried to golden perfection.", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-qcfdeh7f.jpg", imageAlt:
"Festival dumplings with tropical slaw and mac and cheese", authorName: "Caribbean Flair Team", authorAvatar:
"http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg", 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: "http://img.b2bpic.net/free-photo/grilled-chicken-served-with-aubergine-lemon-parsley_140725-1554.jpg?_wi=2",
imageAlt: "Escovitch fish with pickled vegetables and lime",
authorName: "Caribbean Flair Team",
authorAvatar: "http://img.b2bpic.net/free-photo/young-male-holding-hands-pockets-white-shirt-jacket-looking-elegant-front-view_176474-99655.jpg",
date: "Customer Favorite",
},
id: "escovitch-fish", category: "Seafood | Grilled", title: "Escovitch Fish - Island Tradition", excerpt:
"Fresh fish prepared in authentic Jamaican style with pickled vegetables and bold island flavors. A traditional Caribbean preparation that brings island heritage to your plate.", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-dk53z92a.jpg", imageAlt: "Escovitch fish with pickled vegetables and lime", authorName: "Caribbean Flair Team", authorAvatar:
"http://img.b2bpic.net/free-photo/young-male-holding-hands-pockets-white-shirt-jacket-looking-elegant-front-view_176474-99655.jpg", 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: "http://img.b2bpic.net/free-photo/delicious-food-presentation_23-2151914003.jpg?_wi=2",
imageAlt: "Creamy mac and cheese side dish",
authorName: "Caribbean Flair Team",
authorAvatar: "http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg",
date: "Comfort Classic",
},
id: "mac-cheese", category: "Sides | Comfort Food", title: "Creamy Island Mac & Cheese", excerpt:
"Smooth, rich, and soul-warming comfort food that pairs perfectly with any of our signature mains. Made with Caribbean spices for an island twist on a classic.", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-y2tu4f81.jpg", imageAlt: "Creamy mac and cheese side dish", authorName: "Caribbean Flair Team", authorAvatar:
"http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg", 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: "http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271905.jpg?_wi=3",
imageAlt: "Chef grilling jerk meats on foil with smoke",
authorName: "Caribbean Flair Team",
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: "Daily Special",
},
id: "grill-action", category: "Behind the Scenes | Live Action", title: "Fresh Off The Grill - Live Action", excerpt:
"Watch our expert grill masters prepare your meal with passion, precision, and authentic Caribbean technique. See the care and expertise that goes into every dish.", imageSrc:
"http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271905.jpg?_wi=1", imageAlt: "Chef grilling jerk meats on foil with smoke", authorName: "Caribbean Flair Team", 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: "Daily Special"},
]}
/>
</div>
{/* Call to Action Section */}
<div id="gallery-cta" data-section="gallery-cta">
<FeatureCardTen
title="Experience Caribbean Flair In Person"
description="Visit our food truck to taste the vibrant island flavors captured in these photos. Every meal is prepared fresh with premium ingredients and authentic Caribbean passion."
tag="Ready to Visit"
tagIcon={Camera}
title="Ready to Taste What You See?"
description="Every image represents authentic Caribbean flavor and quality that you can experience today. Order now and discover your new island favorite."
tag="Order Now"
tagIcon={Zap}
tagAnimation="slide-up"
buttons={[
{
text: "Order Online Now", href: "/menu"},
{
text: "Call (239) 785-0423", href: "tel:2397850423"},
]}
buttonAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={true}
buttons={[
{
text: "Order Online Now",
href: "/#order",
},
{
text: "Find Our Location",
href: "/#locations",
},
]}
features={[
{
id: "gallery-highlight",
title: "Every Photo Tells a Story",
description: "From fresh ingredients to the final plated masterpiece, our gallery showcases the care and craftsmanship in every Caribbean Flair dish.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=3",
imageAlt: "Beautiful plated Caribbean Flair dish",
},
id: "quality-assurance", title: "Gallery-to-Table Quality", description:
"Every dish photographed is made fresh to order with the same quality and passion you see here.", media: {
imageSrc:
"http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=1"},
items: [
{
icon: Zap,
text: "Fresh daily preparation",
},
text: "Ready in 15 minutes"},
{
icon: TrendingUp,
text: "Premium quality showcase",
},
text: "Peak fresh quality"},
],
reverse: false,
},
@@ -204,9 +183,10 @@ export default function GalleryPage() {
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=4"
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair"
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"

View File

@@ -2,11 +2,11 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import Link from "next/link";
import { MapPin, Clock, Phone, Camera } from "lucide-react";
import { MapPin, Clock, Phone, Zap, TrendingUp, CheckCircle, AlertCircle, BarChart3 } from "lucide-react";
export default function LocationsPage() {
const navItems = [
@@ -20,8 +20,7 @@ export default function LocationsPage() {
const footerColumns = [
{
title: "Quick Links",
items: [
title: "Quick Links", items: [
{ label: "Home", href: "/" },
{ label: "Menu", href: "/menu" },
{ label: "Gallery", href: "/gallery" },
@@ -29,30 +28,27 @@ export default function LocationsPage() {
],
},
{
title: "Order & Contact",
items: [
{ label: "Order Online", href: "/order" },
title: "Order & Contact", items: [
{ label: "Order Online", href: "/menu" },
{ label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/locations" },
{ label: "Contact", href: "/contact" },
{ label: "Contact", href: "/" },
],
},
{
title: "Connect With Us",
items: [
title: "Connect With Us", items: [
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
{ label: "About Us", href: "/about" },
{ label: "Privacy Policy", href: "#privacy" },
{ label: "Terms of Service", href: "#terms" },
{ label: "About Us", href: "/" },
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
],
},
{
title: "Located In",
items: [
{ label: "801 Leeland Heights Blvd W", href: "#map" },
{ label: "Lehigh Acres, FL 33936", href: "#map" },
title: "Located In", items: [
{ label: "801 Leeland Heights Blvd W", href: "/locations" },
{ label: "Lehigh Acres, FL 33936", href: "/locations" },
{ label: "Open Until 9PM", href: "/locations" },
{ label: "Delivery Available", href: "/order" },
{ label: "Delivery Available", href: "/" },
],
},
];
@@ -70,56 +66,109 @@ export default function LocationsPage() {
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Caribbean Flair"
navItems={navItems}
button={{
text: "Order Now",
href: "/order",
}}
text: "Order Now", href: "/menu"}}
/>
</div>
<div id="locations-hero" data-section="locations-hero">
<FeatureCardTen
title="Find Caribbean Flair Near You"
description="Visit our premium food truck location in Lehigh Acres for authentic Jamaican island cuisine. Fresh off the grill, made with love by Teria Bryant & Deb Farrell."
tag="Open Daily"
tagIcon={MapPin}
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroSplit
title="Visit Caribbean Flair - Locations & Hours"
description="Find us in Lehigh Acres, FL. Check our hours, get directions, and see real-time information about wait times and popular hours."
tag="Open Now"
tagIcon={CheckCircle}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
buttons={[
{
text: "Get Directions",
href: "#map",
},
text: "Get Directions", href: "https://maps.google.com/?q=801+Leeland+Heights+Blvd+W+Lehigh+Acres+FL+33936"},
{
text: "Call Us Now",
href: "tel:2397850423",
},
text: "Call (239) 785-0423", href: "tel:2397850423"},
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
imageAlt="Caribbean Flair Island Jerk Grill Trailer Location"
mediaAnimation="opacity"
imagePosition="right"
ariaLabel="Locations and hours hero section for Caribbean Flair"
/>
</div>
{/* Location Details with Map and Info */}
<div id="location-details" data-section="location-details">
<FeatureBento
title="Find Us Here"
description="Caribbean Flair Island Jerk Grill is located in the heart of Lehigh Acres. We're easy to find and ready to serve you authentic Caribbean flavors."
tag="Primary Location"
tagIcon={MapPin}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
id: "main-location",
title: "Lehigh Acres Location",
description: "Our flagship Caribbean Flair trailer serves the community daily with premium Jamaican jerk, curry, and soul food crafted with authentic island passion.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=6",
imageAlt: "Caribbean Flair trailer in Lehigh Acres",
},
title: "Address", description: "801 Leeland Heights Blvd W, Lehigh Acres, FL 33936", bentoComponent: "map"},
{
title: "Hours of Operation", description: "Open daily. See schedule below.", bentoComponent: "icon-info-cards", items: [
{ icon: Clock, label: "Monday-Friday", value: "11 AM - 9 PM" },
{ icon: Clock, label: "Saturday", value: "12 PM - 10 PM" },
{ icon: Clock, label: "Sunday", value: "12 PM - 9 PM" },
{ icon: AlertCircle, label: "Holidays", value: "Call Ahead" },
],
},
{
title: "Popular Times", description: "Peak times for Caribbean Flair dining.", bentoComponent: "timeline", timelineData: {
heading: "Peak Hours", subheading: "When to expect the busiest service", items: [
{ label: "Lunch Rush", detail: "12 PM - 1:30 PM" },
{ label: "Afternoon Slow", detail: "2 PM - 4:30 PM" },
{ label: "Dinner Peak", detail: "6 PM - 8 PM" },
],
completedLabel: "Current Time"},
},
]}
/>
</div>
{/* Contact Information and Directions */}
<div id="contact-info" data-section="contact-info">
<FeatureCardTen
title="Get In Touch - We're Ready to Serve"
description="Whether you're ordering ahead, looking for directions, or have questions about our menu—reach out! We're here to provide the best Caribbean Flair experience."
tag="Contact Us"
tagIcon={Phone}
tagAnimation="slide-up"
buttons={[
{
text: "Call (239) 785-0423", href: "tel:2397850423"},
{
text: "Get Directions", href: "https://maps.google.com/?q=801+Leeland+Heights+Blvd+W+Lehigh+Acres+FL+33936"},
]}
buttonAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={true}
features={[
{
id: "service-info", title: "How to Order", description:
"Visit us in person, call ahead for pickup, or order online through our website. We offer delivery and catering for special events.", media: {
imageSrc:
"http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=1"},
items: [
{
icon: MapPin,
text: "801 Leeland Heights Blvd W, Lehigh Acres, FL 33936",
},
icon: CheckCircle,
text: "On-Site Ordering"},
{
icon: Clock,
text: "Open Daily Until 9PM",
},
icon: Phone,
text: "Phone Orders"},
{
icon: TrendingUp,
text: "Online Ordering"},
],
reverse: false,
},
@@ -127,97 +176,11 @@ export default function LocationsPage() {
/>
</div>
<div id="hours-details" data-section="hours-details">
<BlogCardThree
title="Hours & Services Available"
description="Plan your Caribbean Flair visit with detailed operating hours and available services. We're ready to serve you fresh, authentic island flavors."
tag="Easy Access"
tagIcon={Clock}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
blogs={[
{
id: "weekday-hours",
category: "Weekday Schedule",
title: "Monday - Friday Hours",
excerpt: "Open from 11AM to 9PM. Perfect for lunch breaks, after-work dinners, and Caribbean cravings throughout your weekday.",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=3",
imageAlt: "fast food service preparation",
authorName: "Caribbean Flair Team",
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: "11AM - 9PM",
onBlogClick: null,
},
{
id: "weekend-hours",
category: "Weekend Schedule",
title: "Saturday & Sunday Hours",
excerpt: "Extended weekend hours from 10AM to 10PM. More time to enjoy authentic Caribbean cuisine with family and friends.",
imageSrc: "http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271905.jpg?_wi=4",
imageAlt: "friends enjoying food together",
authorName: "Caribbean Flair Team",
authorAvatar: "http://img.b2bpic.net/free-photo/colorful-avatars_23-2147502919.jpg",
date: "10AM - 10PM",
onBlogClick: null,
},
{
id: "services-available",
category: "Our Services",
title: "Online Orders & Delivery",
excerpt: "Order ahead online for faster service or request delivery to your location. We make Caribbean flavors convenient for your lifestyle.",
imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-making-thumbs-up-gesture_23-2148807711.jpg",
imageAlt: "delivery service available",
authorName: "Caribbean Flair Team",
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",
date: "Fast & Fresh",
onBlogClick: null,
},
{
id: "catering-events",
category: "Special Services",
title: "Catering & Private Events",
excerpt: "Bring Caribbean Flair to your events! Perfect for parties, corporate gatherings, and celebrations. Contact us for custom catering packages.",
imageSrc: "http://img.b2bpic.net/free-photo/friends-eating-barbecue_23-2148733607.jpg?_wi=4",
imageAlt: "group enjoying caribbean food celebration",
authorName: "Caribbean Flair Team",
authorAvatar: "http://img.b2bpic.net/free-photo/young-male-holding-hands-pockets-white-shirt-jacket-looking-elegant-front-view_176474-99655.jpg",
date: "Call for Details",
onBlogClick: null,
},
{
id: "contact-us",
category: "Get In Touch",
title: "Direct Contact & Information",
excerpt: "Have questions? Call us directly at (239) 785-0423. Our team is happy to help with orders, catering, or any Caribbean Flair inquiries.",
imageSrc: "http://img.b2bpic.net/free-photo/phone-communication-technology-concept_23-2150300988.jpg",
imageAlt: "contact us phone service",
authorName: "Caribbean Flair Team",
authorAvatar: "http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg",
date: "(239) 785-0423",
onBlogClick: null,
},
{
id: "visit-today",
category: "Island Experience",
title: "Visit Our Food Truck Today",
excerpt: "Experience the authentic Caribbean vibe. From the moment you approach our vibrant trailer, you'll feel the island warmth and passion in every detail.",
imageSrc: "http://img.b2bpic.net/free-photo/summer-label-collectio_23-2148160410.jpg",
imageAlt: "vibrant Caribbean Flair trailer",
authorName: "Caribbean Flair Team",
authorAvatar: "http://img.b2bpic.net/free-vector/colorful-avatars_23-2147502919.jpg",
date: "Always Welcome",
onBlogClick: null,
},
]}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=7"
imageAlt="red food trailer caribbean palm tree evening"
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair"
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
columns={footerColumns}

View File

@@ -3,12 +3,15 @@
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 ProductCardFour from "@/components/sections/product/ProductCardFour";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Flame, Zap, TrendingUp } from "lucide-react";
import { Award, Zap } from "lucide-react";
import { useState } from "react";
export default function MenuPage() {
const [activeCategory, setActiveCategory] = useState("mains");
const navItems = [
{ name: "Home", id: "home" },
{ name: "Menu", id: "menu" },
@@ -20,8 +23,7 @@ export default function MenuPage() {
const footerColumns = [
{
title: "Quick Links",
items: [
title: "Quick Links", items: [
{ label: "Home", href: "/" },
{ label: "Menu", href: "/menu" },
{ label: "Gallery", href: "/" },
@@ -29,8 +31,7 @@ export default function MenuPage() {
],
},
{
title: "Order & Contact",
items: [
title: "Order & Contact", items: [
{ label: "Order Online", href: "/" },
{ label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/" },
@@ -38,17 +39,15 @@ export default function MenuPage() {
],
},
{
title: "Connect With Us",
items: [
title: "Connect With Us", items: [
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
{ label: "About Us", href: "/" },
{ label: "About Us", href: "/about" },
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
],
},
{
title: "Located In",
items: [
title: "Located In", items: [
{ label: "801 Leeland Heights Blvd W", href: "/" },
{ label: "Lehigh Acres, FL 33936", href: "/" },
{ label: "Open Until 9PM", href: "/" },
@@ -57,6 +56,56 @@ export default function MenuPage() {
},
];
const menuItems = {
mains: [
{
id: "jerk-chicken", name: "Jerk Chicken Platter", price: "$15.95", variant: "Full Rack", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg", imageAlt: "Jerk chicken platter"},
{
id: "curry-goat", name: "Curry Goat Platter", price: "$17.95", variant: "Premium Cut", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-wha24yfi.jpg", imageAlt: "Curry goat platter"},
{
id: "jerk-pork", name: "Jerk Pork Platter", price: "$16.95", variant: "Tender Cut", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-qcfdeh7f.jpg", imageAlt: "Jerk pork platter"},
{
id: "escovitch-fish", name: "Escovitch Fish", price: "$18.95", variant: "Fresh Daily", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-dk53z92a.jpg", imageAlt: "Escovitch fish"},
],
sandwiches: [
{
id: "jerk-chicken-sandwich", name: "Jerk Chicken Sandwich", price: "$11.95", variant: "On Coco Bread", imageSrc: "http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=1", imageAlt: "Jerk chicken sandwich"},
{
id: "curry-shrimp-sandwich", name: "Curry Shrimp Sandwich", price: "$12.95", variant: "Loaded", imageSrc: "http://img.b2bpic.net/free-photo/from-shrimps-batter-with-red-rice-greens-white-plate_176474-2654.jpg?_wi=1", imageAlt: "Curry shrimp sandwich"},
{
id: "ackee-saltfish-sandwich", name: "Ackee & Saltfish Sandwich", price: "$10.95", variant: "Traditional", imageSrc: "http://img.b2bpic.net/free-photo/chicken-nuggets-served-with-french-fries-sauces_140725-5759.jpg?_wi=1", imageAlt: "Ackee and saltfish sandwich"},
],
sides: [
{
id: "rice-peas", name: "Rice & Peas", price: "$3.95", variant: "Island Classic", imageSrc: "http://img.b2bpic.net/free-photo/rice-dish-with-sauce-near-spices_23-2147894777.jpg?_wi=1", imageAlt: "Rice and peas"},
{
id: "mac-cheese", name: "Creamy Mac & Cheese", price: "$4.95", variant: "Comfort Classic", imageSrc: "http://img.b2bpic.net/free-photo/delicious-food-presentation_23-2151914003.jpg?_wi=1", imageAlt: "Creamy mac and cheese"},
{
id: "festival-dumplings", name: "Festival Dumplings", price: "$3.50", variant: "6 Pieces", imageSrc: "http://img.b2bpic.net/free-photo/deep-fried-samosas-rustic-crockery-plate-generated-by-ai_188544-41080.jpg?_wi=1", imageAlt: "Festival dumplings"},
{
id: "tropical-slaw", name: "Tropical Slaw", price: "$2.95", variant: "Fresh Daily", imageSrc: "http://img.b2bpic.net/free-photo/grilled-chicken-served-with-aubergine-lemon-parsley_140725-1554.jpg?_wi=1", imageAlt: "Tropical slaw"},
],
drinks: [
{
id: "ginger-beer", name: "Island Ginger Beer", price: "$3.50", variant: "Refreshing", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=1", imageAlt: "Ginger beer"},
{
id: "sorrel-punch", name: "Sorrel Punch", price: "$3.95", variant: "Seasonal", imageSrc: "http://img.b2bpic.net/free-photo/couple-enjoying-spending-good-time-together-while-having-date-restaurant_58466-16035.jpg?_wi=1", imageAlt: "Sorrel punch"},
{
id: "jamaica-juice", name: "Jamaica Juice Special", price: "$4.50", variant: "House Blend", imageSrc: "http://img.b2bpic.net/free-photo/sideways-shot-attractive-curly-woman-has-happy-expression-enjoys-electronic-song-modern-headphones-has-recreation-time-reads-text-message-cell-phone_273609-3485.jpg?_wi=1", imageAlt: "Jamaica juice special"},
],
specials: [
{
id: "conch-fritters", name: "Conch Fritters Combo", price: "$12.95", variant: "6 Pieces", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-y2tu4f81.jpg", imageAlt: "Conch fritters combo"},
{
id: "curry-shrimp", name: "Curry Shrimp Platter", price: "$16.95", variant: "Fresh Daily", imageSrc: "http://img.b2bpic.net/free-photo/friends-eating-barbecue_23-2148733607.jpg?_wi=1", imageAlt: "Curry shrimp platter"},
{
id: "family-bundle", name: "Family Island Bundle", price: "$49.95", variant: "Serves 4", imageSrc: "http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271905.jpg?_wi=1", imageAlt: "Family island bundle"},
],
};
const categoryLabels = {
mains: "Mains", sandwiches: "Sandwiches", sides: "Sides", drinks: "Drinks", specials: "Specials"};
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
@@ -76,134 +125,113 @@ export default function MenuPage() {
brandName="Caribbean Flair"
navItems={navItems}
button={{
text: "Order Now",
href: "/menu",
}}
text: "Order Now", href: "/menu"}}
/>
</div>
{/* Full Menu Section */}
<div id="full-menu" data-section="full-menu">
<ProductCardFour
title="Complete Island Menu"
description="Explore our full range of authentic Caribbean dishes, from mains to sides. Every item is prepared fresh to order with premium island ingredients."
tag="All Dishes"
tagIcon={Flame}
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroSplit
title="Explore Our Island Menu"
description="Authentic Caribbean flavors crafted fresh daily. Browse our full selection of signature dishes, fresh sides, and island refreshments."
tag="Interactive Menu"
tagIcon={Award}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
buttons={[
{
text: "Back to Home",
href: "/",
},
text: "Order Online Now", href: "#"},
]}
buttonAnimation="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
animationType="slide-up"
useInvertedBackground={false}
products={[
{
id: "jerk-chicken",
name: "Jerk Chicken Platter",
price: "$15.95",
variant: "Full Rack",
imageSrc:
"http://img.b2bpic.net/free-photo/from-shrimps-batter-with-red-rice-greens-white-plate_176474-2654.jpg?_wi=2",
imageAlt: "Jerk chicken grilled on foil with spices",
},
{
id: "curry-shrimp",
name: "Curry Shrimp Platter",
price: "$16.95",
variant: "Fresh Daily",
imageSrc:
"http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=2",
imageAlt: "Curry shrimp over rice and peas",
},
{
id: "conch-fritters",
name: "Conch Fritters Combo",
price: "$12.95",
variant: "6 Pieces",
imageSrc:
"http://img.b2bpic.net/free-photo/chicken-nuggets-served-with-french-fries-sauces_140725-5759.jpg?_wi=2",
imageAlt: "Golden conch fritters with dipping sauce",
},
{
id: "jerk-pork",
name: "Jerk Pork Platter",
price: "$16.95",
variant: "Premium Cut",
imageSrc:
"http://img.b2bpic.net/free-photo/hot-spicy-grilled-pork-salad-with-berry-rice_1339-6325.jpg?_wi=2",
imageAlt: "Jerk pork platter with rice and tropical slaw",
},
{
id: "curry-goat",
name: "Curry Goat Stew",
price: "$17.95",
variant: "Traditional Recipe",
imageSrc:
"http://img.b2bpic.net/free-photo/rice-dish-with-sauce-near-spices_23-2147894777.jpg?_wi=2",
imageAlt: "Rich curry goat served over rice and peas",
},
{
id: "festival-sides",
name: "Festival & Slaw Combo",
price: "$8.95",
variant: "Sides Bundle",
imageSrc:
"http://img.b2bpic.net/free-photo/deep-fried-samosas-rustic-crockery-plate-generated-by-ai_188544-41080.jpg?_wi=2",
imageAlt: "Festival dumplings with tropical slaw and mac and cheese",
},
]}
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg"
imageAlt="Caribbean Flair Menu"
mediaAnimation="opacity"
imagePosition="right"
ariaLabel="Menu hero section"
/>
</div>
{/* Order CTA Section */}
<div id="order-cta" data-section="order-cta">
<FeatureCardTen
title="Ready to Order?"
description="Browse our full menu above and place your order now. Call us or order online for fast, hot, and fresh Caribbean island cuisine delivered straight to your door."
tag="Quick Order"
{/* Interactive Menu with Tabs */}
<div id="menu-items" data-section="menu-items" className="w-full py-16 px-4">
<div className="max-w-6xl mx-auto">
{/* Category Tabs */}
<div className="flex flex-wrap gap-3 justify-center mb-12">
{Object.entries(categoryLabels).map(([key, label]) => (
<button
key={key}
onClick={() => setActiveCategory(key)}
className={`px-6 py-3 rounded-full font-semibold transition-all ${
activeCategory === key
? "bg-[var(--primary-cta)] text-white shadow-lg"
: "bg-[var(--card)] text-[var(--foreground)] hover:bg-[var(--background-accent)]"
}`}
aria-pressed={activeCategory === key}
>
{label}
</button>
))}
</div>
{/* Menu Items Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{menuItems[activeCategory as keyof typeof menuItems]?.map((item) => (
<div
key={item.id}
className="bg-[var(--card)] rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow cursor-pointer group"
>
<div className="relative overflow-hidden h-48 bg-[var(--background-accent)]">
<img
src={item.imageSrc}
alt={item.imageAlt}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
</div>
<div className="p-4">
<h3 className="text-lg font-bold text-[var(--foreground)] mb-1">
{item.name}
</h3>
<p className="text-sm text-[var(--foreground)] opacity-70 mb-3">
{item.variant}
</p>
<div className="flex justify-between items-center">
<span className="text-2xl font-bold text-[var(--primary-cta)]">
{item.price}
</span>
<button className="bg-[var(--primary-cta)] text-white px-4 py-2 rounded-lg hover:opacity-90 transition-opacity">
Add
</button>
</div>
</div>
</div>
))}
</div>
</div>
</div>
{/* Featured Products */}
<div id="featured-menu" data-section="featured-menu">
<ProductCardFour
title="Customer Favorites"
description="Our most ordered dishes that keep customers coming back for authentic Caribbean excellence."
tag="Top Picks"
tagIcon={Zap}
tagAnimation="slide-up"
buttons={[
{
text: "Order Online",
href: "/menu",
},
{
text: "Call (239) 785-0423",
href: "tel:2397850423",
},
text: "Browse Full Menu", href: "#menu-items"},
]}
buttonAnimation="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
useInvertedBackground={true}
features={[
useInvertedBackground={false}
products={[
{
id: "order-simple",
title: "Simple & Fast",
description:
"Order online or call. Your meal is prepared fresh and ready for pickup or delivery.",
media: {
imageSrc:
"http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=2",
},
items: [
{
icon: Zap,
text: "Quick service",
},
{
icon: TrendingUp,
text: "Always fresh",
},
],
reverse: false,
},
id: "jerk-chicken", name: "Jerk Chicken Platter", price: "$15.95", variant: "Full Rack", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg", imageAlt: "Jerk chicken platter"},
{
id: "curry-shrimp", name: "Curry Shrimp Platter", price: "$16.95", variant: "Fresh Daily", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-wha24yfi.jpg", imageAlt: "Curry shrimp platter"},
{
id: "conch-fritters", name: "Conch Fritters Combo", price: "$12.95", variant: "6 Pieces", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-y2tu4f81.jpg", imageAlt: "Conch fritters combo"},
]}
/>
</div>
@@ -211,7 +239,7 @@ export default function MenuPage() {
{/* Footer */}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=2"
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair"
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"

View File

@@ -0,0 +1,420 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import {
ShoppingCart,
CreditCard,
Apple,
DollarSign,
CheckCircle,
Zap,
TrendingUp,
Facebook,
} from "lucide-react";
import { useState } from "react";
export default function OrderOnlinePage() {
const [cartItems, setCartItems] = useState<Array<{ id: string; name: string; price: number; quantity: number }>>([
{ id: "jerk-chicken", name: "Jerk Chicken Platter", price: 15.95, quantity: 1 },
]);
const [showCheckout, setShowCheckout] = useState(false);
const [paymentMethod, setPaymentMethod] = useState<"card" | "apple-pay" | "paypal" | null>(null);
const [orderConfirmed, setOrderConfirmed] = useState(false);
const navItems = [
{ name: "Home", id: "/" },
{ name: "Order Online", id: "/order-online" },
{ name: "Contact", id: "/contact" },
{ name: "Gallery", id: "/" },
{ name: "Reviews", id: "/" },
{ name: "Locations", id: "/" },
];
const footerColumns = [
{
title: "Quick Links", items: [
{ label: "Home", href: "/" },
{ label: "Order Online", href: "/order-online" },
{ label: "Gallery", href: "/" },
{ label: "Reviews", href: "/" },
],
},
{
title: "Order & Contact", items: [
{ label: "Order Online", href: "/order-online" },
{ label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect With Us", items: [
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
{ label: "About Us", href: "/" },
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
],
},
{
title: "Located In", items: [
{ label: "801 Leeland Heights Blvd W", href: "/" },
{ label: "Lehigh Acres, FL 33936", href: "/" },
{ label: "Open Until 9PM", href: "/" },
{ label: "Delivery Available", href: "/" },
],
},
];
const cartTotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
const handleAddToCart = (productName: string, price: number) => {
const existingItem = cartItems.find((item) => item.name === productName);
if (existingItem) {
setCartItems(
cartItems.map((item) =>
item.id === existingItem.id ? { ...item, quantity: item.quantity + 1 } : item
)
);
} else {
setCartItems([
...cartItems,
{ id: Date.now().toString(), name: productName, price, quantity: 1 },
]);
}
};
const handleRemoveFromCart = (id: string) => {
setCartItems(cartItems.filter((item) => item.id !== id));
};
const handleCheckout = () => {
setShowCheckout(true);
};
const handlePaymentSubmit = (method: "card" | "apple-pay" | "paypal") => {
setPaymentMethod(method);
// Simulate payment processing
setTimeout(() => {
setOrderConfirmed(true);
// In a real app, send receipt via email here
}, 1500);
};
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="compact"
sizing="medium"
background="none"
cardStyle="inset"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Caribbean Flair"
navItems={navItems}
button={{
text: "Contact Us", href: "/contact"}}
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroSplit
title="Order Your Island Feast Online"
description="Browse our authentic Caribbean menu, add items to your cart, and securely checkout. Meals are prepared fresh to order and ready for pickup or delivery."
tag="Fast & Secure Checkout"
tagIcon={ShoppingCart}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
buttons={[
{
text: "View Menu", href: "#menu"},
]}
buttonAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg"
imageAlt="Order Online - Caribbean Flair Menu"
mediaAnimation="opacity"
imagePosition="right"
ariaLabel="Order Online hero section"
/>
</div>
{/* Cart & Checkout Section */}
<div id="cart-checkout" data-section="cart-checkout" className="py-16 px-4">
<div className="max-w-6xl mx-auto">
{!orderConfirmed ? (
<div className="grid md:grid-cols-3 gap-8">
{/* Menu Items */}
<div className="md:col-span-2">
<h2 className="text-3xl font-bold mb-8">Select Your Items</h2>
<div className="space-y-4">
{[
{ id: "jerk-chicken", name: "Jerk Chicken Platter", price: 15.95, desc: "Full Rack" },
{ id: "curry-shrimp", name: "Curry Shrimp Platter", price: 16.95, desc: "Fresh Daily" },
{ id: "conch-fritters", name: "Conch Fritters Combo", price: 12.95, desc: "6 Pieces" },
{ id: "escovitch-fish", name: "Escovitch Fish", price: 17.95, desc: "Island Tradition" },
{ id: "curry-goat", name: "Curry Goat", price: 16.95, desc: "Community Favorite" },
{ id: "festival-sides", name: "Festival & Slaw", price: 8.95, desc: "Must Try" },
].map((item) => (
<div
key={item.id}
className="flex justify-between items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition"
>
<div>
<p className="font-semibold">{item.name}</p>
<p className="text-sm text-gray-600">{item.desc}</p>
</div>
<div className="flex items-center gap-4">
<p className="font-bold">${item.price.toFixed(2)}</p>
<button
onClick={() => handleAddToCart(item.name, item.price)}
className="px-4 py-2 bg-primary-cta text-white rounded-lg hover:opacity-90 transition"
>
Add
</button>
</div>
</div>
))}
</div>
</div>
{/* Cart Summary */}
<div className="md:col-span-1">
<div className="border border-gray-200 rounded-lg p-6 sticky top-20">
<h3 className="text-xl font-bold mb-4">Your Cart</h3>
<div className="space-y-3 mb-6">
{cartItems.map((item) => (
<div key={item.id} className="flex justify-between items-start">
<div className="flex-1">
<p className="text-sm font-medium">{item.name}</p>
<p className="text-xs text-gray-500">Qty: {item.quantity}</p>
</div>
<div className="text-right">
<p className="text-sm font-semibold">${(item.price * item.quantity).toFixed(2)}</p>
<button
onClick={() => handleRemoveFromCart(item.id)}
className="text-xs text-red-500 hover:underline"
>
Remove
</button>
</div>
</div>
))}
</div>
<div className="border-t pt-4">
<div className="flex justify-between font-bold text-lg mb-4">
<span>Total:</span>
<span>${cartTotal.toFixed(2)}</span>
</div>
<button
onClick={handleCheckout}
disabled={cartItems.length === 0}
className="w-full px-4 py-3 bg-primary-cta text-white rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 transition"
>
Proceed to Checkout
</button>
</div>
</div>
</div>
</div>
) : null}
{/* Checkout Form */}
{showCheckout && !orderConfirmed && (
<div className="max-w-2xl mx-auto">
<h2 className="text-3xl font-bold mb-8">Secure Checkout</h2>
{/* Payment Methods */}
<div className="mb-8">
<h3 className="text-xl font-semibold mb-4">Select Payment Method</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<button
onClick={() => handlePaymentSubmit("card")}
className="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-cta hover:bg-blue-50 transition flex items-center justify-center gap-2"
>
<CreditCard size={24} />
<span>Credit Card</span>
</button>
<button
onClick={() => handlePaymentSubmit("apple-pay")}
className="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-cta hover:bg-blue-50 transition flex items-center justify-center gap-2"
>
<Apple size={24} />
<span>Apple Pay</span>
</button>
<button
onClick={() => handlePaymentSubmit("paypal")}
className="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-cta hover:bg-blue-50 transition flex items-center justify-center gap-2"
>
<DollarSign size={24} />
<span>PayPal</span>
</button>
</div>
</div>
{/* Credit Card Form */}
{paymentMethod === "card" && (
<div className="space-y-4 mb-8">
<h3 className="text-lg font-semibold">Credit Card Details</h3>
<input
type="text"
placeholder="Cardholder Name"
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
/>
<input
type="text"
placeholder="Card Number (16 digits)"
maxLength={16}
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
/>
<div className="grid grid-cols-2 gap-4">
<input
type="text"
placeholder="MM/YY"
className="px-4 py-2 border border-gray-300 rounded-lg"
/>
<input
type="text"
placeholder="CVV"
maxLength={3}
className="px-4 py-2 border border-gray-300 rounded-lg"
/>
</div>
</div>
)}
{/* Billing Address */}
<div className="space-y-4 mb-8">
<h3 className="text-lg font-semibold">Billing Address</h3>
<input
type="text"
placeholder="Full Address"
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
/>
<input
type="email"
placeholder="Email Address"
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
/>
<input
type="tel"
placeholder="Phone Number"
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
/>
</div>
{/* Order Summary */}
<div className="bg-gray-50 p-6 rounded-lg mb-6">
<h3 className="font-semibold mb-3">Order Summary</h3>
{cartItems.map((item) => (
<div key={item.id} className="flex justify-between text-sm mb-2">
<span>{item.name} x{item.quantity}</span>
<span>${(item.price * item.quantity).toFixed(2)}</span>
</div>
))}
<div className="border-t pt-3 mt-3 flex justify-between font-bold">
<span>Total:</span>
<span>${cartTotal.toFixed(2)}</span>
</div>
</div>
<button
onClick={() => handlePaymentSubmit(paymentMethod || "card")}
className="w-full px-6 py-3 bg-primary-cta text-white rounded-lg font-semibold hover:opacity-90 transition"
>
Complete Purchase
</button>
</div>
)}
{/* Order Confirmation */}
{orderConfirmed && (
<div className="max-w-2xl mx-auto text-center py-12">
<div className="mb-6">
<CheckCircle size={64} className="mx-auto text-green-500 mb-4" />
</div>
<h2 className="text-3xl font-bold mb-4">Order Confirmed!</h2>
<p className="text-lg text-gray-600 mb-6">
Your order has been successfully placed. A receipt has been sent to your email.
</p>
<div className="bg-gray-50 p-6 rounded-lg mb-6">
<h3 className="font-semibold mb-3">Order Details</h3>
{cartItems.map((item) => (
<div key={item.id} className="flex justify-between text-sm mb-2">
<span>{item.name} x{item.quantity}</span>
<span>${(item.price * item.quantity).toFixed(2)}</span>
</div>
))}
<div className="border-t pt-3 mt-3 flex justify-between font-bold text-lg">
<span>Total:</span>
<span>${cartTotal.toFixed(2)}</span>
</div>
</div>
<p className="text-gray-600 mb-4">Payment Method: {paymentMethod}</p>
<p className="text-gray-600 mb-8">Your meal will be ready for pickup in approximately 15-20 minutes.</p>
<Link
href="/"
className="px-6 py-3 bg-primary-cta text-white rounded-lg font-semibold hover:opacity-90 transition inline-block"
>
Return Home
</Link>
</div>
)}
</div>
</div>
{/* Features Section */}
<div id="order-features" data-section="order-features">
<FeatureCardTen
title="Why Order with Caribbean Flair?"
description="Experience seamless online ordering with secure payment, fast preparation, and delicious authentic Caribbean meals delivered right to you."
tag="Premium Experience"
tagIcon={Zap}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={true}
features={[
{
id: "secure-payment", title: "Secure Payment Processing", description:
"We use industry-leading encryption for all transactions. Your payment information is always protected.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-wha24yfi.jpg"},
items: [
{
icon: CreditCard,
text: "Multiple Payment Options"},
{
icon: CheckCircle,
text: "Encrypted Transactions"},
],
reverse: false,
},
]}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair"
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}

View File

@@ -33,8 +33,7 @@ export default function HomePage() {
const footerColumns = [
{
title: "Quick Links",
items: [
title: "Quick Links", items: [
{ label: "Home", href: "/" },
{ label: "Menu", href: "/menu" },
{ label: "Gallery", href: "/" },
@@ -42,8 +41,7 @@ export default function HomePage() {
],
},
{
title: "Order & Contact",
items: [
title: "Order & Contact", items: [
{ label: "Order Online", href: "/" },
{ label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/" },
@@ -51,8 +49,7 @@ export default function HomePage() {
],
},
{
title: "Connect With Us",
items: [
title: "Connect With Us", items: [
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
{ label: "About Us", href: "/" },
{ label: "Privacy Policy", href: "/" },
@@ -60,8 +57,7 @@ export default function HomePage() {
],
},
{
title: "Located In",
items: [
title: "Located In", items: [
{ label: "801 Leeland Heights Blvd W", href: "/" },
{ label: "Lehigh Acres, FL 33936", href: "/" },
{ label: "Open Until 9PM", href: "/" },
@@ -89,9 +85,7 @@ export default function HomePage() {
brandName="Caribbean Flair"
navItems={navItems}
button={{
text: "Order Now",
href: "/menu",
}}
text: "Order Now", href: "/menu"}}
/>
</div>
@@ -106,13 +100,9 @@ export default function HomePage() {
background={{ variant: "glowing-orb" }}
buttons={[
{
text: "Order Online Now",
href: "/menu",
},
text: "Order Online Now", href: "/menu"},
{
text: "View Full Menu",
href: "/menu",
},
text: "View Full Menu", href: "/menu"},
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg"
@@ -133,9 +123,7 @@ export default function HomePage() {
tagAnimation="slide-up"
buttons={[
{
text: "Explore Full Menu",
href: "/menu",
},
text: "Explore Full Menu", href: "/menu"},
]}
buttonAnimation="slide-up"
textboxLayout="default"
@@ -144,32 +132,14 @@ export default function HomePage() {
useInvertedBackground={false}
products={[
{
id: "jerk-chicken",
name: "Jerk Chicken Platter",
price: "$15.95",
variant: "Full Rack",
imageSrc:
"http://img.b2bpic.net/free-photo/from-shrimps-batter-with-red-rice-greens-white-plate_176474-2654.jpg?_wi=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"},
{
id: "curry-shrimp",
name: "Curry Shrimp Platter",
price: "$16.95",
variant: "Fresh Daily",
imageSrc:
"http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=1",
imageAlt: "Curry shrimp over rice and peas",
},
id: "curry-shrimp", name: "Curry Shrimp Platter", price: "$16.95", variant: "Fresh Daily", imageSrc:
"http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=1", imageAlt: "Curry shrimp over rice and peas"},
{
id: "conch-fritters",
name: "Conch Fritters Combo",
price: "$12.95",
variant: "6 Pieces",
imageSrc:
"http://img.b2bpic.net/free-photo/chicken-nuggets-served-with-french-fries-sauces_140725-5759.jpg?_wi=1",
imageAlt: "Golden conch fritters with dipping sauce",
},
id: "conch-fritters", name: "Conch Fritters Combo", price: "$12.95", variant: "6 Pieces", imageSrc:
"http://img.b2bpic.net/free-photo/chicken-nuggets-served-with-french-fries-sauces_140725-5759.jpg?_wi=1", imageAlt: "Golden conch fritters with dipping sauce"},
]}
/>
</div>
@@ -187,90 +157,36 @@ export default function HomePage() {
useInvertedBackground={false}
blogs={[
{
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:
"http://img.b2bpic.net/free-photo/hot-spicy-grilled-pork-salad-with-berry-rice_1339-6325.jpg?_wi=1",
imageAlt: "Jerk pork platter with rice and tropical slaw",
authorName: "Caribbean Flair Team",
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: "Fresh Daily",
},
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:
"http://img.b2bpic.net/free-photo/hot-spicy-grilled-pork-salad-with-berry-rice_1339-6325.jpg?_wi=1", imageAlt: "Jerk pork platter with rice and tropical slaw", authorName: "Caribbean Flair Team", 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: "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:
"http://img.b2bpic.net/free-photo/rice-dish-with-sauce-near-spices_23-2147894777.jpg?_wi=1",
imageAlt: "Rich curry goat served over rice and peas",
authorName: "Caribbean Flair Team",
authorAvatar:
"http://img.b2bpic.net/free-vector/colorful-avatars_23-2147502919.jpg",
date: "Popular Choice",
},
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:
"http://img.b2bpic.net/free-photo/rice-dish-with-sauce-near-spices_23-2147894777.jpg?_wi=1", imageAlt: "Rich curry goat served over rice and peas", authorName: "Caribbean Flair Team", authorAvatar:
"http://img.b2bpic.net/free-vector/colorful-avatars_23-2147502919.jpg", 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:
"http://img.b2bpic.net/free-photo/deep-fried-samosas-rustic-crockery-plate-generated-by-ai_188544-41080.jpg?_wi=1",
imageAlt:
"Festival dumplings with tropical slaw and mac and cheese",
authorName: "Caribbean Flair Team",
authorAvatar:
"http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",
date: "Must Try",
},
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:
"http://img.b2bpic.net/free-photo/deep-fried-samosas-rustic-crockery-plate-generated-by-ai_188544-41080.jpg?_wi=1", imageAlt:
"Festival dumplings with tropical slaw and mac and cheese", authorName: "Caribbean Flair Team", authorAvatar:
"http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg", 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:
"http://img.b2bpic.net/free-photo/grilled-chicken-served-with-aubergine-lemon-parsley_140725-1554.jpg?_wi=1",
imageAlt: "Escovitch fish with pickled vegetables and lime",
authorName: "Caribbean Flair Team",
authorAvatar:
"http://img.b2bpic.net/free-photo/young-male-holding-hands-pockets-white-shirt-jacket-looking-elegant-front-view_176474-99655.jpg",
date: "Customer Favorite",
},
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:
"http://img.b2bpic.net/free-photo/grilled-chicken-served-with-aubergine-lemon-parsley_140725-1554.jpg?_wi=1", imageAlt: "Escovitch fish with pickled vegetables and lime", authorName: "Caribbean Flair Team", authorAvatar:
"http://img.b2bpic.net/free-photo/young-male-holding-hands-pockets-white-shirt-jacket-looking-elegant-front-view_176474-99655.jpg", 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:
"http://img.b2bpic.net/free-photo/delicious-food-presentation_23-2151914003.jpg?_wi=1",
imageAlt: "Creamy mac and cheese side dish",
authorName: "Caribbean Flair Team",
authorAvatar:
"http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg",
date: "Comfort Classic",
},
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:
"http://img.b2bpic.net/free-photo/delicious-food-presentation_23-2151914003.jpg?_wi=1", imageAlt: "Creamy mac and cheese side dish", authorName: "Caribbean Flair Team", authorAvatar:
"http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg", 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:
"http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271905.jpg?_wi=1",
imageAlt: "Chef grilling jerk meats on foil with smoke",
authorName: "Caribbean Flair Team",
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: "Daily Special",
},
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:
"http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271905.jpg?_wi=1", imageAlt: "Chef grilling jerk meats on foil with smoke", authorName: "Caribbean Flair Team", 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: "Daily Special"},
]}
/>
</div>
@@ -289,71 +205,35 @@ export default function HomePage() {
showRating={true}
testimonials={[
{
id: "review-1",
name: "Sarah Johnson",
handle: "@sarahjohn2024",
testimonial:
"Every dish packed with authentic island flavor! Teria and Deb truly know how to deliver Caribbean excellence.",
rating: 5,
id: "review-1", name: "Sarah Johnson", handle: "@sarahjohn2024", testimonial:
"Every dish packed with authentic island flavor! Teria and Deb truly know how to deliver Caribbean excellence.", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/young-woman-eating-delicious-tiramisu-cafe_1303-25270.jpg?_wi=1",
imageAlt: "Sarah Johnson smiling",
},
"http://img.b2bpic.net/free-photo/young-woman-eating-delicious-tiramisu-cafe_1303-25270.jpg?_wi=1", imageAlt: "Sarah Johnson smiling"},
{
id: "review-2",
name: "Michael Chen",
handle: "@mikeflavorseek",
testimonial:
"Jerk pork did not disappoint! Best food truck in Lehigh Acres. Fresh, authentic, and made with real passion.",
rating: 5,
id: "review-2", name: "Michael Chen", handle: "@mikeflavorseek", testimonial:
"Jerk pork did not disappoint! Best food truck in Lehigh Acres. Fresh, authentic, and made with real passion.", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/couple-enjoying-spending-good-time-together-while-having-date-restaurant_58466-16035.jpg?_wi=1",
imageAlt: "Michael Chen enjoying Caribbean Flair",
},
"http://img.b2bpic.net/free-photo/couple-enjoying-spending-good-time-together-while-having-date-restaurant_58466-16035.jpg?_wi=1", imageAlt: "Michael Chen enjoying Caribbean Flair"},
{
id: "review-3",
name: "Amanda Davis",
handle: "@amandataste",
testimonial:
"The curry shrimp is absolutely incredible! You can taste the love in every bite. Supporting Black-owned, women-owned businesses never tasted so good.",
rating: 5,
id: "review-3", name: "Amanda Davis", handle: "@amandataste", testimonial:
"The curry shrimp is absolutely incredible! You can taste the love in every bite. Supporting Black-owned, women-owned businesses never tasted so good.", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/sideways-shot-attractive-curly-woman-has-happy-expression-enjoys-electronic-song-modern-headphones-has-recreation-time-reads-text-message-cell-phone_273609-3485.jpg?_wi=1",
imageAlt: "Amanda Davis with Caribbean Flair meal",
},
"http://img.b2bpic.net/free-photo/sideways-shot-attractive-curly-woman-has-happy-expression-enjoys-electronic-song-modern-headphones-has-recreation-time-reads-text-message-cell-phone_273609-3485.jpg?_wi=1", imageAlt: "Amanda Davis with Caribbean Flair meal"},
{
id: "review-4",
name: "David Martinez",
handle: "@davidsflavorquests",
testimonial:
"Finally, real Caribbean food in Lehigh Acres! The menu, the quality, the service—everything is top-tier. This is my new favorite spot.",
rating: 5,
id: "review-4", name: "David Martinez", handle: "@davidsflavorquests", testimonial:
"Finally, real Caribbean food in Lehigh Acres! The menu, the quality, the service—everything is top-tier. This is my new favorite spot.", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/crazy-dealer-happy-expression_1194-4005.jpg?_wi=1",
imageAlt: "David Martinez at Caribbean Flair",
},
"http://img.b2bpic.net/free-photo/crazy-dealer-happy-expression_1194-4005.jpg?_wi=1", imageAlt: "David Martinez at Caribbean Flair"},
{
id: "review-5",
name: "Jessica Williams",
handle: "@jessicaeats_local",
testimonial:
"Conch fritters are crispy heaven! The whole experience feels premium yet so authentic. Teria and Deb are changing the food game.",
rating: 5,
id: "review-5", name: "Jessica Williams", handle: "@jessicaeats_local", testimonial:
"Conch fritters are crispy heaven! The whole experience feels premium yet so authentic. Teria and Deb are changing the food game.", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/friends-eating-barbecue_23-2148733607.jpg?_wi=1",
imageAlt: "Jessica Williams enjoying meal",
},
"http://img.b2bpic.net/free-photo/friends-eating-barbecue_23-2148733607.jpg?_wi=1", imageAlt: "Jessica Williams enjoying meal"},
{
id: "review-6",
name: "Robert Thompson",
handle: "@robfeeds",
testimonial:
"Island fusion done right. The quality of ingredients and cooking technique is professional-level. Worth every penny and the drive. Highly recommend!",
rating: 5,
id: "review-6", name: "Robert Thompson", handle: "@robfeeds", testimonial:
"Island fusion done right. The quality of ingredients and cooking technique is professional-level. Worth every penny and the drive. Highly recommend!", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/woman-with-thumbs-up_1149-1163.jpg?_wi=1",
imageAlt: "Robert Thompson thumbs up",
},
"http://img.b2bpic.net/free-photo/woman-with-thumbs-up_1149-1163.jpg?_wi=1", imageAlt: "Robert Thompson thumbs up"},
]}
/>
</div>
@@ -372,35 +252,21 @@ export default function HomePage() {
gridVariant="two-columns-alternating-heights"
members={[
{
id: "teria-bryant",
name: "Teria Bryant",
role: "Founder & Head Chef",
description:
"Teria brings 15+ years of Caribbean culinary expertise and authentic island passion to every dish. Her vision transformed Caribbean Flair from a dream into a premium dining destination serving Lehigh Acres with pride.",
imageSrc:
"http://img.b2bpic.net/free-photo/medium-shot-professional-chef-working_23-2151232185.jpg?_wi=1",
imageAlt: "Teria Bryant, founder of Caribbean Flair",
socialLinks: [
id: "teria-bryant", name: "Teria Bryant", role: "Founder & Head Chef", description:
"Teria brings 15+ years of Caribbean culinary expertise and authentic island passion to every dish. Her vision transformed Caribbean Flair from a dream into a premium dining destination serving Lehigh Acres with pride.", imageSrc:
"http://img.b2bpic.net/free-photo/medium-shot-professional-chef-working_23-2151232185.jpg?_wi=1", imageAlt: "Teria Bryant, founder of Caribbean Flair", socialLinks: [
{
icon: Facebook,
url: "https://facebook.com/caribbeanflair",
},
url: "https://facebook.com/caribbeanflair"},
],
},
{
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, she's building a thriving Black- and women-owned business that celebrates Caribbean culture and community impact.",
imageSrc:
"http://img.b2bpic.net/free-photo/successful-business-woman-blue-suit_158595-5024.jpg?_wi=1",
imageAlt: "Deb Farrell, co-owner of Caribbean Flair",
socialLinks: [
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, she's building a thriving Black- and women-owned business that celebrates Caribbean culture and community impact.", imageSrc:
"http://img.b2bpic.net/free-photo/successful-business-woman-blue-suit_158595-5024.jpg?_wi=1", imageAlt: "Deb Farrell, co-owner of Caribbean Flair", socialLinks: [
{
icon: Facebook,
url: "https://facebook.com/caribbeanflair",
},
url: "https://facebook.com/caribbeanflair"},
],
},
]}
@@ -417,13 +283,9 @@ export default function HomePage() {
tagAnimation="slide-up"
buttons={[
{
text: "Order Online Now",
href: "/menu",
},
text: "Order Online Now", href: "/menu"},
{
text: "Call (239) 785-0423",
href: "tel:2397850423",
},
text: "Call (239) 785-0423", href: "tel:2397850423"},
]}
buttonAnimation="slide-up"
textboxLayout="default"
@@ -431,23 +293,17 @@ export default function HomePage() {
useInvertedBackground={true}
features={[
{
id: "fast-delivery",
title: "Fast & Fresh",
description:
"Grilled fresh to order. Your meal arrives hot, delicious, and packed with island flavor.",
media: {
id: "fast-delivery", title: "Fast & Fresh", description:
"Grilled fresh to order. Your meal arrives hot, delicious, and packed with island flavor.", media: {
imageSrc:
"http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=1",
},
"http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=1"},
items: [
{
icon: Zap,
text: "Ready in 15 minutes",
},
text: "Ready in 15 minutes"},
{
icon: TrendingUp,
text: "Peak fresh quality",
},
text: "Peak fresh quality"},
],
reverse: false,
},

View File

@@ -2,11 +2,12 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import Link from "next/link";
import { Star, Zap } from "lucide-react";
import { Star, Heart, Zap, TrendingUp, Award } from "lucide-react";
export default function ReviewsPage() {
const navItems = [
@@ -20,8 +21,7 @@ export default function ReviewsPage() {
const footerColumns = [
{
title: "Quick Links",
items: [
title: "Quick Links", items: [
{ label: "Home", href: "/" },
{ label: "Menu", href: "/menu" },
{ label: "Gallery", href: "/gallery" },
@@ -29,30 +29,27 @@ export default function ReviewsPage() {
],
},
{
title: "Order & Contact",
items: [
{ label: "Order Online", href: "/order" },
title: "Order & Contact", items: [
{ label: "Order Online", href: "/menu" },
{ label: "Call Us", href: "tel:2397850423" },
{ label: "Locations & Hours", href: "/locations" },
{ label: "Contact", href: "/contact" },
{ label: "Contact", href: "/" },
],
},
{
title: "Connect With Us",
items: [
title: "Connect With Us", items: [
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
{ label: "About Us", href: "/about" },
{ label: "Privacy Policy", href: "#privacy" },
{ label: "Terms of Service", href: "#terms" },
{ label: "About Us", href: "/" },
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
],
},
{
title: "Located In",
items: [
{ label: "801 Leeland Heights Blvd W", href: "#map" },
{ label: "Lehigh Acres, FL 33936", href: "#map" },
title: "Located In", items: [
{ label: "801 Leeland Heights Blvd W", href: "/locations" },
{ label: "Lehigh Acres, FL 33936", href: "/locations" },
{ label: "Open Until 9PM", href: "/locations" },
{ label: "Delivery Available", href: "/order" },
{ label: "Delivery Available", href: "/" },
],
},
];
@@ -70,22 +67,72 @@ export default function ReviewsPage() {
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Caribbean Flair"
navItems={navItems}
button={{
text: "Order Now",
href: "/order",
}}
text: "Order Now", href: "/menu"}}
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroSplit
title="Customer Reviews - 5-Star Island Experiences"
description="See what our community says about their authentic Caribbean Flair dining experience. Real stories from real customers who love our island flavors."
tag="Highly Rated"
tagIcon={Star}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
buttons={[
{
text: "Order Online Now", href: "/menu"},
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/friends-eating-barbecue_23-2148733607.jpg?_wi=1"
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
mediaAnimation="opacity"
imagePosition="right"
ariaLabel="Reviews hero section showcasing customer testimonials"
/>
</div>
{/* Review Statistics Section */}
<div id="review-stats" data-section="review-stats">
<MetricCardThree
title="Caribbean Flair by the Numbers"
description="Our commitment to quality and customer satisfaction, reflected in real community feedback."
tag="Community Verified"
tagIcon={Award}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
metrics={[
{
id: "rating", icon: Star,
title: "Average Rating", value: "4.9/5"},
{
id: "reviews", icon: Heart,
title: "Customer Reviews", value: "500+"},
{
id: "satisfaction", icon: Award,
title: "Satisfaction Rate", value: "98%"},
{
id: "returning", icon: TrendingUp,
title: "Returning Customers", value: "85%"},
]}
/>
</div>
{/* Full Testimonials Section */}
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
title="Real Island Flavor Stories"
description="Hear from our community about their authentic Caribbean Flair dining experience."
tag="5-Star Rated"
title="What Our Customers Say"
description="Real five-star reviews from customers who've experienced authentic Caribbean Flair dining."
tag="5-Star Reviews"
tagIcon={Star}
tagAnimation="slide-up"
textboxLayout="default"
@@ -94,102 +141,70 @@ export default function ReviewsPage() {
showRating={true}
testimonials={[
{
id: "review-1",
name: "Sarah Johnson",
handle: "@sarahjohn2024",
testimonial: "Every dish packed with authentic island flavor! Teria and Deb truly know how to deliver Caribbean excellence.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-eating-delicious-tiramisu-cafe_1303-25270.jpg?_wi=2",
imageAlt: "smiling woman enjoying restaurant meal",
},
id: "review-1", name: "Sarah Johnson", handle: "@sarahjohn2024", testimonial:
"Every dish packed with authentic island flavor! Teria and Deb truly know how to deliver Caribbean excellence. I've been five times in the last month alone!", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/young-woman-eating-delicious-tiramisu-cafe_1303-25270.jpg?_wi=1", imageAlt: "Sarah Johnson smiling"},
{
id: "review-2",
name: "Michael Chen",
handle: "@mikeflavorseek",
testimonial: "Jerk pork did not disappoint! Best food truck in Lehigh Acres. Fresh, authentic, and made with real passion.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/couple-enjoying-spending-good-time-together-while-having-date-restaurant_58466-16035.jpg?_wi=2",
imageAlt: "happy man enjoying food truck meal",
},
id: "review-2", name: "Michael Chen", handle: "@mikeflavorseek", testimonial:
"Jerk pork did not disappoint! Best food truck in Lehigh Acres. Fresh, authentic, and made with real passion. This is my go-to spot every Friday!", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/couple-enjoying-spending-good-time-together-while-having-date-restaurant_58466-16035.jpg?_wi=1", imageAlt: "Michael Chen enjoying Caribbean Flair"},
{
id: "review-3",
name: "Amanda Davis",
handle: "@amandataste",
testimonial: "The curry shrimp is absolutely incredible! You can taste the love in every bite. Supporting Black-owned, women-owned businesses never tasted so good.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/sideways-shot-attractive-curly-woman-has-happy-expression-enjoys-electronic-song-modern-headphones-has-recreation-time-reads-text-message-cell-phone_273609-3485.jpg?_wi=2",
imageAlt: "woman smiling holding caribbean food",
},
id: "review-3", name: "Amanda Davis", handle: "@amandataste", testimonial:
"The curry shrimp is absolutely incredible! You can taste the love in every bite. Supporting Black-owned, women-owned businesses never tasted so good. Highly recommend!", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/sideways-shot-attractive-curly-woman-has-happy-expression-enjoys-electronic-song-modern-headphones-has-recreation-time-reads-text-message-cell-phone_273609-3485.jpg?_wi=1", imageAlt: "Amanda Davis with Caribbean Flair meal"},
{
id: "review-4",
name: "David Martinez",
handle: "@davidsflavorquests",
testimonial: "Finally, real Caribbean food in Lehigh Acres! The menu, the quality, the service—everything is top-tier. This is my new favorite spot.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/crazy-dealer-happy-expression_1194-4005.jpg?_wi=2",
imageAlt: "man happy thumbs up food quality",
},
id: "review-4", name: "David Martinez", handle: "@davidsflavorquests", testimonial:
"Finally, real Caribbean food in Lehigh Acres! The menu, the quality, the service—everything is top-tier. This is my new favorite spot for family dinners.", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/crazy-dealer-happy-expression_1194-4005.jpg?_wi=1", imageAlt: "David Martinez at Caribbean Flair"},
{
id: "review-5",
name: "Jessica Williams",
handle: "@jessicaeats_local",
testimonial: "Conch fritters are crispy heaven! The whole experience feels premium yet so authentic. Teria and Deb are changing the food game.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/friends-eating-barbecue_23-2148733607.jpg?_wi=2",
imageAlt: "woman smiling holding plate of food",
},
id: "review-5", name: "Jessica Williams", handle: "@jessicaeats_local", testimonial:
"Conch fritters are crispy heaven! The whole experience feels premium yet so authentic. Teria and Deb are changing the food game in Lehigh Acres.", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/friends-eating-barbecue_23-2148733607.jpg?_wi=1", imageAlt: "Jessica Williams enjoying meal"},
{
id: "review-6",
name: "Robert Thompson",
handle: "@robfeeds",
testimonial: "Island fusion done right. The quality of ingredients and cooking technique is professional-level. Worth every penny and the drive. Highly recommend!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-thumbs-up_1149-1163.jpg?_wi=2",
imageAlt: "man approving satisfied testimonial portrait",
},
id: "review-6", name: "Robert Thompson", handle: "@robfeeds", testimonial:
"Island fusion done right. The quality of ingredients and cooking technique is professional-level. Worth every penny and the drive. Highly recommend to everyone!", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/woman-with-thumbs-up_1149-1163.jpg?_wi=1", imageAlt: "Robert Thompson thumbs up"},
]}
/>
</div>
{/* Call to Action Section */}
<div id="reviews-cta" data-section="reviews-cta">
<FeatureCardTen
title="Love Our Flavors? Share Your Story"
description="Join our growing community of Caribbean Flair fans. Every review fuels our passion to deliver authentic island excellence. Share your dining experience and help us grow!"
tag="Your Voice Matters"
title="Join Thousands of Satisfied Customers"
description="Experience why customers consistently give us 5-star reviews. Authentic Caribbean flavors, passionate owners, and community-driven quality that you can taste in every bite."
tag="Order Today"
tagIcon={Zap}
tagAnimation="slide-up"
buttons={[
{
text: "Order Your Favorite Now",
href: "/order",
},
text: "Order Online Now", href: "/menu"},
{
text: "Visit Us Today",
href: "/locations",
},
text: "Call (239) 785-0423", href: "tel:2397850423"},
]}
buttonAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
useInvertedBackground={true}
features={[
{
id: "community-love",
title: "Join Our Island Community",
description: "Every review tells our story. Connect with fellow Caribbean Flair lovers and celebrate authentic island cuisine.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/friends-eating-barbecue_23-2148733607.jpg?_wi=3",
imageAlt: "friends enjoying caribbean food together",
},
id: "customer-service", title: "Why We're 5-Star Rated", description:
"Authentic recipes, fresh ingredients, passionate service, and community commitment create an unforgettable dining experience.", media: {
imageSrc:
"http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=1"},
items: [
{
icon: Star,
text: "5-Star Authentic Experience",
},
{
icon: Zap,
text: "Premium Island Flavors",
},
text: "Fresh & Fast Service"},
{
icon: TrendingUp,
text: "Authentic Caribbean Quality"},
],
reverse: false,
},
@@ -197,10 +212,11 @@ export default function ReviewsPage() {
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=5"
imageAlt="red food trailer caribbean palm tree evening"
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
logoText="Caribbean Flair"
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
columns={footerColumns}