Update src/app/menu/page.tsx

Merge version_17 into main

src/app/full-menu/page.tsx

@@ -1,19 +1,13 @@
 "use client";
 
-import { useState } from "react";
 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, Lock, X } from "lucide-react";
+import { Flame } from "lucide-react";
 
 export default function FullMenuPage() {
-  const [isPasswordProtected, setIsPasswordProtected] = useState(true);
-  const [passwordInput, setPasswordInput] = useState("");
-  const [passwordError, setPasswordError] = useState(false);
-  const MENU_PASSWORD = "Caribbean2025";
-
   const navItems = [
     { name: "Home", id: "home" },
     { name: "Menu", id: "menu" },
@@ -58,16 +52,6 @@ export default function FullMenuPage() {
     },
   ];
 
-  const handlePasswordSubmit = () => {
-    if (passwordInput === MENU_PASSWORD) {
-      setIsPasswordProtected(false);
-      setPasswordError(false);
-    } else {
-      setPasswordError(true);
-      setPasswordInput("");
-    }
-  };
-
   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"},
@@ -126,101 +110,48 @@ export default function FullMenuPage() {
         />
       </div>
 
-      {/* Password Protection Modal */}
-      {isPasswordProtected && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-2xl max-w-md w-full p-8">
-            <div className="flex items-center justify-center mb-6">
-              <Lock className="w-8 h-8 text-orange-500 mr-2" />
-              <h2 className="text-2xl font-bold">Full Menu Access</h2>
-            </div>
-            <p className="text-gray-600 text-center mb-6">
-              This full menu is password protected. Please enter the password to continue.
-            </p>
-            <input
-              type="password"
-              value={passwordInput}
-              onChange={(e) => {
-                setPasswordInput(e.target.value);
-                setPasswordError(false);
-              }}
-              onKeyPress={(e) => {
-                if (e.key === "Enter") {
-                  handlePasswordSubmit();
-                }
-              }}
-              placeholder="Enter password"
-              className={`w-full px-4 py-3 border-2 rounded-lg mb-4 focus:outline-none transition ${
-                passwordError
-                  ? "border-red-500 focus:border-red-600"
-                  : "border-gray-300 focus:border-orange-500"
-              }`}
-            />
-            {passwordError && (
-              <p className="text-red-600 text-sm mb-4">Incorrect password. Please try again.</p>
-            )}
-            <button
-              onClick={handlePasswordSubmit}
-              className="w-full bg-gradient-to-r from-orange-500 to-red-500 text-white font-semibold py-3 rounded-lg hover:opacity-90 transition mb-3"
-            >
-              Unlock Menu
-            </button>
-            <a
-              href="/"
-              className="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 rounded-lg transition text-center"
-            >
-              Back to Home
-            </a>
-          </div>
-        </div>
-      )}
-
       {/* Hero Section */}
-      {!isPasswordProtected && (
+      <div id="hero" data-section="hero">
-        <div id="hero" data-section="hero">
+        <HeroSplit
-          <HeroSplit
+          title="Complete Island Menu"
-            title="Complete Island Menu"
+          description="Explore our full selection of authentic Caribbean dishes. Every item is crafted fresh and packed with island soul."
-            description="Explore our full selection of authentic Caribbean dishes. Every item is crafted fresh and packed with island soul."
+          tag="Exclusive"
-            tag="Exclusive"
+          tagIcon={Flame}
-            tagIcon={Flame}
+          tagAnimation="slide-up"
-            tagAnimation="slide-up"
+          background={{ variant: "glowing-orb" }}
-            background={{ variant: "glowing-orb" }}
+          buttons={[
-            buttons={[
+            {
-              {
+              text: "Call to Order",              href: "tel:2397850423"},
-                text: "Call to Order",                href: "tel:2397850423"},
+          ]}
-            ]}
+          buttonAnimation="slide-up"
-            buttonAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg?_wi=3"
-            imageSrc="http://img.b2bpic.net/free-vector/summer-label-collectio_23-2148160410.jpg?_wi=3"
+          imageAlt="Caribbean Flair Full Menu"
-            imageAlt="Caribbean Flair Full Menu"
+          mediaAnimation="opacity"
-            mediaAnimation="opacity"
+          imagePosition="right"
-            imagePosition="right"
+          ariaLabel="Full menu page hero section"
-            ariaLabel="Full menu page hero section"
+        />
-          />
+      </div>
-        </div>
-      )}
 
       {/* Full Menu Section */}
-      {!isPasswordProtected && (
+      <div id="full-menu" data-section="full-menu">
-        <div id="full-menu" data-section="full-menu">
+        <ProductCardFour
-          <ProductCardFour
+          title="All Menu Items"
-            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."
-            description="Discover our complete selection of authentic Caribbean dishes, sides, drinks, and specials. All items are fresh and made to order."
+          tag="Complete Selection"
-            tag="Complete Selection"
+          tagIcon={Flame}
-            tagIcon={Flame}
+          tagAnimation="slide-up"
-            tagAnimation="slide-up"
+          buttons={[
-            buttons={[
+            {
-              {
+              text: "Order Now",              href: "/menu"},
-                text: "Order Now",                href: "/menu"},
+          ]}
-            ]}
+          buttonAnimation="slide-up"
-            buttonAnimation="slide-up"
+          textboxLayout="default"
-            textboxLayout="default"
+          gridVariant="three-columns-all-equal-width"
-            gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
-            animationType="slide-up"
+          useInvertedBackground={false}
-            useInvertedBackground={false}
+          products={allMenuItems}
-            products={allMenuItems}
+        />
-          />
+      </div>
-        </div>
-      )}
 
       {/* Footer */}
       <div id="footer" data-section="footer">

src/app/menu/page.tsx

@@ -34,6 +34,19 @@ export default function MenuPage() {
     }
   };
 
