feat: integrate Culinary Categories section, customize Chef Showcase background and portrait, refine Footer layout, and clean borders
This commit is contained in:
Alaguraj0361
parent
33ab8314d3
commit
4d34ce8b5d
BIN
public/images/category_banquet.jpg
Normal file
BIN
public/images/category_banquet.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 901 KiB |
BIN
public/images/category_beverages.jpg
Normal file
BIN
public/images/category_beverages.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 668 KiB |
BIN
public/images/category_bg.jpg
Normal file
BIN
public/images/category_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
BIN
public/images/category_biryani.jpg
Normal file
BIN
public/images/category_biryani.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 762 KiB |
BIN
public/images/category_chef_specials.jpg
Normal file
BIN
public/images/category_chef_specials.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 772 KiB |
BIN
public/images/category_curries.jpg
Normal file
BIN
public/images/category_curries.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 877 KiB |
BIN
public/images/category_seafood.jpg
Normal file
BIN
public/images/category_seafood.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 878 KiB |
BIN
public/images/category_sweets.jpg
Normal file
BIN
public/images/category_sweets.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 733 KiB |
BIN
public/images/category_tandoor.jpg
Normal file
BIN
public/images/category_tandoor.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 794 KiB |
BIN
public/images/chef_bg.jpg
Normal file
BIN
public/images/chef_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
BIN
public/images/chef_cooking.jpg
Normal file
BIN
public/images/chef_cooking.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 271 KiB |
BIN
public/images/footer_bg.png
Normal file
BIN
public/images/footer_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 943 KiB |
@ -6,11 +6,9 @@ import EntranceExperience from "@/components/EntranceExperience";
|
||||
import RestaurantStory from "@/components/RestaurantStory";
|
||||
import ChefShowcase from "@/components/ChefShowcase";
|
||||
import SpatialSanctuary from "@/components/SpatialSanctuary";
|
||||
import Testimonials from "@/components/Testimonials";
|
||||
import EventsAccordion from "@/components/EventsAccordion";
|
||||
import MenuPreview from "@/components/MenuPreview";
|
||||
import ReservationForm from "@/components/ReservationForm";
|
||||
import RouteMap from "@/components/RouteMap";
|
||||
import CulinaryCategories from "@/components/CulinaryCategories";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
import CustomCursor from "@/components/CustomCursor";
|
||||
@ -40,6 +38,9 @@ export default function Home() {
|
||||
{/* Section 3: Heritage Story timeline */}
|
||||
<RestaurantStory />
|
||||
|
||||
{/* Section 3.5: Culinary Categories */}
|
||||
<CulinaryCategories />
|
||||
|
||||
{/* Section 4: Premium Breakfast Menu Card Section */}
|
||||
<MenuPreview />
|
||||
|
||||
@ -49,18 +50,9 @@ export default function Home() {
|
||||
{/* Section 5.5: The Spatial Sanctuary details */}
|
||||
<SpatialSanctuary />
|
||||
|
||||
{/* Section 7: 3D-tilting Testimonials diaries */}
|
||||
<Testimonials />
|
||||
|
||||
{/* Section 8: Expanding Special Events Accordion */}
|
||||
<EventsAccordion />
|
||||
|
||||
{/* Section 9: Reservation Form with canvas sparks */}
|
||||
<ReservationForm />
|
||||
|
||||
{/* Section 11: Cartographic Route SVG Map with animated Chariot */}
|
||||
<RouteMap />
|
||||
|
||||
{/* Section 12: Footer with hanging Toran, contact logs and floating diyas */}
|
||||
<Footer />
|
||||
|
||||
|
||||
@ -125,10 +125,18 @@ export default function ChefShowcase() {
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center bg-[#060b08] border-b border-gold/10 overflow-hidden"
|
||||
className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden z-20"
|
||||
>
|
||||
{/* Background Subtle Traditional Overlay */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_rgba(12,20,16,0.8)_0%,_rgba(6,11,8,1)_80%)] z-0 pointer-events-none" />
|
||||
{/* Backdrop Chef Showcase Background Image */}
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none">
|
||||
<Image
|
||||
src="/images/chef_bg.jpg"
|
||||
alt="Chef Showcase Background"
|
||||
fill
|
||||
priority
|
||||
className="object-cover object-bottom"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container max-w-6xl mx-auto relative z-10 flex flex-col gap-12 sm:gap-16">
|
||||
|
||||
@ -164,7 +172,7 @@ export default function ChefShowcase() {
|
||||
|
||||
<StoryLotusDivider />
|
||||
|
||||
<p className="font-sans text-xs sm:text-sm text-stone-300 leading-relaxed tracking-wider max-w-xl mb-8">
|
||||
<p className="font-sans text-xs sm:text-sm text-stone-200 leading-relaxed tracking-wider max-w-xl mb-8">
|
||||
With three decades of culinary devotion, Chef Sundaram Iyer has traversed the villages of Tamil Nadu, uncovering regional temple recipes and masterfully blending heritage masalas. He believes that true gastronomy is a spiritual act, uniting soil, tradition, and warm wood fire.
|
||||
</p>
|
||||
|
||||
@ -184,7 +192,7 @@ export default function ChefShowcase() {
|
||||
<div className="lg:col-span-5 flex justify-center relative">
|
||||
|
||||
{/* 30+ Years Experience Badge Overlay */}
|
||||
<div className="absolute -top-6 -right-6 w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-[#bc9e65]/80 bg-[#060b08]/95 z-30 shadow-2xl flex flex-col items-center justify-center text-center p-3 select-none pointer-events-none">
|
||||
<div className="absolute -top-6 -right-6 w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-[#bc9e65]/80 bg-black/45 backdrop-blur-md z-30 shadow-2xl flex flex-col items-center justify-center text-center p-3 select-none pointer-events-none">
|
||||
<div className="absolute inset-1.5 border border-[#bc9e65]/35 rounded-full pointer-events-none" />
|
||||
{/* Gold Flower Icon */}
|
||||
<svg className="w-4 h-4 text-[#bc9e65] opacity-85 mb-0.5" viewBox="0 0 20 20" fill="currentColor">
|
||||
@ -192,34 +200,27 @@ export default function ChefShowcase() {
|
||||
</svg>
|
||||
<span className="font-serif text-[15px] sm:text-[18px] font-bold text-[#bc9e65] leading-none">30+</span>
|
||||
<span className="font-sans text-[7px] sm:text-[8px] tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase mt-0.5">Years</span>
|
||||
<span className="font-sans text-[6px] sm:text-[7px] tracking-[0.1em] text-white/90 uppercase font-semibold leading-relaxed mt-0.5 max-w-[80px]">Of Culinary Excellence</span>
|
||||
<span className="font-sans text-[6px] sm:text-[7px] tracking-[0.1em] text-[#e4d7bc] uppercase font-semibold leading-relaxed mt-0.5 max-w-[80px]">Of Culinary Excellence</span>
|
||||
</div>
|
||||
|
||||
{/* Framed Image Container */}
|
||||
<div className="relative w-full max-w-[380px] sm:max-w-[420px] aspect-[4/5] border-4 border-[#0c140f] bg-[#0c140f] p-1.5 shadow-[0_25px_50px_rgba(0,0,0,0.85)] overflow-hidden rounded-2xl group">
|
||||
{/* Inner Double Gold Frame overlay */}
|
||||
<div className="absolute inset-1 border border-[#bc9e65]/30 z-10 rounded-xl pointer-events-none" />
|
||||
{/* Seamless Image Wrapper */}
|
||||
<div className="relative w-full max-w-[380px] sm:max-w-[420px] aspect-[4/5] overflow-hidden group">
|
||||
|
||||
{/* Portrait Image */}
|
||||
<div className="w-full h-full relative overflow-hidden rounded-lg">
|
||||
<Image
|
||||
src="/images/chef_cooking.png"
|
||||
src="/images/chef_cooking.jpg"
|
||||
alt="Chef Sundaram Iyer Cooking with Fire"
|
||||
fill
|
||||
priority
|
||||
sizes="(max-width: 768px) 100vw, 35vw"
|
||||
className="object-cover group-hover:scale-103 transition-transform duration-[2s] brightness-[0.82] contrast-[1.08]"
|
||||
className="object-cover group-hover:scale-103 transition-transform duration-[2s] brightness-[0.9] contrast-[1.03]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sparks/Embers Canvas Overlay */}
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute inset-0 z-20 pointer-events-none mix-blend-screen"
|
||||
/>
|
||||
|
||||
{/* Heat wave color gradient filter overlay */}
|
||||
<div className="absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-[#bc9e65]/10 to-transparent z-15 pointer-events-none" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -227,7 +228,7 @@ export default function ChefShowcase() {
|
||||
</div>
|
||||
|
||||
{/* Middle Highlights Card Section */}
|
||||
<div className="bg-[#0b100d]/75 border border-[#d8c396]/35 rounded-2xl p-6 sm:p-8 mt-4 shadow-2xl relative z-10 divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/20 grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 select-text">
|
||||
<div className="bg-black/25 backdrop-blur-sm border border-[#d8c396]/30 rounded-2xl p-6 sm:p-8 mt-4 shadow-2xl relative z-10 divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/20 grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 select-text">
|
||||
|
||||
{/* Feature 1: Authentic Recipes */}
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
@ -238,7 +239,7 @@ export default function ChefShowcase() {
|
||||
<path d="M2 10h20" />
|
||||
</svg>
|
||||
<h5 className="font-serif text-[11px] sm:text-xs font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Authentic Recipes</h5>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-400 leading-relaxed max-w-[150px] mx-auto">Traditional recipes passed down through generations.</p>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-300 leading-relaxed max-w-[150px] mx-auto">Traditional recipes passed down through generations.</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2: Pure Vegetarian */}
|
||||
@ -250,7 +251,7 @@ export default function ChefShowcase() {
|
||||
<path d="M12 14C12 12 10 11 8 11" />
|
||||
</svg>
|
||||
<h5 className="font-serif text-[11px] sm:text-xs font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Pure Vegetarian</h5>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-400 leading-relaxed max-w-[150px] mx-auto">100% pure veg, made with the finest natural ingredients.</p>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-300 leading-relaxed max-w-[150px] mx-auto">100% pure veg, made with the finest natural ingredients.</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3: Wood Fire Cooking */}
|
||||
@ -259,7 +260,7 @@ export default function ChefShowcase() {
|
||||
<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 3z" />
|
||||
</svg>
|
||||
<h5 className="font-serif text-[11px] sm:text-xs font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Wood Fire Cooking</h5>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-400 leading-relaxed max-w-[150px] mx-auto">Infused with the aroma of wood fire and heritage.</p>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-300 leading-relaxed max-w-[150px] mx-auto">Infused with the aroma of wood fire and heritage.</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 4: Cooked With Love */}
|
||||
@ -269,7 +270,7 @@ export default function ChefShowcase() {
|
||||
<path d="M12 16.5s-4-2.5-4-4.5c0-1.2.8-2 2-2 1 0 1.5.5 2 1 .5-.5 1-1 2-1 1.2 0 2 .8 2 2 0 2-4 4.5-4 4.5z" fill="currentColor" fillOpacity="0.1" />
|
||||
</svg>
|
||||
<h5 className="font-serif text-[11px] sm:text-xs font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Cooked With Love</h5>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-400 leading-relaxed max-w-[150px] mx-auto">Every dish is prepared with care, devotion & warmth.</p>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-300 leading-relaxed max-w-[150px] mx-auto">Every dish is prepared with care, devotion & warmth.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -279,21 +280,10 @@ export default function ChefShowcase() {
|
||||
|
||||
{/* Bottom Left: Gopuram Sketch Background & Large Narrative Quote */}
|
||||
<div className="lg:col-span-5 relative flex flex-col justify-center min-h-[160px] pl-4 sm:pl-6 select-text">
|
||||
{/* Gopuram Sketch watermark */}
|
||||
<div className="absolute left-[-20px] bottom-[-20px] w-[200px] h-[250px] pointer-events-none select-none opacity-8 mix-blend-screen">
|
||||
<Image
|
||||
src="/images/menu_left.png"
|
||||
alt="Heritage Gopuram Background Sketch"
|
||||
fill
|
||||
sizes="200px"
|
||||
className="object-contain filter invert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Quote details */}
|
||||
<div className="relative z-10 select-text">
|
||||
<span className="text-[#a83232] text-6xl font-serif leading-none select-none block mb-1">“</span>
|
||||
<p className="font-sans text-stone-300 text-xs sm:text-sm lg:text-[15px] leading-relaxed tracking-wider font-semibold italic max-w-[85%]">
|
||||
<div className="relative z-10 select-text text-left">
|
||||
<span className="text-[#c62828] text-7xl font-serif leading-none select-none block -mb-4">“</span>
|
||||
<p className="font-sans text-stone-200 text-xs sm:text-sm lg:text-[15px] leading-relaxed tracking-wider font-semibold italic max-w-[85%]">
|
||||
Food is not just to satisfy hunger, it is to honor our roots, our culture and the land that nourishes us.
|
||||
</p>
|
||||
|
||||
@ -310,16 +300,16 @@ export default function ChefShowcase() {
|
||||
|
||||
{/* Bottom Right: Spices Parchment Card */}
|
||||
<div className="lg:col-span-7 flex justify-end">
|
||||
<div className="w-full max-w-[620px] relative bg-[#fdfcf7] border border-[#d8c396]/55 rounded-none p-5 sm:p-7 pr-32 min-h-[160px] shadow-[0_15px_30px_rgba(0,0,0,0.5)] flex flex-col justify-center overflow-visible select-text text-left">
|
||||
<div className="w-full max-w-[620px] relative bg-[#fdfcf7]/95 border border-[#d8c396]/55 rounded-none p-5 sm:p-8 min-h-[160px] shadow-[0_15px_30px_rgba(0,0,0,0.5)] flex flex-col justify-center overflow-visible select-text text-left">
|
||||
|
||||
{/* Inner border line overlay */}
|
||||
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none" />
|
||||
|
||||
{/* Notched corners masks */}
|
||||
<div className="absolute -top-[1px] -left-[1px] w-3 h-3 bg-[#060b08] rounded-br-full border-r border-b border-[#d8c396]/55 z-20 pointer-events-none" />
|
||||
<div className="absolute -top-[1px] -right-[1px] w-3 h-3 bg-[#060b08] rounded-bl-full border-l border-b border-[#d8c396]/55 z-20 pointer-events-none" />
|
||||
<div className="absolute -bottom-[1px] -left-[1px] w-3 h-3 bg-[#060b08] rounded-tr-full border-r border-t border-[#d8c396]/55 z-20 pointer-events-none" />
|
||||
<div className="absolute -bottom-[1px] -right-[1px] w-3 h-3 bg-[#060b08] rounded-tl-full border-l border-t border-[#d8c396]/55 z-20 pointer-events-none" />
|
||||
{/* Notched corners masks matching vignette border bg-[#0a1c12] */}
|
||||
<div className="absolute -top-[1px] -left-[1px] w-3 h-3 bg-[#0a1c12] rounded-br-full border-r border-b border-[#d8c396]/55 z-20 pointer-events-none" />
|
||||
<div className="absolute -top-[1px] -right-[1px] w-3 h-3 bg-[#0a1c12] rounded-bl-full border-l border-b border-[#d8c396]/55 z-20 pointer-events-none" />
|
||||
<div className="absolute -bottom-[1px] -left-[1px] w-3 h-3 bg-[#0a1c12] rounded-tr-full border-r border-t border-[#d8c396]/55 z-20 pointer-events-none" />
|
||||
<div className="absolute -bottom-[1px] -right-[1px] w-3 h-3 bg-[#0a1c12] rounded-tl-full border-l border-t border-[#d8c396]/55 z-20 pointer-events-none" />
|
||||
|
||||
{/* Text content details */}
|
||||
<div className="relative z-10 flex flex-col gap-1.5 pl-2 max-w-[95%]">
|
||||
@ -346,24 +336,7 @@ export default function ChefShowcase() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overlapping circular thali spices container */}
|
||||
<div className="absolute -right-10 top-1/2 -translate-y-1/2 w-32 h-32 sm:w-[150px] sm:h-[150px] rounded-full p-1.5 bg-gradient-to-br from-[#bc9e65] via-[#fcfaf2] to-[#aa771c] shadow-2xl flex-shrink-0 z-10 flex items-center justify-center pointer-events-none select-none">
|
||||
<div className="w-full h-full rounded-full p-[3px] bg-[#0c5030] relative overflow-hidden flex items-center justify-center">
|
||||
{/* Banana leaf background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#388e3c] to-[#1b5e20] opacity-95" />
|
||||
|
||||
{/* Spices image */}
|
||||
<div className="w-full h-full rounded-full overflow-hidden relative z-10">
|
||||
<Image
|
||||
src="/images/chef_spices.png"
|
||||
alt="South Indian Heritage Spices Platter"
|
||||
fill
|
||||
sizes="150px"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
421
src/components/CulinaryCategories.tsx
Normal file
421
src/components/CulinaryCategories.tsx
Normal file
@ -0,0 +1,421 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
@ -1,174 +1,324 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Calendar, Sparkles, Gift, Users, Award, ShieldAlert } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
// Custom Ornate Gold Category SVG Icons
|
||||
const RoyalFeastsIcon = () => (
|
||||
<svg className="w-5 h-5 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||||
<path d="M12 10V21" />
|
||||
<path d="M12 14c-1.5-1-3-1.5-4.5-1" strokeLinecap="round" />
|
||||
<path d="M12 14c1.5-1 3-1.5 4.5-1" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const HeritageDinnersIcon = () => (
|
||||
<svg className="w-5 h-5 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M3 21h18M5 21V10l7-5 7 5v11M9 21v-4a3 3 0 0 1 6 0v4M12 3v2" strokeLinecap="round" />
|
||||
<circle cx="12" cy="11" r="1.5" stroke="currentColor" fill="currentColor" fillOpacity="0.2" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const PrivateGatheringsIcon = () => (
|
||||
<svg className="w-5 h-5 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M9 8h6M12 8v8" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const KudumbaDiningIcon = () => (
|
||||
<svg className="w-5 h-5 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M3 10h18M5 10v9M19 10v9M8 6h8M12 3v3" strokeLinecap="round" />
|
||||
<circle cx="9" cy="14" r="1" fill="currentColor" />
|
||||
<circle cx="15" cy="14" r="1" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default function EventsAccordion() {
|
||||
const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
|
||||
const [activeIdx, setActiveIdx] = useState<number>(3); // Set Kudumba Dining (index 3) active by default
|
||||
|
||||
const events = [
|
||||
{
|
||||
title: "Kalyana Feasts",
|
||||
title: "Royal Feasts",
|
||||
tamilTitle: "கல்யாண விருந்து",
|
||||
subtitle: "WEDDING BANQUETS",
|
||||
desc: "A grand imperial feast served to celebrate auspicious marital unions. Traditional multi-course menus served on fresh organic banana leaves with royal silver chalices, accommodating up to five hundred guests in heritage luxury.",
|
||||
icon: Sparkles,
|
||||
bgGradient: "from-[#fdfcf9] via-[#e4d7bc]/40 to-[#FAF7F2]",
|
||||
accentColor: "#188754",
|
||||
desc: "A grand imperial feast served to celebrate auspicious marital unions. Traditional multi-course menus served on fresh organic banana leaves with royal silver chalices.",
|
||||
icon: RoyalFeastsIcon,
|
||||
bgImage: "/images/royal_dining_experience.png",
|
||||
},
|
||||
{
|
||||
title: "Ayush Dinners",
|
||||
title: "Heritage Dinners",
|
||||
tamilTitle: "ஆயுள் விருந்து",
|
||||
subtitle: "ANNIVERSARIES & BIRTHDAYS",
|
||||
desc: "Honor milestones and life chapters. Our ancestral dining rooms provide an intimate, warm-lit atmosphere with traditional music ensembles and customized family menus curated by Chef Sundaram.",
|
||||
icon: Gift,
|
||||
bgGradient: "from-[#fdfcf9] via-[#e4d7bc]/20 to-[#FAF7F2]",
|
||||
accentColor: "#bc9e65",
|
||||
subtitle: "ANNIVERSARIES & MILESTONES",
|
||||
desc: "Honor milestones and life chapters. Our ancestral dining rooms provide an intimate, warm-lit atmosphere with traditional music ensembles and customized menus.",
|
||||
icon: HeritageDinnersIcon,
|
||||
bgImage: "/images/my_dosa_place_interior.png",
|
||||
},
|
||||
{
|
||||
title: "Sabha Assemblies",
|
||||
title: "Private Gatherings",
|
||||
tamilTitle: "சபை கூட்டங்கள்",
|
||||
subtitle: "CORPORATE COLLABORATIONS",
|
||||
desc: "Host partners and executives in private boardrooms crafted from vintage rosewood. Pair high-level meetings with gourmet curated South Indian starters, specialized filter coffee breaks, and impeccable service.",
|
||||
icon: Award,
|
||||
bgGradient: "from-[#fdfcf9] via-[#188754]/8 to-[#FAF7F2]",
|
||||
accentColor: "#188754",
|
||||
desc: "Host partners and executives in private boardrooms crafted from vintage rosewood. Pair high-level meetings with gourmet curated South Indian starters.",
|
||||
icon: PrivateGatheringsIcon,
|
||||
bgImage: "/images/chettinad_interior.png",
|
||||
},
|
||||
{
|
||||
title: "Kudumba Dining",
|
||||
tamilTitle: "குடும்ப விருந்து",
|
||||
subtitle: "GRAND FAMILY REUNIONS",
|
||||
desc: "Bring generations together under one carved timber ceiling. We recreate the authentic community dining experience of South Indian heritage mansions, complete with traditional brass servers and folklore music.",
|
||||
icon: Users,
|
||||
bgGradient: "from-[#fdfcf9] via-[#bc9e65]/15 to-[#FAF7F2]",
|
||||
accentColor: "#bc9e65",
|
||||
desc: "Experience a South Indian heritage reunion, complete with traditional brass servers and folklore music.",
|
||||
icon: KudumbaDiningIcon,
|
||||
bgImage: "/images/south_indian_welcome.png",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden bg-darkbg-light border-b border-gold/10">
|
||||
<section className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden bg-[#fdfcf7]">
|
||||
|
||||
{/* Background Decorative */}
|
||||
<div className="absolute top-[5%] left-[50%] -translate-x-1/2 w-[500px] h-[500px] rounded-full bg-maroon/5 blur-[150px] pointer-events-none" />
|
||||
{/* Background Decorative Layer 1: Pillars setting in soft focus */}
|
||||
<div className="absolute inset-0 bg-[url('/images/chettinad_interior.png')] bg-cover bg-center opacity-[0.06] pointer-events-none select-none z-0" />
|
||||
|
||||
{/* Background Decorative Layer 2: Parchment Overlay */}
|
||||
<div className="absolute inset-0 bg-[url('/images/sanctuary_bg.png')] bg-cover bg-center pointer-events-none select-none z-0 opacity-80 mix-blend-multiply" />
|
||||
|
||||
{/* 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-35 z-10" />
|
||||
|
||||
{/* Ornate Hanging Brass Lamp - Left Side */}
|
||||
<div className="absolute left-3 sm:left-6 md:left-10 lg:left-20 top-0 pointer-events-none select-none z-10 w-16 h-80">
|
||||
<svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 80 400" fill="none">
|
||||
{/* hanging chain line */}
|
||||
<line x1="40" y1="0" x2="40" y2="280" stroke="#bc9e65" strokeWidth="2" strokeDasharray="1 6" strokeLinecap="round" />
|
||||
<line x1="40" y1="0" x2="40" y2="280" stroke="#bc9e65" strokeWidth="1" />
|
||||
{/* hanging rings */}
|
||||
<circle cx="40" cy="100" r="4" stroke="#bc9e65" strokeWidth="1.5" />
|
||||
<circle cx="40" cy="200" r="4" stroke="#bc9e65" strokeWidth="1.5" />
|
||||
{/* Diya body structure */}
|
||||
<path d="M 40,280 C 35,280 30,285 30,290 C 30,300 50,300 50,290 C 50,285 45,280 40,280 Z" fill="#bc9e65" />
|
||||
<path d="M 15,310 C 15,300 65,300 65,310 L 60,315 C 60,325 20,325 20,315 Z" fill="#bc9e65" />
|
||||
<path d="M 30,290 L 30,300 L 50,300 L 50,290 Z" fill="#a08040" />
|
||||
<path d="M 35,315 L 35,335 C 35,340 45,340 45,335 L 45,315 Z" fill="#bc9e65" />
|
||||
{/* bottom bell */}
|
||||
<path d="M 40,335 L 37,345 C 35,348 45,348 43,345 Z" fill="#bc9e65" />
|
||||
<circle cx="40" cy="352" r="2" fill="#bc9e65" />
|
||||
{/* animated flames drop shadows */}
|
||||
<path d="M 16,302 C 14,302 12,298 16,290 C 20,298 18,302 16,302 Z" fill="#ff9800" filter="drop-shadow(0 0 3px #ff5722)" />
|
||||
<path d="M 64,302 C 62,302 60,298 64,290 C 68,298 66,302 64,302 Z" fill="#ff9800" filter="drop-shadow(0 0 3px #ff5722)" />
|
||||
<path d="M 40,282 C 38,282 36,278 40,270 C 44,278 42,282 40,282 Z" fill="#ff9800" filter="drop-shadow(0 0 3px #ff5722)" />
|
||||
{/* light glow screen blending */}
|
||||
<circle cx="40" cy="290" r="30" fill="url(#lampGlow)" opacity="0.15" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Ornate Hanging Brass Lamp - Right Side */}
|
||||
<div className="absolute right-3 sm:right-6 md:left-auto md:right-10 lg:right-20 top-0 pointer-events-none select-none z-10 w-16 h-80">
|
||||
<svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 80 400" fill="none">
|
||||
{/* hanging chain line */}
|
||||
<line x1="40" y1="0" x2="40" y2="280" stroke="#bc9e65" strokeWidth="2" strokeDasharray="1 6" strokeLinecap="round" />
|
||||
<line x1="40" y1="0" x2="40" y2="280" stroke="#bc9e65" strokeWidth="1" />
|
||||
{/* hanging rings */}
|
||||
<circle cx="40" cy="100" r="4" stroke="#bc9e65" strokeWidth="1.5" />
|
||||
<circle cx="40" cy="200" r="4" stroke="#bc9e65" strokeWidth="1.5" />
|
||||
{/* Diya body structure */}
|
||||
<path d="M 40,280 C 35,280 30,285 30,290 C 30,300 50,300 50,290 C 50,285 45,280 40,280 Z" fill="#bc9e65" />
|
||||
<path d="M 15,310 C 15,300 65,300 65,310 L 60,315 C 60,325 20,325 20,315 Z" fill="#bc9e65" />
|
||||
<path d="M 30,290 L 30,300 L 50,300 L 50,290 Z" fill="#a08040" />
|
||||
<path d="M 35,315 L 35,335 C 35,340 45,340 45,335 L 45,315 Z" fill="#bc9e65" />
|
||||
{/* bottom bell */}
|
||||
<path d="M 40,335 L 37,345 C 35,348 45,348 43,345 Z" fill="#bc9e65" />
|
||||
<circle cx="40" cy="352" r="2" fill="#bc9e65" />
|
||||
{/* animated flames drop shadows */}
|
||||
<path d="M 16,302 C 14,302 12,298 16,290 C 20,298 18,302 16,302 Z" fill="#ff9800" filter="drop-shadow(0 0 3px #ff5722)" />
|
||||
<path d="M 64,302 C 62,302 60,298 64,290 C 68,298 66,302 64,302 Z" fill="#ff9800" filter="drop-shadow(0 0 3px #ff5722)" />
|
||||
<path d="M 40,282 C 38,282 36,278 40,270 C 44,278 42,282 40,282 Z" fill="#ff9800" filter="drop-shadow(0 0 3px #ff5722)" />
|
||||
{/* light glow screen blending */}
|
||||
<circle cx="40" cy="290" r="30" fill="url(#lampGlow)" opacity="0.15" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Shared SVG Radial Gradient for lamp glows */}
|
||||
<svg className="absolute w-0 h-0 pointer-events-none select-none" aria-hidden="true">
|
||||
<defs>
|
||||
<radialGradient id="lampGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stopColor="#ffb74d" />
|
||||
<stop offset="100%" stopColor="#ffb74d" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div className="container max-w-6xl mx-auto relative z-10 flex flex-col h-full">
|
||||
|
||||
{/* Title */}
|
||||
<div className="mb-16 flex flex-col items-center text-center">
|
||||
<span className="font-sans text-[10px] tracking-[0.4em] uppercase text-gold font-semibold flex items-center gap-2 mb-3">
|
||||
<Calendar size={12} /> C E L E B R A T I O N S
|
||||
{/* Title Block Header */}
|
||||
<div className="mb-12 flex flex-col items-center text-center select-text">
|
||||
{/* Gold Star/Diamond Emblem header */}
|
||||
<div className="flex flex-col items-center mb-2 pointer-events-none select-none">
|
||||
<svg className="w-5 h-5 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" />
|
||||
</svg>
|
||||
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||
❖ CELEBRATIONS ❖
|
||||
</span>
|
||||
<h2 className="font-serif text-4xl md:text-6xl font-bold tracking-wide text-foreground uppercase text-glow">
|
||||
ROYAL ASSEMBLIES & EVENTS
|
||||
</div>
|
||||
|
||||
{/* Main Headline */}
|
||||
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase mb-4 text-glow">
|
||||
Royal Assemblies & Events
|
||||
</h2>
|
||||
<div className="w-20 h-[1.5px] bg-maroon mt-4" />
|
||||
|
||||
{/* Traditional Gold leaf Divider */}
|
||||
<div className="flex items-center gap-3 w-40 mb-5 justify-center pointer-events-none select-none">
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
||||
<svg className="w-4 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-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
||||
</div>
|
||||
|
||||
{/* Subheading / tagline */}
|
||||
<span className="font-sans text-[#bc9e65] text-xs sm:text-[13px] tracking-[0.3em] font-bold block mb-4 uppercase">
|
||||
Where Tradition Meets Grandeur
|
||||
</span>
|
||||
|
||||
{/* Bio tagline details */}
|
||||
<p className="font-sans text-xs sm:text-sm text-stone-700 leading-relaxed tracking-wider max-w-xl mx-auto">
|
||||
From intimate royal gatherings to grand celebrations, experience curated culinary journeys that leave lasting impressions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Accordion Track */}
|
||||
<div className="flex flex-col lg:flex-row gap-4 h-[600px] lg:h-[450px] w-full items-stretch">
|
||||
<div className="flex flex-col lg:flex-row gap-5 h-[620px] lg:h-[460px] w-full items-stretch relative z-20">
|
||||
{events.map((event, idx) => {
|
||||
const isHovered = hoveredIdx === idx;
|
||||
const isAnyHovered = hoveredIdx !== null;
|
||||
const Icon = event.icon;
|
||||
const isActive = idx === activeIdx;
|
||||
const CategoryIcon = event.icon;
|
||||
|
||||
// Compute dynamic flex basis
|
||||
// Default: equal sizes. On hover: active scales up, rest shrink
|
||||
let flexClass = "lg:flex-[1]";
|
||||
if (isAnyHovered) {
|
||||
flexClass = isHovered ? "lg:flex-[3.5] bg-opacity-100" : "lg:flex-[0.8] opacity-60";
|
||||
}
|
||||
// Compute dynamic width flex basis classes
|
||||
const flexClass = isActive
|
||||
? "lg:flex-[3.5] bg-opacity-100"
|
||||
: "lg:flex-[0.8] opacity-80 lg:opacity-95 hover:opacity-100";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
onMouseEnter={() => setHoveredIdx(idx)}
|
||||
onMouseLeave={() => setHoveredIdx(null)}
|
||||
className={`clickable flex-1 flex flex-col justify-between p-6 md:p-8 rounded-xl border border-gold/10 transition-all duration-700 ease-out relative overflow-hidden group ${flexClass} bg-gradient-to-b ${event.bgGradient}`}
|
||||
onMouseEnter={() => setActiveIdx(idx)}
|
||||
className={`clickable flex-1 flex flex-col justify-between rounded-2xl border border-[#d8c396]/45 transition-all duration-700 ease-out relative overflow-hidden shadow-sm bg-[#fcfaf2]/90 ${flexClass}`}
|
||||
>
|
||||
{/* Vintage Border overlay on hover */}
|
||||
<div className={`absolute inset-3 border border-gold/10 rounded-lg pointer-events-none transition-opacity duration-500 ${isHovered ? "opacity-100" : "opacity-0"}`} />
|
||||
<div className={`absolute inset-[18px] border border-dashed border-gold/5 rounded-lg pointer-events-none transition-opacity duration-500 ${isHovered ? "opacity-100" : "opacity-0"}`} />
|
||||
|
||||
{/* Left Line Accent (Gold) */}
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 w-[4px] transition-all duration-500"
|
||||
style={{ backgroundColor: event.accentColor, opacity: isHovered ? 1 : 0.2 }}
|
||||
/>
|
||||
|
||||
{/* Top Section: Icon & Header */}
|
||||
<div className="flex justify-between items-start z-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-full border border-gold/30 flex items-center justify-center transition-all duration-500"
|
||||
style={{
|
||||
borderColor: isHovered ? event.accentColor : "rgba(216,195,150,0.4)",
|
||||
backgroundColor: isHovered ? "rgba(24,135,84,0.06)" : "transparent",
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
size={18}
|
||||
style={{ color: isHovered ? event.accentColor : "#bc9e65" }}
|
||||
className={isHovered ? "animate-pulse" : ""}
|
||||
{/* Background Image Overlay for Opened Active Card */}
|
||||
{isActive && event.bgImage && (
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none overflow-hidden">
|
||||
<Image
|
||||
src={event.bgImage}
|
||||
alt={event.title}
|
||||
fill
|
||||
sizes="600px"
|
||||
className="object-cover opacity-[0.06] mix-blend-multiply transition-opacity duration-700 ease-in-out"
|
||||
/>
|
||||
</div>
|
||||
{/* Collapsed view Title details */}
|
||||
<div className="lg:hidden group-hover:block transition-all duration-300">
|
||||
<span className="font-sans text-[8px] tracking-[0.2em] uppercase text-gold-dark font-bold block">
|
||||
{event.subtitle}
|
||||
</span>
|
||||
<h3 className="font-serif text-lg font-bold text-stone-900 uppercase tracking-wider">
|
||||
)}
|
||||
|
||||
{/* Thin inner Gold border outline frame */}
|
||||
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
|
||||
|
||||
{/* Left side green accent strip (only in hover/active) */}
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 w-[4px] bg-[#0a4a2b] transition-opacity duration-500"
|
||||
style={{ opacity: isActive ? 1 : 0 }}
|
||||
/>
|
||||
|
||||
{/* ==================== CLOSED VIEW CARD ==================== */}
|
||||
{!isActive && (
|
||||
<div className="flex flex-col justify-between items-center h-full w-full py-8 pointer-events-none select-none relative z-10">
|
||||
|
||||
{/* Circle icon container at top */}
|
||||
<div className="w-11 h-11 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/50 flex items-center justify-center shadow-sm">
|
||||
<CategoryIcon />
|
||||
</div>
|
||||
|
||||
{/* Vertical upward title text */}
|
||||
<div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 origin-center -rotate-90 whitespace-nowrap">
|
||||
<h3 className="font-serif text-xs sm:text-sm font-bold tracking-[0.3em] uppercase text-[#0a4a2b]">
|
||||
{event.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Lotus watermark at bottom */}
|
||||
<div className="absolute bottom-16 left-1/2 -translate-x-1/2 w-8 h-8 text-[#bc9e65] opacity-[0.06] pointer-events-none">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Desktop Collapsed view rotated Title */}
|
||||
<div className={`hidden lg:block absolute left-1/2 -translate-x-1/2 top-28 origin-center -rotate-90 whitespace-nowrap transition-opacity duration-500 pointer-events-none ${
|
||||
isHovered ? "opacity-0" : "opacity-100"
|
||||
}`}>
|
||||
<h3 className="font-serif text-sm font-bold tracking-[0.4em] uppercase text-gold-dark/80 font-bold">
|
||||
{event.title}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded content view (Desktop only hides when collapsed, shows when hovered) */}
|
||||
<div className={`flex flex-col gap-4 mt-8 z-10 transition-all duration-500 ${
|
||||
isHovered ? "lg:opacity-100 lg:translate-y-0" : "lg:opacity-0 lg:translate-y-4 lg:pointer-events-none"
|
||||
}`}>
|
||||
{/* Category meta */}
|
||||
<div>
|
||||
<span className="font-sans text-[9px] tracking-[0.3em] text-gold-dark font-bold block mb-1">
|
||||
{event.subtitle}
|
||||
</span>
|
||||
<h3 className="font-serif text-2xl md:text-3xl font-bold text-stone-900 uppercase tracking-wider text-glow mb-1">
|
||||
{event.title}
|
||||
</h3>
|
||||
<p className="font-serif text-xs text-gold-dark/70 font-semibold italic tracking-wider">
|
||||
{event.tamilTitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="font-sans text-xs md:text-sm text-stone-700 leading-relaxed tracking-wider max-w-md">
|
||||
{event.desc}
|
||||
</p>
|
||||
|
||||
{/* Inquire CTA Button */}
|
||||
<button className="clickable w-fit mt-2 font-serif text-[11px] tracking-[0.2em] uppercase text-maroon hover:text-white border border-maroon/30 hover:border-maroon hover:bg-maroon px-4 py-2 bg-transparent transition-all duration-300 relative group/btn overflow-hidden">
|
||||
<span className="absolute inset-0 bg-maroon translate-x-[-100%] group-hover/btn:translate-x-0 transition-transform duration-300 z-0" />
|
||||
<span className="relative z-10">Request Brochure</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Bottom Number Indicator */}
|
||||
<div className="text-right z-10 mt-6 lg:mt-0">
|
||||
<span className="font-serif text-lg font-bold text-maroon/35 tracking-widest">
|
||||
{/* Circle number badge at bottom */}
|
||||
<div className="w-7 h-7 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/40 flex items-center justify-center shadow-sm">
|
||||
<span className="font-serif text-[11px] font-bold text-[#bc9e65]">
|
||||
0{idx + 1}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ==================== OPENED VIEW CARD ==================== */}
|
||||
{isActive && (
|
||||
<div className="p-8 flex flex-col justify-between h-full select-text text-left relative z-10 w-full">
|
||||
|
||||
{/* Top Notch Shield Overlay */}
|
||||
<div className="absolute -top-[1px] left-1/2 -translate-x-1/2 w-12 h-6 bg-[#0a4a2b] border-b border-r border-l border-[#bc9e65]/40 rounded-b-xl flex items-center justify-center z-20">
|
||||
<svg className="w-3.5 h-3.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Details content section */}
|
||||
<div className="flex flex-col items-start gap-4">
|
||||
|
||||
{/* Double gold-rim circle icon container */}
|
||||
<div className="w-14 h-14 rounded-full border border-[#bc9e65]/45 flex items-center justify-center bg-transparent shadow-sm">
|
||||
<div className="w-12 h-12 rounded-full border border-[#bc9e65]/25 flex items-center justify-center">
|
||||
<CategoryIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Header subtitles */}
|
||||
<div>
|
||||
<span className="font-sans text-[9px] tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase block mb-1 pointer-events-none select-none">
|
||||
{event.subtitle}
|
||||
</span>
|
||||
<h3 className="font-serif text-2xl sm:text-3xl font-bold text-[#0a4a2b] uppercase tracking-wider mb-1">
|
||||
{event.title}
|
||||
</h3>
|
||||
<p className="font-serif text-xs text-[#bc9e65] font-medium tracking-wide mb-3 pointer-events-none select-none">
|
||||
— {event.tamilTitle} —
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bio narrative */}
|
||||
<p className="font-sans text-xs sm:text-sm text-stone-700 leading-relaxed max-w-md">
|
||||
{event.desc}
|
||||
</p>
|
||||
|
||||
{/* Notched Enquire CTA Button with modern CSS clip-path notches */}
|
||||
<div className="mt-4 select-none">
|
||||
<button
|
||||
className="inline-flex items-center justify-center bg-[#0a4a2b] border border-[#d8c396]/80 text-[#fcfaf2] rounded-none px-6 py-2.5 uppercase font-sans font-bold text-[10px] tracking-wider relative hover:bg-[#0c5030] transition-colors duration-300 shadow-md"
|
||||
style={{
|
||||
clipPath: "polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px)"
|
||||
}}
|
||||
>
|
||||
Enquire Now →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Bottom Right Card Number Indicator */}
|
||||
<div className="absolute bottom-6 right-8 font-serif text-3xl font-bold text-[#bc9e65]/35 pointer-events-none select-none">
|
||||
0{idx + 1}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Instagram, Facebook, Mail, Phone, MapPin, Send, Compass } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { Instagram, Facebook, Mail, Phone, MapPin, Send } from "lucide-react";
|
||||
|
||||
export default function Footer() {
|
||||
const [email, setEmail] = useState("");
|
||||
@ -15,145 +16,251 @@ export default function Footer() {
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="relative bg-darkbg border-t-2 border-gold-dark/30 pt-16 pb-8 px-6 md:px-12 overflow-hidden">
|
||||
<footer className="relative w-full py-16 px-6 sm:px-12 md:px-16 lg:px-24 overflow-hidden z-20">
|
||||
|
||||
{/* Traditional Toran Hanging Garland at the very top of footer */}
|
||||
<div className="absolute top-0 inset-x-0 h-8 bg-repeat-x bg-[length:80px_auto] bg-[url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2224%22 viewBox=%220 0 80 24%22><path d=%22M0,0 Q20,20 40,0 Q60,20 80,0 M40,0 L40,15 M80,0 L80,15 M0,0 L0,15%22 fill=%22none%22 stroke=%22%23AA7C11%22 stroke-width=%221.5%22/><circle cx=%2240%22 cy=%2215%22 r=%223.5%22 fill=%22%23D4AF37%22/><circle cx=%220%22 cy=%2215%22 r=%223.5%22 fill=%22%23D4AF37%22/><circle cx=%2280%22 cy=%2215%22 r=%223.5%22 fill=%22%23D4AF37%22/></svg>')] bg-top pointer-events-none opacity-40" />
|
||||
|
||||
{/* Floating Diyas (Lamps) floating gently */}
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
{/* Diya 1 */}
|
||||
<div className="absolute bottom-16 left-[8%] w-10 h-6 bg-brass rounded-b-full border-t border-gold flex justify-center items-start shadow-lg opacity-35 animate-[float-diya_8s_infinite_ease-in-out_alternate]">
|
||||
<div className="w-2.5 h-5 bg-gradient-to-t from-orange to-gold-light rounded-full absolute -top-4 left-1/2 -translate-x-1/2 diya-flame" />
|
||||
{/* Consolidated Mockup Background Layer */}
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none">
|
||||
<Image
|
||||
src="/images/footer_bg.png"
|
||||
alt="Footer Backdrop"
|
||||
fill
|
||||
priority
|
||||
className="object-fill"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Diya 2 */}
|
||||
<div className="absolute bottom-24 right-[12%] w-8 h-5 bg-brass rounded-b-full border-t border-gold flex justify-center items-start shadow-lg opacity-30 animate-[float-diya_10s_infinite_ease-in-out_alternate-reverse]">
|
||||
<div className="w-2 h-4 bg-gradient-to-t from-orange to-gold-light rounded-full absolute -top-3 left-1/2 -translate-x-1/2 diya-flame" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Frame Container enclosing footer - content floats within the baked border box */}
|
||||
<div className="container max-w-6xl mx-auto px-4 sm:px-8 md:px-12 py-8 relative z-10 flex flex-col h-full">
|
||||
|
||||
<div className="container max-w-6xl mx-auto relative z-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 mb-12">
|
||||
{/* Column Grid layout */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8 md:gap-12 pb-8 border-b border-[#bc9e65]/35">
|
||||
|
||||
{/* Col 1: Brand & Bio */}
|
||||
{/* Column 1: Brand & Bio (col-span 4) */}
|
||||
<div className="lg:col-span-4 flex flex-col gap-5">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-serif text-gold text-base tracking-[0.3em] uppercase text-glow">MY DOSA</span>
|
||||
<span className="font-serif text-gold-light text-xl tracking-[0.5em] uppercase text-glow">PLACE</span>
|
||||
<div className="w-20 h-[1px] bg-gold/30 mt-2" />
|
||||
<div className="flex flex-col items-start select-text">
|
||||
{/* Gold lotus crest */}
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2.5 pointer-events-none select-none" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||||
</svg>
|
||||
<span className="font-serif text-[#bc9e65] text-base sm:text-[17px] tracking-[0.3em] uppercase block mb-1">
|
||||
MY DOSA
|
||||
</span>
|
||||
<span className="font-serif text-[#bc9e65] text-base sm:text-[17px] tracking-[0.35em] uppercase block mb-2">
|
||||
PLACE
|
||||
</span>
|
||||
|
||||
{/* Traditional Gold Leaf Separator */}
|
||||
<div className="flex items-center gap-2 w-28 mb-3 pointer-events-none select-none">
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
||||
<svg className="w-3.5 h-3.5 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-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="font-sans text-xs text-stone-400 leading-relaxed tracking-wider max-w-sm">
|
||||
<div className="flex items-start gap-2.5 max-w-sm text-left">
|
||||
<span className="text-[#bc9e65] text-xl font-bold leading-none mt-0.5 pointer-events-none select-none">•</span>
|
||||
<p className="font-sans text-xs text-stone-300 leading-relaxed tracking-wider select-text">
|
||||
Waterloo's premier destination for authentic, pure vegetarian South Indian flavors. Crispy ghee-roasted dosas, steaming lentil sambar, and home-ground chutneys crafted with devotion.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Social Icons */}
|
||||
{/* Circular outline social links */}
|
||||
<div className="flex gap-4 items-center mt-2">
|
||||
<a
|
||||
href="https://www.instagram.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="clickable w-8 h-8 rounded-full border border-gold/20 flex items-center justify-center text-gold hover:text-gold-light hover:border-gold shadow-[0_0_8px_rgba(212,175,55,0.05)] transition-all duration-300"
|
||||
className="clickable w-8 h-8 rounded-full border border-[#bc9e65]/30 flex items-center justify-center text-[#bc9e65] hover:text-white hover:border-[#bc9e65] transition-all duration-300"
|
||||
>
|
||||
<Instagram size={14} />
|
||||
<Instagram size={13} />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.facebook.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="clickable w-8 h-8 rounded-full border border-gold/20 flex items-center justify-center text-gold hover:text-gold-light hover:border-gold shadow-[0_0_8px_rgba(212,175,55,0.05)] transition-all duration-300"
|
||||
className="clickable w-8 h-8 rounded-full border border-[#bc9e65]/30 flex items-center justify-center text-[#bc9e65] hover:text-white hover:border-[#bc9e65] transition-all duration-300"
|
||||
>
|
||||
<Facebook size={14} />
|
||||
<Facebook size={13} />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.google.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="clickable w-8 h-8 rounded-full border border-[#bc9e65]/30 flex items-center justify-center text-[#bc9e65] hover:text-white hover:border-[#bc9e65] font-sans font-bold text-xs transition-all duration-300"
|
||||
>
|
||||
G
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Col 2: Opening Hours */}
|
||||
<div className="lg:col-span-3 flex flex-col gap-4">
|
||||
<h4 className="font-serif text-gold text-xs tracking-widest uppercase border-b border-gold/10 pb-2">
|
||||
{/* Column 2: Quick Links (col-span 2) */}
|
||||
<div className="lg:col-span-2 flex flex-col gap-4 text-left">
|
||||
<div className="flex flex-col items-start select-text">
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2.5 pointer-events-none select-none" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||||
</svg>
|
||||
<h4 className="font-serif text-[#bc9e65] text-xs sm:text-[13px] tracking-[0.25em] uppercase mb-1">
|
||||
Quick Links
|
||||
</h4>
|
||||
{/* Separator */}
|
||||
<div className="flex items-center gap-2 w-28 mb-2 pointer-events-none select-none">
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
||||
<svg className="w-3.5 h-3.5 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-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="flex flex-col gap-3 font-sans text-xs text-stone-300 tracking-wider">
|
||||
<li>
|
||||
<a href="#story" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
|
||||
Our Story
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#menu" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
|
||||
Feast Menu
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#chef" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
|
||||
Our Chef
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#events" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
|
||||
Royal Events
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Column 3: Feast Sessions (col-span 3, bordered vertically on desktop) */}
|
||||
<div className="lg:col-span-3 flex flex-col gap-4 text-left border-l-0 border-r-0 lg:border-l lg:border-r border-[#bc9e65]/20 lg:px-6">
|
||||
<div className="flex flex-col items-start select-text">
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2 pointer-events-none select-none" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||||
</svg>
|
||||
<h4 className="font-serif text-[#bc9e65] text-xs sm:text-[13px] tracking-[0.25em] uppercase mb-1">
|
||||
Feast Sessions
|
||||
</h4>
|
||||
<ul className="flex flex-col gap-3 font-sans text-xs text-stone-300 tracking-wider">
|
||||
<li className="flex flex-col">
|
||||
<span className="font-bold text-white uppercase text-[10px] tracking-widest text-glow">Wednesday – Monday</span>
|
||||
<span className="text-stone-400 mt-0.5">04:30 PM – 10:00 PM</span>
|
||||
</li>
|
||||
<li className="flex flex-col mt-2">
|
||||
<span className="font-bold text-white uppercase text-[10px] tracking-widest text-glow">Tuesday</span>
|
||||
<span className="text-stone-400 mt-0.5">Closed</span>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Separator */}
|
||||
<div className="flex items-center gap-2 w-28 mb-2 pointer-events-none select-none">
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
||||
<svg className="w-3.5 h-3.5 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-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Col 3: Contact & Address */}
|
||||
<div className="lg:col-span-3 flex flex-col gap-4">
|
||||
<h4 className="font-serif text-gold text-xs tracking-widest uppercase border-b border-gold/10 pb-2">
|
||||
<div className="flex flex-col gap-4 font-sans text-xs text-stone-300 tracking-wider">
|
||||
{/* Wednesday - Monday */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex flex-col select-text">
|
||||
<span className="font-bold text-[#bc9e65] uppercase text-[10px] tracking-widest">Wednesday – Monday</span>
|
||||
<span className="text-stone-300 mt-0.5">04:30 PM – 10:00 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-dashed border-[#bc9e65]/20 my-1 w-full" />
|
||||
|
||||
{/* Tuesday */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
<path d="M10 13l4 4m0-4l-4 4" strokeLinecap="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex flex-col select-text">
|
||||
<span className="font-bold text-white uppercase text-[10px] tracking-widest">Tuesday</span>
|
||||
<span className="text-stone-400 mt-0.5">Closed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Column 3: The Dining Court (col-span 3, no borders) */}
|
||||
<div className="lg:col-span-3 flex flex-col gap-4 text-left">
|
||||
<div className="flex flex-col items-start select-text">
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2 pointer-events-none select-none" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||||
</svg>
|
||||
<h4 className="font-serif text-[#bc9e65] text-xs sm:text-[13px] tracking-[0.25em] uppercase mb-1">
|
||||
The Dining Court
|
||||
</h4>
|
||||
<ul className="flex flex-col gap-3 font-sans text-xs text-stone-300 tracking-wider">
|
||||
<li className="flex items-start gap-2.5">
|
||||
<MapPin size={14} className="text-gold mt-0.5 flex-shrink-0" />
|
||||
<span>922 Erb St. W Unit C3#3, Waterloo, ON N2T 0C9, Canada</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Phone size={14} className="text-gold flex-shrink-0" />
|
||||
<span>+1 519-888-7459</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Mail size={14} className="text-gold flex-shrink-0" />
|
||||
<span>info@mydosaplace.com</span>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Separator */}
|
||||
<div className="flex items-center gap-2 w-28 mb-2 pointer-events-none select-none">
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
||||
<svg className="w-3.5 h-3.5 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-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Col 4: Newsletter */}
|
||||
<div className="lg:col-span-2 flex flex-col gap-4">
|
||||
<h4 className="font-serif text-gold text-xs tracking-widest uppercase border-b border-gold/10 pb-2">
|
||||
Invite Dispatch
|
||||
</h4>
|
||||
<p className="font-sans text-[11px] text-stone-400 leading-relaxed tracking-wide">
|
||||
Subscribe to receive exclusive banquet menus and seasonal festival calendars.
|
||||
</p>
|
||||
|
||||
{!subscribed ? (
|
||||
<form onSubmit={handleSubscribe} className="flex gap-2">
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="Digital address"
|
||||
className="font-sans text-[10px] text-white bg-darkbg-light border border-gold/25 focus:border-gold px-3 py-2 outline-none rounded flex-1 transition-colors duration-300"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="clickable w-8 h-8 rounded bg-gold border border-gold text-darkbg flex items-center justify-center hover:bg-gold-light hover:border-gold-light transition-all duration-300"
|
||||
aria-label="Subscribe"
|
||||
>
|
||||
<Send size={12} />
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<span className="font-serif text-[10px] text-gold tracking-widest uppercase animate-pulse block">
|
||||
Seal Dispatched!
|
||||
</span>
|
||||
)}
|
||||
<div className="flex flex-col gap-4 font-sans text-xs text-stone-300 tracking-wider">
|
||||
{/* Address */}
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0 mt-0.5">
|
||||
<MapPin size={13} />
|
||||
</div>
|
||||
<span className="select-text max-w-[195px]">922 Erb St. W Unit C3#3, Waterloo, ON N2T 0C9, Canada</span>
|
||||
</div>
|
||||
{/* Phone */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||||
<Phone size={13} />
|
||||
</div>
|
||||
<span className="select-text">+1 519-888-7459</span>
|
||||
</div>
|
||||
{/* Email */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||||
<Mail size={13} />
|
||||
</div>
|
||||
<span className="select-text">info@mydosaplace.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Footer Bottom copyright & credits */}
|
||||
<div className="container max-w-6xl mx-auto pt-8 border-t border-gold/10 flex flex-col md:flex-row justify-between items-center gap-4 text-stone-500 font-sans text-[9px] tracking-[0.2em] uppercase">
|
||||
<span>© 2026 My Dosa Place. All rights reserved.</span>
|
||||
<span>Pure Veg South Indian Heritage.</span>
|
||||
{/* Footer Bottom copyright & credits bar */}
|
||||
<div className="pt-6 mt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-stone-500 font-sans text-[9px] tracking-[0.2em] uppercase select-text relative z-10">
|
||||
<span>© 2026 MY DOSA PLACE. ALL RIGHTS RESERVED.</span>
|
||||
|
||||
{/* Center lotus crest with horizontal gold dividers */}
|
||||
<div className="flex items-center gap-4 w-48 justify-center pointer-events-none select-none">
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#bc9e65]" />
|
||||
<svg className="w-5 h-4 text-[#bc9e65] opacity-75" 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-[1px] flex-1 bg-gradient-to-l from-transparent to-[#bc9e65]" />
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes float-diya {
|
||||
0% { transform: translateY(0) rotate(0deg); }
|
||||
100% { transform: translateY(-20px) rotate(2deg); }
|
||||
}
|
||||
`}</style>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span>PURE VEG SOUTH INDIAN HERITAGE.</span>
|
||||
<span className="text-xs text-[#bc9e65] leading-none mb-0.5">❧</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,289 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { CalendarDays, Clock, Users, ArrowRight, CheckCircle, Sparkles } from "lucide-react";
|
||||
|
||||
export default function ReservationForm() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
guests: "2",
|
||||
date: "",
|
||||
time: "19:00",
|
||||
});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
|
||||
// Sparks/Gold embers canvas particle system
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
let animId: number;
|
||||
let width = (canvas.width = canvas.parentElement?.clientWidth || 800);
|
||||
let height = (canvas.height = canvas.parentElement?.clientHeight || 600);
|
||||
|
||||
const handleResize = () => {
|
||||
if (!canvas.parentElement) return;
|
||||
width = canvas.width = canvas.parentElement.clientWidth;
|
||||
height = canvas.height = canvas.parentElement.clientHeight;
|
||||
};
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
class Spark {
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
radius: number;
|
||||
alpha: number;
|
||||
decay: number;
|
||||
|
||||
constructor() {
|
||||
this.x = Math.random() * width;
|
||||
this.y = height + 10;
|
||||
this.vx = (Math.random() - 0.5) * 0.5;
|
||||
this.vy = -Math.random() * 1.2 - 0.4;
|
||||
this.radius = Math.random() * 2.0 + 0.5;
|
||||
this.alpha = Math.random() * 0.6 + 0.2;
|
||||
this.decay = Math.random() * 0.003 + 0.001;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
this.alpha -= this.decay;
|
||||
this.vx += (Math.random() - 0.5) * 0.05;
|
||||
}
|
||||
|
||||
draw(c: CanvasRenderingContext2D) {
|
||||
c.save();
|
||||
c.beginPath();
|
||||
c.fillStyle = `rgba(212, 175, 55, ${this.alpha})`;
|
||||
c.shadowBlur = 6;
|
||||
c.shadowColor = "#D4AF37";
|
||||
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
|
||||
c.fill();
|
||||
c.restore();
|
||||
}
|
||||
}
|
||||
|
||||
const sparks: Spark[] = [];
|
||||
const maxSparks = 35;
|
||||
|
||||
const render = () => {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
if (sparks.length < maxSparks && Math.random() > 0.6) {
|
||||
sparks.push(new Spark());
|
||||
}
|
||||
|
||||
for (let i = sparks.length - 1; i >= 0; i--) {
|
||||
const s = sparks[i];
|
||||
s.update();
|
||||
s.draw(ctx);
|
||||
|
||||
if (s.alpha <= 0 || s.y < 0) {
|
||||
sparks.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
animId = requestAnimationFrame(render);
|
||||
};
|
||||
|
||||
render();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
cancelAnimationFrame(animId);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Simulate luxury API booking delay
|
||||
setTimeout(() => {
|
||||
setIsSubmitting(false);
|
||||
setIsSuccess(true);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center items-center overflow-hidden bg-darkbg-light border-b border-gold/10">
|
||||
{/* Background Spark Canvas */}
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute inset-0 z-0 pointer-events-none mix-blend-screen opacity-70"
|
||||
/>
|
||||
|
||||
<div className="container max-w-4xl mx-auto relative z-10">
|
||||
|
||||
{/* Title */}
|
||||
<div className="mb-12 flex flex-col items-center text-center">
|
||||
<span className="font-sans text-[10px] tracking-[0.4em] uppercase text-gold font-semibold flex items-center gap-2 mb-3">
|
||||
<Sparkles size={12} className="animate-pulse" /> S A N C T U A R Y T A B L E
|
||||
</span>
|
||||
<h2 className="font-serif text-4xl md:text-6xl font-bold tracking-wide text-foreground uppercase text-glow">
|
||||
RESERVE A COURT
|
||||
</h2>
|
||||
<div className="w-20 h-[1.5px] bg-maroon mt-4" />
|
||||
</div>
|
||||
|
||||
{/* Reservation Card wrapper */}
|
||||
<div className="relative w-full max-w-2xl mx-auto rounded-xl p-8 md:p-12 glass shadow-[0_30px_70px_rgba(0,0,0,0.8)] border border-gold/20 overflow-hidden">
|
||||
|
||||
{/* Inner ornaments */}
|
||||
<div className="absolute inset-3 border border-gold/10 rounded-lg pointer-events-none z-0" />
|
||||
<div className="absolute inset-[20px] border border-dashed border-gold/5 rounded-lg pointer-events-none z-0" />
|
||||
|
||||
{/* Form states */}
|
||||
{!isSuccess ? (
|
||||
<form onSubmit={handleSubmit} className="relative z-10 flex flex-col gap-6">
|
||||
|
||||
{/* Form Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
|
||||
{/* Name */}
|
||||
<div className="flex flex-col relative group">
|
||||
<label className="font-serif text-[10px] tracking-widest text-gold-dark font-bold uppercase mb-2">
|
||||
Patron Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="font-sans text-xs md:text-sm text-stone-900 bg-white border border-gold/30 focus:border-maroon px-4 py-3 outline-none transition-all duration-300 rounded"
|
||||
placeholder="Enter your full name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div className="flex flex-col relative">
|
||||
<label className="font-serif text-[10px] tracking-widest text-gold-dark font-bold uppercase mb-2">
|
||||
Digital Address (Email)
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
className="font-sans text-xs md:text-sm text-stone-900 bg-white border border-gold/30 focus:border-maroon px-4 py-3 outline-none transition-all duration-300 rounded"
|
||||
placeholder="name@domain.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Guest Count */}
|
||||
<div className="flex flex-col relative">
|
||||
<label className="font-serif text-[10px] tracking-widest text-gold-dark font-bold uppercase mb-2 flex items-center gap-1.5">
|
||||
<Users size={12} className="text-maroon" /> Assembly Size (Guests)
|
||||
</label>
|
||||
<select
|
||||
value={formData.guests}
|
||||
onChange={(e) => setFormData({ ...formData, guests: e.target.value })}
|
||||
className="font-sans text-xs md:text-sm text-stone-900 bg-white border border-gold/30 focus:border-maroon px-4 py-3 outline-none transition-all duration-300 rounded cursor-pointer appearance-none"
|
||||
>
|
||||
<option value="1">1 Patron (Solo Dining)</option>
|
||||
<option value="2">2 Patrons (Duet)</option>
|
||||
<option value="4">4 Patrons (Quartet)</option>
|
||||
<option value="6">6 Patrons (Family Court)</option>
|
||||
<option value="8">8+ Patrons (Royal Sabha)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Date */}
|
||||
<div className="flex flex-col relative">
|
||||
<label className="font-serif text-[10px] tracking-widest text-gold-dark font-bold uppercase mb-2 flex items-center gap-1.5">
|
||||
<CalendarDays size={12} className="text-maroon" /> Feast Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
required
|
||||
value={formData.date}
|
||||
onChange={(e) => setFormData({ ...formData, date: e.target.value })}
|
||||
className="font-sans text-xs md:text-sm text-stone-900 bg-white border border-gold/30 focus:border-maroon px-4 py-3 outline-none transition-all duration-300 rounded cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Time */}
|
||||
<div className="flex flex-col relative md:col-span-2">
|
||||
<label className="font-serif text-[10px] tracking-widest text-gold-dark font-bold uppercase mb-2 flex items-center gap-1.5">
|
||||
<Clock size={12} className="text-maroon" /> Dining Session
|
||||
</label>
|
||||
<select
|
||||
value={formData.time}
|
||||
onChange={(e) => setFormData({ ...formData, time: e.target.value })}
|
||||
className="font-sans text-xs md:text-sm text-stone-900 bg-white border border-gold/30 focus:border-maroon px-4 py-3 outline-none transition-all duration-300 rounded cursor-pointer appearance-none"
|
||||
>
|
||||
<option value="16:30">Early Dinner Session - 04:30 PM</option>
|
||||
<option value="18:00">Sunset Feast Session - 06:00 PM</option>
|
||||
<option value="19:30">Royal Banquet Session - 07:30 PM</option>
|
||||
<option value="21:00">Late Dining Session - 09:00 PM</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Submit CTA */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="clickable w-full mt-6 bg-maroon border border-gold/60 text-white hover:text-white hover:border-maroon-dark py-4 px-6 rounded font-serif text-sm tracking-[0.2em] uppercase transition-all duration-500 flex items-center justify-center gap-3 shadow-[0_10px_20px_rgba(24,135,84,0.12)] relative group overflow-hidden"
|
||||
>
|
||||
<span className="absolute inset-0 bg-gold translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-out z-0" />
|
||||
<span className="relative z-10 flex items-center gap-3 group-hover:text-darkbg transition-colors duration-500">
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<div className="w-4 h-4 rounded-full border-2 border-darkbg border-t-transparent animate-spin" />
|
||||
Auditing Court Availability...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Confirm Royal Seating <ArrowRight size={16} />
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
</form>
|
||||
) : (
|
||||
// Success Feedback State
|
||||
<div className="relative z-10 py-12 flex flex-col items-center text-center gap-6">
|
||||
<CheckCircle size={64} className="text-gold drop-shadow-[0_0_10px_rgba(212,175,55,0.6)] animate-[bounce_1.5s_infinite_alternate]" />
|
||||
<div>
|
||||
<h3 className="font-serif text-2xl font-bold text-stone-900 tracking-widest uppercase mb-2">
|
||||
COURT SECURED
|
||||
</h3>
|
||||
<span className="font-sans text-[10px] text-maroon font-bold tracking-[0.3em] uppercase block mb-6">
|
||||
N A L V A R A V U P A T R O N
|
||||
</span>
|
||||
<p className="font-sans text-xs md:text-sm text-stone-700 leading-relaxed tracking-wider max-w-md mx-auto">
|
||||
Namaste, <strong className="text-maroon-dark font-extrabold">{formData.name}</strong>. Your royal table for{" "}
|
||||
<strong className="text-maroon-dark font-extrabold">{formData.guests} guests</strong> on{" "}
|
||||
<strong className="text-maroon-dark font-extrabold">{formData.date}</strong> at{" "}
|
||||
<strong className="text-maroon-dark font-extrabold">{formData.time}</strong> has been provisionally registered. A digital invite seal has been dispatched to{" "}
|
||||
<strong className="text-maroon-dark font-extrabold">{formData.email}</strong>. We wait to welcome you.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setIsSuccess(false)}
|
||||
className="clickable mt-6 font-serif text-[10px] tracking-[0.2em] uppercase text-maroon hover:text-white border border-maroon/30 hover:bg-maroon px-6 py-2.5 bg-transparent transition-all duration-300 rounded"
|
||||
>
|
||||
Book Another Table
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -1,238 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { MapPin, Navigation, Compass, Sparkles } from "lucide-react";
|
||||
|
||||
export default function RouteMap() {
|
||||
const [activePin, setActivePin] = useState<string | null>(null);
|
||||
|
||||
const landmarks = [
|
||||
{
|
||||
id: "airport",
|
||||
name: "Waterloo Region Airport (YKF)",
|
||||
shortName: "YKF Airport",
|
||||
distance: "25 km (28 mins)",
|
||||
x: 100,
|
||||
y: 350,
|
||||
desc: "Direct regional flight connections, linked via Expressway route 85.",
|
||||
},
|
||||
{
|
||||
id: "university",
|
||||
name: "University of Waterloo",
|
||||
shortName: "UWaterloo",
|
||||
distance: "3 km (5 mins)",
|
||||
x: 280,
|
||||
y: 220,
|
||||
desc: "Academic hub located just east of Erb Street West.",
|
||||
},
|
||||
{
|
||||
id: "market",
|
||||
name: "St. Jacobs Farmers' Market",
|
||||
shortName: "St. Jacobs",
|
||||
distance: "8 km (10 mins)",
|
||||
x: 480,
|
||||
y: 320,
|
||||
desc: "Historic local farmers' market offering local produce.",
|
||||
},
|
||||
{
|
||||
id: "restaurant",
|
||||
name: "My Dosa Place (Waterloo)",
|
||||
shortName: "My Dosa Place",
|
||||
distance: "0 km (Destination)",
|
||||
x: 680,
|
||||
y: 180,
|
||||
desc: "Welcome! Waterloo's destination for authentic pure vegetarian South Indian flavors.",
|
||||
isDestination: true,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden bg-darkbg border-b border-gold/10">
|
||||
|
||||
{/* Background grids */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:40px_40px] pointer-events-none" />
|
||||
|
||||
<div className="container max-w-6xl mx-auto relative z-10">
|
||||
|
||||
{/* Title */}
|
||||
<div className="mb-16 flex flex-col items-center text-center">
|
||||
<span className="font-sans text-[10px] tracking-[0.4em] uppercase text-gold font-semibold flex items-center gap-2 mb-3">
|
||||
<Compass size={12} className="animate-spin-slow" /> P I L G R I M A G E
|
||||
</span>
|
||||
<h2 className="font-serif text-4xl md:text-6xl font-bold tracking-wide text-foreground uppercase text-glow">
|
||||
HERITAGE LOCATION MAP
|
||||
</h2>
|
||||
<div className="w-20 h-[1.5px] bg-maroon mt-4" />
|
||||
</div>
|
||||
|
||||
{/* Map Canvas Wrapper */}
|
||||
<div className="relative w-full max-w-4xl mx-auto h-[450px] bg-white/70 rounded-xl border border-gold/30 p-6 shadow-xl overflow-hidden">
|
||||
|
||||
{/* Decorative Corner Ornaments */}
|
||||
<div className="absolute top-3 left-3 w-4 h-4 border-t border-l border-gold/30" />
|
||||
<div className="absolute top-3 right-3 w-4 h-4 border-t border-r border-gold/30" />
|
||||
<div className="absolute bottom-3 left-3 w-4 h-4 border-b border-l border-gold/30" />
|
||||
<div className="absolute bottom-3 right-3 w-4 h-4 border-b border-r border-gold/30" />
|
||||
|
||||
{/* SVG Map Canvas */}
|
||||
<svg
|
||||
className="w-full h-full min-w-[700px] select-none"
|
||||
viewBox="0 0 800 450"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{/* Grid Coordinates watermark */}
|
||||
<text x="30" y="40" fill="#188754" opacity="0.35" fontSize="10" fontFamily="monospace">MAP: WATERLOO-2026</text>
|
||||
|
||||
{/* Stylized River (Vaigai River representation) */}
|
||||
<path
|
||||
d="M -50 400 C 150 350 250 180 400 150 C 550 120 650 280 850 250"
|
||||
stroke="#188754"
|
||||
strokeWidth="24"
|
||||
strokeLinecap="round"
|
||||
opacity="0.08"
|
||||
/>
|
||||
<path
|
||||
d="M -50 400 C 150 350 250 180 400 150 C 550 120 650 280 850 250"
|
||||
stroke="#188754"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="8 8"
|
||||
opacity="0.3"
|
||||
/>
|
||||
|
||||
{/* Stylized Local Highways */}
|
||||
<path
|
||||
d="M 50 20 L 750 430"
|
||||
stroke="rgba(212, 175, 55, 0.05)"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M 50 430 L 750 20"
|
||||
stroke="rgba(212, 175, 55, 0.05)"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
|
||||
{/* The Main Route Path (Airport -> Temple -> Station -> Restaurant) */}
|
||||
<path
|
||||
id="route-path"
|
||||
d="M 100 350 C 200 300 220 250 280 220 C 350 185 410 380 480 320 C 560 250 600 200 680 180"
|
||||
stroke="#D4AF37"
|
||||
strokeWidth="3.5"
|
||||
strokeDasharray="6 6"
|
||||
strokeLinecap="round"
|
||||
opacity="0.65"
|
||||
className="animate-[dash_20s_linear_infinite]"
|
||||
/>
|
||||
|
||||
{/* Animated Golden Chariot/Car moving along route-path */}
|
||||
<g>
|
||||
<circle r="6" fill="#E67E22" className="animate-ping" style={{ animationDuration: "2s" }} />
|
||||
<path d="M-6 -4 L6 0 L-6 4 Z" fill="#D4AF37" stroke="#0B0504" strokeWidth="1">
|
||||
<animateMotion
|
||||
dur="15s"
|
||||
repeatCount="indefinite"
|
||||
rotate="auto"
|
||||
>
|
||||
<mpath href="#route-path" />
|
||||
</animateMotion>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
{/* Render Landmarks Pins */}
|
||||
{landmarks.map((pin) => {
|
||||
const isActive = activePin === pin.id;
|
||||
|
||||
return (
|
||||
<g
|
||||
key={pin.id}
|
||||
className="cursor-pointer"
|
||||
onMouseEnter={() => setActivePin(pin.id)}
|
||||
onMouseLeave={() => setActivePin(null)}
|
||||
>
|
||||
{/* Outer breathing ring */}
|
||||
<circle
|
||||
cx={pin.x}
|
||||
cy={pin.y}
|
||||
r={pin.isDestination ? "18" : "12"}
|
||||
fill={pin.isDestination ? "rgba(74, 14, 23, 0.4)" : "rgba(212, 175, 55, 0.1)"}
|
||||
stroke={pin.isDestination ? "#D4AF37" : "rgba(212,175,55,0.4)"}
|
||||
strokeWidth={pin.isDestination ? "2" : "1"}
|
||||
className={isActive ? "scale-110 transition-transform duration-300" : "animate-pulse"}
|
||||
style={{ animationDuration: pin.isDestination ? "1.5s" : "3s" }}
|
||||
/>
|
||||
|
||||
{/* Inner Pin center */}
|
||||
<circle
|
||||
cx={pin.x}
|
||||
cy={pin.y}
|
||||
r={pin.isDestination ? "6" : "4"}
|
||||
fill={pin.isDestination ? "#E67E22" : "#D4AF37"}
|
||||
/>
|
||||
|
||||
{/* Landmark Label */}
|
||||
<text
|
||||
x={pin.x}
|
||||
y={pin.y - 25}
|
||||
textAnchor="middle"
|
||||
fill={isActive ? "#F3E5AB" : "#D4AF37"}
|
||||
fontSize={pin.isDestination ? "12" : "10"}
|
||||
fontWeight={pin.isDestination ? "bold" : "normal"}
|
||||
fontFamily="var(--font-cinzel), serif"
|
||||
className="tracking-wider uppercase text-glow"
|
||||
>
|
||||
{pin.shortName}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
|
||||
{/* Dynamic interactive information panel overlay */}
|
||||
<div className="absolute bottom-6 right-6 left-6 md:left-auto md:w-80 p-5 rounded-lg glass border border-gold/20 shadow-2xl z-20 transition-all duration-300">
|
||||
<h4 className="font-serif text-gold text-xs tracking-[0.2em] uppercase mb-2 flex items-center gap-1.5">
|
||||
<Navigation size={12} className="animate-pulse" /> Access Route Details
|
||||
</h4>
|
||||
|
||||
{activePin ? (
|
||||
// Active pin details
|
||||
(() => {
|
||||
const pin = landmarks.find((l) => l.id === activePin);
|
||||
return (
|
||||
<div>
|
||||
<h5 className="font-serif text-stone-900 text-sm font-bold tracking-wide uppercase mb-1">
|
||||
{pin?.name}
|
||||
</h5>
|
||||
<span className="font-sans text-[10px] text-gold-dark tracking-widest uppercase block mb-2 font-bold">
|
||||
Distance: {pin?.distance}
|
||||
</span>
|
||||
<p className="font-sans text-[11px] text-stone-700 leading-relaxed tracking-wider">
|
||||
{pin?.desc}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
) : (
|
||||
// Default guide text
|
||||
<div>
|
||||
<p className="font-sans text-[11px] text-stone-600 leading-relaxed tracking-wide">
|
||||
Hover over the glowing nodes on the cartographic map to audit pick-up pathways and transit distances.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes dash {
|
||||
to {
|
||||
stroke-dashoffset: -120;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -89,10 +89,10 @@ export default function SpatialSanctuary() {
|
||||
<div
|
||||
ref={trackRef}
|
||||
className="absolute top-0 left-0 h-full flex flex-row items-center z-10"
|
||||
style={{ width: `${(gallerySlides.length + 1) * 100}vw` }}
|
||||
style={{ width: "max-content" }}
|
||||
>
|
||||
|
||||
{/* ==================== SLIDE 1: THE SPATIAL SANCTUARY MAIN COVER ==================== */}
|
||||
{/* ==================== SLIDE 1: THE CULINARY HERITAGE MAIN COVER ==================== */}
|
||||
<div className="w-screen h-screen flex-shrink-0 relative flex flex-col justify-center px-6 sm:px-12 md:px-16 pt-12 pb-20 overflow-hidden bg-[#fdfcf7]">
|
||||
{/* Parchment background image for Slide 1 */}
|
||||
<Image
|
||||
@ -118,14 +118,14 @@ export default function SpatialSanctuary() {
|
||||
<path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" />
|
||||
</svg>
|
||||
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||
— OUR STORY —
|
||||
— THE GASTRONOMY —
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Main Headline */}
|
||||
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase mb-4">
|
||||
The Spatial<br />
|
||||
<span className="text-[#bc9e65] font-extrabold block mt-1">Sanctuary</span>
|
||||
Our Culinary<br />
|
||||
<span className="text-[#bc9e65] font-extrabold block mt-1">Heritage</span>
|
||||
</h2>
|
||||
|
||||
{/* Traditional Gold Divider */}
|
||||
@ -139,7 +139,7 @@ export default function SpatialSanctuary() {
|
||||
|
||||
{/* Description narrative */}
|
||||
<p className="font-sans text-xs sm:text-sm text-stone-700 leading-relaxed tracking-wider max-w-lg mb-6">
|
||||
Swipe or scroll to explore the visual spatial transitions of My Dosa Place, bringing heritage pillars, brass lanterns, and set feast tables to life.
|
||||
Swipe or scroll to explore the rich, traditional recipes of My Dosa Place, bringing stone-ground batters, fresh local spices, and traditional techniques to life.
|
||||
</p>
|
||||
|
||||
{/* Scroll Down Slide Indicator */}
|
||||
@ -156,55 +156,56 @@ export default function SpatialSanctuary() {
|
||||
{/* Grid of 4 Sanctuary Features */}
|
||||
<div className="grid grid-cols-2 gap-4 w-full max-w-lg">
|
||||
|
||||
{/* Card 1: Pillars */}
|
||||
{/* Card 1: Recipes */}
|
||||
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M6 20V4M18 20V4M4 20h16M4 4h16M9 8h6M9 12h6M9 16h6" strokeLinecap="round" />
|
||||
<path d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" strokeLinecap="round" />
|
||||
</svg>
|
||||
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Heritage Pillars
|
||||
Heritage Recipes
|
||||
</h5>
|
||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
|
||||
Timeless architecture rooted in tradition.
|
||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-500 leading-relaxed max-w-[110px]">
|
||||
Timeless recipes rooted in tradition.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Lanterns */}
|
||||
{/* Card 2: Ghee */}
|
||||
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M12 2v3M8 9h8v8H8zM12 17v5M5 9c0-3.5 3-4 7-4s7 .5 7 4" strokeLinecap="round" />
|
||||
<path d="M12 3v18M3 12h18M12 3a9 9 0 009 9M12 3a9 9 0 01-9 9M12 21a9 9 0 009-9M12 21a9 9 0 01-9-9" strokeLinecap="round" />
|
||||
</svg>
|
||||
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Brass Lanterns
|
||||
Pure A2 Ghee
|
||||
</h5>
|
||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
|
||||
Traditional lighting that sets the mood.
|
||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-500 leading-relaxed max-w-[110px]">
|
||||
Traditional ghee that enriches the flavor.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 3: Feast Tables */}
|
||||
{/* Card 3: Dosa */}
|
||||
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M3 10h18M5 10v9M19 10v9M8 6h8M12 3v3" strokeLinecap="round" />
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M8 12a4 4 0 108 0" strokeLinecap="round" />
|
||||
</svg>
|
||||
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Set Feast Tables
|
||||
Artisanal Dosa
|
||||
</h5>
|
||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
|
||||
Every table is a celebration of South Indian flavors.
|
||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-500 leading-relaxed max-w-[110px]">
|
||||
Stone-ground batter fermented to perfection.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 4: Hospitality */}
|
||||
{/* Card 4: Feasts */}
|
||||
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
|
||||
</svg>
|
||||
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Warm Hospitality
|
||||
Imperial Feasts
|
||||
</h5>
|
||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
|
||||
Where every guest feels at home.
|
||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-500 leading-relaxed max-w-[110px]">
|
||||
Grand platters reflecting royal tastes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -229,46 +230,275 @@ export default function SpatialSanctuary() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ==================== SLIDES 2-4: HORIZONTAL GALLERY DETAILS ==================== */}
|
||||
{gallerySlides.map((slide, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="w-screen h-screen flex-shrink-0 flex items-center justify-center relative p-8 md:p-16 bg-[#060b08]"
|
||||
>
|
||||
<div className="relative w-full h-[85%] md:h-[80%] rounded-xl overflow-hidden border border-gold/10 group shadow-[0_30px_70px_rgba(0,0,0,0.8)]">
|
||||
{/* Image Layer */}
|
||||
<div className="absolute inset-0 w-full h-full">
|
||||
{/* ==================== BENTO GRID: HORIZONTAL SCROLLING GALLERY ==================== */}
|
||||
<div className="h-screen flex-shrink-0 w-max flex items-center px-8 sm:px-12 md:px-16 relative bg-[#fdfcf7] py-12 select-none z-10">
|
||||
{/* Parchment background image for Bento Grid */}
|
||||
<Image
|
||||
src={slide.img || ""}
|
||||
alt={slide.title}
|
||||
src="/images/sanctuary_bg.png"
|
||||
alt="Traditional South Indian Sanctuary Background"
|
||||
fill
|
||||
sizes="90vw"
|
||||
className="gallery-img object-cover brightness-[0.65] contrast-[1.05] transition-all duration-[1s]"
|
||||
className="object-fill pointer-events-none select-none z-0"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#060b08] via-transparent to-transparent opacity-85" />
|
||||
|
||||
{/* 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-35 z-10" />
|
||||
|
||||
{/* Grid Layout Container */}
|
||||
<div className="grid grid-rows-2 auto-cols-[190px] sm:auto-cols-[220px] md:auto-cols-[230px] grid-flow-col gap-6 h-[75vh] max-h-[620px] w-max relative z-10 pr-12">
|
||||
|
||||
{/* Card 1: Row 1, Col 1 - Cream Intro Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-5 flex flex-col justify-center select-text relative">
|
||||
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
|
||||
<span className="font-sans text-[8px] sm:text-[9px] tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
|
||||
— The Masterpieces —
|
||||
</span>
|
||||
<h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-2">
|
||||
Culinary Art
|
||||
</h3>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-700 leading-relaxed">
|
||||
Every category is a chapter of South Indian gastronomy, curated to showcase heritage and flavor.
|
||||
</p>
|
||||
<div className="flex items-center gap-1.5 mt-3 text-[#bc9e65]">
|
||||
<span className="font-sans text-[8px] tracking-[0.15em] font-bold uppercase">Slide to explore</span>
|
||||
<svg className="w-3 h-3 animate-pulse" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
|
||||
<path d="M9 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Corner Filigree Borders */}
|
||||
<div className="absolute inset-4 border border-gold/10 rounded-lg pointer-events-none z-20" />
|
||||
<div className="absolute inset-[22px] border border-dashed border-gold/5 rounded-lg pointer-events-none z-20" />
|
||||
|
||||
{/* Glassmorphic Description overlay card */}
|
||||
<div className="absolute bottom-10 left-6 md:left-12 max-w-md p-6 md:p-8 rounded-lg bg-black/45 backdrop-blur-md border border-[#d8c396]/25 shadow-2xl z-30 transition-transform duration-500 hover:-translate-y-2 select-text text-left">
|
||||
<span className="font-sans text-[9px] tracking-[0.3em] text-[#bc9e65] font-bold block mb-2 pointer-events-none select-none">
|
||||
{slide.subtitle}
|
||||
{/* Card 2: Row 2, Col 1 - Breakfast Classics Image Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full relative rounded-2xl overflow-hidden border border-[#d8c396]/60 shadow-sm group bg-[#0a4a2b]/10">
|
||||
<Image
|
||||
src="/images/masala_dosa_luxury.png"
|
||||
alt="Breakfast Classics"
|
||||
fill
|
||||
sizes="240px"
|
||||
className="gallery-img object-cover transition-all duration-[1s]"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 z-20">
|
||||
<span className="font-sans text-[8px] tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
|
||||
Breakfast Classics
|
||||
</span>
|
||||
<h4 className="font-serif text-xs font-bold text-white uppercase tracking-wider leading-tight">
|
||||
Crispy Ghee Roasts
|
||||
</h4>
|
||||
</div>
|
||||
<div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
|
||||
</div>
|
||||
|
||||
<h3 className="font-serif text-2xl font-bold text-white tracking-wide uppercase mb-3 pointer-events-none select-none">
|
||||
{slide.title}
|
||||
{/* Card 3: Row 1, Col 2 & 3 - Double-Width Thali Highlight (Dark Green Card) */}
|
||||
<div className="row-span-1 col-span-2 w-full h-full bg-[#0a4a2b] border border-[#bc9e65]/40 rounded-2xl shadow-md flex flex-col sm:flex-row overflow-hidden relative group">
|
||||
<div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none rounded-xl z-20" />
|
||||
{/* Left text section */}
|
||||
<div className="w-full sm:w-[50%] p-5 sm:p-6 flex flex-col justify-center select-text relative z-10">
|
||||
<span className="font-sans text-[8px] tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
|
||||
— Heirloom Platter —
|
||||
</span>
|
||||
<h3 className="font-serif text-base sm:text-lg md:text-xl font-bold tracking-wider text-white uppercase mb-2">
|
||||
Royal Feast
|
||||
</h3>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-[#e4d7bc] leading-relaxed">
|
||||
Experience the grand Chola Samrat Thali, bringing twenty hand-turned heirloom dishes together on a banana leaf.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-3 text-[#bc9e65]">
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M8 12a4 4 0 108 0" strokeLinecap="round" />
|
||||
</svg>
|
||||
<span className="font-serif text-[9px] sm:text-[10px] tracking-[0.05em] font-semibold">Imperial Banquet</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right image section */}
|
||||
<div className="w-full sm:w-[50%] h-[150px] sm:h-full relative overflow-hidden">
|
||||
<Image
|
||||
src="/images/south_indian_thali_luxury.png"
|
||||
alt="Royal Feast Thali"
|
||||
fill
|
||||
sizes="480px"
|
||||
className="gallery-img object-cover transition-all duration-[1s]"
|
||||
/>
|
||||
<div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="font-sans text-xs md:text-sm text-stone-200 leading-relaxed tracking-wide">
|
||||
{slide.desc}
|
||||
{/* Card 4: Row 2, Col 2 - Rooted in Tradition Cream Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-5 flex flex-col justify-center select-text relative">
|
||||
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
|
||||
<span className="font-sans text-[8px] sm:text-[9px] tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
|
||||
— The Foundation —
|
||||
</span>
|
||||
<h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-2">
|
||||
Stone Batter
|
||||
</h3>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-700 leading-relaxed">
|
||||
Batter fermented for 12 hours, stone-ground daily to achieve the perfect crispness and tang.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 5: Row 2, Col 3 - South Indian Feast Image Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full relative rounded-2xl overflow-hidden border border-[#d8c396]/60 shadow-sm group bg-[#0a4a2b]/10">
|
||||
<Image
|
||||
src="/images/south_indian_thali_luxury.png"
|
||||
alt="South Indian Feast"
|
||||
fill
|
||||
sizes="240px"
|
||||
className="gallery-img object-cover transition-all duration-[1s]"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 z-20">
|
||||
<span className="font-sans text-[8px] tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
|
||||
Imperial Platter
|
||||
</span>
|
||||
<h4 className="font-serif text-xs font-bold text-white uppercase tracking-wider leading-tight">
|
||||
20 Heirloom Delicacies
|
||||
</h4>
|
||||
</div>
|
||||
<div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
|
||||
</div>
|
||||
|
||||
{/* Card 6: Row 1, Col 4 - Dark Green Madras Filter Coffee Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full bg-[#0a4a2b] border border-[#bc9e65]/40 rounded-2xl shadow-sm p-5 flex flex-col justify-center select-text relative">
|
||||
<div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none rounded-xl" />
|
||||
<span className="font-sans text-[8px] tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
|
||||
— A Sip of Tradition —
|
||||
</span>
|
||||
<h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-white uppercase mb-2">
|
||||
Filter Coffee
|
||||
</h3>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-[#e4d7bc] leading-relaxed">
|
||||
Strong, aromatic brew of premium chicory-coffee, hand-frothed in traditional brass tumblers.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-3 text-[#bc9e65]">
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<path d="M12 2v3M8 9h8v8H8zM12 17v5M5 9c0-3.5 3-4 7-4s7 .5 7 4" strokeLinecap="round" />
|
||||
</svg>
|
||||
<span className="font-serif text-[9px] sm:text-[10px] tracking-[0.05em] font-semibold">Frothed Brews</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 7: Row 2, Col 4 - Dosa Perfection Image Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full relative rounded-2xl overflow-hidden border border-[#d8c396]/60 shadow-sm group bg-[#0a4a2b]/10">
|
||||
<Image
|
||||
src="/images/masala_dosa_luxury.png"
|
||||
alt="Dosa Perfection"
|
||||
fill
|
||||
sizes="240px"
|
||||
className="gallery-img object-cover transition-all duration-[1s]"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 z-20">
|
||||
<span className="font-sans text-[8px] tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
|
||||
Dosa Court
|
||||
</span>
|
||||
<h4 className="font-serif text-xs font-bold text-white uppercase tracking-wider leading-tight">
|
||||
A2 Ghee Roast
|
||||
</h4>
|
||||
</div>
|
||||
<div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
|
||||
</div>
|
||||
|
||||
{/* Card 8: Row 1, Col 5 - Chef's Specials Image Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full relative rounded-2xl overflow-hidden border border-[#d8c396]/60 shadow-sm group bg-[#0a4a2b]/10">
|
||||
<Image
|
||||
src="/images/my_dosa_place_food_royal.png"
|
||||
alt="Chef's Specials"
|
||||
fill
|
||||
sizes="240px"
|
||||
className="gallery-img object-cover transition-all duration-[1s]"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 z-20">
|
||||
<span className="font-sans text-[8px] tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
|
||||
Chef's Specials
|
||||
</span>
|
||||
<h4 className="font-serif text-xs font-bold text-white uppercase tracking-wider leading-tight">
|
||||
Seasonal Creations
|
||||
</h4>
|
||||
</div>
|
||||
<div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
|
||||
</div>
|
||||
|
||||
{/* Card 9: Row 2, Col 5 - Pure Ingredients Cream Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-5 flex flex-col justify-center select-text relative">
|
||||
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
|
||||
<span className="font-sans text-[8px] sm:text-[9px] tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
|
||||
— Purity Checked —
|
||||
</span>
|
||||
<h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-2">
|
||||
Pure A2 Ghee
|
||||
</h3>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-700 leading-relaxed">
|
||||
Enriched with hand-churned A2 cow ghee and cold-pressed coconut oil.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 10: Row 1, Col 6 - Traditional Spices Cream Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-5 flex flex-col justify-center select-text relative">
|
||||
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
|
||||
<span className="font-sans text-[8px] sm:text-[9px] tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
|
||||
— Aromatic Notes —
|
||||
</span>
|
||||
<h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-2">
|
||||
Organic Spices
|
||||
</h3>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-700 leading-relaxed">
|
||||
Hand-selected black pepper, cardamom, turmeric, and dry chilies sourced from local hills.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 11: Row 2, Col 6 - Curry Court Image Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full relative rounded-2xl overflow-hidden border border-[#d8c396]/60 shadow-sm group bg-[#0a4a2b]/10">
|
||||
<Image
|
||||
src="/images/my_dosa_place_food_traditional.png"
|
||||
alt="Curry Court"
|
||||
fill
|
||||
sizes="240px"
|
||||
className="gallery-img object-cover transition-all duration-[1s]"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 z-20">
|
||||
<span className="font-sans text-[8px] tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
|
||||
Curry Court
|
||||
</span>
|
||||
<h4 className="font-serif text-xs font-bold text-white uppercase tracking-wider leading-tight">
|
||||
Smoked Clay Pots
|
||||
</h4>
|
||||
</div>
|
||||
<div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
|
||||
</div>
|
||||
|
||||
{/* Card 12: Row 1, Col 7 - Sweet Delights Dark Green Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full bg-[#0a4a2b] border border-[#bc9e65]/40 rounded-2xl shadow-sm p-5 flex flex-col justify-center select-text relative">
|
||||
<div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none rounded-xl" />
|
||||
<span className="font-sans text-[8px] tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
|
||||
— Nectars of the South —
|
||||
</span>
|
||||
<h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-white uppercase mb-2">
|
||||
Sweet Delights
|
||||
</h3>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-[#e4d7bc] leading-relaxed">
|
||||
End your feast with traditional payasam, cardamomy kesari, and coconut sweets.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 13: Row 2, Col 7 - Beverage Bar Image Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full relative rounded-2xl overflow-hidden border border-[#d8c396]/60 shadow-sm group bg-[#0a4a2b]/10">
|
||||
<Image
|
||||
src="/images/menu_brass_pot.png"
|
||||
alt="Beverage Bar"
|
||||
fill
|
||||
sizes="240px"
|
||||
className="gallery-img object-cover transition-all duration-[1s]"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 z-20">
|
||||
<span className="font-sans text-[8px] tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
|
||||
Traditional Drinks
|
||||
</span>
|
||||
<h4 className="font-serif text-xs font-bold text-white uppercase tracking-wider leading-tight">
|
||||
Froth Brews & Nectars
|
||||
</h4>
|
||||
</div>
|
||||
<div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,148 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Star, Quote, Sparkles } from "lucide-react";
|
||||
|
||||
export default function Testimonials() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Testimonials database
|
||||
const reviews = [
|
||||
{
|
||||
name: "Aishwarya Krishnan",
|
||||
role: "Culinary Critic, Madras Digest",
|
||||
quote: "My Dosa Place is not merely a restaurant; it is a culinary sanctuary. The ghee roast dosa had the exact golden ghee crunch that I've only ever tasted in heritage kitchens. The visual focus onto our set table completes this extraordinary sensory theatre.",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
name: "Dr. Raghavan Pillai",
|
||||
role: "Heritage Historian",
|
||||
quote: "Dining here felt like attending a grand royal feast in a Chola palace. The attention to traditional serving etiquette, the stone-paved floor, and the hand-ground masalas are a testament to true preservation of culture.",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
name: "Siddharth Malhotra",
|
||||
role: "Luxury Connoisseur",
|
||||
quote: "The WebGL 3D interface was impressive, but the real-life experience surpassed it. The Chef's storytelling through spices, the live flute tunes, and the incredible banana-leaf thali is unmatched. A true 5-star experience.",
|
||||
rating: 5,
|
||||
},
|
||||
];
|
||||
|
||||
// 3D Card Hover Tilt logic (programmatic per card)
|
||||
const Card = ({ review }: { review: typeof reviews[0] }) => {
|
||||
const cardRef = useRef<HTMLDivElement>(null);
|
||||
const [rotateX, setRotateX] = useState(0);
|
||||
const [rotateY, setRotateY] = useState(0);
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const card = cardRef.current;
|
||||
if (!card) return;
|
||||
const rect = card.getBoundingClientRect();
|
||||
const width = rect.width;
|
||||
const height = rect.height;
|
||||
const mouseX = e.clientX - rect.left - width / 2;
|
||||
const mouseY = e.clientY - rect.top - height / 2;
|
||||
|
||||
// Calculate rotation angles (max 12 degrees)
|
||||
const rX = -(mouseY / (height / 2)) * 10;
|
||||
const rY = (mouseX / (width / 2)) * 10;
|
||||
|
||||
setRotateX(rX);
|
||||
setRotateY(rY);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setRotateX(0);
|
||||
setRotateY(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={cardRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
className="w-full flex-shrink-0 lg:flex-1 h-full perspective-[1000px] z-10"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ rotateX, rotateY }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 25 }}
|
||||
className="clickable h-full flex flex-col justify-between p-8 rounded-xl glass border border-gold/15 shadow-[0_20px_50px_rgba(0,0,0,0.6)] relative overflow-hidden group"
|
||||
style={{ transformStyle: "preserve-3d" }}
|
||||
>
|
||||
{/* Decorative Corner Borders */}
|
||||
<div className="absolute top-2 left-2 w-3 h-3 border-t border-l border-gold/30" />
|
||||
<div className="absolute top-2 right-2 w-3 h-3 border-t border-r border-gold/30" />
|
||||
<div className="absolute bottom-2 left-2 w-3 h-3 border-b border-l border-gold/30" />
|
||||
<div className="absolute bottom-2 right-2 w-3 h-3 border-b border-r border-gold/30" />
|
||||
|
||||
{/* Background Ambient Glow */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-gold/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
|
||||
|
||||
{/* Quote Icon */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="flex gap-1">
|
||||
{Array.from({ length: review.rating }).map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
size={14}
|
||||
className="text-gold fill-gold drop-shadow-[0_0_5px_rgba(212,175,55,0.6)] animate-pulse"
|
||||
style={{ animationDelay: `${i * 0.2}s` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Quote size={24} className="text-gold/25 group-hover:text-gold/50 transition-colors duration-300" />
|
||||
</div>
|
||||
|
||||
{/* Review Text */}
|
||||
<p className="font-sans text-xs md:text-sm text-stone-700 leading-relaxed tracking-wider mb-8 italic">
|
||||
"{review.quote}"
|
||||
</p>
|
||||
|
||||
{/* Reviewer Details */}
|
||||
<div className="border-t border-gold/15 pt-4 flex flex-col">
|
||||
<span className="font-serif text-sm font-bold text-stone-900 tracking-widest uppercase">
|
||||
{review.name}
|
||||
</span>
|
||||
<span className="font-sans text-[10px] text-gold-dark font-bold tracking-widest uppercase mt-0.5">
|
||||
{review.role}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden bg-darkbg border-b border-gold/10"
|
||||
>
|
||||
{/* Background Graphic elements */}
|
||||
<div className="absolute top-[20%] right-[-10%] w-96 h-96 rounded-full bg-maroon/10 blur-[150px] pointer-events-none" />
|
||||
<div className="absolute bottom-[20%] left-[-10%] w-96 h-96 rounded-full bg-gold/5 blur-[150px] pointer-events-none" />
|
||||
|
||||
<div className="container max-w-6xl mx-auto relative z-10">
|
||||
|
||||
{/* Title */}
|
||||
<div className="mb-16 flex flex-col items-center text-center">
|
||||
<span className="font-sans text-[10px] tracking-[0.4em] uppercase text-gold font-semibold flex items-center gap-2 mb-3">
|
||||
<Sparkles size={12} className="animate-pulse" /> H O N O R E D P A T R O N S
|
||||
</span>
|
||||
<h2 className="font-serif text-4xl md:text-6xl font-bold tracking-wide text-foreground uppercase text-glow">
|
||||
GUEST CRITICS & DIARIES
|
||||
</h2>
|
||||
<div className="w-20 h-[1.5px] bg-gold mt-4" />
|
||||
</div>
|
||||
|
||||
{/* Reviews Cards Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch min-h-[380px]">
|
||||
{reviews.map((review, idx) => (
|
||||
<Card key={idx} review={review} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user