home page font size increased
This commit is contained in:
parent
6b6682a9a9
commit
9e4ab57004
@ -139,7 +139,7 @@ export default function ChefShowcase() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container max-w-6xl mx-auto relative z-10 flex flex-col gap-12 sm:gap-16">
|
||||
<div className="container max-w-7xl mx-auto relative z-10 flex flex-col gap-12 sm:gap-16">
|
||||
|
||||
{/* Main 2-Column Info & Portrait Header */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
||||
@ -155,7 +155,7 @@ export default function ChefShowcase() {
|
||||
|
||||
<div className="flex flex-col items-center lg:items-start mb-2">
|
||||
<ChefLotusOrnament />
|
||||
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||
<span className="font-sans text-base sm:text-base tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||
— OUR MASTER CHEF —
|
||||
</span>
|
||||
</div>
|
||||
@ -173,13 +173,13 @@ export default function ChefShowcase() {
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<span className="font-sans text-[#bc9e65] text-xs sm:text-[13px] tracking-[0.3em] font-bold block mb-6 uppercase">
|
||||
<span className="font-sans text-[#bc9e65] text-sm sm:text-lg tracking-[0.3em] font-bold block mb-6 uppercase">
|
||||
Heritage. Passion. Perfection.
|
||||
</span>
|
||||
|
||||
<StoryLotusDivider />
|
||||
|
||||
<p className="font-sans text-xs sm:text-sm text-stone-200 leading-relaxed tracking-wider max-w-xl mb-8">
|
||||
<p className="font-sans text-sm sm:text-base text-stone-200 leading-relaxed tracking-wider max-w-2xl mb-8">
|
||||
With three decades of culinary devotion, Chef Mendia Juxef 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>
|
||||
|
||||
@ -211,8 +211,8 @@ export default function ChefShowcase() {
|
||||
<svg className="w-4 h-4 text-[#bc9e65] opacity-85 mb-0.5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 2L11.5 7L16 8L11.5 9L10 14L8.5 9L4 8L8.5 7Z" />
|
||||
</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-serif text-lg sm:text-[18px] font-bold text-[#bc9e65] leading-none">30+</span>
|
||||
<span className="font-sans text-[7px] sm:text-sm 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-[#e4d7bc] uppercase font-semibold leading-relaxed mt-0.5 max-w-[80px]">Of Culinary Excellence</span>
|
||||
</div>
|
||||
|
||||
@ -252,29 +252,29 @@ export default function ChefShowcase() {
|
||||
{/* Feature 1: Authentic Recipes */}
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
<Image src="/images/home/chef/icons/chef-authentic.webp" alt="Authentic Recipes" width={45} height={45} className="object-contain mb-2.5" />
|
||||
<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-300 leading-relaxed max-w-[150px] mx-auto">Traditional recipes passed down through generations.</p>
|
||||
<h5 className="font-serif text-base sm:text-sm font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Authentic Recipes</h5>
|
||||
<p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[150px] mx-auto">Traditional recipes passed down through generations.</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2: Pure Vegetarian */}
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
<Image src="/images/home/chef/icons/chef-pure-veg.webp" alt="Pure Vegetarian" width={45} height={45} className="object-contain mb-2.5" />
|
||||
<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-300 leading-relaxed max-w-[150px] mx-auto">100% pure veg, made with the finest natural ingredients.</p>
|
||||
<h5 className="font-serif text-base sm:text-sm font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Pure Vegetarian</h5>
|
||||
<p className="font-sans text-base sm:text-base 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 */}
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
<Image src="/images/home/chef/icons/chef-wood.webp" alt="Wood Fire Cooking" width={45} height={45} className="object-contain mb-2.5" />
|
||||
<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-300 leading-relaxed max-w-[150px] mx-auto">Infused with the aroma of wood fire and heritage.</p>
|
||||
<h5 className="font-serif text-base sm:text-sm font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Wood Fire Cooking</h5>
|
||||
<p className="font-sans text-base sm:text-base 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 */}
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
<Image src="/images/home/chef/icons/chef-love.webp" alt="Cooked With Love" width={45} height={45} className="object-contain mb-2.5" />
|
||||
<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-300 leading-relaxed max-w-[150px] mx-auto">Every dish is prepared with care, devotion & warmth.</p>
|
||||
<h5 className="font-serif text-base sm:text-sm font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Cooked With Love</h5>
|
||||
<p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[150px] mx-auto">Every dish is prepared with care, devotion & warmth.</p>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
@ -293,7 +293,7 @@ export default function ChefShowcase() {
|
||||
{/* Quote details */}
|
||||
<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%]">
|
||||
<p className="font-sans text-stone-200 text-sm sm:text-base lg:text-lg 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>
|
||||
|
||||
@ -329,15 +329,15 @@ export default function ChefShowcase() {
|
||||
|
||||
{/* Text content details */}
|
||||
<div className="relative z-10 flex flex-col gap-1.5 pl-2 max-w-[95%]">
|
||||
<span className="font-sans text-[9px] sm:text-[10px] tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase pointer-events-none select-none">
|
||||
<span className="font-sans text-sm sm:text-base tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase pointer-events-none select-none">
|
||||
— THE ESSENCE OF —
|
||||
</span>
|
||||
|
||||
<h4 className="font-serif text-[14px] sm:text-[16px] font-bold text-[#a83232] tracking-wider uppercase mb-1">
|
||||
<h4 className="font-serif text-lg sm:text-lg font-bold text-[#a83232] tracking-wider uppercase mb-1">
|
||||
Heritage Spices
|
||||
</h4>
|
||||
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-700 leading-relaxed max-w-[85%]">
|
||||
<p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed max-w-[85%]">
|
||||
Handpicked spices from the best regions of India, blended with time-honored techniques to create unforgettable flavors.
|
||||
</p>
|
||||
|
||||
@ -345,7 +345,7 @@ export default function ChefShowcase() {
|
||||
<div className="mt-3 select-none">
|
||||
<a
|
||||
href="#menu"
|
||||
className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-[#0a4a2b] border border-[#d8c396]/80 text-[10px] 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 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"
|
||||
>
|
||||
Explore Our Menu →
|
||||
</a>
|
||||
@ -363,8 +363,8 @@ export default function ChefShowcase() {
|
||||
|
||||
{/* Rooted Traditional Footer Banner */}
|
||||
<div className="absolute bottom-0 left-0 w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-3 pointer-events-none select-none z-10">
|
||||
<div className="container max-w-6xl mx-auto px-6 text-center">
|
||||
<span className="font-serif text-[9px] sm:text-[11px] tracking-[0.25em] text-[#bc9e65] font-semibold uppercase flex items-center justify-center gap-2">
|
||||
<div className="container max-w-7xl mx-auto px-6 text-center">
|
||||
<span className="font-serif text-sm sm:text-base tracking-[0.25em] text-[#bc9e65] font-semibold uppercase flex items-center justify-center gap-2">
|
||||
❧ ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE ☙
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -182,13 +182,13 @@ export default function CulinaryCategories() {
|
||||
<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 flex-col items-center text-center select-text max-w-3xl">
|
||||
<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">
|
||||
<span className="text-[#bc9e65] text-sm">❧</span>
|
||||
<span className="font-sans text-base sm:text-base tracking-[0.35em] text-[#bc9e65] font-extrabold uppercase">
|
||||
OUR CULINARY CATEGORIES
|
||||
</span>
|
||||
<span className="text-[#bc9e65] text-xs">❧</span>
|
||||
<span className="text-[#bc9e65] text-sm">❧</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">
|
||||
@ -205,7 +205,7 @@ export default function CulinaryCategories() {
|
||||
<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">
|
||||
<p className="font-sans text-sm sm:text-lg 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>
|
||||
@ -262,7 +262,7 @@ export default function CulinaryCategories() {
|
||||
|
||||
{/* 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">
|
||||
<span className="font-sans text-sm 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">
|
||||
@ -270,15 +270,15 @@ export default function CulinaryCategories() {
|
||||
</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]">
|
||||
<p className="font-sans text-stone-300 text-base sm:text-base leading-relaxed tracking-wider mb-4 max-w-[260px]">
|
||||
{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"
|
||||
className="clickable inline-flex items-center gap-2 font-sans font-bold text-sm 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>
|
||||
EXPLORE MENU <span className="text-sm group-hover:translate-x-1 transition-transform duration-300">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
@ -323,10 +323,10 @@ export default function CulinaryCategories() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 className="font-serif text-[13px] lg:text-[14px] font-bold text-white tracking-wider uppercase mb-2 relative z-10">
|
||||
<h3 className="font-serif text-lg lg:text-lg 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">
|
||||
<p className="font-sans text-stone-300 text-sm sm:text-base leading-relaxed tracking-wider mb-5 max-w-[170px] flex-1 relative z-10">
|
||||
{cat.desc}
|
||||
</p>
|
||||
|
||||
@ -336,7 +336,7 @@ export default function CulinaryCategories() {
|
||||
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>
|
||||
<span className="text-sm leading-none group-hover:translate-x-0.5 transition-transform duration-300">→</span>
|
||||
</a>
|
||||
</motion.div>
|
||||
);
|
||||
@ -384,10 +384,10 @@ export default function CulinaryCategories() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 className="font-serif text-[12px] font-bold text-white tracking-wider uppercase mb-1.5 relative z-10">
|
||||
<h3 className="font-serif text-base 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">
|
||||
<p className="font-sans text-stone-300 text-base leading-relaxed tracking-wider mb-4 max-w-[140px] flex-1 relative z-10">
|
||||
{cat.desc}
|
||||
</p>
|
||||
|
||||
@ -397,7 +397,7 @@ export default function CulinaryCategories() {
|
||||
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>
|
||||
<span className="text-base leading-none group-hover:translate-x-0.5 transition-transform duration-300">→</span>
|
||||
</a>
|
||||
</motion.div>
|
||||
);
|
||||
@ -409,7 +409,7 @@ export default function CulinaryCategories() {
|
||||
{/* 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">
|
||||
<span className="font-serif text-sm sm:text-base 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>
|
||||
|
||||
@ -335,7 +335,7 @@ export default function EntranceExperience({ onProgress }: { onProgress?: (progr
|
||||
{!loaded && (
|
||||
<div className="absolute inset-0 flex flex-col justify-center items-center z-50 bg-[#050c08]">
|
||||
<div className="w-12 h-12 rounded-full border-2 border-gold/30 border-t-gold animate-spin mb-4" />
|
||||
<span className="font-serif text-gold text-xs tracking-[0.3em] uppercase animate-pulse">
|
||||
<span className="font-serif text-gold text-sm tracking-[0.3em] uppercase animate-pulse">
|
||||
Entering My Dosa Place...
|
||||
</span>
|
||||
</div>
|
||||
@ -377,12 +377,12 @@ export default function EntranceExperience({ onProgress }: { onProgress?: (progr
|
||||
animate={{ opacity: 1, x: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, x: -50, scale: 0.95 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
className="absolute top-28 left-8 z-30 w-[340px] sm:w-[400px] max-w-[calc(100vw-32px)] max-sm:top-auto max-sm:bottom-16 max-sm:left-4 max-sm:right-4 max-sm:mx-auto bg-[#fcfaf2]/95 border-2 border-double border-gold/45 rounded-3xl p-6 sm:p-8 shadow-2xl pointer-events-none"
|
||||
className="absolute top-28 left-8 z-30 w-[360px] sm:w-[480px] max-w-[calc(100vw-32px)] max-sm:top-auto max-sm:bottom-16 max-sm:left-4 max-sm:right-4 max-sm:mx-auto bg-[#fcfaf2]/95 border-2 border-double border-gold/45 rounded-3xl p-6 sm:p-8 shadow-2xl pointer-events-none"
|
||||
>
|
||||
{/* Inner traditional gold frame */}
|
||||
<div className="absolute top-2 left-2 right-2 bottom-2 border border-gold/15 pointer-events-none rounded-[22px]" />
|
||||
|
||||
<span className="font-sans text-[#188754] text-[10px] sm:text-[11px] tracking-[0.4em] uppercase font-bold block mb-2.5 text-center mt-1">
|
||||
<span className="font-sans text-[#188754] text-base sm:text-base tracking-[0.4em] uppercase font-bold block mb-2.5 text-center mt-1">
|
||||
AUTHENTIC SOUTH INDIAN · PURE VEGETARIAN
|
||||
</span>
|
||||
|
||||
@ -392,7 +392,7 @@ export default function EntranceExperience({ onProgress }: { onProgress?: (progr
|
||||
|
||||
<div className="w-24 h-[1px] bg-gradient-to-r from-transparent via-[#d8c396] to-transparent mx-auto mb-4" />
|
||||
|
||||
<p className="font-sans text-xs sm:text-[13px] text-stone-800 leading-relaxed tracking-wider font-medium text-justify">
|
||||
<p className="font-sans text-sm sm:text-lg text-stone-800 leading-relaxed tracking-wider font-medium text-justify">
|
||||
A tradition older than memory. The table is set for a royal banquet on fresh banana leaves—dosas roasted in pure ghee to a crisp, golden perfection, slow-simmered sambar, and chutneys hand-ground fresh every morning. Served exactly as it was meant to be. 100% pure vegetarian.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@ -132,7 +132,7 @@ export default function EventsAccordion() {
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div className="container max-w-6xl mx-auto relative z-10 flex flex-col h-full">
|
||||
<div className="container max-w-7xl mx-auto relative z-10 flex flex-col h-full">
|
||||
|
||||
{/* Title Block Header */}
|
||||
<motion.div
|
||||
@ -147,7 +147,7 @@ export default function EventsAccordion() {
|
||||
<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">
|
||||
<span className="font-sans text-base sm:text-base tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||
❖ CELEBRATIONS ❖
|
||||
</span>
|
||||
</div>
|
||||
@ -167,12 +167,12 @@ export default function EventsAccordion() {
|
||||
</div>
|
||||
|
||||
{/* Subheading / tagline */}
|
||||
<span className="font-sans text-[#bc9e65] text-xs sm:text-[13px] tracking-[0.3em] font-bold block mb-4 uppercase">
|
||||
<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-xs sm:text-sm text-stone-700 leading-relaxed tracking-wider max-w-xl mx-auto">
|
||||
<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>
|
||||
@ -233,7 +233,7 @@ export default function EventsAccordion() {
|
||||
|
||||
{/* 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]">
|
||||
<h3 className="font-serif text-sm sm:text-base font-bold tracking-[0.3em] uppercase text-[#0a4a2b]">
|
||||
{event.title}
|
||||
</h3>
|
||||
</div>
|
||||
@ -247,7 +247,7 @@ export default function EventsAccordion() {
|
||||
|
||||
{/* 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]">
|
||||
<span className="font-serif text-base font-bold text-[#bc9e65]">
|
||||
0{idx + 1}
|
||||
</span>
|
||||
</div>
|
||||
@ -278,26 +278,26 @@ export default function EventsAccordion() {
|
||||
|
||||
{/* 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">
|
||||
<span className="font-sans 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-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">
|
||||
<p className="font-serif text-sm 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">
|
||||
<p className="font-sans text-sm sm:text-base 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"
|
||||
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-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)"
|
||||
}}
|
||||
|
||||
@ -42,10 +42,10 @@ export default function Footer() {
|
||||
<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">
|
||||
<span className="font-serif text-[#bc9e65] text-lg 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">
|
||||
<span className="font-serif text-[#bc9e65] text-lg sm:text-[17px] tracking-[0.35em] uppercase block mb-2">
|
||||
PLACE
|
||||
</span>
|
||||
|
||||
@ -61,7 +61,7 @@ export default function Footer() {
|
||||
|
||||
<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">
|
||||
<p className="font-sans text-sm text-stone-300 leading-relaxed tracking-wider select-text">
|
||||
Waterloo's premier 100% pure vegetarian restaurant, serving authentic dosa in Waterloo. Enjoy crispy ghee roast dosa, lentil sambar, and home-ground chutneys made fresh daily using time-honoured recipes.
|
||||
</p>
|
||||
</div>
|
||||
@ -88,7 +88,7 @@ export default function Footer() {
|
||||
href="#"
|
||||
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"
|
||||
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-sm transition-all duration-300"
|
||||
>
|
||||
G
|
||||
</a>
|
||||
@ -101,7 +101,7 @@ export default function Footer() {
|
||||
<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">
|
||||
<h4 className="font-serif text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
|
||||
Quick Links
|
||||
</h4>
|
||||
{/* Separator */}
|
||||
@ -114,7 +114,7 @@ export default function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="flex flex-col gap-3 font-sans text-xs text-stone-300 tracking-wider">
|
||||
<ul className="flex flex-col gap-3 font-sans text-sm text-stone-300 tracking-wider">
|
||||
<li>
|
||||
<a href="#story" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
|
||||
Our Story
|
||||
@ -144,7 +144,7 @@ export default function Footer() {
|
||||
<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">
|
||||
<h4 className="font-serif text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
|
||||
Feast Sessions
|
||||
</h4>
|
||||
{/* Separator */}
|
||||
@ -157,7 +157,7 @@ export default function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 font-sans text-xs text-stone-300 tracking-wider">
|
||||
<div className="flex flex-col gap-4 font-sans text-sm 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">
|
||||
@ -169,7 +169,7 @@ export default function Footer() {
|
||||
</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="font-bold text-[#bc9e65] uppercase text-base tracking-widest">Wednesday – Monday</span>
|
||||
<span className="text-stone-300 mt-0.5">04:30 PM – 10:00 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -188,7 +188,7 @@ export default function Footer() {
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex flex-col select-text">
|
||||
<span className="font-bold text-white uppercase text-[10px] tracking-widest">Tuesday</span>
|
||||
<span className="font-bold text-white uppercase text-base tracking-widest">Tuesday</span>
|
||||
<span className="text-stone-400 mt-0.5">Closed</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -201,7 +201,7 @@ export default function Footer() {
|
||||
<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">
|
||||
<h4 className="font-serif text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
|
||||
The Dining Court
|
||||
</h4>
|
||||
{/* Separator */}
|
||||
@ -214,7 +214,7 @@ export default function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 font-sans text-xs text-stone-300 tracking-wider">
|
||||
<div className="flex flex-col gap-4 font-sans text-sm 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">
|
||||
@ -242,7 +242,7 @@ export default function Footer() {
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<div className="pt-6 mt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-stone-500 font-sans text-sm 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 */}
|
||||
@ -256,7 +256,7 @@ export default function Footer() {
|
||||
|
||||
<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>
|
||||
<span className="text-sm text-[#bc9e65] leading-none mb-0.5">❧</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ export default function Header({ visible }: { visible: boolean }) {
|
||||
<svg className="w-5 h-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>
|
||||
<span className="font-serif text-[#bc9e65] text-xs sm:text-sm tracking-[0.25em] uppercase font-semibold">
|
||||
<span className="font-serif text-[#bc9e65] text-sm sm:text-base tracking-[0.25em] uppercase font-semibold">
|
||||
MY DOSA PLACE
|
||||
</span>
|
||||
</a>
|
||||
@ -23,31 +23,31 @@ export default function Header({ visible }: { visible: boolean }) {
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<a
|
||||
href="/"
|
||||
className="clickable font-sans text-[10px] sm:text-xs tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<a
|
||||
href="/about"
|
||||
className="clickable font-sans text-[10px] sm:text-xs tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
<a
|
||||
href="/menu"
|
||||
className="clickable font-sans text-[10px] sm:text-xs tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
>
|
||||
Menu
|
||||
</a>
|
||||
<a
|
||||
href="/blog"
|
||||
className="clickable font-sans text-[10px] sm:text-xs tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
<a
|
||||
href="/contact"
|
||||
className="clickable font-sans text-[10px] sm:text-xs tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
@ -57,7 +57,7 @@ export default function Header({ visible }: { visible: boolean }) {
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href="/reservation"
|
||||
className="clickable px-4 sm:px-5 py-2 border border-[#bc9e65]/50 hover:border-[#bc9e65] rounded-full text-[9px] tracking-widest font-sans font-bold text-[#bc9e65] hover:bg-[#bc9e65] hover:text-[#06120c] transition-all duration-300 shadow-md"
|
||||
className="clickable px-4 sm:px-5 py-2 border border-[#bc9e65]/50 hover:border-[#bc9e65] rounded-full text-sm tracking-widest font-sans font-bold text-[#bc9e65] hover:bg-[#bc9e65] hover:text-[#06120c] transition-all duration-300 shadow-md"
|
||||
>
|
||||
RESERVE TABLE
|
||||
</a>
|
||||
|
||||
@ -90,8 +90,8 @@ const CategoryPill = ({ tag, type }: { tag: string; type: "green" | "gold" | "or
|
||||
};
|
||||
const style = styles[type];
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full border text-[9px] font-sans font-bold uppercase tracking-wider shadow-sm flex-shrink-0 ${style.bg}`}>
|
||||
<span className="text-[10px] leading-none font-extrabold">{style.icon}</span>
|
||||
<span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full border text-sm font-sans font-bold uppercase tracking-wider shadow-sm flex-shrink-0 ${style.bg}`}>
|
||||
<span className="text-base leading-none font-extrabold">{style.icon}</span>
|
||||
{tag}
|
||||
</span>
|
||||
);
|
||||
@ -139,14 +139,14 @@ const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { i
|
||||
<div className="relative z-10 flex flex-col gap-1 w-full pl-2">
|
||||
{/* Name and Pill Badge */}
|
||||
<div className="flex items-start justify-between gap-3 w-full">
|
||||
<h3 className="font-serif text-[14px] sm:text-[15.5px] font-bold text-[#0a4a2b] tracking-wider uppercase transition-colors duration-300 group-hover:text-[#bc9e65]">
|
||||
<h3 className="font-serif text-lg sm:text-[15.5px] font-bold text-[#0a4a2b] tracking-wider uppercase transition-colors duration-300 group-hover:text-[#bc9e65]">
|
||||
{name}
|
||||
</h3>
|
||||
<CategoryPill tag={tag} type={type} />
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[95%]">
|
||||
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-[95%]">
|
||||
{desc}
|
||||
</p>
|
||||
</div>
|
||||
@ -262,7 +262,7 @@ export default function MenuPreview() {
|
||||
|
||||
<TitleDivider />
|
||||
|
||||
<p className="font-sans text-xs sm:text-[13px] text-stone-700 max-w-xl mt-4 leading-relaxed tracking-wider italic font-semibold">
|
||||
<p className="font-sans text-sm sm:text-lg text-stone-700 max-w-2xl mt-4 leading-relaxed tracking-wider italic font-semibold">
|
||||
Explore a wide variety of authentic South Indian vegetarian dishes,<br className="hidden sm:inline" />
|
||||
crafted with traditional recipes and the finest ingredients.
|
||||
</p>
|
||||
@ -290,10 +290,10 @@ export default function MenuPreview() {
|
||||
<path d="M 0,7.5 C 5,7.5 15,3 15,3 C 15,3 12,7.5 25,7.5 L 30,7.5 C 28,9 25,12 15,12 C 5,12 0,7.5 0,7.5 Z" />
|
||||
</svg>
|
||||
|
||||
<div className="bg-[#0a4a2b] border border-[#d8c396]/80 px-8 py-2.5 rounded-full z-10 font-serif font-bold text-xs sm:text-sm tracking-[0.25em] text-[#fcfaf2] uppercase shadow-lg flex items-center gap-3">
|
||||
<span className="text-[#d8c396] text-[8px] opacity-75">✦</span>
|
||||
<div className="bg-[#0a4a2b] border border-[#d8c396]/80 px-8 py-2.5 rounded-full z-10 font-serif font-bold text-sm sm:text-base tracking-[0.25em] text-[#fcfaf2] uppercase shadow-lg flex items-center gap-3">
|
||||
<span className="text-[#d8c396] text-sm opacity-75">✦</span>
|
||||
Dosa Specialties
|
||||
<span className="text-[#d8c396] text-[8px] opacity-75">✦</span>
|
||||
<span className="text-[#d8c396] text-sm opacity-75">✦</span>
|
||||
</div>
|
||||
|
||||
{/* Right Scroll */}
|
||||
@ -353,8 +353,8 @@ const BottomFeatures = () => (
|
||||
<Image src="/images/home/menu/icons/menu-pure-veg.webp" alt="100% Vegetarian" width={24} height={24} className="object-contain" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h5 className="font-sans text-[10px] sm:text-[11px] font-bold text-stone-850 tracking-wider uppercase">100% Vegetarian</h5>
|
||||
<p className="font-sans text-[9px] sm:text-[10px] text-stone-500 mt-0.5">Pure Veg. Good Food</p>
|
||||
<h5 className="font-sans text-base sm:text-base font-bold text-stone-850 tracking-wider uppercase">100% Vegetarian</h5>
|
||||
<p className="font-sans text-sm sm:text-base text-stone-500 mt-0.5">Pure Veg. Good Food</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -364,8 +364,8 @@ const BottomFeatures = () => (
|
||||
<Image src="/images/home/menu/icons/menu-authentic.webp" alt="Authentic Recipes" width={24} height={24} className="object-contain" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h5 className="font-sans text-[10px] sm:text-[11px] font-bold text-stone-850 tracking-wider uppercase">Authentic Recipes</h5>
|
||||
<p className="font-sans text-[9px] sm:text-[10px] text-stone-500 mt-0.5">Traditional Taste</p>
|
||||
<h5 className="font-sans text-base sm:text-base font-bold text-stone-850 tracking-wider uppercase">Authentic Recipes</h5>
|
||||
<p className="font-sans text-sm sm:text-base text-stone-500 mt-0.5">Traditional Taste</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -375,8 +375,8 @@ const BottomFeatures = () => (
|
||||
<Image src="/images/home/menu/icons/menu-ingredients.webp" alt="Finest Ingredients" width={24} height={24} className="object-contain" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h5 className="font-sans text-[10px] sm:text-[11px] font-bold text-stone-850 tracking-wider uppercase">Finest Ingredients</h5>
|
||||
<p className="font-sans text-[9px] sm:text-[10px] text-stone-500 mt-0.5">Always Fresh</p>
|
||||
<h5 className="font-sans text-base sm:text-base font-bold text-stone-850 tracking-wider uppercase">Finest Ingredients</h5>
|
||||
<p className="font-sans text-sm sm:text-base text-stone-500 mt-0.5">Always Fresh</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -386,8 +386,8 @@ const BottomFeatures = () => (
|
||||
<Image src="/images/home/menu/icons/menu-love.webp" alt="Made With Love" width={24} height={24} className="object-contain" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h5 className="font-sans text-[10px] sm:text-[11px] font-bold text-stone-850 tracking-wider uppercase">Made With Love</h5>
|
||||
<p className="font-sans text-[9px] sm:text-[10px] text-stone-500 mt-0.5">For You</p>
|
||||
<h5 className="font-sans text-base sm:text-base font-bold text-stone-850 tracking-wider uppercase">Made With Love</h5>
|
||||
<p className="font-sans text-sm sm:text-base text-stone-500 mt-0.5">For You</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -50,7 +50,7 @@ export default function RestaurantStory() {
|
||||
{/* Pre-title with Gold Crest */}
|
||||
<div className="flex flex-col items-center mb-2">
|
||||
<StoryPreTitleOrnament />
|
||||
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||
<span className="font-sans text-base sm:text-base tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||
••••• OUR STORY •••••
|
||||
</span>
|
||||
</div>
|
||||
@ -65,7 +65,7 @@ export default function RestaurantStory() {
|
||||
<StoryLotusDivider />
|
||||
|
||||
{/* Paragraph Narrative */}
|
||||
<p className="font-sans text-xs sm:text-sm lg:text-[15px] text-stone-700 leading-relaxed max-w-xl text-center tracking-wider mb-2 italic font-semibold">
|
||||
<p className="font-sans text-sm sm:text-base lg:text-lg text-stone-700 leading-relaxed max-w-2xl text-center tracking-wider mb-2 italic font-semibold">
|
||||
At My Dosa Place, every recipe carries the memory of a South Indian kitchen—passed from hand to hand, kitchen to kitchen, and generation to generation. Nestled in the heart of Waterloo, we've created a home for those who grew up with these flavours and an introduction for those experiencing them for the first time.
|
||||
</p>
|
||||
|
||||
@ -86,10 +86,10 @@ export default function RestaurantStory() {
|
||||
<div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none overflow-hidden">
|
||||
<Image src="/images/home/our-story/icons/pure-veg.webp" alt="100% Pure Veg" width={32} height={32} className="object-contain" />
|
||||
</div>
|
||||
<h4 className="font-serif text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
<h4 className="font-serif text-base sm:text-sm font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
100% Pure Veg
|
||||
</h4>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
|
||||
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-[220px] mx-auto">
|
||||
Pure vegetarian food made with the finest ingredients.
|
||||
</p>
|
||||
</motion.div>
|
||||
@ -105,10 +105,10 @@ export default function RestaurantStory() {
|
||||
<div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none overflow-hidden">
|
||||
<Image src="/images/home/our-story/icons/authentic.webp" alt="Authentic Recipes" width={32} height={32} className="object-contain" />
|
||||
</div>
|
||||
<h4 className="font-serif text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
<h4 className="font-serif text-base sm:text-sm font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
Authentic Recipes
|
||||
</h4>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
|
||||
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-[220px] mx-auto">
|
||||
Traditional recipes crafted with authentic South Indian flavors.
|
||||
</p>
|
||||
</motion.div>
|
||||
@ -124,10 +124,10 @@ export default function RestaurantStory() {
|
||||
<div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none overflow-hidden">
|
||||
<Image src="/images/home/our-story/icons/hospitality.webp" alt="Warm Hospitality" width={32} height={32} className="object-contain" />
|
||||
</div>
|
||||
<h4 className="font-serif text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
<h4 className="font-serif text-base sm:text-sm font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
Warm Hospitality
|
||||
</h4>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
|
||||
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-[220px] mx-auto">
|
||||
A homely environment with friendly service and a smile.
|
||||
</p>
|
||||
</motion.div>
|
||||
@ -143,10 +143,10 @@ export default function RestaurantStory() {
|
||||
<div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none overflow-hidden">
|
||||
<Image src="/images/home/our-story/icons/love.webp" alt="Made With Love" width={32} height={32} className="object-contain" />
|
||||
</div>
|
||||
<h4 className="font-serif text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
<h4 className="font-serif text-base sm:text-sm font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
Made With Love
|
||||
</h4>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
|
||||
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-[220px] mx-auto">
|
||||
Every dish is prepared with love, care and traditional values.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@ -117,7 +117,7 @@ export default function SpatialSanctuary() {
|
||||
<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">
|
||||
<span className="font-sans text-base sm:text-base tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||
— THE GASTRONOMY —
|
||||
</span>
|
||||
</div>
|
||||
@ -138,13 +138,13 @@ export default function SpatialSanctuary() {
|
||||
</div>
|
||||
|
||||
{/* Description narrative */}
|
||||
<p className="font-sans text-xs sm:text-sm text-stone-700 leading-relaxed tracking-wider max-w-lg mb-6">
|
||||
<p className="font-sans text-sm sm:text-base text-stone-700 leading-relaxed tracking-wider max-w-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-6 pointer-events-none select-none text-[#bc9e65]">
|
||||
<span className="font-sans text-[9px] tracking-[0.2em] font-bold uppercase">
|
||||
<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">
|
||||
@ -159,10 +159,10 @@ export default function SpatialSanctuary() {
|
||||
{/* 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">
|
||||
<Image src="/images/home/culinary-heritage/icons/culinary-heritage.webp" alt="Heritage Recipes" width={32} height={32} className="object-contain mb-2" />
|
||||
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
<h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Heritage Recipes
|
||||
</h5>
|
||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-500 leading-relaxed max-w-[110px]">
|
||||
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[110px]">
|
||||
Timeless recipes rooted in tradition.
|
||||
</p>
|
||||
</div>
|
||||
@ -170,10 +170,10 @@ export default function SpatialSanctuary() {
|
||||
{/* 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">
|
||||
<Image src="/images/home/culinary-heritage/icons/culinary-pure.webp" alt="Pure A2 Ghee" width={32} height={32} className="object-contain mb-2" />
|
||||
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
<h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Pure A2 Ghee
|
||||
</h5>
|
||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-500 leading-relaxed max-w-[110px]">
|
||||
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[110px]">
|
||||
Traditional ghee that enriches the flavor.
|
||||
</p>
|
||||
</div>
|
||||
@ -181,10 +181,10 @@ export default function SpatialSanctuary() {
|
||||
{/* 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">
|
||||
<Image src="/images/home/culinary-heritage/icons/culinary-dosa.webp" alt="Artisanal Dosa" width={32} height={32} className="object-contain mb-2" />
|
||||
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
<h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Artisanal Dosa
|
||||
</h5>
|
||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-500 leading-relaxed max-w-[110px]">
|
||||
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[110px]">
|
||||
Stone-ground batter fermented to perfection.
|
||||
</p>
|
||||
</div>
|
||||
@ -192,10 +192,10 @@ export default function SpatialSanctuary() {
|
||||
{/* 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">
|
||||
<Image src="/images/home/culinary-heritage/icons/culinary-feast.webp" alt="Imperial Feasts" width={32} height={32} className="object-contain mb-2" />
|
||||
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
<h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Imperial Feasts
|
||||
</h5>
|
||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-500 leading-relaxed max-w-[110px]">
|
||||
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[110px]">
|
||||
Grand platters reflecting royal tastes.
|
||||
</p>
|
||||
</div>
|
||||
@ -222,7 +222,7 @@ export default function SpatialSanctuary() {
|
||||
</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 relative bg-[#fdfcf7] py-12 select-none z-10">
|
||||
<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"
|
||||
@ -235,22 +235,22 @@ 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" />
|
||||
|
||||
{/* 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">
|
||||
<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">
|
||||
|
||||
{/* 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">
|
||||
<span className="font-sans text-sm sm:text-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-2">
|
||||
<h3 className="font-serif text-lg 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">
|
||||
<p className="font-sans text-base sm:text-base 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>
|
||||
<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>
|
||||
@ -267,10 +267,10 @@ export default function SpatialSanctuary() {
|
||||
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">
|
||||
<span className="font-sans text-sm 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">
|
||||
<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">
|
||||
Crispy Ghee Roasts
|
||||
</h4>
|
||||
</div>
|
||||
@ -281,14 +281,14 @@ 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="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">
|
||||
<div className="w-full sm:w-[50%] p-5 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">
|
||||
— Heirloom Platter —
|
||||
</span>
|
||||
<h3 className="font-serif text-base sm:text-lg md:text-xl font-bold tracking-wider text-white uppercase mb-2">
|
||||
<h3 className="font-serif text-lg 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">
|
||||
<p className="font-sans text-base sm:text-base 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]">
|
||||
@ -296,7 +296,7 @@ export default function SpatialSanctuary() {
|
||||
<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>
|
||||
<span className="font-serif text-sm sm:text-base tracking-[0.05em] font-semibold">Imperial Banquet</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right image section */}
|
||||
@ -313,15 +313,15 @@ export default function SpatialSanctuary() {
|
||||
</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-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-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-[8px] sm:text-[9px] tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
|
||||
<span className="font-sans text-sm sm:text-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-2">
|
||||
<h3 className="font-serif text-lg 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">
|
||||
<p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed">
|
||||
Batter fermented for 12 hours, stone-ground daily to achieve the perfect crispness and tang.
|
||||
</p>
|
||||
</div>
|
||||
@ -336,10 +336,10 @@ export default function SpatialSanctuary() {
|
||||
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">
|
||||
<span className="font-sans text-sm 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">
|
||||
<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">
|
||||
20 Heirloom Delicacies
|
||||
</h4>
|
||||
</div>
|
||||
@ -347,22 +347,22 @@ export default function SpatialSanctuary() {
|
||||
</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="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="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">
|
||||
<span className="font-sans text-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-2">
|
||||
<h3 className="font-serif text-lg 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">
|
||||
<p className="font-sans text-base sm:text-base 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>
|
||||
<span className="font-serif text-sm sm:text-base tracking-[0.05em] font-semibold">Frothed Brews</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -376,10 +376,10 @@ export default function SpatialSanctuary() {
|
||||
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">
|
||||
<span className="font-sans text-sm 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">
|
||||
<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">
|
||||
A2 Ghee Roast
|
||||
</h4>
|
||||
</div>
|
||||
@ -396,10 +396,10 @@ export default function SpatialSanctuary() {
|
||||
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">
|
||||
<span className="font-sans text-sm 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">
|
||||
<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">
|
||||
Seasonal Creations
|
||||
</h4>
|
||||
</div>
|
||||
@ -407,29 +407,29 @@ export default function SpatialSanctuary() {
|
||||
</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="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="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">
|
||||
<span className="font-sans text-sm sm:text-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-2">
|
||||
<h3 className="font-serif text-lg 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">
|
||||
<p className="font-sans text-base sm:text-base 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="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="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">
|
||||
<span className="font-sans text-sm sm:text-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-2">
|
||||
<h3 className="font-serif text-lg 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">
|
||||
<p className="font-sans text-base sm:text-base text-stone-700 leading-relaxed">
|
||||
Hand-selected black pepper, cardamom, turmeric, and dry chilies sourced from local hills.
|
||||
</p>
|
||||
</div>
|
||||
@ -444,10 +444,10 @@ export default function SpatialSanctuary() {
|
||||
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">
|
||||
<span className="font-sans text-sm 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">
|
||||
<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">
|
||||
Smoked Clay Pots
|
||||
</h4>
|
||||
</div>
|
||||
@ -455,15 +455,15 @@ export default function SpatialSanctuary() {
|
||||
</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="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="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">
|
||||
<span className="font-sans text-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-2">
|
||||
<h3 className="font-serif text-lg 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">
|
||||
<p className="font-sans text-base sm:text-base text-[#e4d7bc] leading-relaxed">
|
||||
End your feast with traditional payasam, cardamomy kesari, and coconut sweets.
|
||||
</p>
|
||||
</div>
|
||||
@ -478,10 +478,10 @@ export default function SpatialSanctuary() {
|
||||
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">
|
||||
<span className="font-sans text-sm 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">
|
||||
<h4 className="font-serif text-sm font-bold text-white uppercase tracking-wider leading-tight">
|
||||
Froth Brews & Nectars
|
||||
</h4>
|
||||
</div>
|
||||
@ -495,9 +495,9 @@ export default function SpatialSanctuary() {
|
||||
|
||||
{/* ==================== 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-4 pointer-events-none select-none">
|
||||
<span className="font-serif text-xs text-[#bc9e65] font-semibold italic">My Dosa Place</span>
|
||||
<span className="font-serif text-sm text-[#bc9e65] font-semibold italic">My Dosa Place</span>
|
||||
<span className="h-4 w-[1px] bg-[#bc9e65]/40" />
|
||||
<span className="font-sans text-[8px] sm:text-[9px] tracking-[0.25em] text-[#bc9e65] font-bold uppercase">
|
||||
<span className="font-sans text-sm sm:text-sm tracking-[0.25em] text-[#bc9e65] font-bold uppercase">
|
||||
ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user