Switch to version 6: modified src/app/styles/variables.css

Merge version_7 into main

src/app/layout.tsx

@@ -23,24 +23,26 @@ const poppins = Poppins({
 export const metadata: Metadata = {
   title: "The Ora Cafe - Bhilwara's Premier Rooftop Cafe & Restaurant",  description: "Discover The Ora Cafe in Bhilwara - your favorite rooftop hangout with delicious fusion food, cozy vibes, and Instagram-worthy ambience. Reserve a table today.",  keywords: "cafe in Bhilwara, best cafe Bhilwara, rooftop cafe, restaurant Bhilwara, hangout place Bhilwara, The Ora Cafe",  metadataBase: new URL("https://theoracafe.com"),
   alternates: {
-    canonical: "https://theoracafe.com"},
+    canonical: "https://theoracafe.com"
+  },
   openGraph: {
     title: "The Ora Cafe - Bhilwara's Favorite Rooftop Cafe",    description: "Experience premium dining at The Ora Cafe. Rooftop seating, creative fusion food, and the perfect vibe for friends and family.",    url: "https://theoracafe.com",    siteName: "The Ora Cafe",    type: "website",    images: [
       {
-        url: "http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271952.jpg",        alt: "The Ora Cafe rooftop dining experience"},
+        url: "http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271952.jpg",        alt: "The Ora Cafe rooftop dining experience"
-    ],
+      }
+    ]
   },
   twitter: {
-    card: "summary_large_image",    title: "The Ora Cafe - Rooftop Dining in Bhilwara",    description: "Join us for an unforgettable rooftop dining experience. Book your table now!",    images: ["http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271952.jpg"],
+    card: "summary_large_image",    title: "The Ora Cafe - Rooftop Dining in Bhilwara",    description: "Join us for an unforgettable rooftop dining experience. Book your table now!",    images: ["http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271952.jpg"]
   },
   robots: {
     index: true,
-    follow: true,
+    follow: true
-  },
+  }
 };
 
 export default function RootLayout({
-  children,
+  children
 }: Readonly<{
   children: React.ReactNode;
 }>) {

src/app/menu/page.tsx

@@ -2,23 +2,138 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import { useState, useEffect } from "react";
-import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import { Coffee, Search, X } from "lucide-react";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+
-import FooterCard from "@/components/sections/footer/FooterCard";
+interface MenuItem {
-import Link from "next/link";
+  id: string;
-import {
+  category: string;
-  Coffee,
+  name: string;
-  Star,
+  description: string;
-  Users,
+  price: string;
-  TrendingUp,
+  image: string;
-  MapPin,
+}
-  Instagram,
+
-  Facebook,
+const MENU_CATEGORIES = [
-  Phone,
+  "Beverages",  "Breakfast",  "Appetizers",  "Burgers",  "Pizzas",  "Wraps",  "Salads",  "Mains",  "Naans",  "Breads",  "Desserts",  "Shakes",  "Smoothies",  "Mocktails",  "Specials"];
-} from "lucide-react";
+
+const MENU_ITEMS: MenuItem[] = [
+  {
+    id: "1",    category: "Beverages",    name: "Cold Coffee",    description: "Chilled espresso with vanilla and whipped cream",    price: "₹150",    image: "http://img.b2bpic.net/free-photo/delicious-iced-coffee-table-beans_23-2149600676.jpg"},
+  {
+    id: "2",    category: "Beverages",    name: "Iced Tea",    description: "Refreshing homemade iced tea with lemon",    price: "₹120",    image: "http://img.b2bpic.net/free-photo/glass-iced-tea-with-lemon-mint_1203-7883.jpg"},
+  {
+    id: "3",    category: "Beverages",    name: "Masala Chai",    description: "Traditional Indian chai with aromatic spices",    price: "₹80",    image: "http://img.b2bpic.net/free-photo/cup-tea-with-spices_1203-4885.jpg"},
+  {
+    id: "4",    category: "Beverages",    name: "Hot Coffee",    description: "Premium espresso with steamed milk",    price: "₹130",    image: "http://img.b2bpic.net/free-photo/top-view-coffee-with-milk-beans_23-2149255391.jpg"},
+  {
+    id: "5",    category: "Breakfast",    name: "Paneer Paratha",    description: "Soft paratha stuffed with cottage cheese",    price: "₹140",    image: "http://img.b2bpic.net/free-photo/indian-flatbread-paratha_1203-4520.jpg"},
+  {
+    id: "6",    category: "Breakfast",    name: "Eggs Benedict",    description: "Toasted bread with poached eggs and hollandaise",    price: "₹180",    image: "http://img.b2bpic.net/free-photo/eggs-benedict-toast_1203-4521.jpg"},
+  {
+    id: "7",    category: "Breakfast",    name: "French Toast",    description: "Crispy bread with maple syrup and berries",    price: "₹160",    image: "http://img.b2bpic.net/free-photo/french-toast-with-berries_1203-4522.jpg"},
+  {
+    id: "8",    category: "Breakfast",    name: "Chur Chur Naan",    description: "Crispy layered naan with butter and spices",    price: "₹180",    image: "http://img.b2bpic.net/free-photo/delicious-composition-traditional-roti_23-2149034026.jpg"},
+  {
+    id: "9",    category: "Appetizers",    name: "Paneer Tikka",    description: "Marinated cottage cheese grilled to perfection",    price: "₹220",    image: "http://img.b2bpic.net/free-photo/paneer-tikka-skewers_1203-4523.jpg"},
+  {
+    id: "10",    category: "Appetizers",    name: "Chicken Wings",    description: "Spiced chicken wings with tangy sauce",    price: "₹240",    image: "http://img.b2bpic.net/free-photo/grilled-chicken-wings_1203-4524.jpg"},
+  {
+    id: "11",    category: "Appetizers",    name: "Cigar Rolls",    description: "Crispy spring rolls with vegetable filling",    price: "₹120",    image: "http://img.b2bpic.net/free-photo/egg-roll-fried-spring-rolls-white-plate-thai-food-top-view_1150-21489.jpg"},
+  {
+    id: "12",    category: "Appetizers",    name: "Garlic Bread",    description: "Toasted bread with garlic butter and herbs",    price: "₹100",    image: "http://img.b2bpic.net/free-photo/garlic-bread-plate_1203-4525.jpg"},
+  {
+    id: "13",    category: "Burgers",    name: "Classic Burger",    description: "Beef patty with cheese, lettuce, and special sauce",    price: "₹220",    image: "http://img.b2bpic.net/free-photo/delicious-burger-wooden-table_23-2149246644.jpg"},
+  {
+    id: "14",    category: "Burgers",    name: "Paneer Burger",    description: "Grilled paneer with tomato and cucumber",    price: "₹200",    image: "http://img.b2bpic.net/free-photo/paneer-burger_1203-4526.jpg"},
+  {
+    id: "15",    category: "Burgers",    name: "Chicken Burger",    description: "Spiced chicken patty with coleslaw",    price: "₹210",    image: "http://img.b2bpic.net/free-photo/chicken-burger_1203-4527.jpg"},
+  {
+    id: "16",    category: "Pizzas",    name: "Margherita Pizza",    description: "Tomato, mozzarella, fresh basil",    price: "₹280",    image: "http://img.b2bpic.net/free-photo/margherita-pizza-with-basil_1203-4528.jpg"},
+  {
+    id: "17",    category: "Pizzas",    name: "Pepperoni Pizza",    description: "Classic pepperoni with mozzarella cheese",    price: "₹300",    image: "http://img.b2bpic.net/free-photo/pepperoni-pizza_1203-4529.jpg"},
+  {
+    id: "18",    category: "Pizzas",    name: "Paneer Pizza",    description: "Cottage cheese with onion and capsicum",    price: "₹290",    image: "http://img.b2bpic.net/free-photo/paneer-pizza_1203-4530.jpg"},
+  {
+    id: "19",    category: "Pizzas",    name: "Special Pizza",    description: "Mixed vegetables and sausage",    price: "₹320",    image: "http://img.b2bpic.net/free-photo/mixed-pizza-with-sausages-tomato_140725-3789.jpg"},
+  {
+    id: "20",    category: "Wraps",    name: "Chicken Wrap",    description: "Grilled chicken with fresh vegetables",    price: "₹180",    image: "http://img.b2bpic.net/free-photo/chicken-wrap_1203-4531.jpg"},
+  {
+    id: "21",    category: "Wraps",    name: "Paneer Wrap",    description: "Grilled paneer with mint and yogurt",    price: "₹160",    image: "http://img.b2bpic.net/free-photo/paneer-wrap_1203-4532.jpg"},
+  {
+    id: "22",    category: "Wraps",    name: "Veggie Wrap",    description: "Mix of fresh vegetables and hummus",    price: "₹140",    image: "http://img.b2bpic.net/free-photo/veggie-wrap_1203-4533.jpg"},
+  {
+    id: "23",    category: "Salads",    name: "Caesar Salad",    description: "Crisp lettuce with parmesan and croutons",    price: "₹200",    image: "http://img.b2bpic.net/free-photo/caesar-salad-plate_1203-4534.jpg"},
+  {
+    id: "24",    category: "Salads",    name: "Caprese Salad",    description: "Tomato, mozzarella, basil with olive oil",    price: "₹220",    image: "http://img.b2bpic.net/free-photo/caprese-salad_1203-4535.jpg"},
+  {
+    id: "25",    category: "Salads",    name: "Greek Salad",    description: "Feta cheese, olives, cucumbers and tomatoes",    price: "₹210",    image: "http://img.b2bpic.net/free-photo/greek-salad_1203-4536.jpg"},
+  {
+    id: "26",    category: "Mains",    name: "Butter Chicken",    description: "Tender chicken in creamy tomato sauce",    price: "₹320",    image: "http://img.b2bpic.net/free-photo/butter-chicken-curry_1203-4537.jpg"},
+  {
+    id: "27",    category: "Mains",    name: "Paneer Tikka Masala",    description: "Grilled paneer in aromatic tomato cream sauce",    price: "₹300",    image: "http://img.b2bpic.net/free-photo/paneer-tikka-masala_1203-4538.jpg"},
+  {
+    id: "28",    category: "Mains",    name: "Chicken Biryani",    description: "Fragrant basmati rice with spiced chicken",    price: "₹340",    image: "http://img.b2bpic.net/free-photo/chicken-biryani_1203-4539.jpg"},
+  {
+    id: "29",    category: "Naans",    name: "Plain Naan",    description: "Soft tandoori-baked naan bread",    price: "₹80",    image: "http://img.b2bpic.net/free-photo/plain-naan-bread_1203-4540.jpg"},
+  {
+    id: "30",    category: "Naans",    name: "Garlic Naan",    description: "Naan infused with fresh garlic",    price: "₹100",    image: "http://img.b2bpic.net/free-photo/garlic-naan_1203-4541.jpg"},
+  {
+    id: "31",    category: "Naans",    name: "Paneer Naan",    description: "Soft naan stuffed with spiced paneer",    price: "₹140",    image: "http://img.b2bpic.net/free-photo/paneer-naan_1203-4542.jpg"},
+  {
+    id: "32",    category: "Breads",    name: "Roti",    description: "Traditional Indian whole wheat bread",    price: "₹30",    image: "http://img.b2bpic.net/free-photo/indian-roti-bread_1203-4543.jpg"},
+  {
+    id: "33",    category: "Breads",    name: "Paratha",    description: "Layered flatbread with butter",    price: "₹60",    image: "http://img.b2bpic.net/free-photo/indian-paratha_1203-4544.jpg"},
+  {
+    id: "34",    category: "Desserts",    name: "Gulab Jamun",    description: "Sweet dumplings in sugar syrup",    price: "₹120",    image: "http://img.b2bpic.net/free-photo/gulab-jamun_1203-4545.jpg"},
+  {
+    id: "35",    category: "Desserts",    name: "Chocolate Cake",    description: "Rich chocolate cake with frosting",    price: "₹150",    image: "http://img.b2bpic.net/free-photo/chocolate-cake-slice_1203-4546.jpg"},
+  {
+    id: "36",    category: "Desserts",    name: "Ice Cream",    description: "Vanilla or chocolate ice cream",    price: "₹100",    image: "http://img.b2bpic.net/free-photo/ice-cream-bowl_1203-4547.jpg"},
+  {
+    id: "37",    category: "Shakes",    name: "Chocolate Shake",    description: "Creamy chocolate milkshake",    price: "₹140",    image: "http://img.b2bpic.net/free-photo/chocolate-milkshake_1203-4548.jpg"},
+  {
+    id: "38",    category: "Shakes",    name: "Vanilla Shake",    description: "Smooth vanilla milkshake",    price: "₹130",    image: "http://img.b2bpic.net/free-photo/vanilla-milkshake_1203-4549.jpg"},
+  {
+    id: "39",    category: "Shakes",    name: "Strawberry Shake",    description: "Fresh strawberry milkshake",    price: "₹150",    image: "http://img.b2bpic.net/free-photo/strawberry-milkshake_1203-4550.jpg"},
+  {
+    id: "40",    category: "Smoothies",    name: "Mango Smoothie",    description: "Blended mango with yogurt",    price: "₹140",    image: "http://img.b2bpic.net/free-photo/mango-smoothie_1203-4551.jpg"},
+  {
+    id: "41",    category: "Smoothies",    name: "Berry Smoothie",    description: "Mixed berries with yogurt",    price: "₹150",    image: "http://img.b2bpic.net/free-photo/berry-smoothie_1203-4552.jpg"},
+  {
+    id: "42",    category: "Smoothies",    name: "Banana Smoothie",    description: "Banana with milk and honey",    price: "₹120",    image: "http://img.b2bpic.net/free-photo/banana-smoothie_1203-4553.jpg"},
+  {
+    id: "43",    category: "Mocktails",    name: "Mojito",    description: "Refreshing mint and lime mocktail",    price: "₹180",    image: "http://img.b2bpic.net/free-photo/mojito-drink_1203-4554.jpg"},
+  {
+    id: "44",    category: "Mocktails",    name: "Virgin Pina Colada",    description: "Tropical coconut and pineapple drink",    price: "₹190",    image: "http://img.b2bpic.net/free-photo/pina-colada_1203-4555.jpg"},
+  {
+    id: "45",    category: "Mocktails",    name: "Lemonade",    description: "Fresh homemade lemonade",    price: "₹100",    image: "http://img.b2bpic.net/free-photo/lemonade-glass_1203-4556.jpg"},
+  {
+    id: "46",    category: "Specials",    name: "Signature Bowl",    description: "Chef's special fusion bowl",    price: "₹280",    image: "http://img.b2bpic.net/free-photo/food-bowl_1203-4557.jpg"},
+  {
+    id: "47",    category: "Specials",    name: "Loaded Nachos",    description: "Crispy nachos with cheese and toppings",    price: "₹240",    image: "http://img.b2bpic.net/free-photo/loaded-nachos_1203-4558.jpg"},
+  {
+    id: "48",    category: "Specials",    name: "Truffle Fries",    description: "Crispy fries with truffle oil and parmesan",    price: "₹220",    image: "http://img.b2bpic.net/free-photo/truffle-fries_1203-4559.jpg"},
+];
 
 export default function MenuPage() {
+  const [activeCategory, setActiveCategory] = useState("Beverages");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filteredItems, setFilteredItems] = useState<MenuItem[]>([]);
+  const [scrollSpy, setScrollSpy] = useState("Beverages");
+
+  useEffect(() => {
+    const filtered = MENU_ITEMS.filter((item) => {
+      const matchesCategory = activeCategory === "All" || item.category === activeCategory;
+      const matchesSearch =
+        searchQuery === "" ||
+        item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        item.description.toLowerCase().includes(searchQuery.toLowerCase());
+      return matchesCategory && matchesSearch;
+    });
+    setFilteredItems(filtered);
+  }, [activeCategory, searchQuery]);
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -33,171 +148,190 @@ export default function MenuPage() {
       headingFontWeight="light"
     >
       {/* Navbar */}
-      <div id="nav" data-section="nav">
+      <div id="nav" data-section="nav" className="sticky top-0 z-50">
         <NavbarLayoutFloatingOverlay
           brandName="The Ora Cafe"
           navItems={[
-            { name: "Home", id: "hero" },
+            { name: "Home", id: "/" },
-            { name: "Menu", id: "popular-dishes" },
+            { name: "Menu", id: "/menu" },
-            { name: "Gallery", id: "gallery" },
+            { name: "About", id: "/#rooftop-experience" },
-            { name: "About", id: "rooftop-experience" },
+            { name: "Contact", id: "/#contact" },
-            { name: "Contact", id: "contact" },
           ]}
           button={{
-            text: "Reserve Table",
+            text: "Reserve Table",            href: "/#contact"}}
-            href: "#contact",
-          }}
         />
       </div>
 
