258 lines
10 KiB
TypeScript
258 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Image from "next/image";
|
|
|
|
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 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 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;
|
|
|
|
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">
|
|
|
|
{/* 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>
|
|
|
|
{/* 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"
|
|
>
|
|
<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 className="container max-w-6xl mx-auto relative z-10">
|
|
|
|
{/* 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
|
|
</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>
|
|
</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">
|
|
|
|
{/* 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 Items */}
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
className="flex flex-col gap-4"
|
|
>
|
|
{leftColumnItems.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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|