443 lines
34 KiB
TypeScript
443 lines
34 KiB
TypeScript
"use client";
|
||
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import Image from "next/image";
|
||
import { useState } from "react";
|
||
import AnimatedSection from "@/components/AnimatedSection";
|
||
|
||
const TABS = [
|
||
{ id: "all", label: "ALL ITEMS", noIcon: true },
|
||
{ id: "classics", label: "CLASSICS" },
|
||
{ id: "dosa", label: "DOSA" },
|
||
{ id: "rava", label: "RAVA SPL" },
|
||
{ id: "uttapam", label: "UTTAPAM" },
|
||
{ id: "breads", label: "BREADS" },
|
||
{ id: "appetizers", label: "APPETIZERS" },
|
||
{ id: "tiffin", label: "TIFFIN SPL" },
|
||
{ id: "rice", label: "RICE" },
|
||
{ id: "beverages", label: "BEVERAGES" },
|
||
{ id: "weekend", label: "WEEKEND SPL" },
|
||
{ id: "sides", label: "SIDES" },
|
||
{ id: "desserts", label: "DESSERTS" },
|
||
];
|
||
|
||
const MENU_ITEMS = [
|
||
// ── CLASSICS ──────────────────────────────────────────────────────────
|
||
{ id: 1, name: "IDLY (6 PCS)", desc: "Steamed fluffy rice & lentil cakes served with sambar & chutneys.", price: "$10.99", tag: "CLASSICS", bg: "light" },
|
||
{ id: 2, name: "THATTU IDLY (1 PC)", desc: "Plate-style idly served with sambar & fresh chutneys.", price: "$10.99", tag: "CLASSICS", bg: "light" },
|
||
{ id: 3, name: "THATTU IDLY (2 PCS)", desc: "Two plate-style idlies with sambar & fresh chutneys.", price: "$14.99", tag: "CLASSICS", bg: "light" },
|
||
{ id: 4, name: "GHEE PODI IDLY", desc: "Soft idlies tossed in aromatic gunpowder podi with ghee.", price: "$14.99", tag: "CLASSICS", bg: "light" },
|
||
{ id: 5, name: "MINI SAMBAR IDLY", desc: "Bite-sized idlies immersed in rich, spiced sambar.", price: "$13.99", tag: "CLASSICS", bg: "light" },
|
||
{ id: 6, name: "SAMBAR IDLY", desc: "Classic idly dunked in hot, tangy sambar.", price: "$9.99", tag: "CLASSICS", bg: "light" },
|
||
{ id: 7, name: "MEDHU VADA", desc: "Crispy golden lentil donuts served with sambar & chutney.", price: "$13.99", tag: "CLASSICS", bg: "light" },
|
||
{ id: 8, name: "SAMBAR VADA", desc: "Crispy vadas soaked in hearty sambar.", price: "$13.99", tag: "CLASSICS", bg: "light" },
|
||
{ id: 9, name: "DAHI VADA", desc: "Soft vadas topped with creamy yogurt & spiced chutneys.", price: "$13.99", tag: "CLASSICS", bg: "light" },
|
||
{ id: 10, name: "1 IDLY 1 VADA COMBO", desc: "One fluffy idly and one crispy vada with sambar & chutney.", price: "$11.99", tag: "CLASSICS", bg: "green" },
|
||
{ id: 11, name: "2 IDLY 1 VADA COMBO", desc: "Two soft idlies and one crispy vada with sambar & chutney.", price: "$12.99", tag: "CLASSICS", bg: "green" },
|
||
{ id: 12, name: "1 IDLY 2 VADA COMBO", desc: "One fluffy idly and two crispy vadas with sambar & chutney.", price: "$13.99", tag: "CLASSICS", bg: "green" },
|
||
{ id: 13, name: "RASA VADA", desc: "Crispy vadas soaked in tangy, peppery rasam.", price: "$13.99", tag: "CLASSICS", bg: "light" },
|
||
{ id: 14, name: "PARUPPU VADA", desc: "Crispy deep-fried lentil patties seasoned with spices.", price: "$11.99", tag: "CLASSICS", bg: "light" },
|
||
|
||
// ── DOSA ──────────────────────────────────────────────────────────────
|
||
{ id: 20, name: "PLAIN DOSA", desc: "Thin, crispy fermented rice & lentil crepe served with chutneys.", price: "$10.99", tag: "DOSA", bg: "light" },
|
||
{ id: 21, name: "MASALA DOSA", desc: "Crispy dosa stuffed with spiced potato masala.", price: "$13.99", tag: "DOSA", bg: "light" },
|
||
{ id: 22, name: "MYSORE DOSA", desc: "Crispy dosa spread with fiery Mysore chutney.", price: "$13.99", tag: "DOSA", bg: "light" },
|
||
{ id: 23, name: "MYSORE MASALA", desc: "Spicy Mysore chutney spread dosa with potato masala filling.", price: "$14.99", tag: "DOSA", bg: "dark" },
|
||
{ id: 24, name: "GHEE ROAST", desc: "Dosa cooked in rich ghee till golden & irresistibly crisp.", price: "$14.99", tag: "DOSA", bg: "light" },
|
||
{ id: 25, name: "GHEE MASALA", desc: "Ghee-roasted dosa generously filled with potato masala.", price: "$15.99", tag: "DOSA", bg: "light" },
|
||
{ id: 26, name: "ONION DOSA", desc: "Classic dosa loaded with caramelised onions & spices.", price: "$13.99", tag: "DOSA", bg: "light" },
|
||
{ id: 27, name: "ONION MASALA", desc: "Onion dosa with a hearty spiced potato filling.", price: "$14.99", tag: "DOSA", bg: "light" },
|
||
{ id: 28, name: "PODI MASALA", desc: "Dosa smeared with spicy gunpowder podi & stuffed with masala.", price: "$13.99", tag: "DOSA", bg: "light" },
|
||
{ id: 29, name: "GHEE PODI MASALA", desc: "Ghee-laced dosa with gunpowder podi and potato masala.", price: "$15.99", tag: "DOSA", bg: "light" },
|
||
{ id: 30, name: "GHEE PODI", desc: "Dosa drizzled with ghee and fragrant gunpowder podi.", price: "$14.99", tag: "DOSA", bg: "light" },
|
||
{ id: 31, name: "PAV BHAJI DOSA", desc: "Crispy dosa topped with spiced Mumbai-style pav bhaji.", price: "$16.99", tag: "DOSA", bg: "light" },
|
||
{ id: 32, name: "BUTTER MASALA", desc: "Dosa slathered in butter with a spiced masala filling.", price: "$15.99", tag: "DOSA", bg: "light" },
|
||
{ id: 33, name: "CHZ DOSA", desc: "Dosa filled with gooey melted cheese & spices.", price: "$14.99", tag: "DOSA", bg: "light" },
|
||
{ id: 34, name: "CHETTINAD MASALA", desc: "Aromatic Chettinad spiced dosa with potato filling.", price: "$16.99", tag: "DOSA", bg: "dark" },
|
||
{ id: 35, name: "ANDHRA CHARA", desc: "Fiery Andhra-style spiced dosa, bold & robust.", price: "$15.99", tag: "DOSA", bg: "light" },
|
||
{ id: 36, name: "ANDHRA KARA MASALA", desc: "Spicy Andhra kara chutney dosa with masala filling.", price: "$16.99", tag: "DOSA", bg: "light" },
|
||
{ id: 37, name: "KARA DOSA", desc: "Dosa with spicy kara chutney spread.", price: "$13.99", tag: "DOSA", bg: "light" },
|
||
{ id: 38, name: "BUTTER GARLIC", desc: "Dosa cooked with butter and roasted garlic.", price: "$14.99", tag: "DOSA", bg: "light" },
|
||
{ id: 39, name: "BUTTER GARLIC MASALA", desc: "Butter garlic dosa filled with spiced potato masala.", price: "$15.99", tag: "DOSA", bg: "light" },
|
||
{ id: 40, name: "PANEER BUTTER (BURJI)", desc: "Dosa with crumbled paneer cooked in butter & spices.", price: "$17.99", tag: "DOSA", bg: "dark" },
|
||
{ id: 41, name: "BUTTER DOSA", desc: "Simple crispy dosa lavishly spread with fresh butter.", price: "$13.99", tag: "DOSA", bg: "light" },
|
||
{ id: 42, name: "KIDS DOSA", desc: "A small, soft & mild dosa perfect for little ones.", price: "$9.99", tag: "DOSA", bg: "light" },
|
||
|
||
// ── RAVA SPL ──────────────────────────────────────────────────────────
|
||
{ id: 50, name: "RAVA DOSA", desc: "Thin, lacy & crispy semolina crepe served with chutneys.", price: "$13.99", tag: "RAVA SPL", bg: "light" },
|
||
{ id: 51, name: "RAVA MASALA", desc: "Crispy rava dosa filled with spiced potato masala.", price: "$14.99", tag: "RAVA SPL", bg: "light" },
|
||
{ id: 52, name: "ONION RAVA", desc: "Lacy semolina crepe loaded with onions & herbs.", price: "$15.99", tag: "RAVA SPL", bg: "light" },
|
||
{ id: 53, name: "ONION RAVA MASALA", desc: "Onion rava dosa generously stuffed with potato masala.", price: "$16.99", tag: "RAVA SPL", bg: "light" },
|
||
|
||
// ── UTTAPAM ───────────────────────────────────────────────────────────
|
||
{ id: 60, name: "PLAIN UTTAPAM", desc: "Thick, soft rice pancake served with sambar & chutneys.", price: "$10.99", tag: "UTTAPAM", bg: "light" },
|
||
{ id: 61, name: "ONION UTTAPAM", desc: "Fluffy uttapam generously topped with fresh onions.", price: "$12.99", tag: "UTTAPAM", bg: "light" },
|
||
{ id: 62, name: "GHEE PODI UTTAPAM", desc: "Uttapam drizzled with ghee & aromatic gunpowder podi.", price: "$14.99", tag: "UTTAPAM", bg: "light" },
|
||
{ id: 63, name: "MIX VEG UTTAPAM", desc: "Uttapam loaded with a colourful medley of fresh vegetables.", price: "$16.99", tag: "UTTAPAM", bg: "green" },
|
||
{ id: 64, name: "ONION TOMATO UTTAPAM", desc: "Classic uttapam with onion and ripe tomato topping.", price: "$13.99", tag: "UTTAPAM", bg: "light" },
|
||
{ id: 65, name: "ONION CHILLI UTTAPAM", desc: "Spiced uttapam topped with onions and green chillies.", price: "$13.99", tag: "UTTAPAM", bg: "light" },
|
||
|
||
// ── BREADS ────────────────────────────────────────────────────────────
|
||
{ id: 70, name: "CHAPPATHI KADALA", desc: "Soft wheat flatbread served with spiced black chickpea curry.", price: "$13.99", tag: "BREADS", bg: "light" },
|
||
{ id: 71, name: "PAROTTA KADALA", desc: "Flaky layered parotta paired with rich kadala curry.", price: "$14.99", tag: "BREADS", bg: "light" },
|
||
{ id: 72, name: "POORI MASALA", desc: "Deep-fried fluffy poori served with spiced potato masala.", price: "$13.99", tag: "BREADS", bg: "light" },
|
||
|
||
// ── APPETIZERS ────────────────────────────────────────────────────────
|
||
{ id: 80, name: "GOBI 65", desc: "Crispy spiced fried cauliflower in a tangy South Indian style.", price: "$14.99", tag: "APPETIZERS", bg: "light" },
|
||
{ id: 81, name: "PANEER 65", desc: "Crispy marinated paneer cubes fried with aromatic spices.", price: "$15.99", tag: "APPETIZERS", bg: "light" },
|
||
{ id: 82, name: "CHILLI PAROTTA", desc: "Shredded flaky parotta stir-fried with peppers & spicy sauces.", price: "$14.99", tag: "APPETIZERS", bg: "light" },
|
||
{ id: 83, name: "KOTHU PAROTTA", desc: "Finely chopped parotta tossed with veggies, eggs & spices.", price: "$14.99", tag: "APPETIZERS", bg: "light" },
|
||
{ id: 84, name: "CHILLI GOBI", desc: "Crispy cauliflower tossed in spicy Indo-Chinese chilli sauce.", price: "$15.99", tag: "APPETIZERS", bg: "dark" },
|
||
{ id: 85, name: "CHILLI PANEER", desc: "Crispy paneer cubes tossed in bold Indo-Chinese chilli sauce.", price: "$16.99", tag: "APPETIZERS", bg: "dark" },
|
||
{ id: 86, name: "CAULIFLOWER MANCHURIAN",desc: "Crispy gobi florets in a savory, tangy Manchurian sauce.", price: "$15.99", tag: "APPETIZERS", bg: "light" },
|
||
{ id: 87, name: "CHILLI IDLY", desc: "Crispy fried idly pieces tossed in spicy Indo-Chinese sauce.", price: "$13.99", tag: "APPETIZERS", bg: "light" },
|
||
{ id: 88, name: "ONION PAKODA", desc: "Crunchy golden fritters made with onions, gram flour & spices.", price: "$12.99", tag: "APPETIZERS", bg: "light" },
|
||
|
||
// ── TIFFIN SPL ────────────────────────────────────────────────────────
|
||
{ id: 90, name: "GHEE PONGAL", desc: "Comforting rice & lentil porridge cooked with ghee, ginger & pepper.", price: "$12.99", tag: "TIFFIN SPL", bg: "light" },
|
||
{ id: 91, name: "RAVA KICHADI", desc: "Savoury semolina upma cooked with vegetables & spices.", price: "$12.99", tag: "TIFFIN SPL", bg: "light" },
|
||
{ id: 92, name: "MINI TIFFIN COMBO", desc: "A delightful assortment of mini tiffin bites – perfect sampler.", price: "$16.99", tag: "TIFFIN SPL", bg: "green" },
|
||
{ id: 93, name: "MEGA TIFFIN COMBO", desc: "The ultimate tiffin feast with coffee & guava included.", price: "$19.99", tag: "TIFFIN SPL", bg: "green" },
|
||
|
||
// ── WEEKEND SPL ───────────────────────────────────────────────────────
|
||
{ id: 100, name: "THALI SOUTH INDIAN", desc: "A royal platter of rice, curries, sides & dessert. Sat & Sun 12–3 PM.", price: "$21.99", tag: "WEEKEND SPL",bg: "dark" },
|
||
{ id: 101, name: "VEG FRIED RICE / NOODLES", desc: "Wok-tossed fried rice or noodles with fresh veggies & sauces.", price: "$15.99", tag: "WEEKEND SPL",bg: "light" },
|
||
{ id: 102, name: "CHENNA BHATURA", desc: "Fluffy deep-fried bread with spiced chickpea (chenna) curry.", price: "$15.99", tag: "WEEKEND SPL",bg: "light" },
|
||
|
||
// ── RICE ──────────────────────────────────────────────────────────────
|
||
{ id: 110, name: "CURD RICE", desc: "Cooling yogurt rice seasoned with mustard, ginger & curry leaves.", price: "$11.99", tag: "RICE", bg: "light" },
|
||
{ id: 111, name: "SAMBAR RICE", desc: "Flavourful rice cooked with hearty sambar & vegetables.", price: "$13.99", tag: "RICE", bg: "light" },
|
||
{ id: 112, name: "PULIYODARAI", desc: "Tangy tamarind rice tempered with spices & peanuts.", price: "$13.99", tag: "RICE", bg: "light" },
|
||
{ id: 113, name: "VEG PULAO", desc: "Fragrant basmati rice cooked with vegetables & whole spices.", price: "$15.99", tag: "RICE", bg: "green" },
|
||
{ id: 114, name: "LEMON RICE", desc: "Zesty rice tossed with lemon juice, turmeric & mustard seeds.", price: "$13.99", tag: "RICE", bg: "light" },
|
||
{ id: 115, name: "TOMATO DAAL", desc: "Comforting lentil curry simmered with ripe tomatoes & spices.", price: "$14.99", tag: "RICE", bg: "light" },
|
||
|
||
// ── BEVERAGES ─────────────────────────────────────────────────────────
|
||
{ id: 120, name: "COLD BADAM MILK", desc: "Chilled almond-infused milk sweetened with saffron & cardamom.", price: "$9.99", tag: "BEVERAGES", bg: "light" },
|
||
{ id: 121, name: "MANGO LASSI", desc: "Refreshing yogurt drink blended with sweet Alphonso mangoes.", price: "$8.99", tag: "BEVERAGES", bg: "light" },
|
||
{ id: 122, name: "ROSE MILK", desc: "Chilled milk flavoured with rose syrup – a South Indian classic.", price: "$7.99", tag: "BEVERAGES", bg: "light" },
|
||
{ id: 123, name: "POP / WATER", desc: "Chilled soft drink or still water.", price: "$2.99", tag: "BEVERAGES", bg: "light" },
|
||
{ id: 124, name: "MASALA CHAI", desc: "Aromatic spiced tea brewed with ginger, cardamom & milk.", price: "$4.99", tag: "BEVERAGES", bg: "light" },
|
||
{ id: 125, name: "FILTER COFFEE", desc: "Authentic South Indian decoction coffee with frothy milk.", price: "$4.99", tag: "BEVERAGES", bg: "dark" },
|
||
|
||
// ── SIDES ─────────────────────────────────────────────────────────────
|
||
{ id: 130, name: "SAMBAR", desc: "Traditional South Indian lentil and vegetable stew.", price: "$2.50", tag: "SIDES", bg: "light" },
|
||
{ id: 131, name: "PODI", desc: "Spicy and aromatic gunpowder condiment.", price: "$1.99", tag: "SIDES", bg: "light" },
|
||
{ id: 132, name: "MASALA", desc: "Flavourful spiced potato filling.", price: "$2.50", tag: "SIDES", bg: "light" },
|
||
{ id: 133, name: "EXTRA", desc: "Additional accompaniments for your meal.", price: "$1.99", tag: "SIDES", bg: "light" },
|
||
|
||
// ── DESSERTS ──────────────────────────────────────────────────────────
|
||
{ id: 140, name: "GULAB JAMUN", desc: "Soft milk dumplings immersed in rose-scented syrup.", price: "$5.99", tag: "DESSERTS", bg: "light" },
|
||
{ id: 141, name: "RASAMALAI", desc: "Spongy cottage cheese discs soaked in sweetened milk.", price: "$5.99", tag: "DESSERTS", bg: "light" },
|
||
{ id: 142, name: "PINEAPPLE KESARI", desc: "Sweet semolina pudding flavoured with pineapple chunks.", price: "$6.99", tag: "DESSERTS", bg: "light" },
|
||
{ id: 143, name: "PAYASAM", desc: "Traditional rich and creamy South Indian sweet pudding.", price: "$7.99", tag: "DESSERTS", bg: "light" },
|
||
];
|
||
|
||
export default function MenuPageContent() {
|
||
const [activeTab, setActiveTab] = useState("classics");
|
||
const [isPopupOpen, setIsPopupOpen] = useState(false);
|
||
|
||
// Map tab ids → item tag values
|
||
const TAB_TAG_MAP: Record<string, string> = {
|
||
classics: "CLASSICS",
|
||
dosa: "DOSA",
|
||
rava: "RAVA SPL",
|
||
uttapam: "UTTAPAM",
|
||
breads: "BREADS",
|
||
appetizers: "APPETIZERS",
|
||
tiffin: "TIFFIN SPL",
|
||
rice: "RICE",
|
||
beverages: "BEVERAGES",
|
||
weekend: "WEEKEND SPL",
|
||
sides: "SIDES",
|
||
desserts: "DESSERTS",
|
||
};
|
||
|
||
const filteredItems =
|
||
activeTab === "all"
|
||
? MENU_ITEMS
|
||
: MENU_ITEMS.filter((item) => item.tag === TAB_TAG_MAP[activeTab]);
|
||
|
||
return (
|
||
<div className="bg-[#faf7f2] font-sans pb-24 text-stone-800">
|
||
{/* Header Section */}
|
||
<div className="relative pt-24 px-6 flex flex-col items-center text-center overflow-hidden">
|
||
{/* Background Sketch (using a subtle pattern or existing image if available, else CSS) */}
|
||
<div className="absolute inset-0 opacity-10 pointer-events-none" style={{ backgroundImage: 'url("/images/home/menu/our-menu-bg.webp")', backgroundSize: 'cover', backgroundPosition: 'center top' }}></div>
|
||
</div>
|
||
|
||
{/* Section Title */}
|
||
<div className="flex flex-col items-center mb-10 w-full px-4">
|
||
<div className="flex items-center gap-4 justify-center flex-wrap">
|
||
<span className="text-[#bc9e65] hidden sm:inline-block">❧</span>
|
||
<h2 className="font-serif text-2xl sm:text-3xl font-bold text-[#0f3f26] uppercase tracking-widest text-center leading-tight">MY DOSA SPECIALTIES</h2>
|
||
<span className="text-[#bc9e65] scale-x-[-1] hidden sm:inline-block">❧</span>
|
||
</div>
|
||
<div className="flex items-center gap-3 mt-3 text-xs sm:text-sm font-semibold tracking-wide text-stone-600 justify-center">
|
||
<span className="w-6 sm:w-8 h-[1px] bg-[#bc9e65]/60"></span>
|
||
Crispy <span className="text-[#bc9e65] text-xs">●</span> Flavorful <span className="text-[#bc9e65] text-xs">●</span> Authentic
|
||
<span className="w-6 sm:w-8 h-[1px] bg-[#bc9e65]/60"></span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<AnimatedSection variant="fadeUp" delay={0}>
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16 relative z-10">
|
||
|
||
{/* Desktop View (wrapped categories) */}
|
||
<div className="hidden md:flex flex-wrap items-center gap-2 justify-center">
|
||
{TABS.map((tab) => {
|
||
const isActive = activeTab === tab.id;
|
||
const isAllItems = tab.id === "all";
|
||
|
||
if (isAllItems) {
|
||
return (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={`relative flex items-center gap-3 px-6 rounded-[20px] whitespace-nowrap transition-all duration-300 font-serif font-bold text-xs uppercase tracking-wider
|
||
${isActive
|
||
? "bg-[#0a4a2b] text-white border-[3px] border-[#bc9e65] py-2.5 shadow-[0_4px_15px_rgba(188,158,101,0.3)] z-10"
|
||
: "bg-[#0a4a2b] text-white border-[3px] border-transparent py-2.5 hover:bg-[#073820]"
|
||
}`}
|
||
>
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<rect x="3" y="3" width="7" height="7" rx="1.5" />
|
||
<rect x="14" y="3" width="7" height="7" rx="1.5" />
|
||
<rect x="14" y="14" width="7" height="7" rx="1.5" />
|
||
<rect x="3" y="14" width="7" height="7" rx="1.5" />
|
||
</svg>
|
||
{tab.label}
|
||
{isActive && (
|
||
<div className="absolute -bottom-[6px] left-1/2 -translate-x-1/2 w-2.5 h-2.5 bg-[#bc9e65] rotate-45 z-20"></div>
|
||
)}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={`relative flex items-center gap-3 px-2.5 whitespace-nowrap transition-all duration-300 font-serif font-bold text-[11px] uppercase tracking-wider rounded-[20px]
|
||
${isActive
|
||
? "bg-[#0a4a2b] text-white border-[3px] border-[#bc9e65] py-2 shadow-[0_4px_15px_rgba(188,158,101,0.3)] z-10"
|
||
: "bg-[#fdfcf9] text-[#0f3f26] border border-[#eaddc4] py-2.5 hover:bg-white hover:shadow-md"
|
||
}`}
|
||
>
|
||
<div className={`w-8 h-8 flex items-center justify-center rounded-full ${isActive ? 'opacity-100' : 'opacity-90'}`}>
|
||
<Image src="/images/menu/tab-icon.png" alt="" width={38} height={38} className="object-contain drop-shadow-sm" />
|
||
</div>
|
||
{tab.label}
|
||
|
||
{/* Gold Diamond for Active Tab */}
|
||
{isActive && (
|
||
<div className="absolute -bottom-[6px] left-1/2 -translate-x-1/2 w-2.5 h-2.5 bg-[#bc9e65] rotate-45 z-20"></div>
|
||
)}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
{/* Mobile View: Single Category Pill + Distinct 'VIEW ALL' Trigger */}
|
||
<div className="md:hidden flex justify-center w-full px-4">
|
||
<div className="flex items-center justify-between w-full max-w-[310px] bg-white border-2 border-[#bc9e65] rounded-full pl-5 pr-2 py-1.5 shadow-lg">
|
||
{/* Left: Selected Category Details */}
|
||
<div className="flex items-center gap-2.5">
|
||
{activeTab === "all" ? (
|
||
<div className="text-[#0a4a2b]">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||
<rect x="3" y="3" width="7" height="7" rx="1.5" />
|
||
<rect x="14" y="3" width="7" height="7" rx="1.5" />
|
||
<rect x="14" y="14" width="7" height="7" rx="1.5" />
|
||
<rect x="3" y="14" width="7" height="7" rx="1.5" />
|
||
</svg>
|
||
</div>
|
||
) : (
|
||
<div className="w-6 h-6 flex items-center justify-center">
|
||
<Image src="/images/menu/tab-icon.png" alt="" width={22} height={22} className="object-contain" />
|
||
</div>
|
||
)}
|
||
<span className="font-serif font-bold text-xs tracking-wider text-[#0f3f26] uppercase">
|
||
{TABS.find((t) => t.id === activeTab)?.label}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Right: "VIEW ALL" Trigger Button */}
|
||
<button
|
||
onClick={() => setIsPopupOpen(true)}
|
||
className="flex items-center gap-1 bg-[#0a4a2b] text-white border border-[#bc9e65] rounded-full px-3.5 py-2 text-[9px] font-serif font-bold tracking-widest hover:bg-[#073820] active:scale-95 transition-all shadow-sm"
|
||
>
|
||
<span>VIEW ALL</span>
|
||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</AnimatedSection>
|
||
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||
|
||
{/* Card Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{filteredItems.map((item, index) => (
|
||
<AnimatedSection key={item.id} variant="fadeUp" delay={index * 0.08} className="h-full">
|
||
<div
|
||
className="relative rounded-3xl overflow-hidden shadow-lg group transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl border bg-white text-stone-800 border-stone-200 hover:bg-[#0a4a2b] hover:border-[#0a4a2b] flex flex-col h-full"
|
||
>
|
||
{/* Image Section */}
|
||
<div className="relative h-30 w-full bg-[#111]">
|
||
<Image
|
||
src="/images/menu/card-img.png"
|
||
alt={item.name}
|
||
fill
|
||
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
||
/>
|
||
{/* Curve Overlay */}
|
||
<div className="absolute top-0 right-0 w-20 h-20 bg-transparent pointer-events-none">
|
||
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="absolute w-full h-full top-0 right-0 scale-x-[1] scale-y-[1] text-white group-hover:text-[#0a4a2b] transition-colors duration-500">
|
||
<path d="M100,0 V100 C100,44.77 55.23,0 0,0 H100 Z" fill="currentColor" />
|
||
</svg>
|
||
</div>
|
||
|
||
{/* Floating Icon */}
|
||
<div className="absolute -bottom-6 left-6 w-14 h-14 rounded-full flex items-center justify-center shadow-lg border-3 z-10 bg-[#fdfcf9] border-[#eaddc4] group-hover:border-[#bc9e65] transition-colors duration-500">
|
||
<Image src="/images/menu/card-icon.png" alt="icon" width={38} height={38} className="object-contain" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Content Section */}
|
||
<div className="pt-10 pb-6 px-6 relative flex flex-col flex-grow">
|
||
|
||
<h3 className="font-serif text-lg font-bold tracking-wider mb-2 pr-6 text-[#0f3f26] group-hover:text-white transition-colors duration-500">
|
||
{item.name}
|
||
</h3>
|
||
|
||
{/* Little Leaf / Accent */}
|
||
<div className="absolute top-10 right-6 text-[#188754] group-hover:text-[#bc9e65] transition-colors duration-500">
|
||
🌿
|
||
</div>
|
||
|
||
<p className="text-[11px] font-sans mb-6 leading-relaxed text-stone-500 group-hover:text-stone-300 transition-colors duration-500 flex-grow">
|
||
{item.desc}
|
||
</p>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
{/* <span className="font-serif text-lg font-bold text-[#0f3f26] group-hover:text-white transition-colors duration-500">
|
||
{item.price}
|
||
</span> */}
|
||
<span className={`text-[8px] font-bold uppercase tracking-wider px-2 py-1 rounded-full flex items-center gap-1 border transition-colors duration-500
|
||
${item.tag.includes('RAVA') ? 'bg-[#e8f5e9] text-[#1b5e20] border-[#a5d6a7]/70 group-hover:bg-white/20 group-hover:text-white group-hover:border-white/30' :
|
||
item.tag.includes('CLASSIC') ? 'bg-[#fbe9e7] text-[#c62828] border-[#ffab91]/70 group-hover:bg-white/20 group-hover:text-white group-hover:border-white/30' :
|
||
'bg-[#fff8e1] text-[#b78103] border-[#ffe082]/70 group-hover:bg-white/20 group-hover:text-white group-hover:border-white/30'}`}
|
||
>
|
||
<span className="text-[10px] leading-none">
|
||
{item.tag.includes('RAVA') ? '✓' : item.tag.includes('CLASSIC') ? '●' : '★'}
|
||
</span>
|
||
{item.tag}
|
||
</span>
|
||
</div>
|
||
|
||
{/* <button className="w-6 h-6 rounded-full flex items-center justify-center font-bold text-sm transition-all hover:scale-110 bg-[#0f3f26] text-white group-hover:bg-[#bc9e65] group-hover:text-[#0a4a2b]">
|
||
+
|
||
</button> */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AnimatedSection>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Categories Choice Popup Modal for Mobile View */}
|
||
<AnimatePresence>
|
||
{isPopupOpen && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 backdrop-blur-md p-4"
|
||
onClick={() => setIsPopupOpen(false)}
|
||
>
|
||
<motion.div
|
||
initial={{ scale: 0.9, y: 20, opacity: 0 }}
|
||
animate={{ scale: 1, y: 0, opacity: 1 }}
|
||
exit={{ scale: 0.9, y: 20, opacity: 0 }}
|
||
transition={{ type: "spring", duration: 0.45 }}
|
||
className="relative w-full max-w-sm bg-[#faf7f2] border-2 border-double border-[#bc9e65] rounded-3xl p-6 shadow-2xl overflow-hidden"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{/* Gold decorative corners inside */}
|
||
<div className="absolute top-2 left-2 right-2 bottom-2 border border-[#bc9e65]/15 pointer-events-none rounded-[22px]" />
|
||
|
||
{/* Close Button */}
|
||
<button
|
||
onClick={() => setIsPopupOpen(false)}
|
||
className="absolute top-4 right-4 text-stone-500 hover:text-[#0f3f26] p-2 transition-colors z-30"
|
||
>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18" />
|
||
<line x1="6" y1="6" x2="18" y2="18" />
|
||
</svg>
|
||
</button>
|
||
|
||
{/* Title */}
|
||
<div className="flex flex-col items-center mb-5 mt-2">
|
||
<h4 className="font-serif text-base font-bold text-[#0f3f26] uppercase tracking-widest">Select Category</h4>
|
||
<div className="w-16 h-[1px] bg-[#bc9e65] mt-1.5" />
|
||
</div>
|
||
|
||
{/* Grid of Categories */}
|
||
<div className="grid grid-cols-2 gap-2.5 max-h-[60vh] overflow-y-auto scrollbar-none pr-1">
|
||
{TABS.map((tab) => {
|
||
const isActive = activeTab === tab.id;
|
||
const isAllItems = tab.id === "all";
|
||
|
||
return (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => {
|
||
setActiveTab(tab.id);
|
||
setIsPopupOpen(false);
|
||
}}
|
||
className={`flex items-center gap-2.5 px-3 py-2.5 rounded-xl transition-all duration-300 font-serif font-bold text-[10px] uppercase tracking-wider text-left border
|
||
${isActive
|
||
? "bg-[#0a4a2b] text-white border-[#bc9e65] shadow-[0_4px_12px_rgba(10,74,43,0.2)]"
|
||
: "bg-white text-[#0f3f26] border-[#eaddc4] hover:bg-stone-50"
|
||
}`}
|
||
>
|
||
<div className="shrink-0">
|
||
{isAllItems ? (
|
||
<div className={`w-7 h-7 flex items-center justify-center rounded-full ${isActive ? 'text-[#bc9e65]' : 'text-[#0a4a2b]'}`}>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||
<rect x="3" y="3" width="7" height="7" rx="1.5" />
|
||
<rect x="14" y="3" width="7" height="7" rx="1.5" />
|
||
<rect x="14" y="14" width="7" height="7" rx="1.5" />
|
||
<rect x="3" y="14" width="7" height="7" rx="1.5" />
|
||
</svg>
|
||
</div>
|
||
) : (
|
||
<div className="w-7 h-7 flex items-center justify-center rounded-full bg-transparent">
|
||
<Image src="/images/menu/tab-icon.png" alt="" width={24} height={24} className="object-contain" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
<span className="truncate">{tab.label}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
}
|