-      {/* Full Menu */}
+      {/* Menu Page */}
-      <div id="full-menu" data-section="full-menu">
+      <div className="min-h-screen pt-24 pb-20">
-        <ProductCardOne
+        {/* Header */}
-          title="Our Complete Menu"
+        <div className="text-center mb-12 px-4">
-          description="Explore our full selection of delicious dishes and beverages"
+          <h1 className="text-4xl md:text-6xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
-          tag="All Offerings"
+            Our Menu
-          products={[
+          </h1>
-            {
+          <p className="text-lg md:text-xl" style={{ color: "var(--foreground)" }}>
-              id: "1",
+            Explore our delicious selection of dishes and beverages
-              name: "Chur Chur Naan",
+          </p>
-              price: "₹180",
+        </div>
-              imageSrc:
+
-                "http://img.b2bpic.net/free-photo/delicious-composition-traditional-roti_23-2149034026.jpg?_wi=2",
+        {/* Search Bar */}
-              imageAlt: "Crispy Chur Chur Naan",
+        <div className="max-w-2xl mx-auto mb-12 px-4">
-            },
+          <div className="relative flex items-center" style={{ backgroundColor: "var(--card)", borderRadius: "9999px", padding: "0.75rem 1.5rem" }}>
-            {
+            <Search className="w-5 h-5 mr-3" style={{ color: "var(--foreground)" }} />
-              id: "2",
+            <input
-              name: "Cold Coffee",
+              type="text"
-              price: "₹150",
+              placeholder="Search menu items..."
-              imageSrc:
+              value={searchQuery}
-                "http://img.b2bpic.net/free-photo/delicious-iced-coffee-table-beans_23-2149600676.jpg?_wi=2",
+              onChange={(e) => setSearchQuery(e.target.value)}
-              imageAlt: "Refreshing Cold Coffee",
+              className="flex-1 bg-transparent outline-none text-lg"
-            },
+              style={{ color: "var(--foreground)" }}
-            {
+            />
-              id: "3",
+            {searchQuery && (
-              name: "Pizza",
+              <button
-              price: "₹250",
+                onClick={() => setSearchQuery("")}
-              imageSrc:
+                className="ml-2 p-1 hover:opacity-70 transition"
-                "http://img.b2bpic.net/free-photo/mixed-pizza-with-sausages-tomato_140725-3789.jpg?_wi=2",
+              >
-              imageAlt: "Wood-fired Pizza",
+                <X className="w-5 h-5" style={{ color: "var(--foreground)" }} />
-            },
+              </button>
-            {
+            )}
-              id: "4",
+          </div>
-              name: "Cigar Rolls",
+        </div>
-              price: "₹120",
+
-              imageSrc:
+        {/* Main Content */}
-                "http://img.b2bpic.net/free-photo/egg-roll-fried-spring-rolls-white-plate-thai-food-top-view_1150-21489.jpg?_wi=2",
+        <div className="flex flex-col lg:flex-row gap-8 px-4 max-w-7xl mx-auto">
-              imageAlt: "Crispy Cigar Rolls",
+          {/* Left Sidebar Navigation */}
-            },
+          <div className="lg:w-48 flex-shrink-0">
-            {
+            <div
-              id: "5",
+              className="sticky top-32 rounded-xl p-4"
-              name: "Fusion Appetizers",
+              style={{
-              price: "₹200",
+                backgroundColor: "var(--card)"}}
-              imageSrc:
+            >
-                "http://img.b2bpic.net/free-photo/eggplant-dolma-with-tomato-belly-pepper_140725-4615.jpg?_wi=2",
+              <h3 className="font-bold text-lg mb-4" style={{ color: "var(--foreground)" }}>
-              imageAlt: "Creative fusion appetizers",
+                Categories
-            },
+              </h3>
-            {
+              <nav className="space-y-2 max-h-96 overflow-y-auto">
-              id: "6",
+                {MENU_CATEGORIES.map((category) => (
-              name: "Dessert Platter",
+                  <button
-              price: "₹180",
+                    key={category}
-              imageSrc:
+                    onClick={() => setActiveCategory(category)}
-                "http://img.b2bpic.net/free-photo/top-view-dessert-sweet-baked-pumpkin-with-nuts-cream_141793-4312.jpg?_wi=2",
+                    className={`w-full text-left px-3 py-2 rounded-lg transition-all duration-300 ${
-              imageAlt: "Assorted desserts",
+                      activeCategory === category
-            },
+                        ? "font-bold scale-105"
-          ]}
+                        : "hover:opacity-70"
-          gridVariant="three-columns-all-equal-width"
+                    }`}
-          animationType="slide-up"
+                    style={{
-          textboxLayout="default"
+                      color: activeCategory === category ? "var(--primary-cta)" : "var(--foreground)",                      backgroundColor: activeCategory === category ? "var(--background-accent)" : "transparent"}}
-          useInvertedBackground={false}
+                  >
-          buttons={[
+                    {category}
-            {
+                  </button>
-              text: "Back to Home",
+                ))}
-              href: "/",
+              </nav>
-            },
+            </div>
-          ]}
+          </div>
-        />
+
+          {/* Right Content Area */}
+          <div className="flex-1">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {filteredItems.map((item, index) => (
+                <div
+                  key={item.id}
+                  className="rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105 animate-fade-in"
+                  style={{
+                    backgroundColor: "var(--card)",                    animationDelay: `${index * 0.1}s`,
+                  }}
+                >
+                  {/* Image */}
+                  <div className="relative overflow-hidden h-48 bg-gradient-to-br from-amber-100 to-orange-100">
+                    <img
+                      src={item.image}
+                      alt={item.name}
+                      className="w-full h-full object-cover transition-transform duration-300 hover:scale-110"
+                    />
+                  </div>
+
+                  {/* Content */}
+                  <div className="p-4">
+                    <div className="flex justify-between items-start mb-2">
+                      <h3
+                        className="text-lg font-bold"
+                        style={{ color: "var(--foreground)" }}
+                      >
+                        {item.name}
+                      </h3>
+                      <span
+                        className="text-xl font-bold"
+                        style={{ color: "var(--primary-cta)" }}
+                      >
+                        {item.price}
+                      </span>
+                    </div>
+
+                    <p
+                      className="text-sm line-clamp-2"
+                      style={{ color: "var(--foreground)" }}
+                    >
+                      {item.description}
+                    </p>
+
+                    <button
+                      className="mt-4 w-full py-2 rounded-lg font-semibold transition-all duration-300 hover:shadow-lg"
+                      style={{
+                        backgroundColor: "var(--primary-cta)",                        color: "var(--primary-cta-text)"}}
+                    >
+                      Add to Cart
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {filteredItems.length === 0 && (
+              <div className="text-center py-12">
+                <Coffee className="w-16 h-16 mx-auto mb-4 opacity-50" />
+                <p
+                  className="text-lg"
+                  style={{ color: "var(--foreground)" }}
+                >
+                  No items found. Try adjusting your search or category.
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
       </div>
 
-      {/* Menu Highlights */}
+      <style jsx>{`
-      <div id="menu-highlights" data-section="menu-highlights">
+        @keyframes fadeIn {
-        <MetricCardThree
+          from {
-          title="Why Our Menu Stands Out"
+            opacity: 0;
-          description="Discover what makes The Ora Cafe's food special"
+            transform: translateY(20px);
-          tag="Menu Details"
+          }
-          metrics={[
+          to {
-            {
+            opacity: 1;
-              id: "1",
+            transform: translateY(0);
-              icon: Coffee,
+          }
-              title: "Fresh Ingredients",
+        }
-              value: "Daily",
-            },
-            {
-              id: "2",
-              icon: Star,
-              title: "Quality Rating",
-              value: "5/5",
-            },
-            {
-              id: "3",
-              icon: Users,
-              title: "Customer Choice",
-              value: "Top 3",
-            },
-            {
-              id: "4",
-              icon: TrendingUp,
-              title: "Specialty Items",
-              value: "10+",
-            },
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-        />
-      </div>
 
-      {/* Contact for Orders */}
+        .animate-fade-in {
-      <div id="contact" data-section="contact">
+          animation: fadeIn 0.6s ease-out forwards;
-        <ContactCenter
+          opacity: 0;
-          tag="Place Your Order"
+        }
-          title="Order Now or Make a Reservation"
-          description="Love our menu? Call us to place an order for pickup or reserve a table to dine in. We also offer special menu items for group gatherings and celebrations."
-          tagIcon={Phone}
-          background={{
-            variant: "rotated-rays-animated-grid",
-          }}
-          useInvertedBackground={false}
-          inputPlaceholder="your.email@example.com"
-          buttonText="Subscribe to Updates"
-          termsText="Call us at +91 94603 51156 to place your order. Visit G38 Rooftop, The Grandstand, Bhilwara for dine-in experience."
-        />
-      </div>
 
-      {/* Footer */}
+        /* Scrollbar styling */
-      <div id="footer" data-section="footer">
+        nav::-webkit-scrollbar {
-        <FooterCard
+          width: 6px;
-          logoText="The Ora Cafe"
+        }
-          copyrightText="© 2025 The Ora Cafe | G38 Rooftop, Bhilwara, Rajasthan | +91 94603 51156"
+        nav::-webkit-scrollbar-track {
-          socialLinks={[
+          background: transparent;
-            {
+        }
-              icon: Instagram,
+        nav::-webkit-scrollbar-thumb {
-              href: "https://instagram.com",
+          background: var(--accent);
-              ariaLabel: "Instagram",
+          border-radius: 3px;
-            },
+        }
-            {
+        nav::-webkit-scrollbar-thumb:hover {
-              icon: Facebook,
+          background: var(--primary-cta);
-              href: "https://facebook.com",
+        }
-              ariaLabel: "Facebook",
+      `}</style>
-            },
-            {
-              icon: MapPin,
-              href: "https://maps.google.com",
-              ariaLabel: "Google Maps",
-            },
-          ]}
-        />
-      </div>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -41,14 +41,14 @@ export default function HomePage() {
         <NavbarLayoutFloatingOverlay
           brandName="The Ora Cafe"
           navItems={[
-            { name: "Home", id: "hero" },
+            { name: "Home", id: "/" },
-            { name: "Menu", id: "menu" },
+            { name: "Menu", id: "/menu" },
-            { name: "Gallery", id: "gallery" },
             { name: "About", id: "rooftop-experience" },
             { name: "Contact", id: "contact" },
           ]}
           button={{
-            text: "Reserve Table",            href: "#contact"}}
+            text: "Reserve Table",            href: "#contact"
+          }}
         />
       </div>
 
@@ -59,9 +59,11 @@ export default function HomePage() {
           description="Bhilwara's Favorite Rooftop Cafe Experience. Enjoy delicious food, cozy vibes, and the perfect place to hang out with friends and family."
           buttons={[
             {
-              text: "Reserve Now",              href: "#contact"},
+              text: "Reserve Now",              href: "#contact"
+            },
             {
-              text: "Call Now",              href: "tel:+919460351156"},
+              text: "Call Now",              href: "tel:+919460351156"
+            },
           ]}
           imageSrc="http://img.b2bpic.net/free-photo/friends-having-nice-barbeque-together_23-2149271952.jpg"
           imageAlt="The Ora Cafe rooftop seating with warm evening lighting"
@@ -82,40 +84,48 @@ export default function HomePage() {
               title: "Rooftop Ambience",              description:
                 "Beautiful rooftop seating with warm lighting and panoramic views of Bhilwara's skyline",              phoneOne: {
                 imageSrc:
-                  "http://img.b2bpic.net/free-photo/young-woman-using-phone-outside-night-street_1303-17020.jpg",                imageAlt: "Rooftop ambience with beautiful lighting"},
+                  "http://img.b2bpic.net/free-photo/young-woman-using-phone-outside-night-street_1303-17020.jpg",                imageAlt: "Rooftop ambience with beautiful lighting"
+              },
               phoneTwo: {
                 imageSrc:
-                  "http://img.b2bpic.net/free-photo/guy-brought-order-friends-have-meeting-evening-nice-outside-restaurant_146671-14492.jpg",                imageAlt: "Rooftop seating at night"},
+                  "http://img.b2bpic.net/free-photo/guy-brought-order-friends-have-meeting-evening-nice-outside-restaurant_146671-14492.jpg",                imageAlt: "Rooftop seating at night"
+              },
             },
             {
               id: 2,
               title: "Perfect Hangout Spot",              description:
                 "Ideal for friends gathering, casual meetups, dates, and family celebrations with cozy seating",              phoneOne: {
                 imageSrc:
-                  "http://img.b2bpic.net/free-photo/positive-young-women-smiling-dinner-party_23-2148454161.jpg",                imageAlt: "Friends hanging out at cafe"},
+                  "http://img.b2bpic.net/free-photo/positive-young-women-smiling-dinner-party_23-2148454161.jpg",                imageAlt: "Friends hanging out at cafe"
+              },
               phoneTwo: {
                 imageSrc:
-                  "http://img.b2bpic.net/free-photo/roommates-sharing-meal-together_23-2149112123.jpg",                imageAlt: "Friends dining together"},
+                  "http://img.b2bpic.net/free-photo/roommates-sharing-meal-together_23-2149112123.jpg",                imageAlt: "Friends dining together"
+              },
             },
             {
               id: 3,
               title: "Creative Food",              description:
                 "Delicious Indian fusion dishes and cafe favorites crafted by our talented culinary team",              phoneOne: {
                 imageSrc:
-                  "http://img.b2bpic.net/free-photo/top-view-dessert-sweet-baked-pumpkin-with-nuts-cream_141793-4312.jpg?_wi=1",                imageAlt: "Creative food plating"},
+                  "http://img.b2bpic.net/free-photo/top-view-dessert-sweet-baked-pumpkin-with-nuts-cream_141793-4312.jpg?_wi=1",                imageAlt: "Creative food plating"
+              },
               phoneTwo: {
                 imageSrc:
-                  "http://img.b2bpic.net/free-photo/eggplant-dolma-with-tomato-belly-pepper_140725-4615.jpg?_wi=1",                imageAlt: "Fusion dishes"},
+                  "http://img.b2bpic.net/free-photo/eggplant-dolma-with-tomato-belly-pepper_140725-4615.jpg?_wi=1",                imageAlt: "Fusion dishes"
+              },
             },
             {
               id: 4,
               title: "Instagram-Worthy",              description:
                 "A photogenic cafe loved by social media users with stunning backdrops and beautiful plating",              phoneOne: {
                 imageSrc:
-                  "http://img.b2bpic.net/free-photo/close-up-food-lover-taking-pictures-meal_23-2149286401.jpg",                imageAlt: "Instagram worthy food photography"},
+                  "http://img.b2bpic.net/free-photo/close-up-food-lover-taking-pictures-meal_23-2149286401.jpg",                imageAlt: "Instagram worthy food photography"
+              },
               phoneTwo: {
                 imageSrc:
-                  "http://img.b2bpic.net/free-photo/close-up-hands-taking-photos-with-phone_23-2149250092.jpg",                imageAlt: "Social media food photography"},
+                  "http://img.b2bpic.net/free-photo/close-up-hands-taking-photos-with-phone_23-2149250092.jpg",                imageAlt: "Social media food photography"
+              },
             },
           ]}
           showStepNumbers={true}
