507 lines
28 KiB
TypeScript
507 lines
28 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import gsap from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import Image from "next/image";
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
export default function SpatialSanctuary() {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const trackRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const container = containerRef.current;
|
|
const track = trackRef.current;
|
|
if (!container || !track) return;
|
|
|
|
const ctx = gsap.context(() => {
|
|
// Calculate horizontal translation distance
|
|
const trackWidth = track.scrollWidth;
|
|
const scrollDistance = trackWidth - window.innerWidth;
|
|
|
|
// Horizontal Scroll Trigger for track sliding
|
|
const scrollTween = gsap.to(track, {
|
|
x: -scrollDistance,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: container,
|
|
pin: true,
|
|
start: "top top",
|
|
end: `+=${scrollDistance}`, // scroll length matches translation
|
|
scrub: 1,
|
|
invalidateOnRefresh: true,
|
|
},
|
|
});
|
|
|
|
// Parallax Zoom Effect on individual slide images
|
|
const images = track.querySelectorAll(".gallery-img");
|
|
images.forEach((img) => {
|
|
gsap.fromTo(
|
|
img,
|
|
{ scale: 1.0 },
|
|
{
|
|
scale: 1.12,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: img,
|
|
containerAnimation: scrollTween, // sync with horizontal tween
|
|
start: "left right",
|
|
end: "right left",
|
|
scrub: true,
|
|
},
|
|
}
|
|
);
|
|
});
|
|
}, container);
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
const gallerySlides = [
|
|
{
|
|
title: "The Teakwood Columns",
|
|
subtitle: "T H E T E A K C O U R T",
|
|
desc: "Supported by eighty grand hand-carved pillars sourced from Chettinad, framing a courtyard that captures cooling cross-breezes.",
|
|
img: "/images/chettinad_interior.png",
|
|
},
|
|
{
|
|
title: "The Royal Banquet Court",
|
|
subtitle: "I M P E R I A L D I N I N G",
|
|
desc: "Our ceremonial feast hall features heavy teak tables, soft yellow lanterns, and floral motifs (Kolams) hand-drawn with rice flour daily.",
|
|
img: "/images/royal_dining_experience.png",
|
|
},
|
|
{
|
|
title: "The Sanctuary Lobby",
|
|
subtitle: "T H E W E L C O M E A N T E R O O M",
|
|
desc: "Paved with rough-cut temple stone tiles, featuring bubbling brass vessels (urlis) filled with fresh jasmine buds and marigolds.",
|
|
img: "/images/south_indian_welcome.png",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className="relative w-full h-screen overflow-hidden bg-[#060b08] select-none"
|
|
>
|
|
{/* Horizontal Scroll Track container */}
|
|
<div
|
|
ref={trackRef}
|
|
className="absolute top-0 left-0 h-full flex flex-row items-center z-10"
|
|
style={{ width: "max-content" }}
|
|
>
|
|
|
|
{/* ==================== SLIDE 1: THE CULINARY HERITAGE MAIN COVER ==================== */}
|
|
<div className="w-screen h-screen flex-shrink-0 relative flex flex-col justify-start lg:justify-center px-4 sm:px-12 md:px-16 pt-20 lg:pt-12 pb-24 lg:pb-20 overflow-y-auto lg:overflow-hidden bg-[#fdfcf7] custom-scrollbar">
|
|
{/* Parchment background image for Slide 1 */}
|
|
<Image
|
|
src="/images/home/culinary-heritage/our-culinary-heritage-bg-1.webp"
|
|
alt="Traditional South Indian Sanctuary Background"
|
|
fill
|
|
priority
|
|
className="object-fill pointer-events-none select-none z-0"
|
|
/>
|
|
|
|
{/* 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" />
|
|
|
|
{/* Slide Content layout */}
|
|
<div className="max-w-7xl mx-auto w-full flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12 relative z-10">
|
|
|
|
{/* Left Side details */}
|
|
<div className="w-full lg:w-[50%] flex flex-col items-center lg:items-start text-center lg:text-left justify-start lg:justify-center select-text">
|
|
|
|
{/* Pre-title with Gold star crest */}
|
|
<div className="flex flex-col items-center lg:items-start 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">
|
|
— 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-2 lg:mb-4">
|
|
Our Culinary<br />
|
|
<span className="text-[#bc9e65] font-extrabold block mt-1">Heritage</span>
|
|
</h2>
|
|
|
|
{/* Traditional Gold Divider */}
|
|
<div className="flex items-center gap-3 w-40 mb-5 justify-center lg:justify-start 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>
|
|
|
|
{/* Description narrative */}
|
|
<p className="font-sans text-xs sm:text-base text-stone-700 leading-relaxed tracking-wider max-w-lg mb-4 lg:mb-6">
|
|
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 */}
|
|
<div className="flex items-center gap-2 mb-4 lg:mb-6 pointer-events-none select-none text-[#bc9e65]">
|
|
<span className="font-sans text-sm tracking-[0.2em] font-bold uppercase">
|
|
Scroll down to slide right
|
|
</span>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M12 8v8M12 16l4-4M12 16l-4-4" />
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Grid of 4 Sanctuary Features */}
|
|
<div className="grid grid-cols-2 gap-4 w-full max-w-lg">
|
|
|
|
{/* Card 1: Recipes */}
|
|
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
|
|
<Image src="/images/home/culinary-heritage/icons/culinary-heritage.webp" alt="Heritage Recipes" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
|
|
<h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
|
|
Heritage Recipes
|
|
</h5>
|
|
<p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
|
|
Timeless recipes rooted in tradition.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Card 2: Ghee */}
|
|
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
|
|
<Image src="/images/home/culinary-heritage/icons/culinary-pure.webp" alt="Pure A2 Ghee" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
|
|
<h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
|
|
Pure A2 Ghee
|
|
</h5>
|
|
<p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
|
|
Traditional ghee that enriches the flavor.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Card 3: Dosa */}
|
|
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
|
|
<Image src="/images/home/culinary-heritage/icons/culinary-dosa.webp" alt="Artisanal Dosa" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
|
|
<h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
|
|
Artisanal Dosa
|
|
</h5>
|
|
<p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
|
|
Stone-ground batter fermented to perfection.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Card 4: Feasts */}
|
|
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
|
|
<Image src="/images/home/culinary-heritage/icons/culinary-feast.webp" alt="Imperial Feasts" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
|
|
<h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
|
|
Imperial Feasts
|
|
</h5>
|
|
<p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
|
|
Grand platters reflecting royal tastes.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Right Side: Thali Archway photo overlap */}
|
|
<div className="hidden lg:flex w-full lg:w-[46%] justify-center lg:justify-end relative select-none pointer-events-none mt-6 lg:mt-0">
|
|
<div className="w-[180px] h-[180px] sm:w-[320px] sm:h-[320px] md:w-[400px] md:h-[400px] lg:w-[480px] lg:h-[480px] relative">
|
|
<Image
|
|
src="/images/home/culinary-heritage/our-culinary-heritage-right.webp"
|
|
alt="My Dosa Place Spatial Dining Sanctuary"
|
|
fill
|
|
sizes="(max-width: 1024px) 100vw, 46vw"
|
|
className="object-contain"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* ==================== 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 pr-16 sm:pr-20 md:pr-24 relative bg-[#fdfcf7] py-12 select-none z-10">
|
|
{/* Parchment background image for Bento Grid */}
|
|
<Image
|
|
src="/images/home/culinary-heritage/our-culinary-heritage-bg-2.webp"
|
|
alt="Traditional South Indian Sanctuary Background"
|
|
fill
|
|
className="object-fill pointer-events-none select-none z-0"
|
|
/>
|
|
|
|
{/* 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-[200px] sm:auto-cols-[250px] md:auto-cols-[270px] grid-flow-col gap-4 sm:gap-6 h-[65vh] sm:h-[75vh] max-h-[680px] w-max relative z-10 pr-24">
|
|
|
|
{/* 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-4 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-[10px] sm:text-sm tracking-[0.2em] sm: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-1 sm:mb-2">
|
|
Culinary Art
|
|
</h3>
|
|
<p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm: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-2 sm:mt-3 text-[#bc9e65]">
|
|
<span className="font-sans text-sm 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>
|
|
|
|
{/* 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/home/culinary-heritage/cards/crispy-ghee-roast.webp"
|
|
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-3 sm:p-4 z-20">
|
|
<span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
|
|
Breakfast Classics
|
|
</span>
|
|
<h4 className="font-serif text-xs sm:text-sm 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>
|
|
|
|
{/* 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-4 sm:p-7 flex flex-col justify-center select-text relative z-10">
|
|
<span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm: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-1 sm:mb-2">
|
|
Royal Feast
|
|
</h3>
|
|
<p className="font-sans text-xs sm:text-base text-[#e4d7bc] leading-snug sm: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-2 sm: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-xs sm:text-base tracking-[0.05em] font-semibold">Imperial Banquet</span>
|
|
</div>
|
|
</div>
|
|
{/* Right image section */}
|
|
<div className="hidden sm:block w-full sm:w-[50%] h-[150px] sm:h-full relative overflow-hidden">
|
|
<Image
|
|
src="/images/home/culinary-heritage/cards/royal-feast.webp"
|
|
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>
|
|
|
|
{/* 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-4 sm:p-6 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-[10px] sm:text-sm tracking-[0.2em] sm: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-1 sm:mb-2">
|
|
Stone Batter
|
|
</h3>
|
|
<p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm: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/home/culinary-heritage/cards/heirloom.webp"
|
|
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-3 sm:p-4 z-20">
|
|
<span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
|
|
Imperial Platter
|
|
</span>
|
|
<h4 className="font-serif text-xs sm:text-sm 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-4 sm:p-6 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-[10px] sm:text-sm tracking-[0.2em] sm: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-1 sm:mb-2">
|
|
Filter Coffee
|
|
</h3>
|
|
<p className="font-sans text-xs sm:text-base text-[#e4d7bc] leading-snug sm: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-sm sm:text-base 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/home/culinary-heritage/cards/ghee-roast.webp"
|
|
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-3 sm:p-4 z-20">
|
|
<span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
|
|
Dosa Court
|
|
</span>
|
|
<h4 className="font-serif text-xs sm:text-sm 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/home/culinary-heritage/cards/seasonal-creations.webp"
|
|
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-3 sm:p-4 z-20">
|
|
<span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
|
|
Chef's Specials
|
|
</span>
|
|
<h4 className="font-serif text-xs sm:text-sm 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-4 sm:p-6 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-[10px] sm:text-sm tracking-[0.2em] sm: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-1 sm:mb-2">
|
|
Pure A2 Ghee
|
|
</h3>
|
|
<p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm: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-4 sm:p-6 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-[10px] sm:text-sm tracking-[0.2em] sm: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-1 sm:mb-2">
|
|
Organic Spices
|
|
</h3>
|
|
<p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm: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/home/culinary-heritage/cards/smoked.webp"
|
|
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-3 sm:p-4 z-20">
|
|
<span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
|
|
Curry Court
|
|
</span>
|
|
<h4 className="font-serif text-xs sm:text-sm 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-4 sm:p-6 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-[10px] sm:text-sm tracking-[0.2em] sm: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-1 sm:mb-2">
|
|
Sweet Delights
|
|
</h3>
|
|
<p className="font-sans text-xs sm:text-base text-[#e4d7bc] leading-snug sm: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/home/culinary-heritage/cards/nectar.webp"
|
|
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-3 sm:p-4 z-20">
|
|
<span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
|
|
Traditional Drinks
|
|
</span>
|
|
<h4 className="font-serif text-xs sm:text-sm 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>
|
|
|
|
{/* ==================== PINNED BOTTOM BANNER BAR (OUTSIDE TRACK) ==================== */}
|
|
<div className="absolute bottom-0 left-0 w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-2.5 z-30 flex items-center justify-center gap-2 sm:gap-4 pointer-events-none select-none">
|
|
<span className="font-serif text-sm text-[#bc9e65] font-semibold italic hidden sm:block">My Dosa Place</span>
|
|
<span className="h-4 w-[1px] bg-[#bc9e65]/40 hidden sm:block" />
|
|
<span className="font-sans text-[9px] sm:text-sm tracking-[0.1em] sm:tracking-[0.25em] text-[#bc9e65] font-bold uppercase text-center px-2">
|
|
ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
} |