From efe12fcc9fce79de4d039bcadd62da07c6efbd61 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Tue, 14 Jul 2026 16:07:43 +0530
Subject: [PATCH] feat: replace the royal taste with premium breakfast classics
 menu card

---
 src/app/page.tsx               |  10 +-
 src/components/MenuPreview.tsx | 398 +++++++++++++++------------------
 2 files changed, 185 insertions(+), 223 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index c9c54fe..ace8b2a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 import SmoothScroll from "@/components/SmoothScroll";
 import EntranceExperience from "@/components/EntranceExperience";
 import RestaurantStory from "@/components/RestaurantStory";
-import SignatureFoods from "@/components/SignatureFoods";
 import ChefShowcase from "@/components/ChefShowcase";
 import InteriorGallery from "@/components/InteriorGallery";
 import Testimonials from "@/components/Testimonials";
@@ -41,8 +40,8 @@ export default function Home() {
         {/* Section 3: Heritage Story timeline */}
         <RestaurantStory />
 
-        {/* Section 4: Signature Foods featuring interactive 3D WebGL plates */}
-        <SignatureFoods />
+        {/* Section 4: Premium Breakfast Menu Card Section */}
+        <MenuPreview />
 
         {/* Section 5: Chef Sundaram showcase with canvas heat waves */}
         <ChefShowcase />
@@ -56,10 +55,7 @@ export default function Home() {
         {/* Section 8: Expanding Special Events Accordion */}
         <EventsAccordion />
 
-        {/* Section 9: Luxury Menu Categories preview */}
-        <MenuPreview />
-
-        {/* Section 10: Reservation Form with canvas sparks */}
+        {/* Section 9: Reservation Form with canvas sparks */}
         <ReservationForm />
 
         {/* Section 11: Cartographic Route SVG Map with animated Chariot */}
diff --git a/src/components/MenuPreview.tsx b/src/components/MenuPreview.tsx
index 5f19ec2..ad09e11 100644
--- a/src/components/MenuPreview.tsx
+++ b/src/components/MenuPreview.tsx
@@ -3,255 +3,221 @@
 import { motion } from "framer-motion";
 import Image from "next/image";
 
+interface MenuItemProps {
+  name: string;
+  price: string;
+  desc: string;
+  highlight?: string;
+}
+
+const BannerBadge = ({ title }: { title: string }) => (
+  <div className="relative inline-flex items-center justify-center my-6 select-none">
+    {/* Left decorative gold tip */}
+    <div className="absolute left-[-10px] w-0 h-0 border-t-[14px] border-t-transparent border-r-[12px] border-r-[#0a4a2b] border-b-[14px] border-b-transparent" />
+    <div className="absolute left-[-10px] w-2 h-0.5 bg-[#d8c396]" />
+    
+    <div className="bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 px-8 py-1.5 text-xs sm:text-sm font-serif font-bold tracking-[0.25em] text-[#fcfaf2] uppercase shadow-sm z-10">
+      {title}
+    </div>
+    
+    {/* Right decorative gold tip */}
+    <div className="absolute right-[-10px] w-0 h-0 border-t-[14px] border-t-transparent border-l-[12px] border-l-[#0a4a2b] border-b-[14px] border-b-transparent" />
+    <div className="absolute right-[-10px] w-2 h-0.5 bg-[#d8c396]" />
+  </div>
+);
+
+const MenuItemRow = ({ name, price, desc, highlight }: MenuItemProps) => (
+  <div className="group flex flex-col mb-5 w-full select-text">
+    {/* Top Row: Name, Dashed Line, Price */}
+    <div className="flex items-baseline justify-between w-full gap-2">
+      <div className="flex items-center gap-2">
+        {/* Flower gold bullet */}
+        <span className="text-[#d8c396] text-xs transition-transform duration-300 group-hover:rotate-45 group-hover:text-[#8b2635] select-none">❃</span>
+        <h4 className="font-serif text-sm sm:text-base font-bold text-stone-800 group-hover:text-[#0a4a2b] transition-colors duration-300">
+          {name}
+        </h4>
+      </div>
+      
+      {/* Dashed connector line */}
+      <div className="flex-1 border-b border-dashed border-stone-300 group-hover:border-[#d8c396]/60 transition-colors duration-300 mx-2" />
+      
+      <span className="font-serif text-sm sm:text-base font-bold text-[#8b2635] tracking-wide">
+        {price}
+      </span>
+    </div>
+    
+    {/* Bottom Row: Description */}
+    <p className="font-sans text-[11px] sm:text-[12px] text-stone-500 mt-1 pl-5 leading-relaxed">
+      {desc}
+      {highlight && (
+        <span className="font-serif font-bold text-[#188754] text-[10px] sm:text-[11px] uppercase tracking-wider ml-1.5 inline-block">
+          {highlight}
+        </span>
+      )}
+    </p>
+  </div>
+);
+
 export default function MenuPreview() {
-  const leftColumnItems = [
-    {
-      name: "ONION RAVA DOSA",
-      desc: "Crispy semolina crepe with onions, herbs & spices.",
-      tag: "RAVA SPL",
-      tagType: "green"
-    },
-    {
-      name: "IDLI SAMBAR (2 PCS)",
-      desc: "Steamed fluffy rice & lentil cakes with hot sambar.",
-      tag: "TIFFIN SPL",
-      tagType: "gold"
-    },
-    {
-      name: "MYSORE MASALA DOSA",
-      desc: "Rice crepe spread with spicy chutney & potato masala.",
-      tag: "CLASSIC",
-      tagType: "orange"
-    },
-    {
-      name: "RAVA MASALA DOSA",
-      desc: "Crispy semolina crepe filled with spiced potato masala.",
-      tag: "RAVA SPL",
-      tagType: "green"
-    },
-    {
-      name: "PURI BHAJI (3 PCS)",
-      desc: "Golden fluffy deep-fried puris with flavorful potato bhaji.",
-      tag: "TIFFIN SPL",
-      tagType: "gold"
-    }
+  const idlyItems = [
+    { name: "Idly (2 pcs)", price: "$10.99", desc: "Soft steamed rice-lentil cakes served with chutney and sambar" },
+    { name: "Thattu Idly (1 pc)", price: "$10.99", desc: "Plate-style fluffy idly with a homestyle South Indian touch" },
+    { name: "Thattu Idly (2 pcs)", price: "$14.99", desc: "Extra serving of soft thattu idly for hearty appetites" },
+    { name: "Ghee Podi Idly", price: "$14.99", desc: "Idly tossed with ghee and signature podi for bold flavour" },
+    { name: "Mini Sambar Idly", price: "$13.99", desc: "Bite-sized idlies soaked in hot aromatic sambar" },
+    { name: "Sambar Idly", price: "$13.99", desc: "Classic idly dipped in comforting house-made sambar" },
+    { name: "Medhu Vada", price: "$9.99", desc: "Golden lentil doughnuts, crisp outside and soft inside" },
+    { name: "Sambar Vada", price: "$13.99", desc: "Crispy medhu vada soaked in warm, flavourful sambar" },
+    { name: "Dahi Vada", price: "$13.99", desc: "Soft vada topped with creamy yogurt and sweet-spiced chutneys" },
+    { name: "Rasam Vada", price: "$13.99", desc: "Savoury vada immersed in peppery, tangy rasam" },
+    { name: "Paruppu Vada", price: "$11.99", desc: "Crispy chana-dal fritters with onion, herbs, and spices" },
   ];
 
-  const rightColumnItems = [
-    {
-      name: "MASALA DOSA",
-      desc: "Crispy thin rice & lentil crepe stuffed with potato masala.",
-      tag: "CLASSIC",
-      tagType: "orange"
-    },
-    {
-      name: "ONION RAVA MASALA DOSA",
-      desc: "Semolina crepe with onions and spiced potato filling.",
-      tag: "RAVA SPL",
-      tagType: "green"
-    },
-    {
-      name: "MEDU VADA (2 PCS)",
-      desc: "Deep fried crispy lentil donuts served with sambar & chutney.",
-      tag: "TIFFIN SPL",
-      tagType: "gold"
-    },
-    {
-      name: "PAPER ROAST DOSA",
-      desc: "Extra large, paper-thin, crispy dosa served hot.",
-      tag: "CLASSIC",
-      tagType: "orange"
-    },
-    {
-      name: "RAVA PLAIN DOSA",
-      desc: "Crispy semolina crepe served with chutney & sambar.",
-      tag: "RAVA SPL",
-      tagType: "green"
-    }
+  const breadItems = [
+    { name: "Chapathi Kurma", price: "$13.99", desc: "Soft whole-wheat chapathis with flavourful kurma" },
+    { name: "Parotta Kurma", price: "$14.99", desc: "Flaky layered parotta paired with rich kurma" },
+    { name: "Poori Masala", price: "$13.99", desc: "Puffed pooris served with seasoned potato masala" },
   ];
 
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    show: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.12
-      }
-    }
-  } as const;
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 15 },
-    show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } }
-  } as const;
+  const tiffinItems = [
+    { name: "Ghee Pongal", price: "$12.99", desc: "Creamy rice-lentil pongal tempered with ghee and pepper" },
+    { name: "Rava Khichdi", price: "$12.99", desc: "Savoury semolina khichdi with vegetables and mild spices" },
+    { name: "Mini Tiffin Combo", price: "$16.99", desc: "A curated mini tiffin selection for a satisfying meal" },
+    { name: "Mega Tiffin Combo", price: "$19.99", desc: "A generous South Indian tiffin platter with idly, vada, dosa, pongal", highlight: "with coffee $2 extra" },
+  ];
 
   return (
-    <section className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden bg-[#f6f3ea] border-b border-[#d8c396]/20">
+    <section className="relative py-20 md:py-28 px-6 sm:px-12 md:px-24 bg-[#f6f3ea] overflow-hidden select-none">
       
-      {/* Background Gopuram sketch (Left) */}
-      <motion.div
-        initial={{ opacity: 0, x: -60, scale: 0.95 }}
-        whileInView={{ opacity: 0.15, x: 0, scale: 1 }}
-        viewport={{ once: true }}
-        transition={{ duration: 1.8, ease: "easeOut" }}
-        className="absolute top-8 left-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-none mix-blend-multiply"
-      >
-        <Image
-          src="/images/menu_gopuram_sketch.png"
-          alt="Gopuram Sketch"
-          fill
-          priority
-          sizes="(max-width: 768px) 30vw, 20vw"
-          className="object-contain filter grayscale"
-        />
-      </motion.div>
+      {/* Traditional Temple Borders */}
+      <div className="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-gold-dark via-gold-light to-gold-dark opacity-25" />
 
-      {/* Background Palace sketch (Right) */}
-      <motion.div
-        initial={{ opacity: 0, x: 60, scale: 0.95 }}
-        whileInView={{ opacity: 0.15, x: 0, scale: 1 }}
-        viewport={{ once: true }}
-        transition={{ duration: 1.8, ease: "easeOut" }}
-        className="absolute top-8 right-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-none mix-blend-multiply"
-      >
+      {/* Ornate Gold Corner Borders */}
+      <div className="absolute top-6 left-6 w-16 h-16 border-t-2 border-l-2 border-gold/25 rounded-tl-lg pointer-events-none" />
+      <div className="absolute top-6 right-6 w-16 h-16 border-t-2 border-r-2 border-gold/25 rounded-tr-lg pointer-events-none" />
+      <div className="absolute bottom-6 left-6 w-16 h-16 border-b-2 border-l-2 border-gold/25 rounded-bl-lg pointer-events-none" />
+      <div className="absolute bottom-6 right-6 w-16 h-16 border-b-2 border-r-2 border-gold/25 rounded-br-lg pointer-events-none" />
+
+      {/* Background sketches for heritage watermark feel */}
+      <div className="absolute top-12 left-10 w-[240px] h-[300px] pointer-events-none opacity-5 mix-blend-multiply">
         <Image
           src="/images/menu_palace_sketch.png"
           alt="Palace Sketch"
           fill
-          priority
           sizes="(max-width: 768px) 30vw, 20vw"
           className="object-contain filter grayscale"
         />
-      </motion.div>
+      </div>
 
-      <div className="container max-w-6xl mx-auto relative z-10">
+      <div className="max-w-6xl mx-auto relative z-10 bg-[#fcf9f2]/75 border border-gold/15 rounded-xl p-8 sm:p-12 md:p-16 shadow-2xl">
         
-        {/* Header Elements */}
-        <div className="mb-20 flex flex-col items-center text-center">
-          {/* Top traditional gold design element */}
-          <div className="text-gold-dark text-xl mb-1 animate-pulse">⚜</div>
-          <div className="w-16 h-[1px] bg-[#d8c396] mb-3" />
-          
-          <h2 className="font-serif text-4xl md:text-5xl font-black tracking-wider text-[#188754] uppercase text-glow">
-            Our Menu
+        {/* Menu Book Header */}
+        <div className="mb-14 flex flex-col items-center text-center">
+          <span className="font-sans text-[10px] tracking-[0.45em] uppercase text-[#8b2635] font-bold block mb-1">
+            O U R   M E N U
+          </span>
+          <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wide text-[#0a4a2b] uppercase">
+            Breakfast Classics
           </h2>
-          
-          {/* Double line with diamond ornament */}
-          <div className="flex items-center gap-3 w-44 justify-center mt-3">
-            <div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#d8c396]" />
-            <span className="text-[#d8c396] text-[8px] animate-pulse">◆</span>
-            <div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#d8c396]" />
-          </div>
-
-          <p className="font-sans text-[11px] sm:text-xs text-stone-600 max-w-lg mt-6 leading-relaxed tracking-wider italic font-medium">
-            Explore a wide variety of authentic South Indian vegetarian dishes,<br className="hidden sm:inline" />
-            crafted with traditional recipes and the finest ingredients.
+          <p className="font-serif text-stone-600 text-xs sm:text-sm tracking-widest italic mt-2">
+            Comforting morning favourites from South India
           </p>
+          
+          {/* Traditional Gold Divider */}
+          <div className="flex items-center gap-4 mt-5 justify-center">
+            <div className="w-16 h-[1px] bg-gradient-to-r from-transparent to-[#d8c396]" />
+            <div className="w-2.5 h-2.5 rotate-45 border border-[#d8c396] bg-[#8b2635]" />
+            <div className="w-16 h-[1px] bg-gradient-to-l from-transparent to-[#d8c396]" />
+          </div>
         </div>
 
-        {/* 2-Column Menu Layout wrapper */}
-        <div className="relative grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-2 px-2 md:px-6">
+        {/* 2-Column Menu Card Layout */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16 items-start">
           
-          {/* Vertical Dotted Separator in the center (Desktop only) */}
-          <div className="hidden md:block absolute left-1/2 top-4 bottom-4 w-[1px] border-l border-dashed border-[#d8c396]/60 -translate-x-1/2" />
+          {/* Left Column: IDLY & VADA + Bottom Plate */}
+          <div className="flex flex-col items-center md:items-start w-full">
+            <BannerBadge title="Idly & Vada" />
+            
+            <div className="w-full flex flex-col mt-4">
+              {idlyItems.map((item, idx) => (
+                <MenuItemRow key={idx} {...item} />
+              ))}
+            </div>
 
-          {/* Left Column Items */}
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            whileInView="show"
-            viewport={{ once: true, margin: "-100px" }}
-            className="flex flex-col gap-4"
-          >
-            {leftColumnItems.map((item, index) => (
+            {/* Bottom Left Card: Pooris image card */}
+            <motion.div
+              animate={{ y: [0, 8, 0] }}
+              transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
+              className="w-full mt-8 relative rounded-lg overflow-hidden shadow-xl border border-gold/15 min-h-[180px] sm:min-h-[220px]"
+            >
+              <Image
+                src="/images/royal_dining_experience.png"
+                alt="Crispy Vada Poori Combo"
+                fill
+                className="object-cover brightness-95"
+              />
+              {/* Inner frame outline overlay */}
+              <div className="absolute inset-1.5 border border-gold/30 rounded" />
+            </motion.div>
+          </div>
+
+          {/* Right Column: Top Illustration & Idlies Plate + Breads + Tiffin Specials */}
+          <div className="flex flex-col items-center md:items-start w-full">
+            
+            {/* Top Right Graphics Panel: Street scene background with overlapping floating plate */}
+            <div className="w-full relative h-[240px] sm:h-[300px] rounded-lg overflow-hidden border border-gold/15 mb-8 shadow-lg bg-[#fcf9f2]">
+              {/* India Street Scene background */}
+              <div className="absolute inset-0 opacity-[0.9] mix-blend-multiply">
+                <Image
+                  src="/images/menu_gopuram_sketch.png"
+                  alt="Traditional South India Street Sketch"
+                  fill
+                  className="object-cover filter sepia-[0.3]"
+                />
+              </div>
+              
+              {/* Gold border mask */}
+              <div className="absolute inset-1.5 border border-gold/35 rounded" />
+
+              {/* Floating steel platter plate overlapping */}
               <motion.div
-                key={index}
-                variants={itemVariants}
-                whileHover={{ x: 6 }}
-                transition={{ duration: 0.3 }}
-                className="group flex justify-between items-start py-4 border-b border-[#d8c396]/15 hover:border-[#188754]/30 transition-all duration-300 cursor-pointer"
+                animate={{ y: [0, -10, 0] }}
+                transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
+                className="absolute right-4 bottom-2 sm:right-6 sm:bottom-4 w-[180px] h-[180px] sm:w-[230px] sm:h-[230px] drop-shadow-[0_15px_30px_rgba(0,0,0,0.55)] z-20 hover:rotate-6 transition-transform duration-500"
               >
-                <div className="flex-1 pr-4">
-                  <div className="flex items-center">
-                    {/* Double Dot Arrow Indicator */}
-                    <span className="text-[#188754] font-serif font-bold text-xs tracking-tighter mr-2 transition-transform duration-300 group-hover:translate-x-1.5 inline-block">
-                      ..&gt;
-                    </span>
-                    <h3 className="font-serif text-[14px] sm:text-[15px] font-black text-[#1e1412] tracking-wider group-hover:text-[#188754] transition-colors duration-300">
-                      {item.name}
-                    </h3>
-                  </div>
-                  <p className="font-sans text-[11px] sm:text-[12px] text-stone-600 leading-relaxed mt-1.5 pl-6 font-medium">
-                    {item.desc}
-                  </p>
-                </div>
-
-                {/* Status Badges on the right */}
-                <div className="flex-shrink-0 pt-0.5">
-                  <span className={`text-[9px] tracking-wider px-2.5 py-0.5 font-serif font-black uppercase rounded border transition-all duration-500 shadow-sm ${
-                    item.tagType === "green" 
-                      ? "bg-[#188754]/8 text-[#188754] border-[#188754]/25 group-hover:bg-[#188754]/12 group-hover:shadow-[#188754]/5"
-                      : item.tagType === "gold"
-                      ? "bg-[#d8c396]/10 text-[#bc9e65] border-[#d8c396]/35 group-hover:bg-[#d8c396]/15 group-hover:shadow-[#d8c396]/5"
-                      : "bg-[#e07a5f]/8 text-[#e07a5f] border-[#e07a5f]/25 group-hover:bg-[#e07a5f]/12 group-hover:shadow-[#e07a5f]/5"
-                  }`}>
-                    {item.tag}
-                  </span>
-                </div>
+                <Image
+                  src="/images/my_dosa_place_food.png"
+                  alt="Idly Vada Platter"
+                  fill
+                  className="object-contain"
+                />
               </motion.div>
-            ))}
-          </motion.div>
+            </div>
 
-          {/* Right Column Items */}
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            whileInView="show"
-            viewport={{ once: true, margin: "-100px" }}
-            className="flex flex-col gap-4"
-          >
-            {rightColumnItems.map((item, index) => (
-              <motion.div
-                key={index}
-                variants={itemVariants}
-                whileHover={{ x: 6 }}
-                transition={{ duration: 0.3 }}
-                className="group flex justify-between items-start py-4 border-b border-[#d8c396]/15 hover:border-[#188754]/30 transition-all duration-300 cursor-pointer"
-              >
-                <div className="flex-1 pr-4">
-                  <div className="flex items-center">
-                    {/* Double Dot Arrow Indicator */}
-                    <span className="text-[#188754] font-serif font-bold text-xs tracking-tighter mr-2 transition-transform duration-300 group-hover:translate-x-1.5 inline-block">
-                      ..&gt;
-                    </span>
-                    <h3 className="font-serif text-[14px] sm:text-[15px] font-black text-[#1e1412] tracking-wider group-hover:text-[#188754] transition-colors duration-300">
-                      {item.name}
-                    </h3>
-                  </div>
-                  <p className="font-sans text-[11px] sm:text-[12px] text-stone-600 leading-relaxed mt-1.5 pl-6 font-medium">
-                    {item.desc}
-                  </p>
-                </div>
+            {/* BREADS section */}
+            <BannerBadge title="Breads" />
+            <div className="w-full flex flex-col mt-4">
+              {breadItems.map((item, idx) => (
+                <MenuItemRow key={idx} {...item} />
+              ))}
+            </div>
 
-                {/* Status Badges on the right */}
-                <div className="flex-shrink-0 pt-0.5">
-                  <span className={`text-[9px] tracking-wider px-2.5 py-0.5 font-serif font-black uppercase rounded border transition-all duration-500 shadow-sm ${
-                    item.tagType === "green" 
-                      ? "bg-[#188754]/8 text-[#188754] border-[#188754]/25 group-hover:bg-[#188754]/12 group-hover:shadow-[#188754]/5"
-                      : item.tagType === "gold"
-                      ? "bg-[#d8c396]/10 text-[#bc9e65] border-[#d8c396]/35 group-hover:bg-[#d8c396]/15 group-hover:shadow-[#d8c396]/5"
-                      : "bg-[#e07a5f]/8 text-[#e07a5f] border-[#e07a5f]/25 group-hover:bg-[#e07a5f]/12 group-hover:shadow-[#e07a5f]/5"
-                  }`}>
-                    {item.tag}
-                  </span>
-                </div>
-              </motion.div>
-            ))}
-          </motion.div>
+            {/* TIFFIN SPECIALS section */}
+            <div className="mt-6 w-full">
+              <BannerBadge title="Tiffin Specials" />
+              <div className="w-full flex flex-col mt-4">
+                {tiffinItems.map((item, idx) => (
+                  <MenuItemRow key={idx} {...item} />
+                ))}
+              </div>
+            </div>
+
+          </div>
 
         </div>
 
       </div>
+
     </section>
   );
 }