@@ -125,87 +135,6 @@ export default function HomePage() {
         />
       </div>
 
-      {/* Full Menu */}
-      <div id="menu" data-section="menu">
-        <ProductCardOne
-          title="Our Menu"
-          description="Explore our complete menu with categories for every taste and occasion"
-          tag="Complete Menu"
-          products={[
-            {
-              id: "1",              name: "Soups",              price: "₹100-200",              imageSrc:
-                "http://img.b2bpic.net/free-photo/top-view-soup-with-vegetables_140725-3956.jpg?_wi=1",              imageAlt: "Delicious Soups"},
-            {
-              id: "2",              name: "Salads",              price: "₹150-250",              imageSrc:
-                "http://img.b2bpic.net/free-photo/fresh-green-salad-with-vegetables_140725-5000.jpg?_wi=1",              imageAlt: "Fresh Salads"},
-            {
-              id: "3",              name: "Jain Special Menu",              price: "₹180-300",              imageSrc:
-                "http://img.b2bpic.net/free-photo/healthy-jain-curry-with-vegetables_140725-5100.jpg?_wi=1",              imageAlt: "Jain Special Dishes"},
-            {
-              id: "4",              name: "Large Meals",              price: "₹300-450",              imageSrc:
-                "http://img.b2bpic.net/free-photo/delicious-large-meal-with-sides_140725-5200.jpg?_wi=1",              imageAlt: "Large Exclusive Combos"},
-            {
-              id: "5",              name: "Mini Meals",              price: "₹150-200",              imageSrc:
-                "http://img.b2bpic.net/free-photo/mini-meal-combo-with-appetizers_140725-5300.jpg?_wi=1",              imageAlt: "Mini Exclusive Combos"},
-            {
-              id: "6",              name: "Special Combos",              price: "₹250-400",              imageSrc:
-                "http://img.b2bpic.net/free-photo/special-combo-meal-assorted_140725-5400.jpg?_wi=1",              imageAlt: "Special Combos"},
-            {
-              id: "7",              name: "Tandoori Starters",              price: "₹180-280",              imageSrc:
-                "http://img.b2bpic.net/free-photo/tandoori-chicken-tikka-platter_140725-5500.jpg?_wi=1",              imageAlt: "Tandoori Starters"},
-            {
-              id: "8",              name: "Dal & Curries",              price: "₹150-220",              imageSrc:
-                "http://img.b2bpic.net/free-photo/creamy-dal-makhani_140725-5600.jpg?_wi=1",              imageAlt: "Dal Main Course"},
-            {
-              id: "9",              name: "Vegetable Curries",              price: "₹160-240",              imageSrc:
-                "http://img.b2bpic.net/free-photo/mixed-vegetable-curry_140725-5700.jpg?_wi=1",              imageAlt: "Vegetable Main Course"},
-            {
-              id: "10",              name: "Paneer Dishes",              price: "₹180-280",              imageSrc:
-                "http://img.b2bpic.net/free-photo/paneer-tikka-masala_140725-5800.jpg?_wi=1",              imageAlt: "Paneer Main Course"},
-            {
-              id: "11",              name: "Breads",              price: "₹40-120",              imageSrc:
-                "http://img.b2bpic.net/free-photo/delicious-composition-traditional-roti_23-2149034026.jpg?_wi=1",              imageAlt: "Indian Breads & Naan"},
-            {
-              id: "12",              name: "Falahari (Vrat Special)",              price: "₹120-200",              imageSrc:
-                "http://img.b2bpic.net/free-photo/fasting-special-sabudana-khichdi_140725-5900.jpg?_wi=1",              imageAlt: "Vrat Special Dishes"},
-            {
-              id: "13",              name: "Rice & Biryani",              price: "₹200-300",              imageSrc:
-                "http://img.b2bpic.net/free-photo/fragrant-biryani-with-meat_140725-6000.jpg?_wi=1",              imageAlt: "Rice & Biryani"},
-            {
-              id: "14",              name: "Burgers",              price: "₹150-250",              imageSrc:
-                "http://img.b2bpic.net/free-photo/gourmet-burger-with-cheese_140725-6100.jpg?_wi=1",              imageAlt: "Delicious Burgers"},
-            {
-              id: "15",              name: "Sandwiches",              price: "₹100-180",              imageSrc:
-                "http://img.b2bpic.net/free-photo/fresh-sandwich-with-vegetables_140725-6200.jpg?_wi=1",              imageAlt: "Gourmet Sandwiches"},
-            {
-              id: "16",              name: "Chinese Starters",              price: "₹150-250",              imageSrc:
-                "http://img.b2bpic.net/free-photo/chinese-dumplings-with-sauce_140725-6300.jpg?_wi=1",              imageAlt: "Chinese Starters"},
-            {
-              id: "17",              name: "Pan Asian Dishes",              price: "₹180-280",              imageSrc:
-                "http://img.b2bpic.net/free-photo/thai-pad-thai-noodles_140725-6400.jpg?_wi=1",              imageAlt: "Pan Asian Cuisine"},
-            {
-              id: "18",              name: "Fried Rice",              price: "₹140-220",              imageSrc:
-                "http://img.b2bpic.net/free-photo/egg-fried-rice-with-vegetables_140725-6500.jpg?_wi=1",              imageAlt: "Fried Rice Varieties"},
-            {
-              id: "19",              name: "Pasta",              price: "₹160-240",              imageSrc:
-                "http://img.b2bpic.net/free-photo/creamy-pasta-with-sauce_140725-6600.jpg?_wi=1",              imageAlt: "Italian Pasta"},
-            {
-              id: "20",              name: "Pizza",              price: "₹200-350",              imageSrc:
-                "http://img.b2bpic.net/free-photo/mixed-pizza-with-sausages-tomato_140725-3789.jpg?_wi=1",              imageAlt: "Wood-fired Pizza"},
-            {
-              id: "21",              name: "Ora Bites",              price: "₹80-150",              imageSrc:
-                "http://img.b2bpic.net/free-photo/appetizer-bites-on-plate_140725-6700.jpg?_wi=1",              imageAlt: "Ora Signature Bites"},
-            {
-              id: "22",              name: "Desserts",              price: "₹100-180",              imageSrc:
-                "http://img.b2bpic.net/free-photo/top-view-dessert-sweet-baked-pumpkin-with-nuts-cream_141793-4312.jpg?_wi=1",              imageAlt: "Sweet Desserts"},
-          ]}
-          gridVariant="bento-grid"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-        />
-      </div>
-
       {/* Popular Dishes */}
       <div id="popular-dishes" data-section="popular-dishes">
         <ProductCardOne
@@ -215,21 +144,30 @@ export default function HomePage() {
           products={[
             {
               id: "1",              name: "Chur Chur Naan",              price: "₹180",              imageSrc:
-                "http://img.b2bpic.net/free-photo/delicious-composition-traditional-roti_23-2149034026.jpg?_wi=1",              imageAlt: "Crispy Chur Chur Naan"},
+                "http://img.b2bpic.net/free-photo/delicious-composition-traditional-roti_23-2149034026.jpg?_wi=1",              imageAlt: "Crispy Chur Chur Naan"
+            },
             {
               id: "2",              name: "Cold Coffee",              price: "₹150",              imageSrc:
-                "http://img.b2bpic.net/free-photo/delicious-iced-coffee-table-beans_23-2149600676.jpg?_wi=1",              imageAlt: "Refreshing Cold Coffee"},
+                "http://img.b2bpic.net/free-photo/delicious-iced-coffee-table-beans_23-2149600676.jpg?_wi=1",              imageAlt: "Refreshing Cold Coffee"
+            },
             {
               id: "3",              name: "Pizza",              price: "₹250",              imageSrc:
-                "http://img.b2bpic.net/free-photo/mixed-pizza-with-sausages-tomato_140725-3789.jpg?_wi=1",              imageAlt: "Wood-fired Pizza"},
+                "http://img.b2bpic.net/free-photo/mixed-pizza-with-sausages-tomato_140725-3789.jpg?_wi=1",              imageAlt: "Wood-fired Pizza"
+            },
             {
               id: "4",              name: "Cigar Rolls",              price: "₹120",              imageSrc:
-                "http://img.b2bpic.net/free-photo/egg-roll-fried-spring-rolls-white-plate-thai-food-top-view_1150-21489.jpg?_wi=1",              imageAlt: "Crispy Cigar Rolls"},
+                "http://img.b2bpic.net/free-photo/egg-roll-fried-spring-rolls-white-plate-thai-food-top-view_1150-21489.jpg?_wi=1",              imageAlt: "Crispy Cigar Rolls"
+            },
           ]}
           gridVariant="four-items-2x2-equal-grid"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={true}
