326 lines
18 KiB
TypeScript
326 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
import Image from "next/image";
|
|
|
|
const RoyalFeastsIcon = () => (
|
|
<Image src="/images/home/royal/icons/royal-feast.webp" alt="Royal Feasts" width={28} height={28} className="object-contain" />
|
|
);
|
|
|
|
const HeritageDinnersIcon = () => (
|
|
<Image src="/images/home/royal/icons/heritage-dinner.webp" alt="Heritage Dinners" width={28} height={28} className="object-contain" />
|
|
);
|
|
|
|
const PrivateGatheringsIcon = () => (
|
|
<Image src="/images/home/royal/icons/private-gatherings.webp" alt="Private Gatherings" width={28} height={28} className="object-contain" />
|
|
);
|
|
|
|
const KudumbaDiningIcon = () => (
|
|
<Image src="/images/home/royal/icons/kudumba-dining.webp" alt="Kudumba Dining Experience" width={28} height={28} className="object-contain" />
|
|
);
|
|
|
|
export default function EventsAccordion() {
|
|
const [activeIdx, setActiveIdx] = useState<number>(3); // Set Kudumba Dining (index 3) active by default
|
|
|
|
const events = [
|
|
{
|
|
title: "Royal Feasts",
|
|
tamilTitle: "கல்யாண விருந்து",
|
|
subtitle: "WEDDING BANQUETS",
|
|
desc: "Our South Indian catering service in Waterloo brings authentic flavours to weddings, family gatherings, and corporate events. Enjoy traditional multi-course menus for a true South Indian dining experience.",
|
|
icon: RoyalFeastsIcon,
|
|
bgImage: "/images/home/royal/cards/royal-feast.webp",
|
|
},
|
|
{
|
|
title: "Heritage Dinners",
|
|
tamilTitle: "ஆயுள் விருந்து",
|
|
subtitle: "ANNIVERSARIES & MILESTONES",
|
|
desc: "Celebrate life's biggest moments with a truly memorable dinner venue in Waterloo. Our heritage dining experience honors milestones and family chapters in an intimate, warm-lit setting designed for meaningful gatherings.",
|
|
icon: HeritageDinnersIcon,
|
|
bgImage: "/images/home/royal/cards/heritage-dinner.webp",
|
|
},
|
|
{
|
|
title: "Private Gatherings",
|
|
tamilTitle: "சபை கூட்டங்கள்",
|
|
subtitle: "CORPORATE COLLABORATIONS",
|
|
desc: "Looking for a corporate event venue in Waterloo? Host meetings, presentations, and executive dining in our private rosewood boardroom, complemented by gourmet South Indian catering for a refined and professional experience.",
|
|
icon: PrivateGatheringsIcon,
|
|
bgImage: "/images/home/royal/cards/private-gatherings.webp",
|
|
},
|
|
{
|
|
title: "Kudumba Dining",
|
|
tamilTitle: "குடும்ப விருந்து",
|
|
subtitle: "GRAND FAMILY REUNIONS",
|
|
desc: "Bring the whole family together at Waterloo's most authentic family reunion venue. Our Kudumba Dining experience recreates a true South Indian heritage reunion, complete with traditional brass servers and live folklore music that brings generations closer.",
|
|
icon: KudumbaDiningIcon,
|
|
bgImage: "/images/home/royal/cards/kudumba-dining.webp",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="events" className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden bg-[#fdfcf7]">
|
|
|
|
{/* Background Decorative Layer 1: Pillars setting in soft focus */}
|
|
<div className="absolute inset-0 bg-[url('/images/home/royal/royal-assemblies-bg.webp')] 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-7xl mx-auto relative z-10 flex flex-col h-full">
|
|
|
|
{/* Title Block Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 35 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-80px" }}
|
|
transition={{ duration: 0.75, ease: "easeOut" }}
|
|
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-base sm:text-base tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
|
❖ CELEBRATIONS ❖
|
|
</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 text-glow">
|
|
Royal Assemblies & Events
|
|
</h2>
|
|
|
|
{/* 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-sm sm:text-lg tracking-[0.3em] font-bold block mb-4 uppercase">
|
|
Where Tradition Meets Grandeur
|
|
</span>
|
|
|
|
{/* Bio tagline details */}
|
|
<p className="font-sans text-sm sm:text-base text-stone-700 leading-relaxed tracking-wider max-w-2xl mx-auto">
|
|
From intimate royal gatherings to grand celebrations, experience curated culinary journeys that leave lasting impressions.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.1, ease: "easeOut" }}
|
|
className="flex flex-col lg:flex-row gap-5 max-[400px]:h-[950px] h-[800px] lg:h-[460px] w-full items-stretch relative z-20"
|
|
>
|
|
{events.map((event, idx) => {
|
|
const isActive = idx === activeIdx;
|
|
const CategoryIcon = event.icon;
|
|
|
|
// Compute dynamic width flex basis classes
|
|
const flexClass = isActive
|
|
? "flex-[4] lg:flex-[3.5] bg-opacity-100"
|
|
: "flex-[0.8] lg:flex-[0.8] opacity-80 lg:opacity-95 hover:opacity-100";
|
|
|
|
return (
|
|
<div
|
|
key={idx}
|
|
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}`}
|
|
>
|
|
{/* 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>
|
|
)}
|
|
|
|
{/* Thin inner Gold border outline frame */}
|
|
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
|
|
|
|
{/* Accent strip (horizontal on mobile, vertical on desktop) */}
|
|
<div
|
|
className="absolute left-0 top-0 lg:bottom-0 w-full h-[4px] lg:w-[4px] lg:h-full bg-[#0a4a2b] transition-opacity duration-500"
|
|
style={{ opacity: isActive ? 1 : 0 }}
|
|
/>
|
|
|
|
{/* ==================== CLOSED VIEW CARD ==================== */}
|
|
{!isActive && (
|
|
<div className="flex flex-row lg:flex-col justify-between items-center h-full w-full px-3 sm:px-6 py-4 lg:py-8 lg:px-0 pointer-events-none select-none relative z-10 gap-2">
|
|
|
|
{/* Circle icon container */}
|
|
<div className="w-10 h-10 sm:w-11 sm:h-11 flex-shrink-0 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/50 flex items-center justify-center shadow-sm">
|
|
<CategoryIcon />
|
|
</div>
|
|
|
|
{/* Title text */}
|
|
<div className="relative lg:absolute lg:left-1/2 lg:-translate-x-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:origin-center lg:-rotate-90 whitespace-nowrap text-center overflow-hidden">
|
|
<h3 className="font-serif text-xs sm:text-sm lg:text-base font-bold tracking-[0.1em] sm:tracking-[0.2em] lg:tracking-[0.3em] uppercase text-[#0a4a2b] truncate">
|
|
{event.title}
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Lotus watermark at bottom (Desktop only) */}
|
|
<div className="hidden lg:block 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>
|
|
|
|
{/* Circle number badge */}
|
|
<div className="w-6 h-6 sm:w-7 sm:h-7 flex-shrink-0 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/40 flex items-center justify-center shadow-sm">
|
|
<span className="font-serif text-xs sm:text-base font-bold text-[#bc9e65]">
|
|
0{idx + 1}
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
)}
|
|
|
|
{/* ==================== OPENED VIEW CARD ==================== */}
|
|
{isActive && (
|
|
<div className="p-6 lg:p-8 flex flex-col justify-between h-full select-text text-left relative z-10 w-full overflow-hidden">
|
|
|
|
{/* 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 justify-between h-full lg:justify-center overflow-hidden pr-2">
|
|
|
|
{/* Double gold-rim circle icon container */}
|
|
<div className="w-12 h-12 lg:w-14 lg:h-14 rounded-full border border-[#bc9e65]/45 flex flex-shrink-0 items-center justify-center bg-transparent shadow-sm mb-1 lg:mb-0 mt-4 lg:mt-0">
|
|
<div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-[#bc9e65]/25 flex items-center justify-center">
|
|
<CategoryIcon />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Header subtitles */}
|
|
<div>
|
|
<span className="font-sans text-xs lg:text-sm tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase block mb-1 pointer-events-none select-none">
|
|
{event.subtitle}
|
|
</span>
|
|
<h3 className="font-serif text-xl sm:text-2xl lg:text-3xl font-bold text-[#0a4a2b] uppercase tracking-wider mb-1">
|
|
{event.title}
|
|
</h3>
|
|
<p className="font-serif text-xs lg:text-sm text-[#bc9e65] font-medium tracking-wide mb-2 lg:mb-3 pointer-events-none select-none">
|
|
— {event.tamilTitle} —
|
|
</p>
|
|
</div>
|
|
|
|
{/* Bio narrative */}
|
|
<p className="font-sans text-sm sm:text-base text-stone-700 leading-relaxed max-w-md">
|
|
{event.desc}
|
|
</p>
|
|
|
|
{/* Notched Enquire CTA Button */}
|
|
<div className="mt-4 lg:mt-4 mb-4 lg:mb-0 select-none flex-shrink-0">
|
|
<button
|
|
className="inline-flex items-center justify-center bg-[#0a4a2b] border border-[#d8c396]/80 text-[#fcfaf2] rounded-none px-5 py-2 lg:px-6 lg:py-2.5 uppercase font-sans font-bold text-sm lg:text-base 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-4 right-6 lg:bottom-6 lg:right-8 font-serif text-2xl lg:text-3xl font-bold text-[#bc9e65]/35 pointer-events-none select-none">
|
|
0{idx + 1}
|
|
</div>
|
|
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
} |