422 lines
21 KiB
TypeScript
422 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Image from "next/image";
|
|
|
|
// Custom Gold Category Icons (SVG Paths)
|
|
const LeafThaliIcon = () => (
|
|
<svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M17 2H7C5.9 2 5 2.9 5 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-5 18c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3zm0-8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z" />
|
|
</svg>
|
|
);
|
|
|
|
const BiryaniRiceIcon = () => (
|
|
<svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2C7 2 3 5 3 9c0 2.2 1.3 4.2 3.3 5.4C6.1 15 6 15.5 6 16c0 2.2 2.7 4 6 4s6-1.8 6-4c0-.5-.1-1-.3-1.6 2-1.2 3.3-3.2 3.3-5.4 0-4-4-7-9-7zm0 10c-3.3 0-6-1.8-6-4s2.7-4 6-4 6 1.8 6 4-2.7 4-6 4z" />
|
|
</svg>
|
|
);
|
|
|
|
const TiffinsDosasIcon = () => (
|
|
<svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L17.61 5.03C16.07 3.74 14.12 3 12 3zm5.66 3.44L5.03 17.61C6.48 19.06 8.57 20 11 20c4.97 0 9-4.03 9-9 0-2.43-.94-4.52-2.34-5.96z" />
|
|
</svg>
|
|
);
|
|
|
|
const CurriesGraviesIcon = () => (
|
|
<svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M22 11h-2.1c-.5-3.3-3.1-5.9-6.4-6.4V2.5C13.5 2.2 13 2 12 2s-1.5.2-1.5.5V4.6C7.2 5.1 4.6 7.7 4.1 11H2c-.6 0-1 .4-1 1s.4 1 1 1h2.1c.5 3.3 3.1 5.9 6.4 6.4v2.1c0 .3.5.5 1.5.5s1.5-.2 1.5-.5v-2.1c3.3-.5 5.9-3.1 6.4-6.4H22c.6 0 1-.4 1-1s-.4-1-1-1z" />
|
|
</svg>
|
|
);
|
|
|
|
const SweetsDessertsIcon = () => (
|
|
<svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm1-14.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
|
|
</svg>
|
|
);
|
|
|
|
const BeveragesIcon = () => (
|
|
<svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M2 21h18v-2H2v2zM20 8h-2V5h2v3zm-4-3H4v10c0 2.21 1.79 4 4 4h8c2.21 0 4-1.79 4-4V5h-4zm2 10c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V7h12v8z" />
|
|
</svg>
|
|
);
|
|
|
|
const TandoorSpecialsIcon = () => (
|
|
<svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2C7.03 2 3 6.03 3 11c0 3.7 2.24 6.89 5.5 8.24V21c0 .55.45 1 1 1h5c.55 0 1-.45 1-1v-1.76c3.26-1.35 5.5-4.54 5.5-8.24 0-4.97-4.03-9-9-9zm3 10H9v-2h6v2z" />
|
|
</svg>
|
|
);
|
|
|
|
const SeafoodDelightsIcon = () => (
|
|
<svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-1.5-3.5c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1z" />
|
|
</svg>
|
|
);
|
|
|
|
const ChefSpecialsIcon = () => (
|
|
<svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L17.61 5.03C16.07 3.74 14.12 3 12 3zm0 15c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z" />
|
|
</svg>
|
|
);
|
|
|
|
const BanquetMenusIcon = () => (
|
|
<svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" />
|
|
</svg>
|
|
);
|
|
|
|
// Ornate Corner Leaf Ornament Vector details
|
|
const CornerOrnaments = () => (
|
|
<>
|
|
{/* Top Left Leaf Corner */}
|
|
<svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 top-2.5 left-2.5 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
|
|
</svg>
|
|
{/* Top Right Leaf Corner */}
|
|
<svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 top-2.5 right-2.5 rotate-90 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
|
|
</svg>
|
|
{/* Bottom Left Leaf Corner */}
|
|
<svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 bottom-2.5 left-2.5 -rotate-90 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
|
|
</svg>
|
|
{/* Bottom Right Leaf Corner */}
|
|
<svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 bottom-2.5 right-2.5 rotate-180 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
|
|
</svg>
|
|
</>
|
|
);
|
|
|
|
const ROW1_CATEGORIES = [
|
|
{
|
|
id: "thali",
|
|
title: "Traditional Thali",
|
|
subtitle: "FEATURED",
|
|
desc: "A wholesome spread of authentic South Indian flavors served the traditional way.",
|
|
image: "/images/south_indian_thali_luxury.png",
|
|
icon: LeafThaliIcon,
|
|
isDouble: true,
|
|
},
|
|
{
|
|
id: "biryani",
|
|
title: "Biryani & Rice",
|
|
desc: "Aromatic, flavorful & slow-cooked to perfection.",
|
|
image: "/images/category_biryani.jpg",
|
|
icon: BiryaniRiceIcon,
|
|
},
|
|
{
|
|
id: "dosas",
|
|
title: "Tiffins & Dosas",
|
|
desc: "Crisp, soft & made fresh for a perfect start.",
|
|
image: "/images/masala_dosa_luxury.png",
|
|
icon: TiffinsDosasIcon,
|
|
},
|
|
{
|
|
id: "curries",
|
|
title: "Curries & Gravies",
|
|
desc: "Rich, flavorful & inspired by regional classics.",
|
|
image: "/images/category_curries.jpg",
|
|
icon: CurriesGraviesIcon,
|
|
},
|
|
];
|
|
|
|
const ROW2_CATEGORIES = [
|
|
{
|
|
id: "sweets",
|
|
title: "Sweets & Desserts",
|
|
desc: "Traditional sweets crafted to end your meal beautifully.",
|
|
image: "/images/category_sweets.jpg",
|
|
icon: SweetsDessertsIcon,
|
|
},
|
|
{
|
|
id: "beverages",
|
|
title: "Beverages",
|
|
desc: "Refreshing & traditional drinks to complement every meal.",
|
|
image: "/images/category_beverages.jpg",
|
|
icon: BeveragesIcon,
|
|
},
|
|
{
|
|
id: "tandoor",
|
|
title: "Tandoor Specials",
|
|
desc: "Fire-grilled delights with bold spices and irresistible aroma.",
|
|
image: "/images/category_tandoor.jpg",
|
|
icon: TandoorSpecialsIcon,
|
|
},
|
|
{
|
|
id: "seafood",
|
|
title: "Seafood Delights",
|
|
desc: "Coastal flavors cooked with authenticity and passion.",
|
|
image: "/images/category_seafood.jpg",
|
|
icon: SeafoodDelightsIcon,
|
|
},
|
|
{
|
|
id: "chef_specials",
|
|
title: "Chef's Specials",
|
|
desc: "Handpicked creations by our master chef, just for you.",
|
|
image: "/images/category_chef_specials.jpg",
|
|
icon: ChefSpecialsIcon,
|
|
},
|
|
{
|
|
id: "banquet",
|
|
title: "Banquet Menus",
|
|
desc: "Curated menus for weddings, events & celebrations.",
|
|
image: "/images/category_banquet.jpg",
|
|
icon: BanquetMenusIcon,
|
|
},
|
|
];
|
|
|
|
export default function CulinaryCategories() {
|
|
return (
|
|
<section className="relative w-full py-28 px-6 sm:px-12 md:px-16 lg:px-24 overflow-hidden z-20 bg-[#06120c]">
|
|
|
|
{/* Background Graphic Template Layer */}
|
|
<div className="absolute inset-0 z-0 pointer-events-none select-none">
|
|
<Image
|
|
src="/images/category_bg.jpg"
|
|
alt="Categories Backdrop"
|
|
fill
|
|
priority
|
|
className="object-cover object-center"
|
|
/>
|
|
</div>
|
|
|
|
<div className="container max-w-[1300px] mx-auto relative z-10 flex flex-col gap-14 items-center">
|
|
|
|
{/* Title Area */}
|
|
<div className="flex flex-col items-center text-center select-text max-w-2xl">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<span className="text-[#bc9e65] text-xs">❧</span>
|
|
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.35em] text-[#bc9e65] font-extrabold uppercase">
|
|
OUR CULINARY CATEGORIES
|
|
</span>
|
|
<span className="text-[#bc9e65] text-xs">❧</span>
|
|
</div>
|
|
|
|
<h2 className="font-serif text-3xl sm:text-4xl lg:text-[46px] font-bold text-white tracking-wider leading-tight mb-4 uppercase">
|
|
A World of Flavors,<br />
|
|
<span className="text-[#bc9e65]">Rooted in Tradition</span>
|
|
</h2>
|
|
|
|
{/* Traditional Separator */}
|
|
<div className="flex items-center gap-3 w-40 my-3 pointer-events-none select-none justify-center">
|
|
<div className="h-[1.2px] flex-1 bg-gradient-to-r from-transparent to-[#bc9e65]" />
|
|
<svg className="w-5 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
|
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
|
</svg>
|
|
<div className="h-[1.2px] flex-1 bg-gradient-to-l from-transparent to-[#bc9e65]" />
|
|
</div>
|
|
|
|
<p className="font-sans text-xs sm:text-[13px] text-stone-300 leading-relaxed tracking-wider mt-2">
|
|
From timeless South Indian classics to exclusive chef's creations, explore our diverse culinary experiences crafted for every occasion.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Categories Grid Container */}
|
|
<div className="w-full flex flex-col gap-6">
|
|
|
|
{/* Row 1 Grid: 5 columns on desktop */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 w-full">
|
|
{ROW1_CATEGORIES.map((cat) => {
|
|
const Icon = cat.icon;
|
|
if (cat.isDouble) {
|
|
// Double Card: Traditional Thali
|
|
return (
|
|
<motion.div
|
|
key={cat.id}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="col-span-1 md:col-span-2 lg:col-span-2 relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-6 pt-8 rounded-none shadow-2xl flex flex-col sm:flex-row items-center gap-6 group overflow-visible min-h-[220px]"
|
|
>
|
|
{/* Inner gold design outline and corner leaves */}
|
|
<div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none" />
|
|
<CornerOrnaments />
|
|
|
|
{/* Gold Category Badge at top center of card with interactive outer ring */}
|
|
<div className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-[#06120c] border border-[#bc9e65]/60 flex items-center justify-center shadow-lg z-20 select-none">
|
|
{/* Rotating Outer Dashed Mandala Ring on Hover */}
|
|
<div className="absolute w-11 h-11 rounded-full border border-dashed border-[#bc9e65]/35 group-hover:rotate-[45deg] transition-transform duration-1000 z-10 pointer-events-none" />
|
|
<Icon />
|
|
</div>
|
|
|
|
{/* Radial Glow Overlay on Hover */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,_rgba(188,158,101,0.08)_0%,_transparent_75%)] opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none z-0" />
|
|
|
|
{/* Left: circular thali image with slow rotating mandala border */}
|
|
<div className="relative w-36 h-36 sm:w-40 sm:h-40 flex-shrink-0 z-10">
|
|
{/* Spin ring behind thali */}
|
|
<div className="absolute inset-[-6px] border border-dashed border-[#bc9e65]/25 rounded-full animate-[spin_60s_linear_infinite]" />
|
|
|
|
<div className="w-full h-full rounded-full border-2 border-[#bc9e65]/40 p-1 bg-[#06120c] overflow-hidden shadow-xl relative">
|
|
<div className="w-full h-full rounded-full overflow-hidden relative">
|
|
<Image
|
|
src={cat.image}
|
|
alt={cat.title}
|
|
fill
|
|
sizes="180px"
|
|
className="object-cover group-hover:scale-105 transition-transform duration-[1.5s]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: details */}
|
|
<div className="flex flex-col text-center sm:text-left items-center sm:items-start flex-1 select-text relative z-10">
|
|
<span className="font-sans text-[9px] tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase mb-1">
|
|
{cat.subtitle}
|
|
</span>
|
|
<h3 className="font-serif text-lg lg:text-xl font-bold text-white tracking-wider uppercase mb-2">
|
|
{cat.title}
|
|
</h3>
|
|
{/* Divider */}
|
|
<div className="h-[1px] w-16 bg-[#bc9e65]/40 mb-3" />
|
|
<p className="font-sans text-stone-300 text-[11px] lg:text-xs leading-relaxed tracking-wider mb-4 max-w-[240px]">
|
|
{cat.desc}
|
|
</p>
|
|
|
|
<a
|
|
href="#menu"
|
|
className="clickable inline-flex items-center gap-2 font-sans font-bold text-[9px] tracking-[0.2em] text-[#bc9e65] uppercase hover:text-white transition-colors duration-300"
|
|
>
|
|
EXPLORE MENU <span className="text-xs group-hover:translate-x-1 transition-transform duration-300">→</span>
|
|
</a>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// Standard portrait cards in Row 1 (Arched pointed gothic frames)
|
|
return (
|
|
<motion.div
|
|
key={cat.id}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="col-span-1 lg:col-span-1 relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-5 pt-9 rounded-none shadow-2xl flex flex-col items-center text-center group overflow-visible"
|
|
>
|
|
{/* Inner gold design outline and corner leaves */}
|
|
<div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none" />
|
|
<CornerOrnaments />
|
|
|
|
{/* Gold Category Badge with rotating outer dashed border */}
|
|
<div className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-[#06120c] border border-[#bc9e65]/60 flex items-center justify-center shadow-lg z-20 select-none">
|
|
<div className="absolute w-11 h-11 rounded-full border border-dashed border-[#bc9e65]/35 group-hover:rotate-[45deg] transition-transform duration-1000 z-10 pointer-events-none" />
|
|
<Icon />
|
|
</div>
|
|
|
|
{/* Radial Hover Glow */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_40%,_rgba(188,158,101,0.07)_0%,_transparent_70%)] opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none z-0" />
|
|
|
|
{/* Arched Gothic pointed dome Food Image container */}
|
|
<div className="relative w-full aspect-[4/3.8] border border-[#bc9e65]/30 overflow-hidden mb-4 bg-[#06120c] shadow-md z-10"
|
|
style={{
|
|
clipPath: "polygon(50% 0%, 100% 28%, 100% 100%, 0% 100%, 0% 28%)"
|
|
}}
|
|
>
|
|
<Image
|
|
src={cat.image}
|
|
alt={cat.title}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 20vw"
|
|
className="object-cover group-hover:scale-105 transition-transform duration-[1.5s] brightness-[0.9]"
|
|
/>
|
|
</div>
|
|
|
|
<h3 className="font-serif text-[13px] lg:text-[14px] font-bold text-white tracking-wider uppercase mb-2 relative z-10">
|
|
{cat.title}
|
|
</h3>
|
|
<p className="font-sans text-stone-300 text-[10.5px] leading-relaxed tracking-wider mb-5 max-w-[170px] flex-1 relative z-10">
|
|
{cat.desc}
|
|
</p>
|
|
|
|
{/* Circular Explore button with slide transition */}
|
|
<a
|
|
href="#menu"
|
|
className="clickable w-7 h-7 rounded-full border border-[#bc9e65]/40 hover:border-[#bc9e65] flex items-center justify-center text-[#bc9e65] hover:bg-gradient-to-br hover:from-[#d8c396] hover:to-[#aa771c] hover:text-[#06120c] transition-all duration-300 shadow-md transform group-hover:scale-105 z-10"
|
|
aria-label={`Explore ${cat.title}`}
|
|
>
|
|
<span className="text-xs leading-none group-hover:translate-x-0.5 transition-transform duration-300">→</span>
|
|
</a>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Row 2 Grid: 6 columns on desktop */}
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 w-full mt-2">
|
|
{ROW2_CATEGORIES.map((cat) => {
|
|
const Icon = cat.icon;
|
|
return (
|
|
<motion.div
|
|
key={cat.id}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="col-span-1 relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-4 pt-8 rounded-none shadow-2xl flex flex-col items-center text-center group overflow-visible"
|
|
>
|
|
{/* Inner gold design outline and corner leaves */}
|
|
<div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none" />
|
|
<CornerOrnaments />
|
|
|
|
{/* Gold Category Badge with rotating outer dashed border */}
|
|
<div className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-[#06120c] border border-[#bc9e65]/60 flex items-center justify-center shadow-lg z-20 select-none">
|
|
<div className="absolute w-11 h-11 rounded-full border border-dashed border-[#bc9e65]/35 group-hover:rotate-[45deg] transition-transform duration-1000 z-10 pointer-events-none" />
|
|
<Icon />
|
|
</div>
|
|
|
|
{/* Radial Hover Glow */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_40%,_rgba(188,158,101,0.06)_0%,_transparent_70%)] opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none z-0" />
|
|
|
|
{/* Arched Gothic pointed dome Food Image */}
|
|
<div className="relative w-full aspect-[4/3.8] border border-[#bc9e65]/30 overflow-hidden mb-3 bg-[#06120c] shadow-md z-10"
|
|
style={{
|
|
clipPath: "polygon(50% 0%, 100% 28%, 100% 100%, 0% 100%, 0% 28%)"
|
|
}}
|
|
>
|
|
<Image
|
|
src={cat.image}
|
|
alt={cat.title}
|
|
fill
|
|
sizes="(max-width: 768px) 50vw, 15vw"
|
|
className="object-cover group-hover:scale-105 transition-transform duration-[1.5s] brightness-[0.9]"
|
|
/>
|
|
</div>
|
|
|
|
<h3 className="font-serif text-[12px] font-bold text-white tracking-wider uppercase mb-1.5 relative z-10">
|
|
{cat.title}
|
|
</h3>
|
|
<p className="font-sans text-stone-300 text-[10px] leading-relaxed tracking-wider mb-4 max-w-[140px] flex-1 relative z-10">
|
|
{cat.desc}
|
|
</p>
|
|
|
|
{/* Circular Explore button */}
|
|
<a
|
|
href="#menu"
|
|
className="clickable w-6 h-6 rounded-full border border-[#bc9e65]/40 hover:border-[#bc9e65] flex items-center justify-center text-[#bc9e65] hover:bg-gradient-to-br hover:from-[#d8c396] hover:to-[#aa771c] hover:text-[#06120c] transition-all duration-300 shadow-md transform group-hover:scale-105 z-10"
|
|
aria-label={`Explore ${cat.title}`}
|
|
>
|
|
<span className="text-[10px] leading-none group-hover:translate-x-0.5 transition-transform duration-300">→</span>
|
|
</a>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Bottom Banner */}
|
|
<div className="w-full bg-[#0a4a2b]/30 backdrop-blur-sm border border-[#bc9e65]/45 py-3.5 px-6 pointer-events-none select-none z-10 mt-4 rounded-none shadow-md">
|
|
<div className="text-center">
|
|
<span className="font-serif text-[8.5px] sm:text-[10.5px] tracking-[0.25em] text-[#bc9e65] font-semibold uppercase flex items-center justify-center gap-2">
|
|
❧ AUTHENTIC RECIPES • FINEST INGREDIENTS • TIME-HONORED TRADITIONS • MADE WITH LOVE ☙
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|