+          buttons={[
+            {
+              text: "View Full Menu",              href: "/menu"
+            },
+          ]}
         />
       </div>
 
@@ -258,27 +196,33 @@ export default function HomePage() {
             {
               id: "1",              name: "Food Plating",              role: "Culinary Art",              company: "The Ora Cafe",              rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/vertical-view-delicious-tuna-dish-with-glass-wine-cheese-set_8353-10584.jpg?_wi=1",              imageAlt: "Gourmet food plating"},
+                "http://img.b2bpic.net/free-photo/vertical-view-delicious-tuna-dish-with-glass-wine-cheese-set_8353-10584.jpg?_wi=1",              imageAlt: "Gourmet food plating"
+            },
             {
               id: "2",              name: "Rooftop View",              role: "Ambience",              company: "Evening Scene",              rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/middle-age-friends-having-fun_23-2149150932.jpg?_wi=1",              imageAlt: "Rooftop view with friends"},
+                "http://img.b2bpic.net/free-photo/middle-age-friends-having-fun_23-2149150932.jpg?_wi=1",              imageAlt: "Rooftop view with friends"
+            },
             {
               id: "3",              name: "Interior Design",              role: "Decor",              company: "Modern Cafe",              rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/woman-golden-suit-sits-cafe_8353-301.jpg?_wi=1",              imageAlt: "Modern cafe interior"},
+                "http://img.b2bpic.net/free-photo/woman-golden-suit-sits-cafe_8353-301.jpg?_wi=1",              imageAlt: "Modern cafe interior"
+            },
             {
               id: "4",              name: "Coffee & Desserts",              role: "Beverages",              company: "Specialties",              rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/top-view-cup-coffee-with-creamy-cake-pillow-formed-cookies-along-with-berries-grey-desk-berry-biscuit-cookie-photo-color_140725-33953.jpg?_wi=1",              imageAlt: "Coffee and desserts"},
+                "http://img.b2bpic.net/free-photo/top-view-cup-coffee-with-creamy-cake-pillow-formed-cookies-along-with-berries-grey-desk-berry-biscuit-cookie-photo-color_140725-33953.jpg?_wi=1",              imageAlt: "Coffee and desserts"
+            },
             {
               id: "5",              name: "Friends Enjoying",              role: "Social Scene",              company: "Happy Moments",              rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/two-young-women-with-cup-coffee-looking-each-other_23-2147894404.jpg?_wi=1",              imageAlt: "Friends enjoying coffee"},
+                "http://img.b2bpic.net/free-photo/two-young-women-with-cup-coffee-looking-each-other_23-2147894404.jpg?_wi=1",              imageAlt: "Friends enjoying coffee"
+            },
             {
               id: "6",              name: "Night Lighting",              role: "Atmosphere",              company: "Evening Glow",              rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/antique-ceiling-lamp_1203-804.jpg?_wi=1",              imageAlt: "Cafe night lighting"},
+                "http://img.b2bpic.net/free-photo/antique-ceiling-lamp_1203-804.jpg?_wi=1",              imageAlt: "Cafe night lighting"
+            },
           ]}
           gridVariant="bento-grid"
           animationType="scale-rotate"