+  const menuImages = [
+    {
+      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"},
+    {
+      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"},
+    {
+      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"},
+    {
+      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"},
+    {
+      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"},
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
@@ -57,6 +70,28 @@ export default function MenuPage() {
           }
         }
 
+        @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;
         }
@@ -64,6 +99,25 @@ export default function MenuPage() {
         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 */}
@@ -72,13 +126,13 @@ export default function MenuPage() {
           brandName="Caribbean Flair"
           navItems={navItems}
           button={{
-            text: "See Full Menu",            href: "/menu"
+            text: "Order Now",            href: "/order"
           }}
         />
       </div>
 
       {/* Main Content */}
-      <div className="min-h-screen bg-gradient-to-b from-white to-gray-50">
+      <div className="min-h-screen bg-gradient-to-b from-white via-gray-50 to-white">
         {!isAuthenticated ? (
           // Password Protected View
           <div className="flex items-center justify-center min-h-[calc(100vh-80px)] px-4">
@@ -133,109 +187,216 @@ export default function MenuPage() {
             </div>
           </div>
         ) : (
-          // Full Menu View
+          // Full Menu View with Gallery
-          <div className="max-w-6xl mx-auto px-4 py-12 md:py-20">
+          <div className="w-full">
-            <div className="mb-8 flex items-center gap-4">
+            {/* Hero Section */}
-              <Link
+            <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">
-                href="/#signature-dishes"
+              <div className="max-w-6xl mx-auto">
-                className="flex items-center gap-2 text-primary-cta hover:opacity-70 transition-opacity"
+                <div className="mb-8 flex items-center gap-4">
-              >
+                  <Link
-                <ArrowLeft className="w-5 h-5" />
+                    href="/#signature-dishes"
-                Back to Home
+                    className="flex items-center gap-2 text-primary-cta hover:opacity-70 transition-opacity"
-              </Link>
+                  >
+                    <ArrowLeft className="w-5 h-5" />
+                    Back to Home
+                  </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>
             </div>
 
-            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+            {/* Menu Gallery Section */}
-              Full Menu
+            <div className="menu-gallery px-4 py-16 md:py-24">
-            </h1>
+              <div className="max-w-7xl mx-auto">
-            <p className="text-lg text-gray-600 mb-12">
+                <div className="text-center mb-16">
-              Discover all of our authentic Caribbean dishes, crafted with love and served fresh off the grill.
+                  <h2 className="text-4xl font-bold text-gray-900 mb-4">Featured Dishes</h2>
-            </p>
+                  <p className="text-lg text-gray-600">Experience the visual journey of our premium Caribbean cuisine</p>
+                </div>
 
-            {/* Menu Sections */}
+                {/* Image Gallery Grid */}
-            <div className="space-y-12">
+                <div className="grid grid-cols-1 md:grid-cols-5 gap-6 mb-16">
-              {/* Main Dishes */}
+                  {/* Large feature image - spans 2x2 on desktop */}
-              <div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/20 p-8 md:p-10">
+                  <div className="menu-item md:col-span-2 md:row-span-2 group relative overflow-hidden rounded-2xl shadow-xl border border-white/20">
-                <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-8">Main Dishes</h2>
+                    <img
-                <div className="grid md:grid-cols-2 gap-6">
+                      src={menuImages[0].imageSrc}
-                  <div className="pb-6 border-b md:border-b-0 md:pb-0">
+                      alt={menuImages[0].title}
-                    <h3 className="text-lg font-semibold text-gray-900">Jerk Chicken Platter</h3>
+                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
-                    <p className="text-gray-600 text-sm mt-1 mb-3">Marinated in authentic Caribbean spices, grilled to perfection. Served with rice & peas, festival dumplings, and tropical slaw.</p>
+                    />
-                    <p className="text-primary-cta font-bold text-lg">$15.95</p>
+                    <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>
+                      <p className="text-gray-200 text-sm">{menuImages[0].description}</p>
+                    </div>
                   </div>
-                  <div className="pb-6 border-b md:border-b-0 md:pb-0">
+
-                    <h3 className="text-lg font-semibold text-gray-900">Curry Shrimp Platter</h3>
+                  {/* Right side grid - 3 items */}
-                    <p className="text-gray-600 text-sm mt-1 mb-3">Fresh shrimp in our signature curry sauce with Caribbean seasonings. Includes rice & peas, festival dumplings, and tropical slaw.</p>
+                  {menuImages.slice(1, 4).map((item, idx) => (
-                    <p className="text-primary-cta font-bold text-lg">$16.95</p>
+                    <div
-                  </div>
+                      key={item.id}
-                  <div className="pb-6 md:pb-0">
+                      className="menu-item group relative overflow-hidden rounded-2xl shadow-lg border border-white/20"
-                    <h3 className="text-lg font-semibold text-gray-900">Curry Goat</h3>
+                      style={{ animationDelay: `${0.4 + idx * 0.1}s` }}
-                    <p className="text-gray-600 text-sm mt-1 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-primary-cta font-bold text-lg">$17.95</p>
+                      <img
-                  </div>
+                        src={item.imageSrc}
-                  <div>
+                        alt={item.title}
-                    <h3 className="text-lg font-semibold text-gray-900">Escovitch Fish</h3>
+                        className="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"
-                    <p className="text-gray-600 text-sm mt-1 mb-3">Fresh fish prepared Jamaican style with pickled vegetables. Authentic island flavors in every bite.</p>
+                      />
-                    <p className="text-primary-cta font-bold text-lg">$16.95</p>
+                      <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>
 
-              {/* Sides & Appetizers */}
+            {/* Menu Details Section */}
-              <div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/20 p-8 md:p-10">
+            <div className="px-4 py-16 md:py-24 bg-gradient-to-b from-white to-gray-50">
-                <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-8">Sides & Appetizers</h2>
+              <div className="max-w-6xl mx-auto">
-                <div className="grid md:grid-cols-2 gap-6">
+                <h2 className="text-4xl font-bold text-gray-900 mb-12 text-center">Complete Menu Options</h2>
-                  <div className="pb-6 border-b md:border-b-0 md:pb-0">
+
-                    <h3 className="text-lg font-semibold text-gray-900">Conch Fritters Combo</h3>
+                {/* Main Dishes */}
-                    <p className="text-gray-600 text-sm mt-1 mb-3">6 pieces of golden, crispy conch fritters. Served with house-made dipping sauce.</p>
+                <div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/20 p-8 md:p-12 mb-8">
-                    <p className="text-primary-cta font-bold text-lg">$12.95</p>
+                  <h3 className="text-3xl font-bold text-gray-900 mb-8 pb-4 border-b-2 border-primary-cta/20">Main Dishes</h3>
-                  </div>
+                  <div className="grid md:grid-cols-2 gap-8">
-                  <div className="pb-6 border-b md:border-b-0 md:pb-0">
+                    <div className="pb-6">
-                    <h3 className="text-lg font-semibold text-gray-900">Festival Dumplings</h3>
+                      <h4 className="text-xl font-semibold text-gray-900 mb-2">Jerk Chicken Platter</h4>
-                    <p className="text-gray-600 text-sm mt-1 mb-3">Crispy, golden fried dumplings. A Caribbean classic that pairs perfectly with any main dish.</p>
+                      <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-primary-cta font-bold text-lg">$4.95</p>
+                      <p className="text-2xl font-bold text-primary-cta">$15.95</p>
-                  </div>
+                    </div>
-                  <div className="pb-6 md:pb-0">
+                    <div className="pb-6">
-                    <h3 className="text-lg font-semibold text-gray-900">Creamy Island Mac & Cheese</h3>
+                      <h4 className="text-xl font-semibold text-gray-900 mb-2">Curry Shrimp Platter</h4>
-                    <p className="text-gray-600 text-sm mt-1 mb-3">Smooth, rich, and soul-warming. The perfect comfort food complement to our island mains.</p>
+                      <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-primary-cta font-bold text-lg">$5.95</p>
+                      <p className="text-2xl font-bold text-primary-cta">$16.95</p>
-                  </div>
+                    </div>
-                  <div>
+                    <div className="pb-6">
-                    <h3 className="text-lg font-semibold text-gray-900">Tropical Slaw</h3>
+                      <h4 className="text-xl font-semibold text-gray-900 mb-2">Curry Goat</h4>
-                    <p className="text-gray-600 text-sm mt-1 mb-3">Fresh, crisp coleslaw with a tropical twist. Light and refreshing alongside any dish.</p>
+                      <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-primary-cta font-bold text-lg">$3.95</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>
-              </div>
 
-              {/* Beverages */}
+                {/* Sides & Appetizers */}
-              <div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/20 p-8 md:p-10">
+                <div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg border border-white/20 p-8 md:p-12 mb-8">
-                <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-8">Beverages</h2>
+                  <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-6">
+                  <div className="grid md:grid-cols-2 gap-8">
-                  <div className="pb-6 border-b md:border-b-0 md:pb-0">
+                    <div className="pb-6">
-                    <h3 className="text-lg font-semibold text-gray-900">Island Ginger Beer</h3>
+                      <h4 className="text-xl font-semibold text-gray-900 mb-2">Conch Fritters Combo</h4>
-                    <p className="text-gray-600 text-sm mt-1 mb-3">Refreshing traditional Caribbean ginger beer. Perfectly spiced and ice-cold.</p>
+                      <p className="text-gray-600 mb-3">6 pieces of golden, crispy conch fritters. Served with house-made dipping sauce.</p>
-                    <p className="text-primary-cta font-bold text-lg">$2.95</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 className="pb-6 md:pb-0">
+                </div>
-                    <h3 className="text-lg font-semibold text-gray-900">Fresh Tropical Juice</h3>
+
-                    <p className="text-gray-600 text-sm mt-1 mb-3">Mango, passion fruit, or guava. Fresh squeezed island flavors in every sip.</p>
+                {/* Beverages */}
-                    <p className="text-primary-cta font-bold text-lg">$3.95</p>
+                <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="mt-12 bg-gradient-to-r from-primary-cta to-accent rounded-2xl shadow-lg p-8 md:p-10 text-white text-center">
+            <div className="px-4 py-16 md:py-20">
-              <h2 className="text-2xl md:text-3xl font-bold mb-4">Ready to Order?</h2>
+              <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">
-              <p className="text-white/90 mb-6">Call us at (239) 785-0423 or visit our location for fresh Caribbean flavors made to order.</p>
+                <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Experience Caribbean Flair?</h2>
-              <a
+                <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>
-                href="tel:2397850423"
+                <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                className="inline-block bg-white text-primary-cta px-8 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity"
+                  <a
-              >
+                    href="tel:2397850423"
-                Call Now
+                    className="inline-block bg-white text-primary-cta px-8 py-4 rounded-lg font-bold text-lg hover:opacity-90 transition-opacity"
-              </a>
+                  >
+                    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>
         )}