chore: sync full current production website state to Gitea

app/menu/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 /**
- * MENU PAGE — Premium Sidebar + Beautiful Loading Experience
+ * MENU PAGE — Premium Sidebar Navigation
  */
 
 import { useEffect, useState, useMemo } from "react";
@@ -11,26 +11,16 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import { useCart } from "@/components/CartContext";
-import { motion, AnimatePresence } from "framer-motion";
 
 gsap.registerPlugin(ScrollTrigger);
 
 export default function MenuPage() {
-  const [isLoading, setIsLoading] = useState(true);
   const [activeCategory, setActiveCategory] = useState("All");
   const [searchQuery, setSearchQuery] = useState("");
   const [showVegetarianOnly, setShowVegetarianOnly] = useState(false);
 
   const { addToCart } = useCart();
 
-  // Beautiful loading screen on initial load
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsLoading(false);
-    }, 1350);
-    return () => clearTimeout(timer);
-  }, []);
-
   // Sidebar categories
   const sidebarCategories = [
     { id: "All", name: "All Dishes" },
@@ -73,43 +63,6 @@ export default function MenuPage() {
     window.scrollTo({ top: 220, behavior: "smooth" });
   };
 
-  // === BEAUTIFUL LOADING SCREEN ===
-  if (isLoading) {
-    return (
-      <div className="min-h-screen bg-[#fbf7ef] flex items-center justify-center">
-        <div className="text-center">
-          <div className="relative mx-auto mb-8 w-20 h-20">
-            <div className="absolute inset-0 rounded-full border-2 border-[#c99a2e]/30" />
-            <motion.div
-              className="absolute inset-0 rounded-full border-2 border-transparent border-t-[#c99a2e] border-r-[#d4a73d]"
-              animate={{ rotate: 360 }}
-              transition={{ duration: 1.3, repeat: Infinity, ease: "linear" }}
-            />
-            <div className="absolute inset-[6px] rounded-full border border-[#0f5a4a]/20" />
-          </div>
-
-          <div className="space-y-2">
-            <h2 className="font-serif text-3xl tracking-tight text-[#101724]">
-              Loading the Menu
-            </h2>
-            <p className="text-[#68717f] text-sm tracking-[1.5px]">Preparing the Royal Table...</p>
-          </div>
-
-          <div className="flex justify-center gap-2 mt-6">
-            {[0, 1, 2].map((i) => (
-              <motion.div
-                key={i}
-                className="w-1.5 h-1.5 rounded-full bg-[#c99a2e]"
-                animate={{ opacity: [0.3, 1, 0.3] }}
-                transition={{ duration: 1.1, repeat: Infinity, delay: i * 0.18 }}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="min-h-screen bg-[#F8F5F0] text-[#2C2A26]">
       <Navbar />
@@ -270,7 +223,7 @@ export default function MenuPage() {
                               }}
                             />
 
-                            {/* Video on Hover */}
+                            {/* Video on Hover - robust source selection with optimized fallbacks */}
                             <video
                               muted
                               loop
@@ -278,7 +231,20 @@ export default function MenuPage() {
                               preload="metadata"
                               className="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-150"
                             >
-                              <source src={`/videos/${item.video.replace(".mp4", ".webm")}`} type="video/webm" />
+                              {/* Optimized variants first (smaller, better quality) */}
+                              <source 
+                                src={`/videos/${item.video.replace(".mp4", "-optimized.webm")}`} 
+                                type="video/webm" 
+                              />
+                              <source 
+                                src={`/videos/${item.video.replace(".mp4", "-optimized.mp4")}`} 
+                                type="video/mp4" 
+                              />
+                              {/* Base variants as fallback */}
+                              <source 
+                                src={`/videos/${item.video.replace(".mp4", ".webm")}`} 
+                                type="video/webm" 
+                              />
                               <source src={`/videos/${item.video}`} type="video/mp4" />
                             </video>