Update src/app/page.tsx

src/app/about/page.tsx

@@ -48,7 +48,7 @@ export default function AboutPage() {
     },
     {
       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: "Privacy Policy", href: "/" },
         { label: "Terms of Service", href: "/" },
@@ -146,7 +146,7 @@ export default function AboutPage() {
               text: "Order Now",              href: "/menu"},
           ]}
           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"
           mediaAnimation="opacity"
           imagePosition="right"
@@ -157,7 +157,7 @@ export default function AboutPage() {
       {/* Meet the Owners Section */}
       <div id="owners-spotlight" data-section="owners-spotlight">
         <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."
           tag="Our Founders"
           tagIcon={Heart}
@@ -169,20 +169,20 @@ 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. 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,
-                  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:
-                "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,
-                  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:
                 "Deliver authentic Caribbean excellence while uplifting our community through Black- and women-owned business pride.",              media: {
                 imageSrc:
-                  "data:image/svg+xml,%3Csvg xmlns?_wi=3'http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%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: [
                 {
                   icon: Heart,
@@ -268,7 +268,7 @@ export default function AboutPage() {
       {/* Footer */}
       <div id="footer" data-section="footer">
         <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"
           logoText="Caribbean Flair"
           copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"

src/app/account/page.tsx

@@ -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>
+  );
+}

src/app/full-menu/page.tsx

@@ -1,168 +0,0 @@
-"use client";
-
-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 FooterMedia from "@/components/sections/footer/FooterMedia";
-import { Flame } from "lucide-react";
-
-export default function FullMenuPage() {
-  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: "/gallery" },
-        { label: "Reviews", href: "/reviews" },
-      ],
-    },
-    {
-      title: "Order & Contact",      items: [
-        { label: "Order Online", href: "/menu" },
-        { label: "Call Us", href: "tel:2397850423" },
-        { label: "Locations & Hours", href: "/locations" },
-        { label: "Contact", href: "/contact" },
-      ],
-    },
-    {
-      title: "Connect With Us",      items: [
-        { label: "Facebook", href: "https://www.facebook.com/share/1CckZyvyXX/?mibextid=wwXIfr" },
-        { label: "About Us", href: "/about" },
-        { 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 allMenuItems = [
-    {
-      id: "jerk-chicken",      name: "Jerk Chicken Platter",      price: "$15.95",      variant: "Full Rack",      imageSrc: "http://img.b2bpic.net/free-photo/from-shrimps-batter-with-red-rice-greens-white-plate_176474-2654.jpg?_wi=1",      imageAlt: "Jerk chicken grilled on foil with spices"},
-    {
-      id: "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: "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: "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"},
-    {
-      id: "curry-shrimp",      name: "Curry Shrimp Platter",      price: "$16.95",      variant: "Fresh Daily",      imageSrc: "http://img.b2bpic.net/free-photo/side-view-fried-eggs-with-shrimps-vegetables-pan-served-with-sauces_140725-11952.jpg?_wi=1",      imageAlt: "Curry shrimp over rice and peas"},
-    {
-      id: "conch-fritters",      name: "Conch Fritters Combo",      price: "$12.95",      variant: "6 Pieces",      imageSrc: "http://img.b2bpic.net/free-photo/deep-fried-samosas-rustic-crockery-plate-generated-by-ai_188544-41080.jpg?_wi=1",      imageAlt: "Golden conch fritters with dipping sauce"},
-    {
-      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-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: "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"},
-    {
-      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: "$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",      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"},
-    {
-      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: "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"},
-    {
-      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: "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"},
-  ];
-
-  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>
-
-      {/* Hero Section */}
-      <div id="hero" data-section="hero">
-        <HeroSplit
-          title="Complete Island Menu"
-          description="Explore our full selection of authentic Caribbean dishes. Every item is crafted fresh and packed with island soul."
-          tag="Exclusive"
-          tagIcon={Flame}
-          tagAnimation="slide-up"
-          background={{ variant: "glowing-orb" }}
-          buttons={[
-            {
-              text: "Call to Order",              href: "tel:2397850423"},
-          ]}
-          buttonAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg?_wi=3"
-          imageAlt="Caribbean Flair Full Menu"
-          mediaAnimation="opacity"
-          imagePosition="right"
-          ariaLabel="Full menu page hero section"
-        />
-      </div>
-
-      {/* Full Menu Section */}
-      <div id="full-menu" data-section="full-menu">
-        <ProductCardFour
-          title="All Menu Items"
-          description="Discover our complete selection of authentic Caribbean dishes, sides, drinks, and specials. All items are fresh and made to order."
-          tag="Complete Selection"
-          tagIcon={Flame}
-          tagAnimation="slide-up"
-          buttons={[
-            {
-              text: "Order Now",              href: "/menu"},
-          ]}
-          buttonAnimation="slide-up"
-          textboxLayout="default"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          useInvertedBackground={false}
-          products={allMenuItems}
-        />
-      </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>
-  );
-}

src/app/menu/page.tsx

@@ -1,34 +1,129 @@
 "use client";
 
-import { useState } from "react";
 import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import { ArrowLeft } from "lucide-react";
+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,
+  Flame,
+  Star,
+  Zap,
+  TrendingUp,
+  Facebook,
+} from "lucide-react";
+import { useState } from "react";
 
 export default function MenuPage() {
   const navItems = [
     { name: "Home", id: "home" },
-    { name: "Menu", id: "signature-dishes" },
+    { name: "Menu", id: "menu" },
-    { name: "About Us", id: "owners-spotlight" },
+    { name: "About Us", id: "about" },
-    { name: "Gallery", id: "featured-gallery" },
+    { name: "Gallery", id: "gallery" },
-    { name: "Reviews", id: "testimonials" },
+    { name: "Reviews", id: "reviews" },
-    { name: "Locations", id: "footer" },
+    { name: "Locations", id: "locations" },
   ];
 
-  const menuImages = [
+  const [activeCategory, setActiveCategory] = useState("mains");
+
+  const footerColumns = [
     {
-      id: "menu-1",      title: "Signature Jerk Platter",      description: "Fresh grilled jerk seasoned meats with our authentic Caribbean spice blend",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773883141480-85jt966z.jpg"},
+      title: "Quick Links",      items: [
+        { label: "Home", href: "/" },
+        { label: "Menu", href: "/menu" },
+        { label: "Gallery", href: "/gallery" },
+        { label: "Reviews", href: "/" },
+      ],
+    },
     {
-      id: "menu-2",      title: "Island Curry Fusion",      description: "Rich, aromatic curry with tender meats and traditional Caribbean flavors",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773883141480-yyr4lilk.jpg"},
+      title: "Order & Contact",      items: [
+        { label: "Order Online", href: "/menu" },
+        { label: "Call Us", href: "tel:2397850423" },
+        { label: "Locations & Hours", href: "/" },
+        { label: "Contact", href: "/" },
+      ],
+    },
     {
-      id: "menu-3",      title: "Escovitch Seafood",      description: "Fresh fish with pickled vegetables and authentic island preparation",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773883141481-5qpq55fx.jpg"},
+      title: "Connect With Us",      items: [
+        { label: "Facebook", href: "https://facebook.com/caribbeanflair" },
+        { label: "About Us", href: "/about" },
+        { label: "Privacy Policy", href: "/" },
+        { label: "Terms of Service", href: "/" },
+      ],
+    },
     {
-      id: "menu-4",      title: "Conch Fritters",      description: "Golden, crispy conch fritters with house-made dipping sauce",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773883141481-8okohg7v.jpg"},
+      title: "Located In",      items: [
-    {
+        { label: "801 Leeland Heights Blvd W", href: "/" },
-      id: "menu-5",      title: "Festival Sides",      description: "Festival dumplings, rice & peas, mac & cheese, and tropical slaw",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afn0reuidgadYlHif4J2xHlmq8/uploaded-1773883141481-tk7p5ayr.jpg"},
+        { label: "Lehigh Acres, FL 33936", href: "/" },
+        { label: "Open Until 9PM", href: "/" },
+        { label: "Delivery Available", href: "/" },
+      ],
+    },
   ];
 
+  const menuItems = {
+    mains: [
+      {
+        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: "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: "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: "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: "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-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: "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: "$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: "$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",        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: "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: "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: "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: "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 getMenuItems = () => {
+    return menuItems[activeCategory as keyof typeof menuItems] || [];
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
@@ -42,287 +137,164 @@ export default function MenuPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
-      <style>{`
+      {/* Navbar */}
-        @keyframes fadeIn {
+      <div id="nav" data-section="nav">
-          from {
-            opacity: 0;
-          }
-          to {
-            opacity: 1;
-          }
-        }
-
-        @keyframes slideUp {
-          from {
-            opacity: 0;
-            transform: translateY(30px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-
-        @keyframes scaleIn {
-          from {
-            opacity: 0;
-            transform: scale(0.95);
-          }
-          to {
-            opacity: 1;
-            transform: scale(1);
-          }
-        }
-
-        html {
-          scroll-behavior: smooth;
-        }
-
-        body {
-          animation: fadeIn 0.8s ease-out;
-        }
-
-        .menu-hero {
-          animation: slideUp 0.8s ease-out;
-        }
-
-        .menu-gallery {
-          animation: fadeIn 1s ease-out 0.2s both;
-        }
-
-        .menu-item {
-          animation: scaleIn 0.6s ease-out forwards;
-          opacity: 0;
-        }
-
-        .menu-item:nth-child(1) { animation-delay: 0.3s; }
-        .menu-item:nth-child(2) { animation-delay: 0.4s; }
-        .menu-item:nth-child(3) { animation-delay: 0.5s; }
-        .menu-item:nth-child(4) { animation-delay: 0.6s; }
-        .menu-item:nth-child(5) { animation-delay: 0.7s; }
-      `}</style>
-
-      {/* Navigation Bar */}
-      <div className="sticky top-0 z-40 w-full bg-white/80 backdrop-blur-md border-b border-gray-200">
         <NavbarStyleCentered
           brandName="Caribbean Flair"
           navItems={navItems}
           button={{
-            text: "Order Now",            href: "/order"}}
+            text: "Order Now",            href: "/menu"}}
         />
       </div>
 
-      {/* Main Content */}
+      {/* Hero Section */}
-      <div className="min-h-screen bg-gradient-to-b from-white via-gray-50 to-white">
+      <div id="hero" data-section="hero">
-        {/* Hero Section */}
+        <HeroSplit
-        <div className="menu-hero relative px-4 py-16 md:py-24 bg-gradient-to-r from-primary-cta/10 via-accent/10 to-background-accent/10">
+          title="Browse Our Island Menu"
-          <div className="max-w-6xl mx-auto">
+          description="Explore authentic Caribbean flavors. From jerk meats to curry dishes, each item is crafted fresh and packed with island soul."
-            <div className="mb-8 flex items-center gap-4">
+          tag="Fresh Daily"
-              <Link
+          tagIcon={Flame}
-                href="/#signature-dishes"
+          tagAnimation="slide-up"
-                className="flex items-center gap-2 text-primary-cta hover:opacity-70 transition-opacity"
+          background={{ variant: "glowing-orb" }}
+          buttons={[
+            {
+              text: "Call to Order",              href: "tel:2397850423"},
+          ]}
+          buttonAnimation="slide-up"
+          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 page hero section"
+        />
+      </div>
+
+      {/* 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={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"
+                }`}
               >
-                <ArrowLeft className="w-5 h-5" />
+                {cat.label}
-                Back to Home
+              </button>
-              </Link>
+            ))}
-            </div>
-
-            <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-4">
-              Our Complete Menu
-            </h1>
-            <p className="text-xl text-gray-600 max-w-2xl">
-              Discover all of our authentic Caribbean dishes, crafted with love and served fresh off the grill.
-            </p>
           </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>
 
-        {/* Menu Gallery Section */}
+      {/* Testimonials Section */}
-        <div className="menu-gallery px-4 py-16 md:py-24">
+      <div id="testimonials" data-section="testimonials">
-          <div className="max-w-7xl mx-auto">
+        <TestimonialCardThirteen
-            <div className="text-center mb-16">
+          title="What Customers Say About Our Menu"
-              <h2 className="text-4xl font-bold text-gray-900 mb-4">Featured Dishes</h2>
+          description="Real reviews from real Caribbean Flair customers who love our authentic flavors."
-              <p className="text-lg text-gray-600">Experience the visual journey of our premium Caribbean cuisine</p>
+          tag="5-Star Rated"
-            </div>
+          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>
 
-            {/* Image Gallery Grid */}
+      {/* Final CTA Section */}
-            <div className="grid grid-cols-1 md:grid-cols-5 gap-6 mb-16">
+      <div id="final-cta" data-section="final-cta">
-              {/* Large feature image - spans 2x2 on desktop */}
+        <FeatureCardTen
-              <div className="menu-item md:col-span-2 md:row-span-2 group relative overflow-hidden rounded-2xl shadow-xl border border-white/20">
+          title="Ready to Order?"
-                <img
+          description="Choose your favorite items from our authentic Caribbean menu and get them fresh off the grill."
-                  src={menuImages[0].imageSrc}
+          tag="Ready to Order"
-                  alt={menuImages[0].title}
+          tagIcon={Zap}
-                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+          tagAnimation="slide-up"
-                />
+          buttons={[
-                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
+            {
-                  <h3 className="text-2xl font-bold text-white mb-2">{menuImages[0].title}</h3>
+              text: "Call (239) 785-0423",              href: "tel:2397850423"},
-                  <p className="text-gray-200 text-sm">{menuImages[0].description}</p>
+            {
-                </div>
+              text: "Visit Us Today",              href: "/"},
-              </div>
+          ]}
+          buttonAnimation="slide-up"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={true}
+          features={[
+            {
+              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>
 
-              {/* Right side grid - 3 items */}
+      {/* Footer */}
-              {menuImages.slice(1, 4).map((item, idx) => (
+      <div id="footer" data-section="footer">
-                <div
+        <FooterMedia
-                  key={item.id}
+          imageSrc="http://img.b2bpic.net/free-photo/chef-cooking-kitchen-while-wearing-professional-attire_23-2151208291.jpg?_wi=1"
-                  className="menu-item group relative overflow-hidden rounded-2xl shadow-lg border border-white/20"
+          imageAlt="Caribbean Flair Island Jerk Grill Trailer"
-                  style={{ animationDelay: `${0.4 + idx * 0.1}s` }}
+          logoText="Caribbean Flair"
-                >
+          copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"
-                  <img
+          columns={footerColumns}
-                    src={item.imageSrc}
+        />
-                    alt={item.title}
-                    className="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
-                    <h3 className="text-lg font-bold text-white mb-1">{item.title}</h3>
-                    <p className="text-gray-200 text-xs">{item.description}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            {/* Last item - full width */}
-            <div className="menu-item group relative overflow-hidden rounded-2xl shadow-xl border border-white/20" style={{ animationDelay: '0.7s' }}>
-              <img
-                src={menuImages[4].imageSrc}
-                alt={menuImages[4].title}
-                className="w-full h-80 object-cover group-hover:scale-105 transition-transform duration-500"
-              />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-8">
-                <h3 className="text-3xl font-bold text-white mb-2">{menuImages[4].title}</h3>
-                <p className="text-gray-200 text-lg">{menuImages[4].description}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Menu Details Section */}
-        <div className="px-4 py-16 md:py-24 bg-gradient-to-b from-white to-gray-50">
-          <div className="max-w-6xl mx-auto">
-            <h2 className="text-4xl font-bold text-gray-900 mb-12 text-center">Complete Menu Options</h2>
-
-            {/* Main Dishes */}
-            <div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/20 p-8 md:p-12 mb-8">
-              <h3 className="text-3xl font-bold text-gray-900 mb-8 pb-4 border-b-2 border-primary-cta/20">Main Dishes</h3>
-              <div className="grid md:grid-cols-2 gap-8">
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Jerk Chicken Platter</h4>
-                  <p className="text-gray-600 mb-3">Marinated in authentic Caribbean spices, grilled to perfection. Served with rice & peas, festival dumplings, and tropical slaw.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$15.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Curry Shrimp Platter</h4>
-                  <p className="text-gray-600 mb-3">Fresh shrimp in our signature curry sauce with Caribbean seasonings. Includes rice & peas, festival dumplings, and tropical slaw.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$16.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Curry Goat</h4>
-                  <p className="text-gray-600 mb-3">Tender goat meat cooked in rich curry sauce with traditional island spices. Served with rice & peas and festival dumplings.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$17.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Escovitch Fish</h4>
-                  <p className="text-gray-600 mb-3">Fresh fish prepared Jamaican style with pickled vegetables. Authentic island flavors in every bite.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$18.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Jerk Pork Platter</h4>
-                  <p className="text-gray-600 mb-3">Succulent jerk pork with our signature island spice blend. Includes all classic sides for the full Caribbean experience.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$16.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Island Combo Platter</h4>
-                  <p className="text-gray-600 mb-3">A sampling of our finest - jerk chicken, curry shrimp, and conch fritters with all the trimmings.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$24.95</p>
-                </div>
-              </div>
-            </div>
-
-            {/* Sides & Appetizers */}
-            <div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/20 p-8 md:p-12 mb-8">
-              <h3 className="text-3xl font-bold text-gray-900 mb-8 pb-4 border-b-2 border-primary-cta/20">Sides & Appetizers</h3>
-              <div className="grid md:grid-cols-2 gap-8">
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Conch Fritters Combo</h4>
-                  <p className="text-gray-600 mb-3">6 pieces of golden, crispy conch fritters. Served with house-made dipping sauce.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$12.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Festival Dumplings</h4>
-                  <p className="text-gray-600 mb-3">Crispy, golden fried dumplings. A Caribbean classic that pairs perfectly with any main dish.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$4.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Creamy Island Mac & Cheese</h4>
-                  <p className="text-gray-600 mb-3">Smooth, rich, and soul-warming. The perfect comfort food complement to our island mains.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$5.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Rice & Peas</h4>
-                  <p className="text-gray-600 mb-3">Traditional Caribbean rice and peas. Fresh, aromatic, and perfectly seasoned.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$4.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Tropical Slaw</h4>
-                  <p className="text-gray-600 mb-3">Fresh, crisp coleslaw with a tropical twist. Light and refreshing alongside any dish.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$3.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Vegetable Medley</h4>
-                  <p className="text-gray-600 mb-3">Fresh seasonal vegetables with island seasonings and a hint of Caribbean flair.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$5.95</p>
-                </div>
-              </div>
-            </div>
-
-            {/* Beverages */}
-            <div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/20 p-8 md:p-12">
-              <h3 className="text-3xl font-bold text-gray-900 mb-8 pb-4 border-b-2 border-primary-cta/20">Beverages</h3>
-              <div className="grid md:grid-cols-2 gap-8">
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Island Ginger Beer</h4>
-                  <p className="text-gray-600 mb-3">Refreshing traditional Caribbean ginger beer. Perfectly spiced and ice-cold.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$2.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Fresh Tropical Juice</h4>
-                  <p className="text-gray-600 mb-3">Mango, passion fruit, or guava. Fresh squeezed island flavors in every sip.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$3.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Sorrel Punch</h4>
-                  <p className="text-gray-600 mb-3">Traditional Caribbean sorrel punch. Tart, sweet, and refreshingly authentic.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$3.95</p>
-                </div>
-                <div className="pb-6">
-                  <h4 className="text-xl font-semibold text-gray-900 mb-2">Cold Beverages</h4>
-                  <p className="text-gray-600 mb-3">Selection of cold drinks to complement your Caribbean meal.</p>
-                  <p className="text-2xl font-bold text-primary-cta">$2.50</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Call to Action */}
-        <div className="px-4 py-16 md:py-20">
-          <div className="max-w-6xl mx-auto bg-gradient-to-r from-primary-cta to-accent rounded-2xl shadow-lg p-8 md:p-12 text-white text-center">
-            <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Experience Caribbean Flair?</h2>
-            <p className="text-white/90 mb-8 text-lg">Call us at (239) 785-0423 or visit our location for fresh Caribbean flavors made to order.</p>
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <a
-                href="tel:2397850423"
-                className="inline-block bg-white text-primary-cta px-8 py-4 rounded-lg font-bold text-lg hover:opacity-90 transition-opacity"
-              >
-                Call Now
-              </a>
-              <Link
-                href="/order"
-                className="inline-block bg-white/20 border-2 border-white text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-white/30 transition-all"
-              >
-                Order Online
-              </Link>
-            </div>
-          </div>
-        </div>
       </div>
     </ThemeProvider>
   );

src/app/order-online/page.tsx

@@ -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>
+  );
+}

src/app/page.tsx

@@ -22,6 +22,7 @@ import {
   Phone,
   ShoppingCart,
   X,
+  Instagram,
   MapPin,
   Clock,
 } from "lucide-react";
@@ -76,7 +77,8 @@ export default function HomePage() {
     },
     {
       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: "Terms of Service", href: "#" },
       ],
@@ -104,135 +106,13 @@ export default function HomePage() {
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
-      <style>{`
-        @keyframes fadeIn {
-          from {
-            opacity: 0;
-          }
-          to {
-            opacity: 1;
-          }
-        }
-
-        @keyframes slideInFromLeft {
-          from {
-            opacity: 0;
-            transform: translateX(-60px);
-          }
-          to {
-            opacity: 1;
-            transform: translateX(0);
-          }
-        }
-
-        @keyframes slideInFromRight {
-          from {
-            opacity: 0;
-            transform: translateX(60px);
-          }
-          to {
-            opacity: 1;
-            transform: translateX(0);
-          }
-        }
-
-        @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 */}
       <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: "See Full Menu",            href: "/menu"
+            text: "Order Now",            href: "#signature-dishes"}}
-          }}
         />
       </div>
 
@@ -255,9 +135,9 @@ export default function HomePage() {
                   {item.name}
                 </a>
               ))}
-              <a href="/menu" className="w-full bg-primary-cta text-white py-2 rounded-lg font-semibold hover:opacity-90 text-center block">
+              <button className="w-full bg-primary-cta text-white py-2 rounded-lg font-semibold hover:opacity-90">
-                See Full Menu
+                Order Online
-              </a>
+              </button>
             </div>
           </div>
         </div>
@@ -274,9 +154,9 @@ export default function HomePage() {
             <Phone className="w-6 h-6 text-primary-cta group-hover:scale-110 transition-transform" />
           </a>
           <a
-            href="/menu"
+            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="See Full Menu"
+            title="Order Now"
           >
             <ShoppingCart className="w-6 h-6 group-hover:scale-110 transition-transform" />
           </a>
@@ -312,7 +192,7 @@ export default function HomePage() {
       {/* Hero Section */}
       <div id="hero" data-section="hero">
         <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."
           tag="Black & Women-Owned"
           tagIcon={Award}
@@ -320,14 +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="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"
           mediaAnimation="opacity"
           imagePosition="right"
@@ -345,8 +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"
@@ -356,16 +233,13 @@ export default function HomePage() {
           products={[
             {
               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:
-                "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:
-                "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>
@@ -385,40 +259,34 @@ export default function HomePage() {
             {
               id: "jerk-pork",              category: "Main Dishes",              title: "Jerk Pork Did Not Disappoint",              excerpt:
                 "Perfectly seasoned and grilled, bursting with island spices and authentic Jamaican flavor.",              imageSrc:
-                "data:image/svg+xml,%3Csvg xmlns=?_wi=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:
                 "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:
                 "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:
-                "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:
                 "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:
                 "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:
                 "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>
@@ -437,30 +305,35 @@ export default function HomePage() {
           showRating={true}
           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:
-                "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:
-                "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:
-                "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:
-                "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:
-                "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>
@@ -468,8 +341,8 @@ export default function HomePage() {
       {/* Owners Spotlight Section */}
       <div id="owners-spotlight" data-section="owners-spotlight">
         <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"
           tagIcon={Heart}
           tagAnimation="slide-up"
@@ -480,22 +353,20 @@ export default function HomePage() {
           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. 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,
-                  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:
-                "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,
-                  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"
           buttons={[
             {
-              text: "Order Online Now",              href: "/menu"
+              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"
           textboxLayout="default"
@@ -527,17 +396,14 @@ export default function HomePage() {
               id: "fast-delivery",              title: "Fast & Fresh",              description:
                 "Grilled fresh to order. Your meal arrives hot, delicious, and packed with island flavor.",              media: {
                 imageSrc:
-                  "data:image/svg+xml,%3Csvg xmlns=?_wi=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: [
                 {
                   icon: Zap,
-                  text: "Ready in 15 minutes"
+                  text: "Ready in 15 minutes"},
-                },
                 {
                   icon: TrendingUp,
-                  text: "Peak fresh quality"
+                  text: "Peak fresh quality"},
-                },
               ],
               reverse: false,
             },
@@ -548,7 +414,7 @@ export default function HomePage() {
       {/* Footer with Local Map Info and Social Links */}
       <div id="footer" data-section="footer">
         <FooterMedia
-          imageSrc="data:image/svg+xml,%3Csvg xmlns=?_wi=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"
           logoText="Caribbean Flair"
           copyrightText="© 2025 Caribbean Flair Island Jerk Grill | Black & Women-Owned | Lehigh Acres, FL"