Merge version_6 into main #5
@@ -5,10 +5,19 @@ 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 TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import { Award, Heart, Zap, TrendingUp, Facebook } from "lucide-react";
|
||||
import {
|
||||
Award,
|
||||
Heart,
|
||||
Zap,
|
||||
TrendingUp,
|
||||
Facebook,
|
||||
Users,
|
||||
Target,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function AboutPage() {
|
||||
const navItems = [
|
||||
@@ -25,13 +34,13 @@ export default function AboutPage() {
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Menu", href: "/menu" },
|
||||
{ label: "Gallery", href: "/" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Reviews", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Order & Contact", items: [
|
||||
{ label: "Order Online", href: "/" },
|
||||
{ label: "Order Online", href: "/menu" },
|
||||
{ label: "Call Us", href: "tel:2397850423" },
|
||||
{ label: "Locations & Hours", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
@@ -55,6 +64,51 @@ export default function AboutPage() {
|
||||
},
|
||||
];
|
||||
|
||||
const timelineItems = [
|
||||
{
|
||||
id: "founded", content: (
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-2">Founded Caribbean Flair</h3>
|
||||
<p>Teria Bryant and Deb Farrell launch their dream of bringing authentic Jamaican cuisine to Lehigh Acres with passion and purpose.</p>
|
||||
</div>
|
||||
),
|
||||
media: (
|
||||
<div className="bg-gradient-to-br from-orange-400 to-red-500 rounded-lg h-full flex items-center justify-center text-white text-3xl font-bold">
|
||||
2023
|
||||
</div>
|
||||
),
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "community", content: (
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-2">Community Reception</h3>
|
||||
<p>The community embraces Caribbean Flair, supporting Black-owned and women-owned business excellence and authentic Caribbean culture.</p>
|
||||
</div>
|
||||
),
|
||||
media: (
|
||||
<div className="bg-gradient-to-br from-blue-400 to-purple-500 rounded-lg h-full flex items-center justify-center text-white text-3xl font-bold">
|
||||
2024
|
||||
</div>
|
||||
),
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "growth", content: (
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-2">Expansion & Recognition</h3>
|
||||
<p>Caribbean Flair becomes a beloved staple in Lehigh Acres, serving thousands of satisfied customers and earning 5-star recognition.</p>
|
||||
</div>
|
||||
),
|
||||
media: (
|
||||
<div className="bg-gradient-to-br from-green-400 to-emerald-500 rounded-lg h-full flex items-center justify-center text-white text-3xl font-bold">
|
||||
2025
|
||||
</div>
|
||||
),
|
||||
reverse: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
@@ -81,19 +135,19 @@ export default function AboutPage() {
|
||||
{/* 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"
|
||||
title="Our Island Story"
|
||||
description="Teria Bryant and Deb Farrell: Two passionate entrepreneurs bringing authentic Jamaican soul and Caribbean excellence to Lehigh Acres through authentic flavors and community-first business."
|
||||
tag="Community Leaders"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Order Online Now", href: "/menu"},
|
||||
text: "Order Now", href: "/menu"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg"
|
||||
imageAlt="Caribbean Flair Story"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg?_wi=1"
|
||||
imageAlt="Caribbean Flair About Us"
|
||||
mediaAnimation="opacity"
|
||||
imagePosition="right"
|
||||
ariaLabel="About us hero section"
|
||||
@@ -104,7 +158,7 @@ export default function AboutPage() {
|
||||
<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 with decades of culinary expertise and community commitment."
|
||||
description="Teria Bryant and Deb Farrell: Passionate Black-owned, women-owned entrepreneurs bringing authentic Caribbean soul to Lehigh Acres."
|
||||
tag="Our Founders"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
@@ -115,7 +169,7 @@ export default function AboutPage() {
|
||||
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. With deep roots in Jamaican cooking traditions, Teria ensures every plate delivers the bold flavors and soul that define our brand.", imageSrc:
|
||||
"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 and excellence.", 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,
|
||||
@@ -124,7 +178,7 @@ export default function AboutPage() {
|
||||
},
|
||||
{
|
||||
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:
|
||||
"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,
|
||||
@@ -137,109 +191,73 @@ export default function AboutPage() {
|
||||
|
||||
{/* 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}
|
||||
<TimelineProcessFlow
|
||||
title="Our Journey"
|
||||
description="From vision to reality—the Caribbean Flair story of authentic flavors, community pride, and culinary excellence."
|
||||
tag="Our Evolution"
|
||||
tagIcon={Target}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
items={timelineItems}
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Our Menu", href: "/menu"},
|
||||
text: "Join Our Story", 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">
|
||||
<SocialProofOne
|
||||
names={[
|
||||
"Supporting Local Economy", "Women Empowerment", "Black Business Excellence", "Community Events", "Authentic Jamaican Culture", "Local Partnerships"]}
|
||||
title="Community Impact"
|
||||
description="Caribbean Flair is more than a restaurant—we're a force for community pride, Black excellence, and women empowerment in Lehigh Acres."
|
||||
tag="Making a Difference"
|
||||
tagIcon={Users}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
showCard={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Support Local Business", href: "/menu"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Final CTA Section */}
|
||||
<div id="final-cta" data-section="final-cta">
|
||||
<FeatureCardTen
|
||||
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}
|
||||
title="Experience Our Island Story"
|
||||
description="Join Teria, Deb, and the Caribbean Flair community. Every meal supports Black- and women-owned business excellence and authentic Caribbean culture."
|
||||
tag="Be Part of Our Journey"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Support Local", href: "/menu"},
|
||||
text: "Order Now", href: "/menu"},
|
||||
{
|
||||
text: "Call (239) 785-0423", href: "tel:2397850423"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
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: {
|
||||
id: "mission", title: "Our Mission", description:
|
||||
"Deliver authentic Caribbean excellence while uplifting our community through Black- and women-owned business pride.", media: {
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg"},
|
||||
items: [
|
||||
{
|
||||
icon: Award,
|
||||
text: "Authentic recipes passed down through generations"},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
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"},
|
||||
"http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=1"},
|
||||
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"},
|
||||
text: "Authentic Flavors"},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
text: "Supporting neighborhood growth & connection"},
|
||||
text: "Community Pride"},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
|
||||
@@ -3,82 +3,59 @@
|
||||
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 { Phone, MessageCircle, Facebook, MessageSquare, MapPin, Clock } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Heart, Zap } from "lucide-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: "/" },
|
||||
{ name: "Order Online", id: "/order-online" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Gallery", id: "/" },
|
||||
{ name: "Reviews", id: "/" },
|
||||
{ name: "Locations", id: "/" },
|
||||
{ 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: [
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Order Online", href: "/order-online" },
|
||||
{ label: "Gallery", href: "/" },
|
||||
{ label: "Reviews", href: "/" },
|
||||
{ label: "Menu", href: "/menu" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Reviews", href: "/reviews" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Order & Contact", items: [
|
||||
{ label: "Order Online", href: "/order-online" },
|
||||
title: "Order & Contact",
|
||||
items: [
|
||||
{ label: "Order Online", href: "/order" },
|
||||
{ label: "Call Us", href: "tel:2397850423" },
|
||||
{ label: "Locations & Hours", href: "/" },
|
||||
{ label: "Locations & Hours", href: "/locations" },
|
||||
{ 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: "/" },
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Privacy Policy", href: "#privacy" },
|
||||
{ label: "Terms of Service", href: "#terms" },
|
||||
],
|
||||
},
|
||||
{
|
||||
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: "/" },
|
||||
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" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
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"
|
||||
@@ -92,202 +69,55 @@ 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-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: "plain" }}
|
||||
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.");
|
||||
text: "Order Now",
|
||||
href: "/order",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Location & Hours Section */}
|
||||
<div id="location-hours" data-section="location-hours">
|
||||
<div id="contact-hero" data-section="contact-hero">
|
||||
<FeatureCardTen
|
||||
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}
|
||||
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}
|
||||
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={true}
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
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"},
|
||||
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",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: MapPin,
|
||||
text: "Lehigh Acres, FL 33936"},
|
||||
icon: Zap,
|
||||
text: "(239) 785-0423",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
text: "Open Until 9 PM Daily"},
|
||||
icon: Heart,
|
||||
text: "Available until 9PM",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
@@ -295,10 +125,54 @@ export default function ContactPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<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>
|
||||
|
||||
<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"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=9"
|
||||
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
|
||||
logoText="Caribbean Flair"
|
||||
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
||||
|
||||
@@ -1,12 +1,19 @@
|
||||
"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 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";
|
||||
import {
|
||||
Award,
|
||||
Camera,
|
||||
Zap,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function GalleryPage() {
|
||||
const navItems = [
|
||||
@@ -18,41 +25,87 @@ export default function GalleryPage() {
|
||||
{ name: "Locations", id: "locations" },
|
||||
];
|
||||
|
||||
const [selectedImage, setSelectedImage] = useState<string | null>(null);
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Menu", href: "/menu" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Reviews", href: "/reviews" },
|
||||
{ label: "Reviews", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Order & Contact", items: [
|
||||
{ label: "Order Online", href: "/menu" },
|
||||
{ label: "Call Us", href: "tel:2397850423" },
|
||||
{ label: "Locations & Hours", href: "/locations" },
|
||||
{ label: "Locations & Hours", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
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: [
|
||||
{ label: "801 Leeland Heights Blvd W", href: "/locations" },
|
||||
{ label: "Lehigh Acres, FL 33936", href: "/locations" },
|
||||
{ label: "Open Until 9PM", href: "/locations" },
|
||||
{ label: "801 Leeland Heights Blvd W", href: "/" },
|
||||
{ label: "Lehigh Acres, FL 33936", href: "/" },
|
||||
{ label: "Open Until 9PM", href: "/" },
|
||||
{ label: "Delivery Available", href: "/" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const galleryImages = [
|
||||
{
|
||||
id: "user-upload-1", category: "Dishes", title: "Caribbean Delight", excerpt:
|
||||
"Stunning presentation of our signature Caribbean feast with vibrant colors and authentic flavors.", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg?_wi=1", imageAlt: "User uploaded Caribbean dish", authorName: "Caribbean Flair Community", authorAvatar:
|
||||
"http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg", date: "Community Upload"},
|
||||
{
|
||||
id: "user-upload-2", category: "Dishes", title: "Island Feast Experience", excerpt:
|
||||
"A mouth-watering capture of our authentic Jamaican cuisine in all its glory.", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-wha24yfi.jpg?_wi=1", imageAlt: "User uploaded island feast", authorName: "Caribbean Flair Community", authorAvatar:
|
||||
"http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg", date: "Community Upload"},
|
||||
{
|
||||
id: "user-upload-3", category: "Grill", title: "Fresh Off The Grill", excerpt:
|
||||
"Behind-the-scenes action showing our expert grill masters at work with authentic technique.", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-qcfdeh7f.jpg?_wi=1", imageAlt: "Grilling action", authorName: "Caribbean Flair Community", authorAvatar:
|
||||
"http://img.b2bpic.net/free-photo/young-male-holding-hands-pockets-white-shirt-jacket-looking-elegant-front-view_176474-99655.jpg", date: "Community Upload"},
|
||||
{
|
||||
id: "user-upload-4", category: "Dishes", title: "Platter Perfection", excerpt:
|
||||
"A beautifully plated Caribbean meal showcasing the quality and care we put into every order.", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-dk53z92a.jpg?_wi=1", imageAlt: "Platter presentation", authorName: "Caribbean Flair Community", authorAvatar:
|
||||
"http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg", date: "Community Upload"},
|
||||
{
|
||||
id: "user-upload-5", category: "Community", title: "Community Gathering", excerpt:
|
||||
"Caribbean Flair bringing people together through authentic flavors and shared island experiences.", imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-y2tu4f81.jpg?_wi=1", imageAlt: "Community gathering", authorName: "Caribbean Flair Community", authorAvatar:
|
||||
"http://img.b2bpic.net/free-photo/woman-with-thumbs-up_1149-1163.jpg", date: "Community Upload"},
|
||||
{
|
||||
id: "gallery-1", 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: "gallery-2", 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: "gallery-3", 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"},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
@@ -79,83 +132,67 @@ export default function GalleryPage() {
|
||||
{/* 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 Feast"
|
||||
title="Island Feast Gallery"
|
||||
description="Explore our vibrant collection of authentic Caribbean dishes, fresh ingredients, and behind-the-scenes moments from the grill. See what our community is enjoying!"
|
||||
tag="Visual Journey"
|
||||
tagIcon={Camera}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Order Online Now", href: "/menu"},
|
||||
text: "Order 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"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg?_wi=2"
|
||||
imageAlt="Caribbean Flair Gallery"
|
||||
mediaAnimation="opacity"
|
||||
imagePosition="right"
|
||||
ariaLabel="Gallery hero section showcasing Caribbean Flair dishes"
|
||||
ariaLabel="Gallery page hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Full Gallery Section with Tags and Horizontal Scrolling */}
|
||||
<div id="gallery-items" data-section="gallery-items">
|
||||
{/* Lightbox Modal */}
|
||||
{selectedImage && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4"
|
||||
onClick={() => setSelectedImage(null)}
|
||||
>
|
||||
<div className="max-w-4xl w-full" onClick={(e) => e.stopPropagation()}>
|
||||
<img
|
||||
src={selectedImage}
|
||||
alt="Gallery lightbox"
|
||||
className="w-full h-auto rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Featured Gallery Section */}
|
||||
<div id="featured-gallery" data-section="featured-gallery">
|
||||
<BlogCardThree
|
||||
title="Complete Island Feast Gallery"
|
||||
description="Browse our complete collection of authentic Caribbean cuisine with detailed photography and descriptions."
|
||||
tag="Tagged Gallery"
|
||||
title="Island Feast Gallery"
|
||||
description="Discover the artistry, authenticity, and passion behind every Caribbean Flair creation. Click any image to view in full detail."
|
||||
tag="Visual Journey"
|
||||
tagIcon={Camera}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
blogs={[
|
||||
{
|
||||
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: "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 | 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 | 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 | 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 | 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"},
|
||||
]}
|
||||
blogs={galleryImages}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Call to Action Section */}
|
||||
<div id="gallery-cta" data-section="gallery-cta">
|
||||
{/* Final CTA Section */}
|
||||
<div id="final-cta" data-section="final-cta">
|
||||
<FeatureCardTen
|
||||
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"
|
||||
title="See It. Taste It. Experience It."
|
||||
description="Every image tells a story of authentic Caribbean flavors, community pride, and culinary excellence. Order now and create your own memories."
|
||||
tag="Ready to Order"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Order Online Now", href: "/menu"},
|
||||
text: "Order Your Meal Now", href: "/menu"},
|
||||
{
|
||||
text: "Call (239) 785-0423", href: "tel:2397850423"},
|
||||
]}
|
||||
@@ -165,17 +202,17 @@ export default function GalleryPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
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: {
|
||||
id: "visual-quality", title: "Premium Quality", description:
|
||||
"Every image showcases the premium quality, fresh ingredients, and authentic Caribbean technique behind our food.", media: {
|
||||
imageSrc:
|
||||
"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: "Fresh Daily"},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
text: "Peak fresh quality"},
|
||||
text: "Peak Quality"},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
|
||||
@@ -2,11 +2,9 @@
|
||||
|
||||
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 FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import { MapPin, Clock, Phone, Zap, TrendingUp, CheckCircle, AlertCircle, BarChart3 } from "lucide-react";
|
||||
import { MapPin, Clock, TrendingUp } from "lucide-react";
|
||||
|
||||
export default function LocationsPage() {
|
||||
const navItems = [
|
||||
@@ -16,6 +14,7 @@ export default function LocationsPage() {
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Locations", id: "locations" },
|
||||
{ name: "Order Online", id: "order" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
@@ -23,13 +22,13 @@ export default function LocationsPage() {
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Menu", href: "/menu" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Reviews", href: "/reviews" },
|
||||
{ label: "Gallery", href: "/" },
|
||||
{ label: "Reviews", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Order & Contact", items: [
|
||||
{ label: "Order Online", href: "/menu" },
|
||||
{ label: "Order Online", href: "/order" },
|
||||
{ label: "Call Us", href: "tel:2397850423" },
|
||||
{ label: "Locations & Hours", href: "/locations" },
|
||||
{ label: "Contact", href: "/" },
|
||||
@@ -45,9 +44,9 @@ export default function LocationsPage() {
|
||||
},
|
||||
{
|
||||
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: "801 Leeland Heights Blvd W", href: "/" },
|
||||
{ label: "Lehigh Acres, FL 33936", href: "/" },
|
||||
{ label: "Open Until 9PM", href: "/" },
|
||||
{ label: "Delivery Available", href: "/" },
|
||||
],
|
||||
},
|
||||
@@ -72,43 +71,16 @@ export default function LocationsPage() {
|
||||
brandName="Caribbean Flair"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Order Now", href: "/menu"
|
||||
}}
|
||||
text: "Order Now", href: "/order"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 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: "https://maps.google.com/?q=801+Leeland+Heights+Blvd+W+Lehigh+Acres+FL+33936"
|
||||
},
|
||||
{
|
||||
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">
|
||||
{/* Locations & Hours Section */}
|
||||
<div id="locations-hours" data-section="locations-hours">
|
||||
<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"
|
||||
title="Visit Us at Caribbean Flair"
|
||||
description="Find us at our convenient Lehigh Acres location. Check our hours, visit our embedded map, and see when we're busiest."
|
||||
tag="Open Daily"
|
||||
tagIcon={MapPin}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -116,66 +88,18 @@ export default function LocationsPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Address", description: "801 Leeland Heights Blvd W, Lehigh Acres, FL 33936", bentoComponent: "map"
|
||||
},
|
||||
title: "Location & Hours", description:
|
||||
"801 Leeland Heights Blvd W, Lehigh Acres, FL 33936 | Open 11am - 9pm Daily", button: {
|
||||
text: "Get Directions", href: "https://maps.google.com/?q=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: "Open Status", description: "Currently Open • Closes at 9:00 PM • Peak Hours: 12-1 PM & 5-7 PM", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Clock, label: "Status", value: "Open Now" },
|
||||
{ icon: TrendingUp, label: "Busy Level", value: "Moderate" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Popular Times", description: "Peak times for Caribbean Flair dining.", bentoComponent: "timeline", 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: CheckCircle,
|
||||
text: "On-Site Ordering"},
|
||||
{
|
||||
icon: Phone,
|
||||
text: "Phone Orders"},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
text: "Online Ordering"},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
title: "Popular Times", description: "Visit during off-peak hours for shorter wait times.", bentoComponent: "line-chart"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -5,13 +5,20 @@ 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 TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
|
||||
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import { Award, Zap } from "lucide-react";
|
||||
import {
|
||||
Award,
|
||||
Flame,
|
||||
Star,
|
||||
Zap,
|
||||
TrendingUp,
|
||||
Facebook,
|
||||
} 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" },
|
||||
@@ -21,18 +28,20 @@ export default function MenuPage() {
|
||||
{ name: "Locations", id: "locations" },
|
||||
];
|
||||
|
||||
const [activeCategory, setActiveCategory] = useState("mains");
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Menu", href: "/menu" },
|
||||
{ label: "Gallery", href: "/" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Reviews", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Order & Contact", items: [
|
||||
{ label: "Order Online", href: "/" },
|
||||
{ label: "Order Online", href: "/menu" },
|
||||
{ label: "Call Us", href: "tel:2397850423" },
|
||||
{ label: "Locations & Hours", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
@@ -59,52 +68,61 @@ 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: "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-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: "curry-goat", name: "Curry Goat Platter", price: "$17.95", variant: "Tender & Aromatic", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/rice-dish-with-sauce-near-spices_23-2147894777.jpg?_wi=1", imageAlt: "Curry goat served over rice and peas"},
|
||||
{
|
||||
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: "jerk-pork", name: "Jerk Pork Platter", price: "$16.95", variant: "Juicy & Spiced", 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"},
|
||||
{
|
||||
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"},
|
||||
id: "escovitch-fish", name: "Escovitch Fish", price: "$18.95", variant: "Island Tradition", 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"},
|
||||
],
|
||||
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: "jerk-chicken-sandwich", name: "Jerk Chicken Sandwich", price: "$11.95", variant: "Fresh Bread", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/from-shrimps-batter-with-red-rice-greens-white-plate_176474-2654.jpg?_wi=1", imageAlt: "Jerk chicken sandwich with slaw"},
|
||||
{
|
||||
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: "curry-goat-sandwich", name: "Curry Goat Sandwich", price: "$12.95", variant: "Hearty & Flavorful", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/rice-dish-with-sauce-near-spices_23-2147894777.jpg?_wi=1", imageAlt: "Curry goat 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"},
|
||||
id: "pulled-pork-sandwich", name: "Pulled Pork Sandwich", price: "$11.95", variant: "Smoky & Tender", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/hot-spicy-grilled-pork-salad-with-berry-rice_1339-6325.jpg?_wi=1", imageAlt: "Pulled pork 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: "rice-peas", name: "Rice & Peas", price: "$4.95", variant: "Classic Caribbean", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/rice-dish-with-sauce-near-spices_23-2147894777.jpg?_wi=1", imageAlt: "Rice and peas side"},
|
||||
{
|
||||
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: "mac-cheese", name: "Creamy Mac & Cheese", price: "$5.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"},
|
||||
id: "festival", name: "Festival Dumplings", price: "$4.95", variant: "Golden & Crispy", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/deep-fried-samosas-rustic-crockery-plate-generated-by-ai_188544-41080.jpg?_wi=1", imageAlt: "Festival dumplings"},
|
||||
],
|
||||
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: "16 oz", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=1", imageAlt: "Tropical sorrel punch"},
|
||||
{
|
||||
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"},
|
||||
id: "ginger-beer", name: "Island Ginger Beer", price: "$3.95", variant: "Refreshing", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=1", imageAlt: "Ginger beer"},
|
||||
],
|
||||
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: "combo-1", name: "Island Feast Combo", price: "$22.95", variant: "Jerk Chicken + Sides", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/from-shrimps-batter-with-red-rice-greens-white-plate_176474-2654.jpg?_wi=1", imageAlt: "Island feast 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"},
|
||||
id: "seafood-special", name: "Seafood Special", price: "$24.95", variant: "Curry Shrimp + Sides", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=1", imageAlt: "Seafood special"},
|
||||
],
|
||||
};
|
||||
|
||||
const categoryLabels = {
|
||||
mains: "Mains", sandwiches: "Sandwiches", sides: "Sides", drinks: "Drinks", specials: "Specials"};
|
||||
const getMenuItems = () => {
|
||||
return menuItems[activeCategory as keyof typeof menuItems] || [];
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -132,106 +150,138 @@ export default function MenuPage() {
|
||||
{/* 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}
|
||||
title="Browse Our Island Menu"
|
||||
description="Explore authentic Caribbean flavors. From jerk meats to curry dishes, each item is crafted fresh and packed with island soul."
|
||||
tag="Fresh Daily"
|
||||
tagIcon={Flame}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Order Online Now", href: "#"},
|
||||
text: "Call to Order", href: "tel:2397850423"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg?_wi=3"
|
||||
imageAlt="Caribbean Flair Menu"
|
||||
mediaAnimation="opacity"
|
||||
imagePosition="right"
|
||||
ariaLabel="Menu hero section"
|
||||
ariaLabel="Menu page hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 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]) => (
|
||||
{/* Menu Categories Section */}
|
||||
<div id="menu-categories" data-section="menu-categories" className="py-20">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Browse by Category</h2>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4 mb-12">
|
||||
{[
|
||||
{ id: "mains", label: "Mains" },
|
||||
{ id: "sandwiches", label: "Sandwiches" },
|
||||
{ id: "sides", label: "Sides" },
|
||||
{ id: "drinks", label: "Drinks" },
|
||||
{ id: "specials", label: "Specials" },
|
||||
].map((cat) => (
|
||||
<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)]"
|
||||
key={cat.id}
|
||||
onClick={() => setActiveCategory(cat.id)}
|
||||
className={`px-6 py-2 rounded-full transition-all ${
|
||||
activeCategory === cat.id
|
||||
? "bg-gradient-to-r from-orange-500 to-red-500 text-white"
|
||||
: "bg-gray-200 text-gray-800 hover:bg-gray-300"
|
||||
}`}
|
||||
aria-pressed={activeCategory === key}
|
||||
>
|
||||
{label}
|
||||
{cat.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>
|
||||
<ProductCardFour
|
||||
title={`${activeCategory.charAt(0).toUpperCase() + activeCategory.slice(1)} Selection`}
|
||||
description={`Discover our premium ${activeCategory} offerings, each crafted with authentic Caribbean passion.`}
|
||||
tag="Featured"
|
||||
tagIcon={Flame}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Order This Item", href: "/menu"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={getMenuItems()}
|
||||
/>
|
||||
</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"
|
||||
{/* Testimonials Section */}
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
title="What Customers Say About Our Menu"
|
||||
description="Real reviews from real Caribbean Flair customers who love our authentic flavors."
|
||||
tag="5-Star Rated"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
showRating={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "review-1", name: "Sarah Johnson", handle: "@sarahjohn2024", testimonial:
|
||||
"Every dish on the menu is packed with authentic island flavor! The variety is amazing.", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-woman-eating-delicious-tiramisu-cafe_1303-25270.jpg?_wi=1", imageAlt: "Sarah Johnson"},
|
||||
{
|
||||
id: "review-2", name: "Michael Chen", handle: "@mikeflavorseek", testimonial:
|
||||
"Tried everything on the menu. Each item is better than the last. Highly recommend!", 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"},
|
||||
{
|
||||
id: "review-3", name: "Amanda Davis", handle: "@amandataste", testimonial:
|
||||
"The menu showcases real Caribbean recipes. You can taste the authenticity in every bite.", 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"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Final CTA Section */}
|
||||
<div id="final-cta" data-section="final-cta">
|
||||
<FeatureCardTen
|
||||
title="Ready to Order?"
|
||||
description="Choose your favorite items from our authentic Caribbean menu and get them fresh off the grill."
|
||||
tag="Ready to Order"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Browse Full Menu", href: "#menu-items"},
|
||||
text: "Call (239) 785-0423", href: "tel:2397850423"},
|
||||
{
|
||||
text: "Visit Us Today", href: "/"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
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"},
|
||||
id: "quality", title: "Authentic Quality", description:
|
||||
"Every item prepared with premium ingredients and authentic Caribbean techniques.", 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"},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
text: "Peak Quality"},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import { Flame } from "lucide-react";
|
||||
import ProductCartItem from "@/components/ecommerce/cart/ProductCartItem";
|
||||
import {
|
||||
CreditCard,
|
||||
Heart,
|
||||
ShoppingCart,
|
||||
Lock,
|
||||
Check,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function OrderPage() {
|
||||
const navItems = [
|
||||
@@ -15,47 +22,329 @@ export default function OrderPage() {
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Locations", id: "locations" },
|
||||
{ name: "Order Online", id: "order" },
|
||||
];
|
||||
|
||||
const [cart, setCart] = useState<
|
||||
Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
variants?: string[];
|
||||
price: string;
|
||||
quantity: number;
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
}>
|
||||
>([
|
||||
{
|
||||
id: "jerk-chicken", name: "Jerk Chicken Platter", price: "$15.95", quantity: 1,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/from-shrimps-batter-with-red-rice-greens-white-plate_176474-2654.jpg?_wi=1", imageAlt: "Jerk chicken platter", variants: ["Full Rack"],
|
||||
},
|
||||
{
|
||||
id: "curry-shrimp", name: "Curry Shrimp Platter", price: "$16.95", quantity: 1,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=1", imageAlt: "Curry shrimp platter", variants: ["Fresh Daily"],
|
||||
},
|
||||
]);
|
||||
|
||||
const [paymentMethod, setPaymentMethod] = useState<
|
||||
"credit-card" | "apple-pay" | "paypal"
|
||||
>("credit-card");
|
||||
const [orderStage, setOrderStage] = useState<
|
||||
"cart" | "checkout" | "confirmation"
|
||||
>("cart");
|
||||
|
||||
const handleQuantityChange = (id: string, quantity: number) => {
|
||||
setCart((prev) =>
|
||||
prev.map((item) =>
|
||||
item.id === id ? { ...item, quantity } : item
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleRemove = (id: string) => {
|
||||
setCart((prev) => prev.filter((item) => item.id !== id));
|
||||
};
|
||||
|
||||
const subtotal = cart.reduce(
|
||||
(sum, item) =>
|
||||
sum + parseFloat(item.price.replace("$", "")) * item.quantity,
|
||||
0
|
||||
);
|
||||
const tax = subtotal * 0.07;
|
||||
const total = subtotal + tax;
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Menu", href: "/menu" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Reviews", href: "/reviews" },
|
||||
{ label: "Gallery", href: "/" },
|
||||
{ label: "Reviews", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Order & Contact",
|
||||
items: [
|
||||
title: "Order & Contact", items: [
|
||||
{ label: "Order Online", href: "/order" },
|
||||
{ label: "Call Us", href: "tel:2397850423" },
|
||||
{ label: "Locations & Hours", href: "/locations" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Contact", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect With Us",
|
||||
items: [
|
||||
title: "Connect With Us", items: [
|
||||
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Privacy Policy", href: "#privacy" },
|
||||
{ label: "Terms of Service", href: "#terms" },
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Located In",
|
||||
items: [
|
||||
{ label: "801 Leeland Heights Blvd W", href: "#map" },
|
||||
{ label: "Lehigh Acres, FL 33936", href: "#map" },
|
||||
{ label: "Open Until 9PM", href: "/locations" },
|
||||
{ label: "Delivery Available", href: "/order" },
|
||||
title: "Located In", items: [
|
||||
{ label: "801 Leeland Heights Blvd W", href: "/" },
|
||||
{ label: "Lehigh Acres, FL 33936", href: "/" },
|
||||
{ label: "Open Until 9PM", href: "/" },
|
||||
{ label: "Delivery Available", href: "/" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
if (orderStage === "confirmation") {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Caribbean Flair"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Order Now", href: "/order"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="confirmation" data-section="confirmation" className="min-h-screen flex items-center justify-center px-4 py-12">
|
||||
<div className="max-w-md w-full text-center">
|
||||
<div className="mb-6 flex justify-center">
|
||||
<div className="rounded-full bg-green-100 p-4">
|
||||
<Check className="w-12 h-12 text-green-600" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold mb-2">Order Confirmed!</h1>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Thank you for your order. Your Caribbean Flair meal will be ready in approximately 20 minutes.
|
||||
</p>
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-6 text-left">
|
||||
<p className="text-sm text-gray-600 mb-2">Order #: CF-2025-001234</p>
|
||||
<p className="font-semibold text-lg mb-1">Total: ${total.toFixed(2)}</p>
|
||||
<p className="text-sm text-gray-600">Payment: {paymentMethod === "credit-card" ? "Credit Card" : paymentMethod === "apple-pay" ? "Apple Pay" : "PayPal"}</p>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
setOrderStage("cart");
|
||||
setCart([]);
|
||||
}}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition"
|
||||
>
|
||||
Place Another Order
|
||||
</button>
|
||||
<a
|
||||
href="/"
|
||||
className="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 rounded-lg transition text-center"
|
||||
>
|
||||
Back to Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
|
||||
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
|
||||
logoText="Caribbean Flair"
|
||||
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
if (orderStage === "checkout") {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Caribbean Flair"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Order Now", href: "/order"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="checkout" data-section="checkout" className="min-h-screen px-4 py-12">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-8">Secure Checkout</h1>
|
||||
|
||||
{/* Order Summary */}
|
||||
<div className="bg-gray-50 rounded-lg p-6 mb-8">
|
||||
<h2 className="text-lg font-semibold mb-4">Order Summary</h2>
|
||||
<div className="space-y-2 mb-4">
|
||||
{cart.map((item) => (
|
||||
<div key={item.id} className="flex justify-between text-sm">
|
||||
<span>
|
||||
{item.name} × {item.quantity}
|
||||
</span>
|
||||
<span>
|
||||
${(parseFloat(item.price.replace("$", "")) * item.quantity).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t pt-4 space-y-1">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Subtotal:</span>
|
||||
<span>${subtotal.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Tax (7%):</span>
|
||||
<span>${tax.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between font-bold text-lg pt-2 border-t">
|
||||
<span>Total:</span>
|
||||
<span>${total.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Methods */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center">
|
||||
<Lock className="w-5 h-5 mr-2" />
|
||||
Secure Payment
|
||||
</h2>
|
||||
|
||||
{/* Credit Card */}
|
||||
<div
|
||||
className={`border-2 rounded-lg p-4 mb-4 cursor-pointer transition ${
|
||||
paymentMethod === "credit-card"
|
||||
? "border-blue-600 bg-blue-50"
|
||||
: "border-gray-200"
|
||||
}`}
|
||||
onClick={() => setPaymentMethod("credit-card")}
|
||||
>
|
||||
<div className="flex items-center mb-4">
|
||||
<CreditCard className="w-6 h-6 mr-3" />
|
||||
<span className="font-semibold">Credit Card</span>
|
||||
</div>
|
||||
{paymentMethod === "credit-card" && (
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Card Number"
|
||||
className="w-full px-3 py-2 border rounded-lg text-sm"
|
||||
/>
|
||||
<div className="flex gap-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="MM/YY"
|
||||
className="flex-1 px-3 py-2 border rounded-lg text-sm"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="CVV"
|
||||
className="flex-1 px-3 py-2 border rounded-lg text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Apple Pay */}
|
||||
<div
|
||||
className={`border-2 rounded-lg p-4 mb-4 cursor-pointer transition ${
|
||||
paymentMethod === "apple-pay"
|
||||
? "border-blue-600 bg-blue-50"
|
||||
: "border-gray-200"
|
||||
}`}
|
||||
onClick={() => setPaymentMethod("apple-pay")}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="font-bold text-xl mr-3">🍎</span>
|
||||
<span className="font-semibold">Apple Pay</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PayPal */}
|
||||
<div
|
||||
className={`border-2 rounded-lg p-4 cursor-pointer transition ${
|
||||
paymentMethod === "paypal"
|
||||
? "border-blue-600 bg-blue-50"
|
||||
: "border-gray-200"
|
||||
}`}
|
||||
onClick={() => setPaymentMethod("paypal")}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="font-bold text-blue-600 mr-3">PP</span>
|
||||
<span className="font-semibold">PayPal</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => setOrderStage("cart")}
|
||||
className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 rounded-lg transition"
|
||||
>
|
||||
Back to Cart
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setOrderStage("confirmation")}
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition"
|
||||
>
|
||||
Complete Order
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
|
||||
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
|
||||
logoText="Caribbean Flair"
|
||||
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
@@ -69,143 +358,111 @@ export default function OrderPage() {
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Caribbean Flair"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Order Now",
|
||||
href: "/order",
|
||||
}}
|
||||
text: "Order Now", href: "/order"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="signature-dishes" data-section="signature-dishes">
|
||||
<ProductCardFour
|
||||
title="Signature Island Flavors"
|
||||
description="Discover our most beloved authentic Caribbean dishes, expertly crafted and grilled fresh daily. Order your favorites now and experience premium island cuisine delivered hot and delicious."
|
||||
tag="Most Ordered"
|
||||
tagIcon={Flame}
|
||||
{/* Hero Section */}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
title="Order Your Caribbean Feast Online"
|
||||
description="Build your custom order from our signature island dishes. Fast, secure checkout with multiple payment options."
|
||||
tag="Quick & Easy Ordering"
|
||||
tagIcon={ShoppingCart}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Full Menu",
|
||||
href: "/menu",
|
||||
text: "Proceed to Checkout", onClick: () => setOrderStage("checkout"),
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "jerk-chicken",
|
||||
name: "Jerk Chicken Platter",
|
||||
price: "$15.95",
|
||||
variant: "Full Rack",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/from-shrimps-batter-with-red-rice-greens-white-plate_176474-2654.jpg?_wi=3",
|
||||
imageAlt: "Jerk chicken grilled on foil with spices",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "curry-shrimp",
|
||||
name: "Curry Shrimp Platter",
|
||||
price: "$16.95",
|
||||
variant: "Fresh Daily",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=4",
|
||||
imageAlt: "Curry shrimp over rice and peas",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "conch-fritters",
|
||||
name: "Conch Fritters Combo",
|
||||
price: "$12.95",
|
||||
variant: "6 Pieces",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/chicken-nuggets-served-with-french-fries-sauces_140725-5759.jpg?_wi=3",
|
||||
imageAlt: "Golden conch fritters with dipping sauce",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg?_wi=2"
|
||||
imageAlt="Caribbean Flair food display"
|
||||
mediaAnimation="opacity"
|
||||
imagePosition="right"
|
||||
ariaLabel="Order online hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="order-featured" data-section="order-featured">
|
||||
<ProductCardFour
|
||||
title="Premium Island Combinations"
|
||||
description="Build your perfect Caribbean meal with our curated combinations. Each platter includes fresh sides and authentic island flavors prepared fresh on the grill."
|
||||
tag="Customer Favorites"
|
||||
tagIcon={Flame}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "View All Platters",
|
||||
href: "/menu",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "jerk-pork-combo",
|
||||
name: "Jerk Pork Festival Combo",
|
||||
price: "$17.95",
|
||||
variant: "Complete Platter",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hot-spicy-grilled-pork-salad-with-berry-rice_1339-6325.jpg?_wi=4",
|
||||
imageAlt: "Jerk pork platter with rice and tropical slaw",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "curry-goat-combo",
|
||||
name: "Curry Goat Island Feast",
|
||||
price: "$18.95",
|
||||
variant: "Family Style",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rice-dish-with-sauce-near-spices_23-2147894777.jpg?_wi=4",
|
||||
imageAlt: "Rich curry goat served over rice and peas",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "escovitch-fish-combo",
|
||||
name: "Escovitch Fish Special",
|
||||
price: "$16.95",
|
||||
variant: "Fresh Catch",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/grilled-chicken-served-with-aubergine-lemon-parsley_140725-1554.jpg?_wi=3",
|
||||
imageAlt: "Escovitch fish with pickled vegetables and lime",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "seafood-festival",
|
||||
name: "Seafood Festival Platter",
|
||||
price: "$19.95",
|
||||
variant: "Premium Mix",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/deep-fried-samosas-rustic-crockery-plate-generated-by-ai_188544-41080.jpg?_wi=4",
|
||||
imageAlt: "Festival dumplings with tropical slaw and mac and cheese",
|
||||
onProductClick: undefined,
|
||||
onFavorite: undefined,
|
||||
isFavorited: false,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{/* Shopping Cart Section */}
|
||||
<div id="cart" data-section="cart" className="px-4 py-12">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-8">Your Cart</h1>
|
||||
|
||||
{cart.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<ShoppingCart className="w-16 h-16 mx-auto text-gray-400 mb-4" />
|
||||
<p className="text-xl text-gray-600">Your cart is empty</p>
|
||||
<a
|
||||
href="/menu"
|
||||
className="inline-block mt-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition"
|
||||
>
|
||||
Browse Menu
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-4 mb-8">
|
||||
{cart.map((item) => (
|
||||
<ProductCartItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
onQuantityChange={handleQuantityChange}
|
||||
onRemove={handleRemove}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Cart Summary */}
|
||||
<div className="bg-gray-50 rounded-lg p-6 mb-6">
|
||||
<div className="space-y-2 mb-4">
|
||||
<div className="flex justify-between">
|
||||
<span>Subtotal:</span>
|
||||
<span>${subtotal.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Tax (7%):</span>
|
||||
<span>${tax.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="border-t pt-4 flex justify-between font-bold text-lg">
|
||||
<span>Total:</span>
|
||||
<span>${total.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-4">
|
||||
<a
|
||||
href="/menu"
|
||||
className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 rounded-lg transition text-center"
|
||||
>
|
||||
Continue Shopping
|
||||
</a>
|
||||
<button
|
||||
onClick={() => setOrderStage("checkout")}
|
||||
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition flex items-center justify-center"
|
||||
>
|
||||
<Lock className="w-5 h-5 mr-2" />
|
||||
Proceed to Checkout
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=10"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
|
||||
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
|
||||
logoText="Caribbean Flair"
|
||||
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
||||
|
||||
164
src/app/page.tsx
164
src/app/page.tsx
@@ -19,49 +19,76 @@ import {
|
||||
Zap,
|
||||
TrendingUp,
|
||||
Facebook,
|
||||
Phone,
|
||||
ShoppingCart,
|
||||
X,
|
||||
Instagram,
|
||||
MapPin,
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function HomePage() {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isDesktopButtonsVisible, setIsDesktopButtonsVisible] = useState(true);
|
||||
const [showCookiePreferences, setShowCookiePreferences] = useState(false);
|
||||
const [cookiesAccepted, setCookiesAccepted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const cookieConsent = localStorage.getItem("cookie-consent");
|
||||
if (!cookieConsent) {
|
||||
setShowCookiePreferences(true);
|
||||
} else {
|
||||
setCookiesAccepted(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCookieAccept = () => {
|
||||
localStorage.setItem("cookie-consent", "accepted");
|
||||
setCookiesAccepted(true);
|
||||
setShowCookiePreferences(false);
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Menu", id: "menu" },
|
||||
{ name: "About Us", id: "about" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Locations", id: "locations" },
|
||||
{ name: "Menu", id: "signature-dishes" },
|
||||
{ name: "About Us", id: "owners-spotlight" },
|
||||
{ name: "Gallery", id: "featured-gallery" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Locations", id: "footer" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Menu", href: "/menu" },
|
||||
{ label: "Gallery", href: "/" },
|
||||
{ label: "Reviews", href: "/" },
|
||||
{ label: "Menu", href: "#signature-dishes" },
|
||||
{ label: "Gallery", href: "#featured-gallery" },
|
||||
{ label: "Reviews", href: "#testimonials" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Order & Contact", items: [
|
||||
{ label: "Order Online", href: "/" },
|
||||
{ label: "Order Online", href: "#signature-dishes" },
|
||||
{ label: "Call Us", href: "tel:2397850423" },
|
||||
{ label: "Locations & Hours", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Locations & Hours", href: "#footer" },
|
||||
{ label: "Contact", href: "#footer" },
|
||||
],
|
||||
},
|
||||
{
|
||||
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: "/" },
|
||||
{ label: "Instagram", href: "https://instagram.com/caribbeanflair" },
|
||||
{ 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: "/" },
|
||||
{ label: "801 Leeland Heights Blvd W", href: "#" },
|
||||
{ label: "Lehigh Acres, FL 33936", href: "#" },
|
||||
{ label: "Open Until 9PM", href: "#" },
|
||||
{ label: "Delivery Available", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -79,16 +106,89 @@ export default function HomePage() {
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
{/* Persistent Top Navigation Bar */}
|
||||
<div id="nav" data-section="nav" className="sticky top-0 z-40 w-full bg-white/80 backdrop-blur-md border-b border-gray-200">
|
||||
<NavbarStyleCentered
|
||||
brandName="Caribbean Flair"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Order Now", href: "/menu"}}
|
||||
text: "Order Now", href: "#signature-dishes"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Floating Mobile Sidebar Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="fixed inset-0 z-30 md:hidden">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
<div className="absolute right-0 top-16 w-64 bg-white/95 backdrop-blur-lg rounded-lg shadow-2xl m-4 border border-white/20">
|
||||
<div className="p-6 space-y-4">
|
||||
{navItems.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={`#${item.id}`}
|
||||
className="block text-gray-800 hover:text-primary-cta font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
<button className="w-full bg-primary-cta text-white py-2 rounded-lg font-semibold hover:opacity-90">
|
||||
Order Online
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Floating Desktop Action Buttons */}
|
||||
{isDesktopButtonsVisible && (
|
||||
<div className="hidden md:fixed md:right-6 md:bottom-6 md:z-20 md:flex md:flex-col md:gap-3">
|
||||
<a
|
||||
href="tel:2397850423"
|
||||
className="bg-white/90 backdrop-blur-lg border border-white/20 rounded-full p-4 shadow-lg hover:shadow-xl hover:bg-white transition-all flex items-center justify-center group"
|
||||
title="Call Us"
|
||||
>
|
||||
<Phone className="w-6 h-6 text-primary-cta group-hover:scale-110 transition-transform" />
|
||||
</a>
|
||||
<a
|
||||
href="#signature-dishes"
|
||||
className="bg-gradient-to-r from-primary-cta to-accent text-white rounded-full p-4 shadow-lg hover:shadow-xl transition-all flex items-center justify-center group font-semibold"
|
||||
title="Order Now"
|
||||
>
|
||||
<ShoppingCart className="w-6 h-6 group-hover:scale-110 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Cookie Preferences Popup */}
|
||||
{showCookiePreferences && !cookiesAccepted && (
|
||||
<div className="fixed bottom-6 left-6 right-6 z-50 max-w-sm bg-white/95 backdrop-blur-lg rounded-lg shadow-2xl border border-white/20 p-4 md:p-6">
|
||||
<div className="space-y-3">
|
||||
<h3 className="font-semibold text-gray-900">Cookie Preferences</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
We use cookies to enhance your experience, personalize content, and analyze site traffic.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleCookieAccept}
|
||||
className="flex-1 bg-primary-cta text-white py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Accept All
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowCookiePreferences(false)}
|
||||
className="flex-1 border border-gray-300 text-gray-800 py-2 rounded-lg font-semibold hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Decline
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hero Section */}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
@@ -100,12 +200,12 @@ export default function HomePage() {
|
||||
background={{ variant: "glowing-orb" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Order Online Now", href: "/menu"},
|
||||
text: "Order Online Now", href: "#signature-dishes"},
|
||||
{
|
||||
text: "View Full Menu", href: "/menu"},
|
||||
text: "View Full Menu", href: "#signature-dishes"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg?_wi=3"
|
||||
imageAlt="Red Caribbean Flair Island Jerk Grill Trailer"
|
||||
mediaAnimation="opacity"
|
||||
imagePosition="right"
|
||||
@@ -123,7 +223,7 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Full Menu", href: "/menu"},
|
||||
text: "Explore Full Menu", href: "#signature-dishes"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -133,7 +233,7 @@ export default function HomePage() {
|
||||
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"},
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-wha24yfi.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=1", imageAlt: "Curry shrimp over rice and peas"},
|
||||
@@ -159,7 +259,7 @@ export default function HomePage() {
|
||||
{
|
||||
id: "jerk-pork", category: "Main Dishes", title: "Jerk Pork Did Not Disappoint", excerpt:
|
||||
"Perfectly seasoned and grilled, bursting with island spices and authentic Jamaican flavor.", imageSrc:
|
||||
"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:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-qcfdeh7f.jpg?_wi=2", 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:
|
||||
@@ -169,7 +269,7 @@ export default function HomePage() {
|
||||
{
|
||||
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:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-dk53z92a.jpg?_wi=2", 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"},
|
||||
{
|
||||
@@ -185,7 +285,7 @@ export default function HomePage() {
|
||||
{
|
||||
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:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-y2tu4f81.jpg?_wi=2", 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"},
|
||||
]}
|
||||
/>
|
||||
@@ -283,7 +383,7 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Order Online Now", href: "/menu"},
|
||||
text: "Order Online Now", href: "#signature-dishes"},
|
||||
{
|
||||
text: "Call (239) 785-0423", href: "tel:2397850423"},
|
||||
]}
|
||||
@@ -311,7 +411,7 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{/* Footer with Local Map Info and Social Links */}
|
||||
<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"
|
||||
@@ -323,4 +423,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
"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 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 { Star, Heart, Zap, TrendingUp, Award } from "lucide-react";
|
||||
import { Star, Heart, Award } from "lucide-react";
|
||||
|
||||
export default function ReviewsPage() {
|
||||
const navItems = [
|
||||
@@ -24,15 +22,15 @@ export default function ReviewsPage() {
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Menu", href: "/menu" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Gallery", href: "/" },
|
||||
{ label: "Reviews", href: "/reviews" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Order & Contact", items: [
|
||||
{ label: "Order Online", href: "/menu" },
|
||||
{ label: "Order Online", href: "/" },
|
||||
{ label: "Call Us", href: "tel:2397850423" },
|
||||
{ label: "Locations & Hours", href: "/locations" },
|
||||
{ label: "Locations & Hours", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
],
|
||||
},
|
||||
@@ -46,9 +44,9 @@ export default function ReviewsPage() {
|
||||
},
|
||||
{
|
||||
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: "801 Leeland Heights Blvd W", href: "/" },
|
||||
{ label: "Lehigh Acres, FL 33936", href: "/" },
|
||||
{ label: "Open Until 9PM", href: "/" },
|
||||
{ label: "Delivery Available", href: "/" },
|
||||
],
|
||||
},
|
||||
@@ -77,62 +75,12 @@ export default function ReviewsPage() {
|
||||
/>
|
||||
</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">
|
||||
{/* Five-Star Reviews Section */}
|
||||
<div id="reviews-featured" data-section="reviews-featured">
|
||||
<TestimonialCardThirteen
|
||||
title="What Our Customers Say"
|
||||
description="Real five-star reviews from customers who've experienced authentic Caribbean Flair dining."
|
||||
tag="5-Star Reviews"
|
||||
title="Real Island Flavor Stories"
|
||||
description="Hear from our community about their authentic Caribbean Flair dining experience. Our customers rate us 5-stars for quality, authenticity, and passionate service."
|
||||
tag="5-Star Rated"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -142,22 +90,22 @@ export default function ReviewsPage() {
|
||||
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. I've been five times in the last month alone!", rating: 5,
|
||||
"Every dish packed with authentic island flavor! Teria and Deb truly know how to deliver Caribbean excellence. I've been here 5 times already!", 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. This is my go-to spot every Friday!", rating: 5,
|
||||
"Jerk pork did not disappoint! Best food truck in Lehigh Acres. Fresh, authentic, and made with real passion. Absolutely worth the visit.", 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. Highly recommend!", rating: 5,
|
||||
"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"},
|
||||
{
|
||||
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,
|
||||
"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"},
|
||||
{
|
||||
@@ -167,48 +115,15 @@ export default function ReviewsPage() {
|
||||
"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 to everyone!", rating: 5,
|
||||
"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"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Call to Action Section */}
|
||||
<div id="reviews-cta" data-section="reviews-cta">
|
||||
<FeatureCardTen
|
||||
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 Online Now", href: "/menu"},
|
||||
{
|
||||
text: "Call (239) 785-0423", href: "tel:2397850423"},
|
||||
text: "Order Now", href: "/menu"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
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: Zap,
|
||||
text: "Fresh & Fast Service"},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
text: "Authentic Caribbean Quality"},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -224,4 +139,4 @@ export default function ReviewsPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user