Update src/app/page.tsx

Merge version_6 into main

src/app/account/page.tsx

@@ -1,436 +0,0 @@
-"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/menu/page.tsx

@@ -137,6 +137,115 @@ export default function MenuPage() {
       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;
+        }
+
+        #menu-categories {
+          animation-delay: 0.2s;
+        }
+
+        #testimonials {
+          animation-delay: 0.3s;
+        }
+
+        #final-cta {
+          animation-delay: 0.4s;
+        }
+
+        #footer {
+          animation-delay: 0.5s;
+        }
+
+        img {
+          animation: slideInFromRight 1s ease-out forwards;
+          opacity: 0;
+        }
+
+        #hero img {
+          animation-delay: 0.3s;
+        }
+
+        #menu-categories img {
+          animation-delay: 0.4s;
+        }
+
+        button, [role="button"], a[href*="#"], a[href*="/"] {
+          position: relative;
+          transition: all 0.3s ease;
+        }
+
+        button:hover, [role="button"]:hover, a[href*="#"]:hover, a[href*="/"]:hover {
+          animation: glowHover 0.6s ease-in-out;
+        }
+
+        .bg-gradient-to-r, .bg-primary-cta, [class*="bg-blue"], [class*="bg-orange"], [class*="bg-red"] {
+          transition: all 0.3s ease;
+        }
+
+        .bg-gradient-to-r:hover, .bg-primary-cta:hover, [class*="bg-blue"]:hover, [class*="bg-orange"]:hover, [class*="bg-red"]:hover {
+          filter: brightness(1.1);
+          animation: glowHover 0.6s ease-in-out;
+        }
+      `}</style>
+
       {/* Navbar */}
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
@@ -185,8 +294,7 @@ export default function MenuPage() {
               <button
                 key={cat.id}
                 onClick={() => setActiveCategory(cat.id)}
-                className={`px-6 py-2 rounded-full transition-all ${
-                  activeCategory === cat.id
+                className={`px-6 py-2 rounded-full transition-all ${                  activeCategory === cat.id
                     ? "bg-gradient-to-r from-orange-500 to-red-500 text-white"
                     : "bg-gray-200 text-gray-800 hover:bg-gray-300"
                 }`}

src/app/order-online/page.tsx

@@ -1,420 +0,0 @@
-"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

@@ -106,6 +106,127 @@ 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
@@ -423,4 +544,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
+}