Compare commits
13 Commits
version_14
...
version_6
| Author | SHA1 | Date | |
|---|---|---|---|
| c2c4cb7efb | |||
| e986717e78 | |||
| 3c03ca2235 | |||
| 75b5295762 | |||
| 1f6c3a410a | |||
| b9a3fd519e | |||
| b313790c52 | |||
| ee60b23ca7 | |||
| 621fe6d5b3 | |||
| a9bd44921e | |||
| 31f2476021 | |||
| ab590a4089 | |||
| b4ff83f7f4 |
@@ -48,7 +48,7 @@ export default function AboutPage() {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Connect With Us", items: [
|
title: "Connect With Us", items: [
|
||||||
{ label: "Facebook", href: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr" },
|
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
|
||||||
{ label: "About Us", href: "/about" },
|
{ label: "About Us", href: "/about" },
|
||||||
{ label: "Privacy Policy", href: "/" },
|
{ label: "Privacy Policy", href: "/" },
|
||||||
{ label: "Terms of Service", href: "/" },
|
{ label: "Terms of Service", href: "/" },
|
||||||
@@ -146,7 +146,7 @@ export default function AboutPage() {
|
|||||||
text: "Order Now", href: "/menu"},
|
text: "Order Now", href: "/menu"},
|
||||||
]}
|
]}
|
||||||
buttonAnimation="slide-up"
|
buttonAnimation="slide-up"
|
||||||
imageSrc="data:image/svg+xml,%3Csvg xmlns?_wi=21'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E"
|
imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg?_wi=1"
|
||||||
imageAlt="Caribbean Flair About Us"
|
imageAlt="Caribbean Flair About Us"
|
||||||
mediaAnimation="opacity"
|
mediaAnimation="opacity"
|
||||||
imagePosition="right"
|
imagePosition="right"
|
||||||
@@ -157,7 +157,7 @@ export default function AboutPage() {
|
|||||||
{/* Meet the Owners Section */}
|
{/* Meet the Owners Section */}
|
||||||
<div id="owners-spotlight" data-section="owners-spotlight">
|
<div id="owners-spotlight" data-section="owners-spotlight">
|
||||||
<TeamCardTwo
|
<TeamCardTwo
|
||||||
title="Meet the Owners"
|
title="Meet the Island Visionaries"
|
||||||
description="Teria Bryant and Deb Farrell: Passionate Black-owned, women-owned entrepreneurs bringing authentic Caribbean soul to Lehigh Acres."
|
description="Teria Bryant and Deb Farrell: Passionate Black-owned, women-owned entrepreneurs bringing authentic Caribbean soul to Lehigh Acres."
|
||||||
tag="Our Founders"
|
tag="Our Founders"
|
||||||
tagIcon={Heart}
|
tagIcon={Heart}
|
||||||
@@ -169,20 +169,20 @@ export default function AboutPage() {
|
|||||||
members={[
|
members={[
|
||||||
{
|
{
|
||||||
id: "teria-bryant", name: "Teria Bryant", role: "Founder & Head Chef", description:
|
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. Their vision transformed Caribbean Flair from a dream into a premium dining destination serving Lehigh Acres with pride.", 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:
|
||||||
"data:image/svg+xml,%3Csvg xmlns?_wi=1'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff6b6b;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23ffa500;stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='grad1b' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%234ecdc4;stop-opacity:1' /%3E%3Cstop offset='25%25' style='stop-color:%2345b7aa;stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:%233a9b8f;stop-opacity:1' /%3E%3Cstop offset='75%25' style='stop-color:%2327746b;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%2308d9d6;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23grad1b)' width='400' height='300'/%3E%3Cpath d='M0 0 Q100 80 200 100 T400 0 L400 60 Q300 80 200 120 T0 80 Z' fill='%23ffffff' opacity='0.15'/%3E%3Ccircle cx='200' cy='120' r='50' fill='%23ffffff' opacity='0.8'/%3E%3Crect x='120' y='180' width='160' height='100' rx='10' fill='%23ffffff' opacity='0.1'/%3E%3Cline x1='150' y1='190' x2='250' y2='190' stroke='%23ffffff' stroke-width='2' opacity='0.3'/%3E%3Cline x1='150' y1='210' x2='250' y2='210' stroke='%23ffffff' stroke-width='2' opacity='0.3'/%3E%3C/svg%3E", imageAlt: "Teria Bryant, founder of Caribbean Flair", socialLinks: [
|
"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,
|
icon: Facebook,
|
||||||
url: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr"},
|
url: "https://facebook.com/caribbeanflair"},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "deb-farrell", name: "Deb Farrell", role: "Co-Owner & Operations Lead", description:
|
id: "deb-farrell", name: "Deb Farrell", role: "Co-Owner & Operations Lead", description:
|
||||||
"Deb ensures every customer experience is smooth, welcoming, and unforgettable. Together with Teria, they are building a thriving Black- and women-owned business that celebrates Caribbean culture and community impact.", 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:
|
||||||
"data:image/svg+xml,%3Csvg xmlns?_wi=2'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='grad2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23667eea;stop-opacity:1' /%3E%3Cstop offset='25%25' style='stop-color:%235a67d8;stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:%234c51bf;stop-opacity:1' /%3E%3Cstop offset='75%25' style='stop-color:%233f3ba3;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23764ba2;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23grad2)' width='400' height='300'/%3E%3Cpath d='M0 150 Q100 100 200 120 T400 150 L400 300 L0 300 Z' fill='%23ffffff' opacity='0.1'/%3E%3Ccircle cx='200' cy='120' r='50' fill='%23ffffff' opacity='0.8'/%3E%3Crect x='120' y='180' width='160' height='100' rx='10' fill='%23ffffff' opacity='0.1'/%3E%3Cpolygon points='200,185 220,200 200,215 180,200' fill='%23ffffff' opacity='0.2'/%3E%3C/svg%3E", imageAlt: "Deb Farrell, co-owner of Caribbean Flair", socialLinks: [
|
"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,
|
icon: Facebook,
|
||||||
url: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr"},
|
url: "https://facebook.com/caribbeanflair"},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
@@ -250,7 +250,7 @@ export default function AboutPage() {
|
|||||||
id: "mission", title: "Our Mission", description:
|
id: "mission", title: "Our Mission", description:
|
||||||
"Deliver authentic Caribbean excellence while uplifting our community through Black- and women-owned business pride.", media: {
|
"Deliver authentic Caribbean excellence while uplifting our community through Black- and women-owned business pride.", media: {
|
||||||
imageSrc:
|
imageSrc:
|
||||||
"data:image/svg+xml,%3Csvg xmlns?_wi=3'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='grad3' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23667eea;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23764ba2;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23grad3)' width='400' height='300'/%3E%3Cpath d='M150 250 Q200 150 250 250' stroke='%23fff' stroke-width='3' fill='none'/%3E%3Ccircle cx='200' cy='150' r='30' fill='%23fff' opacity='0.8'/%3E%3C/svg%3E"},
|
"http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=1"},
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
icon: Heart,
|
icon: Heart,
|
||||||
@@ -268,7 +268,7 @@ export default function AboutPage() {
|
|||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterMedia
|
<FooterMedia
|
||||||
imageSrc="data:image/svg+xml,%3Csvg xmlns?_wi=25'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E"
|
imageSrc="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"
|
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
|
||||||
logoText="Caribbean Flair"
|
logoText="Caribbean Flair"
|
||||||
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
||||||
|
|||||||
436
src/app/account/page.tsx
Normal file
436
src/app/account/page.tsx
Normal file
@@ -0,0 +1,436 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||||
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||||
|
import { Heart, Package, Settings, LogOut, Menu, X, Phone, Mail, MapPin, Facebook, Instagram } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export default function AccountPage() {
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
const [activeTab, setActiveTab] = useState("orders");
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: "Home", id: "home" },
|
||||||
|
{ name: "Menu", id: "menu" },
|
||||||
|
{ name: "About Us", id: "about" },
|
||||||
|
{ name: "Gallery", id: "gallery" },
|
||||||
|
{ name: "Reviews", id: "reviews" },
|
||||||
|
{ name: "Locations", id: "locations" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const footerColumns = [
|
||||||
|
{
|
||||||
|
title: "Quick Links", items: [
|
||||||
|
{ label: "Home", href: "/" },
|
||||||
|
{ label: "Menu", href: "/menu" },
|
||||||
|
{ label: "Gallery", href: "/" },
|
||||||
|
{ label: "Reviews", href: "/" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Order & Contact", items: [
|
||||||
|
{ label: "Order Online", href: "/" },
|
||||||
|
{ label: "Call Us", href: "tel:2397850423" },
|
||||||
|
{ label: "Locations & Hours", href: "/" },
|
||||||
|
{ label: "Contact", href: "/" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Connect With Us", items: [
|
||||||
|
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
|
||||||
|
{ label: "About Us", href: "/" },
|
||||||
|
{ label: "Privacy Policy", href: "/" },
|
||||||
|
{ label: "Terms of Service", href: "/" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Located In", items: [
|
||||||
|
{ label: "801 Leeland Heights Blvd W", href: "/" },
|
||||||
|
{ label: "Lehigh Acres, FL 33936", href: "/" },
|
||||||
|
{ label: "Open Until 9PM", href: "/" },
|
||||||
|
{ label: "Delivery Available", href: "/" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const orderHistory = [
|
||||||
|
{
|
||||||
|
id: "order-001", date: "Jan 15, 2025", items: "Jerk Chicken Platter x2, Curry Shrimp Platter x1", total: "$49.85", status: "Delivered"},
|
||||||
|
{
|
||||||
|
id: "order-002", date: "Jan 10, 2025", items: "Conch Fritters Combo x3, Mac & Cheese x2", total: "$45.75", status: "Delivered"},
|
||||||
|
{
|
||||||
|
id: "order-003", date: "Jan 5, 2025", items: "Curry Goat Platter x1, Festival Dumplings x1", total: "$38.90", status: "Delivered"},
|
||||||
|
];
|
||||||
|
|
||||||
|
const favorites = [
|
||||||
|
{
|
||||||
|
id: "fav-1", name: "Jerk Chicken Platter", price: "$15.95", image: "http://img.b2bpic.net/free-photo/from-shrimps-batter-with-red-rice-greens-white-plate_176474-2654.jpg?_wi=1"},
|
||||||
|
{
|
||||||
|
id: "fav-2", name: "Curry Shrimp Platter", price: "$16.95", image: "http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=1"},
|
||||||
|
{
|
||||||
|
id: "fav-3", name: "Conch Fritters Combo", price: "$12.95", image: "http://img.b2bpic.net/free-photo/chicken-nuggets-served-with-french-fries-sauces_140725-5759.jpg?_wi=1"},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="bounce-effect"
|
||||||
|
defaultTextAnimation="entrance-slide"
|
||||||
|
borderRadius="pill"
|
||||||
|
contentWidth="compact"
|
||||||
|
sizing="medium"
|
||||||
|
background="none"
|
||||||
|
cardStyle="inset"
|
||||||
|
primaryButtonStyle="radial-glow"
|
||||||
|
secondaryButtonStyle="glass"
|
||||||
|
headingFontWeight="medium"
|
||||||
|
>
|
||||||
|
{/* Navbar */}
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarStyleCentered
|
||||||
|
brandName="Caribbean Flair"
|
||||||
|
navItems={navItems}
|
||||||
|
button={{
|
||||||
|
text: "Order Now", href: "/menu"}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main className="min-h-screen bg-gradient-to-br from-background to-card pt-8 pb-20">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h1 className="text-4xl font-bold text-foreground mb-2">My Account</h1>
|
||||||
|
<p className="text-foreground/70">Welcome back! Manage your orders and favorites.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Hamburger Menu */}
|
||||||
|
<div className="lg:hidden mb-6">
|
||||||
|
<button
|
||||||
|
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary-cta text-foreground hover:opacity-90 transition-opacity"
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
>
|
||||||
|
{sidebarOpen ? <X size={20} /> : <Menu size={20} />}
|
||||||
|
<span>{sidebarOpen ? "Close" : "Menu"}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||||
|
{/* Sidebar Navigation */}
|
||||||
|
<aside
|
||||||
|
className={`lg:col-span-1 ${
|
||||||
|
sidebarOpen ? "block" : "hidden lg:block"
|
||||||
|
} lg:sticky lg:top-24 h-fit`}
|
||||||
|
>
|
||||||
|
<nav
|
||||||
|
className="space-y-2 bg-card rounded-lg p-6 border border-card/50 backdrop-blur-sm"
|
||||||
|
role="navigation"
|
||||||
|
aria-label="Account navigation"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab("orders")}
|
||||||
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
|
||||||
|
activeTab === "orders"
|
||||||
|
? "bg-primary-cta text-foreground"
|
||||||
|
: "text-foreground/70 hover:text-foreground hover:bg-background/50"
|
||||||
|
}`}
|
||||||
|
aria-current={activeTab === "orders" ? "page" : undefined}
|
||||||
|
>
|
||||||
|
<Package size={20} />
|
||||||
|
<span>Order History</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab("favorites")}
|
||||||
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
|
||||||
|
activeTab === "favorites"
|
||||||
|
? "bg-primary-cta text-foreground"
|
||||||
|
: "text-foreground/70 hover:text-foreground hover:bg-background/50"
|
||||||
|
}`}
|
||||||
|
aria-current={activeTab === "favorites" ? "page" : undefined}
|
||||||
|
>
|
||||||
|
<Heart size={20} />
|
||||||
|
<span>Favorites</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab("settings")}
|
||||||
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
|
||||||
|
activeTab === "settings"
|
||||||
|
? "bg-primary-cta text-foreground"
|
||||||
|
: "text-foreground/70 hover:text-foreground hover:bg-background/50"
|
||||||
|
}`}
|
||||||
|
aria-current={activeTab === "settings" ? "page" : undefined}
|
||||||
|
>
|
||||||
|
<Settings size={20} />
|
||||||
|
<span>Settings</span>
|
||||||
|
</button>
|
||||||
|
<hr className="my-2 border-card/30" />
|
||||||
|
<button
|
||||||
|
className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-foreground/70 hover:text-foreground hover:bg-background/50 transition-all"
|
||||||
|
aria-label="Logout"
|
||||||
|
>
|
||||||
|
<LogOut size={20} />
|
||||||
|
<span>Logout</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Main Content Area */}
|
||||||
|
<div className="lg:col-span-3">
|
||||||
|
{/* Order History Tab */}
|
||||||
|
{activeTab === "orders" && (
|
||||||
|
<section id="orders" className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-foreground mb-4">Order History</h2>
|
||||||
|
<p className="text-foreground/70 mb-6">View all your previous orders and reorder your favorites.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{orderHistory.map((order) => (
|
||||||
|
<div
|
||||||
|
key={order.id}
|
||||||
|
className="bg-card rounded-lg p-6 border border-card/50 backdrop-blur-sm hover:border-primary-cta/50 transition-all"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<span className="text-sm font-semibold text-primary-cta">Order #{order.id}</span>
|
||||||
|
<span
|
||||||
|
className="px-3 py-1 rounded-full text-xs font-medium bg-accent/20 text-accent"
|
||||||
|
role="status"
|
||||||
|
>
|
||||||
|
{order.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-foreground/70 text-sm mb-1">{order.date}</p>
|
||||||
|
<p className="text-foreground mb-2">{order.items}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="text-xl font-bold text-primary-cta mb-3">{order.total}</p>
|
||||||
|
<button
|
||||||
|
className="px-4 py-2 bg-primary-cta text-foreground rounded-lg hover:opacity-90 transition-opacity text-sm font-medium"
|
||||||
|
aria-label={`Reorder items from ${order.id}`}
|
||||||
|
>
|
||||||
|
Reorder
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Favorites Tab */}
|
||||||
|
{activeTab === "favorites" && (
|
||||||
|
<section id="favorites" className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-foreground mb-4">Favorite Items</h2>
|
||||||
|
<p className="text-foreground/70 mb-6">Quick access to your most loved Caribbean Flair dishes.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{favorites.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
className="bg-card rounded-lg overflow-hidden border border-card/50 backdrop-blur-sm hover:border-primary-cta/50 transition-all group"
|
||||||
|
>
|
||||||
|
<div className="relative overflow-hidden aspect-square bg-background/50">
|
||||||
|
<img
|
||||||
|
src={item.image}
|
||||||
|
alt={item.name}
|
||||||
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="absolute top-3 right-3 p-2 bg-primary-cta rounded-full text-foreground hover:opacity-90 transition-opacity"
|
||||||
|
aria-label={`Remove ${item.name} from favorites`}
|
||||||
|
>
|
||||||
|
<Heart size={18} className="fill-current" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="p-4">
|
||||||
|
<h3 className="font-semibold text-foreground mb-1">{item.name}</h3>
|
||||||
|
<p className="text-primary-cta font-bold mb-3">{item.price}</p>
|
||||||
|
<button
|
||||||
|
className="w-full px-3 py-2 bg-primary-cta text-foreground rounded-lg hover:opacity-90 transition-opacity text-sm font-medium"
|
||||||
|
aria-label={`Add ${item.name} to cart`}
|
||||||
|
>
|
||||||
|
Add to Cart
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Settings Tab */}
|
||||||
|
{activeTab === "settings" && (
|
||||||
|
<section id="settings" className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-foreground mb-4">Account Settings</h2>
|
||||||
|
<p className="text-foreground/70 mb-6">Manage your profile and communication preferences.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Profile Information */}
|
||||||
|
<div className="bg-card rounded-lg p-6 border border-card/50 backdrop-blur-sm">
|
||||||
|
<h3 className="text-lg font-semibold text-foreground mb-4">Profile Information</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-foreground mb-2">Full Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="John Doe"
|
||||||
|
className="w-full px-4 py-2 bg-background border border-card/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta"
|
||||||
|
aria-label="Full name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-foreground mb-2">Email</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="john@example.com"
|
||||||
|
className="w-full px-4 py-2 bg-background border border-card/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta"
|
||||||
|
aria-label="Email address"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button className="px-6 py-2 bg-primary-cta text-foreground rounded-lg hover:opacity-90 transition-opacity font-medium">
|
||||||
|
Save Changes
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Delivery Address */}
|
||||||
|
<div className="bg-card rounded-lg p-6 border border-card/50 backdrop-blur-sm">
|
||||||
|
<h3 className="text-lg font-semibold text-foreground mb-4">Default Delivery Address</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-foreground mb-2">Street Address</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="123 Main Street"
|
||||||
|
className="w-full px-4 py-2 bg-background border border-card/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta"
|
||||||
|
aria-label="Street address"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-foreground mb-2">City</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Lehigh Acres"
|
||||||
|
className="w-full px-4 py-2 bg-background border border-card/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta"
|
||||||
|
aria-label="City"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-foreground mb-2">ZIP Code</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="33936"
|
||||||
|
className="w-full px-4 py-2 bg-background border border-card/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta"
|
||||||
|
aria-label="ZIP code"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className="px-6 py-2 bg-primary-cta text-foreground rounded-lg hover:opacity-90 transition-opacity font-medium">
|
||||||
|
Update Address
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notification Preferences */}
|
||||||
|
<div className="bg-card rounded-lg p-6 border border-card/50 backdrop-blur-sm">
|
||||||
|
<h3 className="text-lg font-semibold text-foreground mb-4">Notifications</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="flex items-center gap-3 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
defaultChecked
|
||||||
|
className="w-5 h-5 rounded border-card/30 text-primary-cta focus:ring-primary-cta"
|
||||||
|
aria-label="Email notifications for orders"
|
||||||
|
/>
|
||||||
|
<span className="text-foreground">Email me order updates</span>
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center gap-3 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
defaultChecked
|
||||||
|
className="w-5 h-5 rounded border-card/30 text-primary-cta focus:ring-primary-cta"
|
||||||
|
aria-label="SMS notifications"
|
||||||
|
/>
|
||||||
|
<span className="text-foreground">Text me special offers</span>
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center gap-3 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="w-5 h-5 rounded border-card/30 text-primary-cta focus:ring-primary-cta"
|
||||||
|
aria-label="Marketing emails"
|
||||||
|
/>
|
||||||
|
<span className="text-foreground">Marketing emails and promotions</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Quick Contact Section */}
|
||||||
|
<section className="bg-card/50 backdrop-blur-sm py-12 border-t border-card/30" aria-labelledby="quick-contact-heading">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 id="quick-contact-heading" className="text-2xl font-bold text-foreground text-center mb-8">
|
||||||
|
Need Help? Get in Touch
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
|
||||||
|
<div className="flex flex-col items-center text-center">
|
||||||
|
<div className="p-3 bg-primary-cta rounded-full mb-3">
|
||||||
|
<Phone size={24} className="text-foreground" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-foreground mb-1">Call Us</h3>
|
||||||
|
<p className="text-foreground/70">
|
||||||
|
<a href="tel:2397850423" className="hover:text-primary-cta transition-colors">
|
||||||
|
(239) 785-0423
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center text-center">
|
||||||
|
<div className="p-3 bg-primary-cta rounded-full mb-3">
|
||||||
|
<Mail size={24} className="text-foreground" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-foreground mb-1">Email</h3>
|
||||||
|
<p className="text-foreground/70">
|
||||||
|
<a href="mailto:info@caribbeanflair.com" className="hover:text-primary-cta transition-colors">
|
||||||
|
info@caribbeanflair.com
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center text-center">
|
||||||
|
<div className="p-3 bg-primary-cta rounded-full mb-3">
|
||||||
|
<MapPin size={24} className="text-foreground" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-foreground mb-1">Visit Us</h3>
|
||||||
|
<p className="text-foreground/70">801 Leeland Heights Blvd W<br />Lehigh Acres, FL 33936</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div id="footer" data-section="footer">
|
||||||
|
<FooterMedia
|
||||||
|
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
|
||||||
|
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
|
||||||
|
logoText="Caribbean Flair"
|
||||||
|
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
||||||
|
columns={footerColumns}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -137,115 +137,6 @@ export default function MenuPage() {
|
|||||||
secondaryButtonStyle="glass"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="medium"
|
headingFontWeight="medium"
|
||||||
>
|
>
|
||||||
<style>{`
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideInFromLeft {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-60px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideInFromRight {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(60px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes glowHover {
|
|
||||||
0% {
|
|
||||||
box-shadow: 0 0 0px rgba(227, 68, 0, 0.4);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
box-shadow: 0 0 20px rgba(227, 68, 0, 0.6);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
box-shadow: 0 0 30px rgba(227, 68, 0, 0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
animation: fadeIn 0.8s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-section] {
|
|
||||||
animation: fadeIn 1.2s ease-out forwards;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#hero [data-section] {
|
|
||||||
animation-delay: 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu-categories {
|
|
||||||
animation-delay: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#testimonials {
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#final-cta {
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer {
|
|
||||||
animation-delay: 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
animation: slideInFromRight 1s ease-out forwards;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#hero img {
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu-categories img {
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, [role="button"], a[href*="#"], a[href*="/"] {
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover, [role="button"]:hover, a[href*="#"]:hover, a[href*="/"]:hover {
|
|
||||||
animation: glowHover 0.6s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gradient-to-r, .bg-primary-cta, [class*="bg-blue"], [class*="bg-orange"], [class*="bg-red"] {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gradient-to-r:hover, .bg-primary-cta:hover, [class*="bg-blue"]:hover, [class*="bg-orange"]:hover, [class*="bg-red"]:hover {
|
|
||||||
filter: brightness(1.1);
|
|
||||||
animation: glowHover 0.6s ease-in-out;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
|
|
||||||
{/* Navbar */}
|
{/* Navbar */}
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
@@ -294,7 +185,8 @@ export default function MenuPage() {
|
|||||||
<button
|
<button
|
||||||
key={cat.id}
|
key={cat.id}
|
||||||
onClick={() => setActiveCategory(cat.id)}
|
onClick={() => setActiveCategory(cat.id)}
|
||||||
className={`px-6 py-2 rounded-full transition-all ${ activeCategory === 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-gradient-to-r from-orange-500 to-red-500 text-white"
|
||||||
: "bg-gray-200 text-gray-800 hover:bg-gray-300"
|
: "bg-gray-200 text-gray-800 hover:bg-gray-300"
|
||||||
}`}
|
}`}
|
||||||
|
|||||||
420
src/app/order-online/page.tsx
Normal file
420
src/app/order-online/page.tsx
Normal file
@@ -0,0 +1,420 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||||
|
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
||||||
|
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
||||||
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||||
|
import {
|
||||||
|
ShoppingCart,
|
||||||
|
CreditCard,
|
||||||
|
Apple,
|
||||||
|
DollarSign,
|
||||||
|
CheckCircle,
|
||||||
|
Zap,
|
||||||
|
TrendingUp,
|
||||||
|
Facebook,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export default function OrderOnlinePage() {
|
||||||
|
const [cartItems, setCartItems] = useState<Array<{ id: string; name: string; price: number; quantity: number }>>([
|
||||||
|
{ id: "jerk-chicken", name: "Jerk Chicken Platter", price: 15.95, quantity: 1 },
|
||||||
|
]);
|
||||||
|
const [showCheckout, setShowCheckout] = useState(false);
|
||||||
|
const [paymentMethod, setPaymentMethod] = useState<"card" | "apple-pay" | "paypal" | null>(null);
|
||||||
|
const [orderConfirmed, setOrderConfirmed] = useState(false);
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: "Home", id: "/" },
|
||||||
|
{ name: "Order Online", id: "/order-online" },
|
||||||
|
{ name: "Contact", id: "/contact" },
|
||||||
|
{ name: "Gallery", id: "/" },
|
||||||
|
{ name: "Reviews", id: "/" },
|
||||||
|
{ name: "Locations", id: "/" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const footerColumns = [
|
||||||
|
{
|
||||||
|
title: "Quick Links", items: [
|
||||||
|
{ label: "Home", href: "/" },
|
||||||
|
{ label: "Order Online", href: "/order-online" },
|
||||||
|
{ label: "Gallery", href: "/" },
|
||||||
|
{ label: "Reviews", href: "/" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Order & Contact", items: [
|
||||||
|
{ label: "Order Online", href: "/order-online" },
|
||||||
|
{ label: "Call Us", href: "tel:2397850423" },
|
||||||
|
{ label: "Locations & Hours", href: "/" },
|
||||||
|
{ label: "Contact", href: "/contact" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Connect With Us", items: [
|
||||||
|
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
|
||||||
|
{ label: "About Us", href: "/" },
|
||||||
|
{ label: "Privacy Policy", href: "/" },
|
||||||
|
{ label: "Terms of Service", href: "/" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Located In", items: [
|
||||||
|
{ label: "801 Leeland Heights Blvd W", href: "/" },
|
||||||
|
{ label: "Lehigh Acres, FL 33936", href: "/" },
|
||||||
|
{ label: "Open Until 9PM", href: "/" },
|
||||||
|
{ label: "Delivery Available", href: "/" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const cartTotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
||||||
|
|
||||||
|
const handleAddToCart = (productName: string, price: number) => {
|
||||||
|
const existingItem = cartItems.find((item) => item.name === productName);
|
||||||
|
if (existingItem) {
|
||||||
|
setCartItems(
|
||||||
|
cartItems.map((item) =>
|
||||||
|
item.id === existingItem.id ? { ...item, quantity: item.quantity + 1 } : item
|
||||||
|
)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
setCartItems([
|
||||||
|
...cartItems,
|
||||||
|
{ id: Date.now().toString(), name: productName, price, quantity: 1 },
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveFromCart = (id: string) => {
|
||||||
|
setCartItems(cartItems.filter((item) => item.id !== id));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCheckout = () => {
|
||||||
|
setShowCheckout(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePaymentSubmit = (method: "card" | "apple-pay" | "paypal") => {
|
||||||
|
setPaymentMethod(method);
|
||||||
|
// Simulate payment processing
|
||||||
|
setTimeout(() => {
|
||||||
|
setOrderConfirmed(true);
|
||||||
|
// In a real app, send receipt via email here
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="bounce-effect"
|
||||||
|
defaultTextAnimation="entrance-slide"
|
||||||
|
borderRadius="pill"
|
||||||
|
contentWidth="compact"
|
||||||
|
sizing="medium"
|
||||||
|
background="none"
|
||||||
|
cardStyle="inset"
|
||||||
|
primaryButtonStyle="radial-glow"
|
||||||
|
secondaryButtonStyle="glass"
|
||||||
|
headingFontWeight="medium"
|
||||||
|
>
|
||||||
|
{/* Navbar */}
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarStyleCentered
|
||||||
|
brandName="Caribbean Flair"
|
||||||
|
navItems={navItems}
|
||||||
|
button={{
|
||||||
|
text: "Contact Us", href: "/contact"}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<div id="hero" data-section="hero">
|
||||||
|
<HeroSplit
|
||||||
|
title="Order Your Island Feast Online"
|
||||||
|
description="Browse our authentic Caribbean menu, add items to your cart, and securely checkout. Meals are prepared fresh to order and ready for pickup or delivery."
|
||||||
|
tag="Fast & Secure Checkout"
|
||||||
|
tagIcon={ShoppingCart}
|
||||||
|
tagAnimation="slide-up"
|
||||||
|
background={{ variant: "glowing-orb" }}
|
||||||
|
buttons={[
|
||||||
|
{
|
||||||
|
text: "View Menu", href: "#menu"},
|
||||||
|
]}
|
||||||
|
buttonAnimation="slide-up"
|
||||||
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg"
|
||||||
|
imageAlt="Order Online - Caribbean Flair Menu"
|
||||||
|
mediaAnimation="opacity"
|
||||||
|
imagePosition="right"
|
||||||
|
ariaLabel="Order Online hero section"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cart & Checkout Section */}
|
||||||
|
<div id="cart-checkout" data-section="cart-checkout" className="py-16 px-4">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
{!orderConfirmed ? (
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
{/* Menu Items */}
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<h2 className="text-3xl font-bold mb-8">Select Your Items</h2>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{[
|
||||||
|
{ id: "jerk-chicken", name: "Jerk Chicken Platter", price: 15.95, desc: "Full Rack" },
|
||||||
|
{ id: "curry-shrimp", name: "Curry Shrimp Platter", price: 16.95, desc: "Fresh Daily" },
|
||||||
|
{ id: "conch-fritters", name: "Conch Fritters Combo", price: 12.95, desc: "6 Pieces" },
|
||||||
|
{ id: "escovitch-fish", name: "Escovitch Fish", price: 17.95, desc: "Island Tradition" },
|
||||||
|
{ id: "curry-goat", name: "Curry Goat", price: 16.95, desc: "Community Favorite" },
|
||||||
|
{ id: "festival-sides", name: "Festival & Slaw", price: 8.95, desc: "Must Try" },
|
||||||
|
].map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
className="flex justify-between items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold">{item.name}</p>
|
||||||
|
<p className="text-sm text-gray-600">{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<p className="font-bold">${item.price.toFixed(2)}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => handleAddToCart(item.name, item.price)}
|
||||||
|
className="px-4 py-2 bg-primary-cta text-white rounded-lg hover:opacity-90 transition"
|
||||||
|
>
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cart Summary */}
|
||||||
|
<div className="md:col-span-1">
|
||||||
|
<div className="border border-gray-200 rounded-lg p-6 sticky top-20">
|
||||||
|
<h3 className="text-xl font-bold mb-4">Your Cart</h3>
|
||||||
|
<div className="space-y-3 mb-6">
|
||||||
|
{cartItems.map((item) => (
|
||||||
|
<div key={item.id} className="flex justify-between items-start">
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-sm font-medium">{item.name}</p>
|
||||||
|
<p className="text-xs text-gray-500">Qty: {item.quantity}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="text-sm font-semibold">${(item.price * item.quantity).toFixed(2)}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => handleRemoveFromCart(item.id)}
|
||||||
|
className="text-xs text-red-500 hover:underline"
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="border-t pt-4">
|
||||||
|
<div className="flex justify-between font-bold text-lg mb-4">
|
||||||
|
<span>Total:</span>
|
||||||
|
<span>${cartTotal.toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleCheckout}
|
||||||
|
disabled={cartItems.length === 0}
|
||||||
|
className="w-full px-4 py-3 bg-primary-cta text-white rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 transition"
|
||||||
|
>
|
||||||
|
Proceed to Checkout
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{/* Checkout Form */}
|
||||||
|
{showCheckout && !orderConfirmed && (
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<h2 className="text-3xl font-bold mb-8">Secure Checkout</h2>
|
||||||
|
|
||||||
|
{/* Payment Methods */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<h3 className="text-xl font-semibold mb-4">Select Payment Method</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<button
|
||||||
|
onClick={() => handlePaymentSubmit("card")}
|
||||||
|
className="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-cta hover:bg-blue-50 transition flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<CreditCard size={24} />
|
||||||
|
<span>Credit Card</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handlePaymentSubmit("apple-pay")}
|
||||||
|
className="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-cta hover:bg-blue-50 transition flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<Apple size={24} />
|
||||||
|
<span>Apple Pay</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handlePaymentSubmit("paypal")}
|
||||||
|
className="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-cta hover:bg-blue-50 transition flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<DollarSign size={24} />
|
||||||
|
<span>PayPal</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Credit Card Form */}
|
||||||
|
{paymentMethod === "card" && (
|
||||||
|
<div className="space-y-4 mb-8">
|
||||||
|
<h3 className="text-lg font-semibold">Credit Card Details</h3>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Cardholder Name"
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Card Number (16 digits)"
|
||||||
|
maxLength={16}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||||
|
/>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="MM/YY"
|
||||||
|
className="px-4 py-2 border border-gray-300 rounded-lg"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="CVV"
|
||||||
|
maxLength={3}
|
||||||
|
className="px-4 py-2 border border-gray-300 rounded-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Billing Address */}
|
||||||
|
<div className="space-y-4 mb-8">
|
||||||
|
<h3 className="text-lg font-semibold">Billing Address</h3>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Full Address"
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="Email Address"
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
placeholder="Phone Number"
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Order Summary */}
|
||||||
|
<div className="bg-gray-50 p-6 rounded-lg mb-6">
|
||||||
|
<h3 className="font-semibold mb-3">Order Summary</h3>
|
||||||
|
{cartItems.map((item) => (
|
||||||
|
<div key={item.id} className="flex justify-between text-sm mb-2">
|
||||||
|
<span>{item.name} x{item.quantity}</span>
|
||||||
|
<span>${(item.price * item.quantity).toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="border-t pt-3 mt-3 flex justify-between font-bold">
|
||||||
|
<span>Total:</span>
|
||||||
|
<span>${cartTotal.toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => handlePaymentSubmit(paymentMethod || "card")}
|
||||||
|
className="w-full px-6 py-3 bg-primary-cta text-white rounded-lg font-semibold hover:opacity-90 transition"
|
||||||
|
>
|
||||||
|
Complete Purchase
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Order Confirmation */}
|
||||||
|
{orderConfirmed && (
|
||||||
|
<div className="max-w-2xl mx-auto text-center py-12">
|
||||||
|
<div className="mb-6">
|
||||||
|
<CheckCircle size={64} className="mx-auto text-green-500 mb-4" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl font-bold mb-4">Order Confirmed!</h2>
|
||||||
|
<p className="text-lg text-gray-600 mb-6">
|
||||||
|
Your order has been successfully placed. A receipt has been sent to your email.
|
||||||
|
</p>
|
||||||
|
<div className="bg-gray-50 p-6 rounded-lg mb-6">
|
||||||
|
<h3 className="font-semibold mb-3">Order Details</h3>
|
||||||
|
{cartItems.map((item) => (
|
||||||
|
<div key={item.id} className="flex justify-between text-sm mb-2">
|
||||||
|
<span>{item.name} x{item.quantity}</span>
|
||||||
|
<span>${(item.price * item.quantity).toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="border-t pt-3 mt-3 flex justify-between font-bold text-lg">
|
||||||
|
<span>Total:</span>
|
||||||
|
<span>${cartTotal.toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 mb-4">Payment Method: {paymentMethod}</p>
|
||||||
|
<p className="text-gray-600 mb-8">Your meal will be ready for pickup in approximately 15-20 minutes.</p>
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="px-6 py-3 bg-primary-cta text-white rounded-lg font-semibold hover:opacity-90 transition inline-block"
|
||||||
|
>
|
||||||
|
Return Home
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<div id="order-features" data-section="order-features">
|
||||||
|
<FeatureCardTen
|
||||||
|
title="Why Order with Caribbean Flair?"
|
||||||
|
description="Experience seamless online ordering with secure payment, fast preparation, and delicious authentic Caribbean meals delivered right to you."
|
||||||
|
tag="Premium Experience"
|
||||||
|
tagIcon={Zap}
|
||||||
|
tagAnimation="slide-up"
|
||||||
|
textboxLayout="default"
|
||||||
|
animationType="slide-up"
|
||||||
|
useInvertedBackground={true}
|
||||||
|
features={[
|
||||||
|
{
|
||||||
|
id: "secure-payment", title: "Secure Payment Processing", description:
|
||||||
|
"We use industry-leading encryption for all transactions. Your payment information is always protected.", media: {
|
||||||
|
imageSrc:
|
||||||
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-wha24yfi.jpg"},
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
icon: CreditCard,
|
||||||
|
text: "Multiple Payment Options"},
|
||||||
|
{
|
||||||
|
icon: CheckCircle,
|
||||||
|
text: "Encrypted Transactions"},
|
||||||
|
],
|
||||||
|
reverse: false,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div id="footer" data-section="footer">
|
||||||
|
<FooterMedia
|
||||||
|
imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
|
||||||
|
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
|
||||||
|
logoText="Caribbean Flair"
|
||||||
|
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
||||||
|
columns={footerColumns}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
252
src/app/page.tsx
252
src/app/page.tsx
@@ -22,6 +22,7 @@ import {
|
|||||||
Phone,
|
Phone,
|
||||||
ShoppingCart,
|
ShoppingCart,
|
||||||
X,
|
X,
|
||||||
|
Instagram,
|
||||||
MapPin,
|
MapPin,
|
||||||
Clock,
|
Clock,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
@@ -76,7 +77,8 @@ export default function HomePage() {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Connect With Us", items: [
|
title: "Connect With Us", items: [
|
||||||
{ label: "Facebook", href: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr" },
|
{ label: "Facebook", href: "https://facebook.com/caribbeanflair" },
|
||||||
|
{ label: "Instagram", href: "https://instagram.com/caribbeanflair" },
|
||||||
{ label: "Privacy Policy", href: "#" },
|
{ label: "Privacy Policy", href: "#" },
|
||||||
{ label: "Terms of Service", href: "#" },
|
{ label: "Terms of Service", href: "#" },
|
||||||
],
|
],
|
||||||
@@ -104,135 +106,13 @@ export default function HomePage() {
|
|||||||
secondaryButtonStyle="glass"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="medium"
|
headingFontWeight="medium"
|
||||||
>
|
>
|
||||||
<style>{`
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideInFromLeft {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-60px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideInFromRight {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(60px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes glowHover {
|
|
||||||
0% {
|
|
||||||
box-shadow: 0 0 0px rgba(227, 68, 0, 0.4);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
box-shadow: 0 0 20px rgba(227, 68, 0, 0.6);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
box-shadow: 0 0 30px rgba(227, 68, 0, 0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
animation: fadeIn 0.8s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-section] {
|
|
||||||
animation: fadeIn 1.2s ease-out forwards;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#hero [data-section] {
|
|
||||||
animation-delay: 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#signature-dishes {
|
|
||||||
animation-delay: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#featured-gallery {
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#testimonials {
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#owners-spotlight {
|
|
||||||
animation-delay: 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#final-cta {
|
|
||||||
animation-delay: 0.6s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer {
|
|
||||||
animation-delay: 0.7s;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
animation: slideInFromRight 1s ease-out forwards;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#hero img {
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#signature-dishes img {
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#featured-gallery img {
|
|
||||||
animation-delay: 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, [role="button"], a[href*="#"], a[href*="/"] {
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover, [role="button"]:hover, a[href*="#"]:hover, a[href*="/"]:hover {
|
|
||||||
animation: glowHover 0.6s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gradient-to-r, .bg-primary-cta, [class*="bg-blue"], [class*="bg-orange"], [class*="bg-red"] {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gradient-to-r:hover, .bg-primary-cta:hover, [class*="bg-blue"]:hover, [class*="bg-orange"]:hover, [class*="bg-red"]:hover {
|
|
||||||
filter: brightness(1.1);
|
|
||||||
animation: glowHover 0.6s ease-in-out;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
|
|
||||||
{/* Persistent Top Navigation Bar */}
|
{/* 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">
|
<div id="nav" data-section="nav" className="sticky top-0 z-40 w-full bg-white/80 backdrop-blur-md border-b border-gray-200">
|
||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
brandName="Caribbean Flair"
|
brandName="Caribbean Flair"
|
||||||
navItems={navItems}
|
navItems={navItems}
|
||||||
button={{
|
button={{
|
||||||
text: "Order Now", href: "#signature-dishes"
|
text: "Order Now", href: "#signature-dishes"}}
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -312,7 +192,7 @@ export default function HomePage() {
|
|||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplit
|
<HeroSplit
|
||||||
title="Caribbean Flair Island"
|
title="Authentic Jamaican Island Flavors in Lehigh Acres"
|
||||||
description="Fresh off the grill. Jerk, curry, and soul food made with love by Teria Bryant & Deb Farrell. Experience premium Caribbean fusion like never before."
|
description="Fresh off the grill. Jerk, curry, and soul food made with love by Teria Bryant & Deb Farrell. Experience premium Caribbean fusion like never before."
|
||||||
tag="Black & Women-Owned"
|
tag="Black & Women-Owned"
|
||||||
tagIcon={Award}
|
tagIcon={Award}
|
||||||
@@ -320,14 +200,12 @@ export default function HomePage() {
|
|||||||
background={{ variant: "glowing-orb" }}
|
background={{ variant: "glowing-orb" }}
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Order Online Now", href: "#signature-dishes"
|
text: "Order Online Now", href: "#signature-dishes"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
text: "View Full Menu", href: "#signature-dishes"
|
text: "View Full Menu", href: "#signature-dishes"},
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
buttonAnimation="slide-up"
|
buttonAnimation="slide-up"
|
||||||
imageSrc="data:image/svg+xml,%3Csvg xmlns=?_wi=1'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E"
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773849790665-2gw0wih3.jpg?_wi=3"
|
||||||
imageAlt="Red Caribbean Flair Island Jerk Grill Trailer"
|
imageAlt="Red Caribbean Flair Island Jerk Grill Trailer"
|
||||||
mediaAnimation="opacity"
|
mediaAnimation="opacity"
|
||||||
imagePosition="right"
|
imagePosition="right"
|
||||||
@@ -345,8 +223,7 @@ export default function HomePage() {
|
|||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Explore Full Menu", href: "#signature-dishes"
|
text: "Explore Full Menu", href: "#signature-dishes"},
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
buttonAnimation="slide-up"
|
buttonAnimation="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
@@ -356,16 +233,13 @@ export default function HomePage() {
|
|||||||
products={[
|
products={[
|
||||||
{
|
{
|
||||||
id: "jerk-chicken", name: "Jerk Chicken Platter", price: "$15.95", variant: "Full Rack", imageSrc:
|
id: "jerk-chicken", name: "Jerk Chicken Platter", price: "$15.95", variant: "Full Rack", imageSrc:
|
||||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=2'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Jerk chicken grilled on foil with spices"
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-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:
|
id: "curry-shrimp", name: "Curry Shrimp Platter", price: "$16.95", variant: "Fresh Daily", imageSrc:
|
||||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=3'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Curry shrimp over rice and peas"
|
"http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=1", imageAlt: "Curry shrimp over rice and peas"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "conch-fritters", name: "Conch Fritters Combo", price: "$12.95", variant: "6 Pieces", imageSrc:
|
id: "conch-fritters", name: "Conch Fritters Combo", price: "$12.95", variant: "6 Pieces", imageSrc:
|
||||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=4'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Golden conch fritters with dipping sauce"
|
"http://img.b2bpic.net/free-photo/chicken-nuggets-served-with-french-fries-sauces_140725-5759.jpg?_wi=1", imageAlt: "Golden conch fritters with dipping sauce"},
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -385,40 +259,34 @@ export default function HomePage() {
|
|||||||
{
|
{
|
||||||
id: "jerk-pork", category: "Main Dishes", title: "Jerk Pork Did Not Disappoint", excerpt:
|
id: "jerk-pork", category: "Main Dishes", title: "Jerk Pork Did Not Disappoint", excerpt:
|
||||||
"Perfectly seasoned and grilled, bursting with island spices and authentic Jamaican flavor.", imageSrc:
|
"Perfectly seasoned and grilled, bursting with island spices and authentic Jamaican flavor.", imageSrc:
|
||||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=5'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Jerk pork platter with rice and tropical slaw", authorName: "Caribbean Flair Team", authorAvatar:
|
"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:
|
||||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e8e8e8'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EAuthor%3C/text%3E%3C/svg%3E", date: "Fresh Daily"
|
"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:
|
id: "curry-goat", category: "Featured", title: "Curry Goat - A Community Favorite", excerpt:
|
||||||
"Tender, aromatic, and cooked to perfection. Every bite transports you straight to Jamaica.", imageSrc:
|
"Tender, aromatic, and cooked to perfection. Every bite transports you straight to Jamaica.", imageSrc:
|
||||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=6'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Rich curry goat served over rice and peas", authorName: "Caribbean Flair Team", authorAvatar:
|
"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:
|
||||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e8e8e8'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EAuthor%3C/text%3E%3C/svg%3E", date: "Popular Choice"
|
"http://img.b2bpic.net/free-vector/colorful-avatars_23-2147502919.jpg", date: "Popular Choice"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "festival-sides", category: "Sides", title: "Festival Dumplings & Tropical Slaw", excerpt:
|
id: "festival-sides", category: "Sides", title: "Festival Dumplings & Tropical Slaw", excerpt:
|
||||||
"Crispy, golden festival dumplings paired with our signature tropical slaw for the perfect complement.", imageSrc:
|
"Crispy, golden festival dumplings paired with our signature tropical slaw for the perfect complement.", imageSrc:
|
||||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=7'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt:
|
"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:
|
"Festival dumplings with tropical slaw and mac and cheese", authorName: "Caribbean Flair Team", authorAvatar:
|
||||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e8e8e8'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EAuthor%3C/text%3E%3C/svg%3E", date: "Must Try"
|
"http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg", date: "Must Try"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "escovitch-fish", category: "Seafood", title: "Escovitch Fish - Island Tradition", excerpt:
|
id: "escovitch-fish", category: "Seafood", title: "Escovitch Fish - Island Tradition", excerpt:
|
||||||
"Fresh fish prepared in authentic Jamaican style with pickled vegetables and bold island flavors.", imageSrc:
|
"Fresh fish prepared in authentic Jamaican style with pickled vegetables and bold island flavors.", imageSrc:
|
||||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=8'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Escovitch fish with pickled vegetables and lime", authorName: "Caribbean Flair Team", authorAvatar:
|
"http://img.b2bpic.net/free-photo/grilled-chicken-served-with-aubergine-lemon-parsley_140725-1554.jpg?_wi=1", imageAlt: "Escovitch fish with pickled vegetables and lime", authorName: "Caribbean Flair Team", authorAvatar:
|
||||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e8e8e8'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EAuthor%3C/text%3E%3C/svg%3E", date: "Customer Favorite"
|
"http://img.b2bpic.net/free-photo/young-male-holding-hands-pockets-white-shirt-jacket-looking-elegant-front-view_176474-99655.jpg", date: "Customer Favorite"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "mac-cheese", category: "Sides", title: "Creamy Island Mac & Cheese", excerpt:
|
id: "mac-cheese", category: "Sides", title: "Creamy Island Mac & Cheese", excerpt:
|
||||||
"Smooth, rich, and soul-warming comfort food that pairs perfectly with any of our signature mains.", imageSrc:
|
"Smooth, rich, and soul-warming comfort food that pairs perfectly with any of our signature mains.", imageSrc:
|
||||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=9'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Creamy mac and cheese side dish", authorName: "Caribbean Flair Team", authorAvatar:
|
"http://img.b2bpic.net/free-photo/delicious-food-presentation_23-2151914003.jpg?_wi=1", imageAlt: "Creamy mac and cheese side dish", authorName: "Caribbean Flair Team", authorAvatar:
|
||||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e8e8e8'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EAuthor%3C/text%3E%3C/svg%3E", date: "Comfort Classic"
|
"http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg", date: "Comfort Classic"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "grill-action", category: "Behind the Scenes", title: "Fresh Off The Grill - Live Action", excerpt:
|
id: "grill-action", category: "Behind the Scenes", title: "Fresh Off The Grill - Live Action", excerpt:
|
||||||
"Watch our expert grill masters prepare your meal with passion, precision, and authentic Caribbean technique.", imageSrc:
|
"Watch our expert grill masters prepare your meal with passion, precision, and authentic Caribbean technique.", imageSrc:
|
||||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=10'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", imageAlt: "Chef grilling jerk meats on foil with smoke", authorName: "Caribbean Flair Team", authorAvatar:
|
"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:
|
||||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e8e8e8'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3EAuthor%3C/text%3E%3C/svg%3E", date: "Daily Special"
|
"http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg", date: "Daily Special"},
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -437,30 +305,35 @@ export default function HomePage() {
|
|||||||
showRating={true}
|
showRating={true}
|
||||||
testimonials={[
|
testimonials={[
|
||||||
{
|
{
|
||||||
id: "review-1", name: "A wonderful escape from the rush", handle: "@happycustomer", testimonial: "Caribbean Flair is like stepping into a tropical paradise in the middle of Lehigh Acres. The food is authentic, the portions are generous, and you can taste the passion in every bite. Highly recommend!", rating: 5,
|
id: "review-1", name: "Sarah Johnson", handle: "@sarahjohn2024", testimonial:
|
||||||
|
"Every dish packed with authentic island flavor! Teria and Deb truly know how to deliver Caribbean excellence.", rating: 5,
|
||||||
imageSrc:
|
imageSrc:
|
||||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773858120920-110y3vfr.png", imageAlt: "Happy customer"
|
"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: "Authentic flavors that transport you", handle: "@flavorseeker", testimonial: "Every time I order from Caribbean Flair, I feel like I'm on vacation. The jerk seasoning is perfect, the sides are fresh, and Teria and Deb's passion for the business really shows. This is the real deal!", rating: 5,
|
id: "review-2", name: "Michael Chen", handle: "@mikeflavorseek", testimonial:
|
||||||
|
"Jerk pork did not disappoint! Best food truck in Lehigh Acres. Fresh, authentic, and made with real passion.", rating: 5,
|
||||||
imageSrc:
|
imageSrc:
|
||||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773858120921-5ihmnmey.png", imageAlt: "Satisfied diner"
|
"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: "Supporting local black-owned excellence", handle: "@communityproud", testimonial: "I love supporting local black-owned and women-owned businesses, and Caribbean Flair is setting the bar high. The quality of food is on par with restaurants charging twice the price. This is what community means!", rating: 5,
|
id: "review-3", name: "Amanda Davis", handle: "@amandataste", testimonial:
|
||||||
|
"The curry shrimp is absolutely incredible! You can taste the love in every bite. Supporting Black-owned, women-owned businesses never tasted so good.", rating: 5,
|
||||||
imageSrc:
|
imageSrc:
|
||||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773858120921-a2zauysc.png", imageAlt: "Community supporter"
|
"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: "Best food truck experience ever", handle: "@foodlover", testimonial: "I've been to a lot of food trucks, but Caribbean Flair stands out. Fresh ingredients, perfect seasoning, quick service, and amazing people running it. This is exactly what Lehigh Acres needed!", rating: 5,
|
id: "review-4", name: "David Martinez", handle: "@davidsflavorquests", testimonial:
|
||||||
|
"Finally, real Caribbean food in Lehigh Acres! The menu, the quality, the service—everything is top-tier. This is my new favorite spot.", rating: 5,
|
||||||
imageSrc:
|
imageSrc:
|
||||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773858120921-ulw90m6s.png", imageAlt: "Food enthusiast"
|
"http://img.b2bpic.net/free-photo/crazy-dealer-happy-expression_1194-4005.jpg?_wi=1", imageAlt: "David Martinez at Caribbean Flair"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "review-5", name: "Worth every penny", handle: "@valueseeker", testimonial: "For the quality and quantity of food you get at Caribbean Flair, the prices are incredibly fair. You're not just getting a meal, you're getting an authentic Caribbean experience made with love and expertise.", rating: 5,
|
id: "review-5", name: "Jessica Williams", handle: "@jessicaeats_local", testimonial:
|
||||||
|
"Conch fritters are crispy heaven! The whole experience feels premium yet so authentic. Teria and Deb are changing the food game.", rating: 5,
|
||||||
imageSrc:
|
imageSrc:
|
||||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773858120921-j0in75sv.png", imageAlt: "Value-conscious customer"
|
"http://img.b2bpic.net/free-photo/friends-eating-barbecue_23-2148733607.jpg?_wi=1", imageAlt: "Jessica Williams enjoying meal"},
|
||||||
},
|
{
|
||||||
|
id: "review-6", name: "Robert Thompson", handle: "@robfeeds", testimonial:
|
||||||
|
"Island fusion done right. The quality of ingredients and cooking technique is professional-level. Worth every penny and the drive. Highly recommend!", rating: 5,
|
||||||
|
imageSrc:
|
||||||
|
"http://img.b2bpic.net/free-photo/woman-with-thumbs-up_1149-1163.jpg?_wi=1", imageAlt: "Robert Thompson thumbs up"},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -468,8 +341,8 @@ export default function HomePage() {
|
|||||||
{/* Owners Spotlight Section */}
|
{/* Owners Spotlight Section */}
|
||||||
<div id="owners-spotlight" data-section="owners-spotlight">
|
<div id="owners-spotlight" data-section="owners-spotlight">
|
||||||
<TeamCardTwo
|
<TeamCardTwo
|
||||||
title="Meet the Owners"
|
title="Meet the Island Visionaries"
|
||||||
description="Teris Bryan and Deb Farrell: Passionate entrepreneurs bringing authentic Caribbean soul to Lehigh Acres."
|
description="Teria Bryant and Deb Farrell: Passionate Black-owned, women-owned entrepreneurs bringing authentic Caribbean soul to Lehigh Acres."
|
||||||
tag="Community Leaders"
|
tag="Community Leaders"
|
||||||
tagIcon={Heart}
|
tagIcon={Heart}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
@@ -480,22 +353,20 @@ export default function HomePage() {
|
|||||||
members={[
|
members={[
|
||||||
{
|
{
|
||||||
id: "teria-bryant", name: "Teria Bryant", role: "Founder & Head Chef", description:
|
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. They transformed Caribbean Flair from a dream into a premium dining destination serving Lehigh Acres with pride.", videoSrc:
|
"Teria brings 15+ years of Caribbean culinary expertise and authentic island passion to every dish. Her vision transformed Caribbean Flair from a dream into a premium dining destination serving Lehigh Acres with pride.", imageSrc:
|
||||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773857612004-vaw7ydy1.jpg", videoAriaLabel: "Teria Bryant, founder of Caribbean Flair", socialLinks: [
|
"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,
|
icon: Facebook,
|
||||||
url: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr"
|
url: "https://facebook.com/caribbeanflair"},
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "deb-farrell", name: "Deb Farrell", role: "Co-Owner & Operations Lead", description:
|
id: "deb-farrell", name: "Deb Farrell", role: "Co-Owner & Operations Lead", description:
|
||||||
"Deb ensures every customer experience is smooth, welcoming, and unforgettable. Together with Teria, they are building a thriving Black- and women-owned business that celebrates Caribbean culture and community impact.", videoSrc:
|
"Deb ensures every customer experience is smooth, welcoming, and unforgettable. Together with Teria, she's building a thriving Black- and women-owned business that celebrates Caribbean culture and community impact.", imageSrc:
|
||||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=18'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E", videoAriaLabel: "Deb Farrell, co-owner of Caribbean Flair", socialLinks: [
|
"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,
|
icon: Facebook,
|
||||||
url: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr"
|
url: "https://facebook.com/caribbeanflair"},
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
@@ -512,11 +383,9 @@ export default function HomePage() {
|
|||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Order Online Now", href: "#signature-dishes"
|
text: "Order Online Now", href: "#signature-dishes"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
text: "Call (239) 785-0423", href: "tel:2397850423"
|
text: "Call (239) 785-0423", href: "tel:2397850423"},
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
buttonAnimation="slide-up"
|
buttonAnimation="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
@@ -527,17 +396,14 @@ export default function HomePage() {
|
|||||||
id: "fast-delivery", title: "Fast & Fresh", description:
|
id: "fast-delivery", title: "Fast & Fresh", description:
|
||||||
"Grilled fresh to order. Your meal arrives hot, delicious, and packed with island flavor.", media: {
|
"Grilled fresh to order. Your meal arrives hot, delicious, and packed with island flavor.", media: {
|
||||||
imageSrc:
|
imageSrc:
|
||||||
"data:image/svg+xml,%3Csvg xmlns=?_wi=19'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E"
|
"http://img.b2bpic.net/free-photo/side-view-smiley-man-getting-coffee_23-2149663609.jpg?_wi=1"},
|
||||||
},
|
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
icon: Zap,
|
icon: Zap,
|
||||||
text: "Ready in 15 minutes"
|
text: "Ready in 15 minutes"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: TrendingUp,
|
icon: TrendingUp,
|
||||||
text: "Peak fresh quality"
|
text: "Peak fresh quality"},
|
||||||
},
|
|
||||||
],
|
],
|
||||||
reverse: false,
|
reverse: false,
|
||||||
},
|
},
|
||||||
@@ -548,7 +414,7 @@ export default function HomePage() {
|
|||||||
{/* Footer with Local Map Info and Social Links */}
|
{/* Footer with Local Map Info and Social Links */}
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterMedia
|
<FooterMedia
|
||||||
imageSrc="data:image/svg+xml,%3Csvg xmlns=?_wi=20'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23e8e8e8' width='400' height='300'/%3E%3Ctext x='50%' y='50%' font-size='16' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3ETemplate Image%3C/text%3E%3C/svg%3E"
|
imageSrc="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"
|
imageAlt="Caribbean Flair Island Jerk Grill Trailer"
|
||||||
logoText="Caribbean Flair"
|
logoText="Caribbean Flair"
|
||||||
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
|
||||||
@@ -557,4 +423,4 @@ export default function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user