feat: replace the royal taste with premium breakfast classics menu card
This commit is contained in:
Alaguraj0361
parent
a7bf5fe945
commit
efe12fcc9f
@ -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 */}
|
||||
|
||||
@ -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" />
|
||||
|
||||
{/* 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) => (
|
||||
<div className="w-full flex flex-col mt-4">
|
||||
{idlyItems.map((item, idx) => (
|
||||
<MenuItemRow key={idx} {...item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
..>
|
||||
</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">
|
||||
..>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user