- {/* Top Row: Name, Dashed Line, Price */}
-
-
- {/* Flower gold bullet */}
- ❃
-
- {name}
-
-
-
- {/* Dashed connector line */}
-
-
-
- {price}
-
+ const current = styles[type] || styles.green;
+
+ return (
+
-
- {/* Bottom Row: Description */}
-
- {desc}
- {highlight && (
-
- {highlight}
+ );
+};
+
+const MenuItemRow = ({ name, desc, tag, type }: MenuItemProps) => (
+
+
+
+ {/* Double Arrow Indicator */}
+
+ ..>
- )}
-
-
+
+ {name}
+
+
+ {desc}
+
+
+
+ {/* Category Pill */}
+
+
+
+
);
export default function MenuPreview() {
- 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 sectionRef = useRef
(null);
+
+ // Parallax scroll effects for background sketch watermarks
+ const { scrollYProgress } = useScroll({
+ target: sectionRef,
+ offset: ["start end", "end start"],
+ });
+
+ const gopuramY = useTransform(scrollYProgress, [0, 1], ["0px", "-40px"]);
+ const gopuramX = useTransform(scrollYProgress, [0, 1], ["0px", "-15px"]);
+ const palaceY = useTransform(scrollYProgress, [0, 1], ["0px", "40px"]);
+ const palaceX = useTransform(scrollYProgress, [0, 1], ["0px", "15px"]);
+
+ const leftColumnItems: MenuItemProps[] = [
+ {
+ name: "ONION RAVA DOSA",
+ desc: "Crispy semolina crepe with onions, herbs & spices.",
+ tag: "RAVA SPL",
+ type: "green"
+ },
+ {
+ name: "IDLI SAMBAR (2 PCS)",
+ desc: "Steamed fluffy rice & lentil cakes with hot sambar.",
+ tag: "TIFFIN SPL",
+ type: "gold"
+ },
+ {
+ name: "MYSORE MASALA DOSA",
+ desc: "Rice crepe spread with spicy chutney & potato masala.",
+ tag: "CLASSIC",
+ type: "orange"
+ },
+ {
+ name: "RAVA MASALA DOSA",
+ desc: "Crispy semolina crepe filled with spiced potato masala.",
+ tag: "RAVA SPL",
+ type: "green"
+ },
+ {
+ name: "PURI BHAJI (3 PCS)",
+ desc: "Golden fluffy deep-fried puris with flavorful potato bhaji.",
+ tag: "TIFFIN SPL",
+ type: "gold"
+ }
];
- 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 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" },
+ const rightColumnItems: MenuItemProps[] = [
+ {
+ name: "MASALA DOSA",
+ desc: "Crispy thin rice & lentil crepe stuffed with potato masala.",
+ tag: "CLASSIC",
+ type: "orange"
+ },
+ {
+ name: "ONION RAVA MASALA DOSA",
+ desc: "Semolina crepe with onions and spiced potato filling.",
+ tag: "RAVA SPL",
+ type: "green"
+ },
+ {
+ name: "MEDU VADA (2 PCS)",
+ desc: "Deep fried crispy lentil donuts served with sambar & chutney.",
+ tag: "TIFFIN SPL",
+ type: "gold"
+ },
+ {
+ name: "PAPER ROAST DOSA",
+ desc: "Extra large, paper-thin, crispy dosa served hot.",
+ tag: "CLASSIC",
+ type: "orange"
+ },
+ {
+ name: "RAVA PLAIN DOSA",
+ desc: "Crispy semolina crepe served with chutney & sambar.",
+ tag: "RAVA SPL",
+ type: "green"
+ }
];
return (
-
+
{/* Traditional Temple Borders */}
- {/* Ornate Gold Corner Borders */}
-
-
-
-
+ {/* Parallax Background Gopuram sketch (Left Watermark) */}
+
+
+
- {/* Background sketches for heritage watermark feel */}
-
+ {/* Parallax Background Palace sketch (Right Watermark) */}
+
-
+
-
+
- {/* Menu Book Header */}
-
-
- O U R M E N U
-
-
- Breakfast Classics
-
-
- Comforting morning favourites from South India
-
+ {/* Header Elements */}
+
+ {/* Top traditional gold design element */}
+
⚜
+
- {/* Traditional Gold Divider */}
-
-
-
-
+
+ Our Menu
+
+
+ {/* Double line with diamond ornament */}
+
+
+
+ Explore a wide variety of authentic South Indian vegetarian dishes,
+ crafted with traditional recipes and the finest ingredients.
+
- {/* 2-Column Menu Card Layout */}
-
+ {/* 2-Column Menu Layout wrapper */}
+
- {/* Left Column: IDLY & VADA + Bottom Plate */}
-
-
-
-
- {idlyItems.map((item, idx) => (
-
- ))}
-
+ {/* Vertical Dotted Separator in the center (Desktop only) */}
+
- {/* Bottom Left Card: Pooris image card */}
-
-
- {/* Inner frame outline overlay */}
-
-
+ {/* Left Column Items */}
+
+ {leftColumnItems.map((item, index) => (
+
+ ))}
- {/* Right Column: Top Illustration & Idlies Plate + Breads + Tiffin Specials */}
-
-
- {/* Top Right Graphics Panel: Street scene background with overlapping floating plate */}
-
- {/* India Street Scene background */}
-
-
-
-
- {/* Gold border mask */}
-
-
- {/* Floating steel platter plate overlapping */}
-
-
-
-
-
- {/* BREADS section */}
-
-
- {breadItems.map((item, idx) => (
-
- ))}
-
-
- {/* TIFFIN SPECIALS section */}
-
-
-
- {tiffinItems.map((item, idx) => (
-
- ))}
-
-
-
+ {/* Right Column Items */}
+
+ {rightColumnItems.map((item, index) => (
+
+ ))}
-
);
}