@@ -286,7 +230,8 @@ export default function HomePage() {
           useInvertedBackground={false}
           buttons={[
             {
-              text: "Follow on Instagram",              href: "https://instagram.com"},
+              text: "Follow on Instagram",              href: "https://instagram.com"
+            },
           ]}
         />
       </div>
@@ -300,16 +245,20 @@ export default function HomePage() {
           metrics={[
             {
               id: "1",              icon: Star,
-              title: "Rating",              value: "4.0★"},
+              title: "Rating",              value: "4.0★"
+            },
             {
               id: "2",              icon: Users,
-              title: "Reviews",              value: "1,100+"},
+              title: "Reviews",              value: "1,100+"
+            },
             {
               id: "3",              icon: TrendingUp,
-              title: "Visitors",              value: "1,000+/mo"},
+              title: "Visitors",              value: "1,000+/mo"
+            },
             {
               id: "4",              icon: MapPin,
-              title: "Location",              value: "Bhilwara"},
+              title: "Location",              value: "Bhilwara"
+            },
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -325,10 +274,11 @@ export default function HomePage() {
           description="Join us at The Ora Cafe for an unforgettable dining experience. Call us, visit Google Maps for directions, or fill out the form below to make your reservation."
           tagIcon={Phone}
           background={{
-            variant: "rotated-rays-animated-grid"}}
+            variant: "rotated-rays-animated-grid"
+          }}
           useInvertedBackground={false}
           inputPlaceholder="your.email@example.com"
-          buttonText="Get Updates"
+          buttonText="Reserve Table"
           termsText="We respect your privacy. Unsubscribe at any time. You can also call us at +91 94603 51156 or visit us at G38 Rooftop, The Grandstand, Bhilwara."
         />
       </div>
@@ -341,13 +291,16 @@ export default function HomePage() {
           socialLinks={[
             {
               icon: Instagram,
-              href: "https://instagram.com",              ariaLabel: "Instagram"},
+              href: "https://instagram.com",              ariaLabel: "Instagram"
+            },
             {
               icon: Facebook,
-              href: "https://facebook.com",              ariaLabel: "Facebook"},
+              href: "https://facebook.com",              ariaLabel: "Facebook"
+            },
             {
               icon: MapPin,
-              href: "https://maps.google.com",              ariaLabel: "Google Maps"},
+              href: "https://maps.google.com",              ariaLabel: "Google Maps"
+            },
           ]}
         />
       </div>