alaguraj/my-dosa-place-cinematic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

images updated

Browse Source
This commit is contained in:
Selvi 2026-07-20 20:00:42 +05:30
commit c2dd471507
4 changed files with 90 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
fix_grid.js Normal file
View File

@ -0,0 +1,31 @@
const fs = require('fs');
const file = 'src/components/SpatialSanctuary.tsx';
let content = fs.readFileSync(file, 'utf8');
// Fix cream/dark green cards padding
content = content.replace(/rounded-2xl shadow-sm p-6 flex flex-col/g, 'rounded-2xl shadow-sm p-4 sm:p-6 flex flex-col');
// Fix intro card 4, 6, 9, 10, 12 small subtitle
content = content.replace(/<span className="font-sans text-sm tracking-\[0.25em\] uppercase text-\[\#bc9e65\] font-bold block mb-1">/g, '<span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">');
content = content.replace(/<span className="font-sans text-sm sm:text-sm tracking-\[0.25em\] uppercase text-\[\#bc9e65\] font-bold block mb-1">/g, '<span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">');
// Fix intro card 4, 6, 9, 10, 12 title
content = content.replace(/<h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-\[\#0a4a2b\] uppercase mb-2">/g, '<h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">');
content = content.replace(/<h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-white uppercase mb-2">/g, '<h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-white uppercase mb-1 sm:mb-2">');
// Fix intro card 4, 6, 9, 10, 12 desc
content = content.replace(/<p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed">/g, '<p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm:leading-relaxed">');
content = content.replace(/<p className="font-sans text-base sm:text-base text-\[\#e4d7bc\] leading-relaxed">/g, '<p className="font-sans text-xs sm:text-base text-[#e4d7bc] leading-snug sm:leading-relaxed">');
// Fix image cards padding
content = content.replace(/<div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black\/90 via-black\/60 to-transparent p-4 z-20">/g, '<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">');
// Fix image cards subtitle
content = content.replace(/<span className="font-sans text-sm tracking-\[0.15em\] text-\[\#bc9e65\] font-bold uppercase block mb-0.5">/g, '<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">');
// Fix image cards title
content = content.replace(/<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">/g, '<h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">');
// Write back
fs.writeFileSync(file, content);
console.log('Fixed cards formatting');

12
src/components/ChefShowcase.tsx
View File

@ -314,7 +314,7 @@ export default function ChefShowcase() {
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.8, ease: "easeOut" }} transition={{ duration: 0.8, ease: "easeOut" }}
className="lg:col-span-7 flex justify-end" className="lg:col-span-7 flex justify-end mb-24 lg:mb-0"
> >
<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"> <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">
@ -329,23 +329,23 @@ export default function ChefShowcase() {
{/* Text content details */} {/* Text content details */}
<div className="relative z-10 flex flex-col gap-1.5 pl-2 max-w-[95%]"> <div className="relative z-10 flex flex-col gap-1.5 pl-2 max-w-[95%]">
<span className="font-sans text-sm sm:text-base tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase pointer-events-none select-none"> <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase pointer-events-none select-none">
— THE ESSENCE OF — — THE ESSENCE OF —
</span> </span>
<h4 className="font-serif text-lg sm:text-lg font-bold text-[#a83232] tracking-wider uppercase mb-1"> <h4 className="font-serif text-base sm:text-lg font-bold text-[#a83232] tracking-wider uppercase mb-1">
Heritage Spices Heritage Spices
</h4> </h4>
<p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed max-w-[85%]"> <p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm:leading-relaxed max-w-[95%] sm:max-w-[85%]">
Handpicked spices from the best regions of India, blended with time-honored techniques to create unforgettable flavors. Handpicked spices from the best regions of India, blended with time-honored techniques to create unforgettable flavors.
</p> </p>
{/* Explorer Button */} {/* Explorer Button */}
<div className="mt-3 select-none"> <div className="mt-3 sm:mt-4 select-none">
<a <a
href="#menu" href="#menu"
className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-[#0a4a2b] border border-[#d8c396]/80 text-base font-sans font-bold text-[#fcfaf2] tracking-[0.15em] uppercase hover:bg-[#0c5030] hover:border-[#bc9e65] transition-all duration-300 shadow-md" className="inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-5 sm:py-2 rounded-full bg-[#0a4a2b] border border-[#d8c396]/80 text-[10px] sm:text-base font-sans font-bold text-[#fcfaf2] tracking-[0.1em] sm:tracking-[0.15em] uppercase hover:bg-[#0c5030] hover:border-[#bc9e65] transition-all duration-300 shadow-md whitespace-nowrap w-fit"
> >
Explore Our Menu → Explore Our Menu →
</a> </a>

4
src/components/MenuPreview.tsx
View File

@ -237,7 +237,7 @@ export default function MenuPreview() {
<section <section
ref={sectionRef} ref={sectionRef}
id="menu" id="menu"
className="relative min-h-screen py-24 md:py-32 px-6 sm:px-12 md:px-24 overflow-hidden select-none" className="relative min-h-screen py-24 md:py-32 px-6 sm:px-12 md:px-24 overflow-hidden select-none bg-[#fbfaf5]"
> >
{/* Traditional Background Image containing pre-composed sketches, leaves, and brass pots */} {/* Traditional Background Image containing pre-composed sketches, leaves, and brass pots */}
<Image <Image
@ -245,7 +245,7 @@ export default function MenuPreview() {
alt="Traditional South Indian Menu Background" alt="Traditional South Indian Menu Background"
fill fill
priority priority
className="object-fill pointer-events-none select-none z-0" className="object-cover object-center pointer-events-none select-none z-0 opacity-80"
/> />
{/* Traditional Temple Borders */} {/* Traditional Temple Borders */}

102
src/components/SpatialSanctuary.tsx
View File

@ -235,21 +235,21 @@ export default function SpatialSanctuary() {
<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" /> <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 */} {/* Grid Layout Container */}
<div className="grid grid-rows-2 auto-cols-[220px] sm:auto-cols-[250px] md:auto-cols-[270px] grid-flow-col gap-6 h-[75vh] max-h-[680px] w-max relative z-10 pr-24"> <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 */} {/* 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="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" /> <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
<span className="font-sans text-sm sm:text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1"> <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 — — The Masterpieces —
</span> </span>
<h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-2"> <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">
Culinary Art Culinary Art
</h3> </h3>
<p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed"> <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. Every category is a chapter of South Indian gastronomy, curated to showcase heritage and flavor.
</p> </p>
<div className="flex items-center gap-1.5 mt-3 text-[#bc9e65]"> <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> <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"> <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" /> <path d="M9 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
@ -266,11 +266,11 @@ export default function SpatialSanctuary() {
sizes="240px" sizes="240px"
className="gallery-img object-cover transition-all duration-[1s]" 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"> <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-sm tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5"> <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 Breakfast Classics
</span> </span>
<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight"> <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
Crispy Ghee Roasts Crispy Ghee Roasts
</h4> </h4>
</div> </div>
@ -281,26 +281,26 @@ export default function SpatialSanctuary() {
<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="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" /> <div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none rounded-xl z-20" />
{/* Left text section */} {/* Left text section */}
<div className="w-full sm:w-[50%] p-5 sm:p-7 flex flex-col justify-center select-text relative z-10"> <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-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1"> <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 — — Heirloom Platter —
</span> </span>
<h3 className="font-serif text-lg sm:text-lg md:text-xl font-bold tracking-wider text-white uppercase mb-2"> <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 Royal Feast
</h3> </h3>
<p className="font-sans text-base sm:text-base text-[#e4d7bc] leading-relaxed"> <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. Experience the grand Chola Samrat Thali, bringing twenty hand-turned heirloom dishes together on a banana leaf.
</p> </p>
<div className="flex items-center gap-2 mt-3 text-[#bc9e65]"> <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"> <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" /> <circle cx="12" cy="12" r="10" />
<path d="M8 12a4 4 0 108 0" strokeLinecap="round" /> <path d="M8 12a4 4 0 108 0" strokeLinecap="round" />
</svg> </svg>
<span className="font-serif text-sm sm:text-base tracking-[0.05em] font-semibold">Imperial Banquet</span> <span className="font-serif text-xs sm:text-base tracking-[0.05em] font-semibold">Imperial Banquet</span>
</div> </div>
</div> </div>
{/* Right image section */} {/* Right image section */}
<div className="w-full sm:w-[50%] h-[150px] sm:h-full relative overflow-hidden"> <div className="hidden sm:block w-full sm:w-[50%] h-[150px] sm:h-full relative overflow-hidden">
<Image <Image
src="/images/home/culinary-heritage/cards/royal-feast.webp" src="/images/home/culinary-heritage/cards/royal-feast.webp"
alt="Royal Feast Thali" alt="Royal Feast Thali"
@ -313,15 +313,15 @@ export default function SpatialSanctuary() {
</div> </div>
{/* Card 4: Row 2, Col 2 - Rooted in Tradition Cream Card */} {/* 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-6 flex flex-col justify-center select-text relative"> <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" /> <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
<span className="font-sans text-sm sm:text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1"> <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 — — The Foundation —
</span> </span>
<h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-2"> <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">
Stone Batter Stone Batter
</h3> </h3>
<p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed"> <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. Batter fermented for 12 hours, stone-ground daily to achieve the perfect crispness and tang.
</p> </p>
</div> </div>
@ -335,11 +335,11 @@ export default function SpatialSanctuary() {
sizes="240px" sizes="240px"
className="gallery-img object-cover transition-all duration-[1s]" 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"> <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-sm tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5"> <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 Imperial Platter
</span> </span>
<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight"> <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
20 Heirloom Delicacies 20 Heirloom Delicacies
</h4> </h4>
</div> </div>
@ -347,15 +347,15 @@ export default function SpatialSanctuary() {
</div> </div>
{/* Card 6: Row 1, Col 4 - Dark Green Madras Filter Coffee Card */} {/* 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-6 flex flex-col justify-center select-text relative"> <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" /> <div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none rounded-xl" />
<span className="font-sans text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1"> <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 — — A Sip of Tradition —
</span> </span>
<h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-white uppercase mb-2"> <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-white uppercase mb-1 sm:mb-2">
Filter Coffee Filter Coffee
</h3> </h3>
<p className="font-sans text-base sm:text-base text-[#e4d7bc] leading-relaxed"> <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. Strong, aromatic brew of premium chicory-coffee, hand-frothed in traditional brass tumblers.
</p> </p>
<div className="flex items-center gap-2 mt-3 text-[#bc9e65]"> <div className="flex items-center gap-2 mt-3 text-[#bc9e65]">
@ -375,11 +375,11 @@ export default function SpatialSanctuary() {
sizes="240px" sizes="240px"
className="gallery-img object-cover transition-all duration-[1s]" 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"> <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-sm tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5"> <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 Dosa Court
</span> </span>
<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight"> <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
A2 Ghee Roast A2 Ghee Roast
</h4> </h4>
</div> </div>
@ -395,11 +395,11 @@ export default function SpatialSanctuary() {
sizes="240px" sizes="240px"
className="gallery-img object-cover transition-all duration-[1s]" 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"> <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-sm tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5"> <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 Chef's Specials
</span> </span>
<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight"> <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
Seasonal Creations Seasonal Creations
</h4> </h4>
</div> </div>
@ -407,29 +407,29 @@ export default function SpatialSanctuary() {
</div> </div>
{/* Card 9: Row 2, Col 5 - Pure Ingredients Cream Card */} {/* 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-6 flex flex-col justify-center select-text relative"> <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" /> <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
<span className="font-sans text-sm sm:text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1"> <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 — — Purity Checked —
</span> </span>
<h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-2"> <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">
Pure A2 Ghee Pure A2 Ghee
</h3> </h3>
<p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed"> <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. Enriched with hand-churned A2 cow ghee and cold-pressed coconut oil.
</p> </p>
</div> </div>
{/* Card 10: Row 1, Col 6 - Traditional Spices Cream Card */} {/* 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-6 flex flex-col justify-center select-text relative"> <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" /> <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
<span className="font-sans text-sm sm:text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1"> <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 — — Aromatic Notes —
</span> </span>
<h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-2"> <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">
Organic Spices Organic Spices
</h3> </h3>
<p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed"> <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. Hand-selected black pepper, cardamom, turmeric, and dry chilies sourced from local hills.
</p> </p>
</div> </div>
@ -443,11 +443,11 @@ export default function SpatialSanctuary() {
sizes="240px" sizes="240px"
className="gallery-img object-cover transition-all duration-[1s]" 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"> <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-sm tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5"> <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 Curry Court
</span> </span>
<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight"> <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
Smoked Clay Pots Smoked Clay Pots
</h4> </h4>
</div> </div>
@ -455,15 +455,15 @@ export default function SpatialSanctuary() {
</div> </div>
{/* Card 12: Row 1, Col 7 - Sweet Delights Dark Green Card */} {/* 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-6 flex flex-col justify-center select-text relative"> <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" /> <div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none rounded-xl" />
<span className="font-sans text-sm tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1"> <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 — — Nectars of the South —
</span> </span>
<h3 className="font-serif text-lg sm:text-lg font-bold tracking-wider text-white uppercase mb-2"> <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-white uppercase mb-1 sm:mb-2">
Sweet Delights Sweet Delights
</h3> </h3>
<p className="font-sans text-base sm:text-base text-[#e4d7bc] leading-relaxed"> <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. End your feast with traditional payasam, cardamomy kesari, and coconut sweets.
</p> </p>
</div> </div>
@ -477,11 +477,11 @@ export default function SpatialSanctuary() {
sizes="240px" sizes="240px"
className="gallery-img object-cover transition-all duration-[1s]" 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"> <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-sm tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5"> <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 Traditional Drinks
</span> </span>
<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight"> <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
Froth Brews & Nectars Froth Brews & Nectars
</h4> </h4>
</div> </div>