feat: restore original 2-column menu layout with premium animations
This commit is contained in:
Alaguraj0361
parent
efe12fcc9f
commit
ced44a26ec
@ -1,223 +1,245 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { useRef } from "react";
|
||||
import { motion, useScroll, useTransform } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
|
||||
interface MenuItemProps {
|
||||
name: string;
|
||||
price: string;
|
||||
desc: string;
|
||||
highlight?: string;
|
||||
tag: string;
|
||||
type: "green" | "gold" | "orange";
|
||||
}
|
||||
|
||||
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]" />
|
||||
const CategoryPill = ({ tag, type }: { tag: string; type: "green" | "gold" | "orange" }) => {
|
||||
const styles = {
|
||||
green: {
|
||||
bg: "bg-[#188754]/5",
|
||||
text: "text-[#188754]",
|
||||
border: "border-[#188754]/25",
|
||||
iconPath: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" // Checkmark
|
||||
},
|
||||
gold: {
|
||||
bg: "bg-[#d8c396]/8",
|
||||
text: "text-[#bc9e65]",
|
||||
border: "border-[#d8c396]/40",
|
||||
iconPath: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" // Star
|
||||
},
|
||||
orange: {
|
||||
bg: "bg-[#e07a5f]/5",
|
||||
text: "text-[#e07a5f]",
|
||||
border: "border-[#e07a5f]/25",
|
||||
iconPath: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 10h3l-4 4-4-4h3V8h2v4z" // Classic downward arrow badge
|
||||
}
|
||||
};
|
||||
|
||||
<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}
|
||||
const current = styles[type] || styles.green;
|
||||
|
||||
return (
|
||||
<div className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full border ${current.bg} ${current.text} ${current.border} text-[9px] font-sans font-bold tracking-wider uppercase shadow-[inset_0_1px_2px_rgba(255,255,255,0.4)] select-none transition-transform duration-300 hover:scale-105`}>
|
||||
<svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d={current.iconPath} />
|
||||
</svg>
|
||||
{tag}
|
||||
</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">
|
||||
const MenuItemRow = ({ name, desc, tag, type }: MenuItemProps) => (
|
||||
<motion.div
|
||||
whileHover={{ x: 6 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="group flex justify-between items-center py-4 px-3 border-b border-[#d8c396]/15 hover:border-[#0a4a2b]/35 hover:bg-[#0a4a2b]/3 rounded-lg transition-all duration-300 cursor-pointer shadow-[0_0_0_rgba(0,0,0,0)] hover:shadow-[0_4px_15px_rgba(28,45,36,0.02)]"
|
||||
>
|
||||
<div className="flex-1 pr-4">
|
||||
<div className="flex items-center">
|
||||
{/* Double 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 select-none">
|
||||
..>
|
||||
</span>
|
||||
<h3 className="font-serif text-[13px] sm:text-[14px] lg:text-[15px] font-black text-stone-800 tracking-wider group-hover:text-[#0a4a2b] transition-colors duration-300 uppercase">
|
||||
{name}
|
||||
</h4>
|
||||
</h3>
|
||||
</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">
|
||||
<p className="font-sans text-[11px] sm:text-[12px] text-stone-500 leading-relaxed mt-2.5 pl-6 font-medium">
|
||||
{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>
|
||||
|
||||
{/* Category Pill */}
|
||||
<div className="flex-shrink-0 pl-2">
|
||||
<CategoryPill tag={tag} type={type} />
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
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<HTMLDivElement>(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 (
|
||||
<section className="relative py-20 md:py-28 px-6 sm:px-12 md:px-24 bg-[#f6f3ea] overflow-hidden select-none">
|
||||
<section
|
||||
ref={sectionRef}
|
||||
className="relative min-h-screen py-20 md:py-28 px-6 sm:px-12 md:px-24 bg-[#f6f3ea] overflow-hidden select-none"
|
||||
>
|
||||
|
||||
{/* 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" />
|
||||
|
||||
{/* 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" />
|
||||
{/* Parallax Background Gopuram sketch (Left Watermark) */}
|
||||
<motion.div
|
||||
style={{ y: gopuramY, x: gopuramX }}
|
||||
className="absolute top-12 left-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-none mix-blend-multiply opacity-[0.12]"
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* 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">
|
||||
{/* Parallax Background Palace sketch (Right Watermark) */}
|
||||
<motion.div
|
||||
style={{ y: palaceY, x: palaceX }}
|
||||
className="absolute top-12 right-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-none mix-blend-multiply opacity-[0.12]"
|
||||
>
|
||||
<Image
|
||||
src="/images/menu_palace_sketch.png"
|
||||
alt="Palace Sketch"
|
||||
fill
|
||||
priority
|
||||
sizes="(max-width: 768px) 30vw, 20vw"
|
||||
className="object-contain filter grayscale"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<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">
|
||||
<div className="max-w-6xl mx-auto relative z-10">
|
||||
|
||||
{/* 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
|
||||
{/* Header Elements */}
|
||||
<div className="mb-16 flex flex-col items-center text-center">
|
||||
{/* Top traditional gold design element */}
|
||||
<div className="text-gold-dark text-xl mb-1">⚜</div>
|
||||
<div className="w-16 h-[1px] bg-[#d8c396] mb-3" />
|
||||
|
||||
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wide text-[#188754] uppercase">
|
||||
Our Menu
|
||||
</h2>
|
||||
<p className="font-serif text-stone-600 text-xs sm:text-sm tracking-widest italic mt-2">
|
||||
Comforting morning favourites from South India
|
||||
|
||||
{/* 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]">◆</span>
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#d8c396]" />
|
||||
</div>
|
||||
|
||||
<p className="font-sans text-xs sm:text-sm 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>
|
||||
|
||||
{/* 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 Card Layout */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16 items-start">
|
||||
{/* 2-Column Menu Layout wrapper */}
|
||||
<div className="relative grid grid-cols-1 md:grid-cols-2 gap-x-12 lg:gap-x-16 gap-y-4 px-2 md:px-6">
|
||||
|
||||
{/* Left Column: IDLY & VADA + Bottom Plate */}
|
||||
<div className="flex flex-col items-center md:items-start w-full">
|
||||
<BannerBadge title="Idly & Vada" />
|
||||
{/* 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 pointer-events-none" />
|
||||
|
||||
<div className="w-full flex flex-col mt-4">
|
||||
{idlyItems.map((item, idx) => (
|
||||
<MenuItemRow key={idx} {...item} />
|
||||
{/* Left Column Items */}
|
||||
<div className="flex flex-col gap-2">
|
||||
{leftColumnItems.map((item, index) => (
|
||||
<MenuItemRow key={index} {...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
|
||||
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"
|
||||
>
|
||||
<Image
|
||||
src="/images/my_dosa_place_food.png"
|
||||
alt="Idly Vada Platter"
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* BREADS section */}
|
||||
<BannerBadge title="Breads" />
|
||||
<div className="w-full flex flex-col mt-4">
|
||||
{breadItems.map((item, idx) => (
|
||||
<MenuItemRow key={idx} {...item} />
|
||||
{/* Right Column Items */}
|
||||
<div className="flex flex-col gap-2">
|
||||
{rightColumnItems.map((item, index) => (
|
||||
<MenuItemRow key={index} {...item} />
|
||||
))}
|
||||
</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