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

footer, Culinary section, Assembly section Responsive updated

Browse Source
This commit is contained in:
Vidhya 2026-07-20 17:25:33 +05:30
parent 39fd538a68
commit 94fd66d344
3 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/EventsAccordion.tsx
View File

@ -182,7 +182,7 @@ export default function EventsAccordion() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.8, delay: 0.1, ease: "easeOut" }} transition={{ duration: 0.8, delay: 0.1, ease: "easeOut" }}
className="flex flex-col lg:flex-row gap-5 h-[680px] lg:h-[460px] w-full items-stretch relative z-20" className="flex flex-col lg:flex-row gap-5 h-[800px] lg:h-[460px] w-full items-stretch relative z-20"
> >
{events.map((event, idx) => { {events.map((event, idx) => {
const isActive = idx === activeIdx; const isActive = idx === activeIdx;
@ -266,10 +266,10 @@ export default function EventsAccordion() {
</div> </div>
{/* Details content section */} {/* Details content section */}
<div className="flex flex-col items-start gap-3 lg:gap-4 h-full justify-center overflow-y-auto custom-scrollbar pr-2"> <div className="flex flex-col items-start justify-between h-full lg:justify-center overflow-hidden pr-2">
{/* Double gold-rim circle icon container */} {/* Double gold-rim circle icon container */}
<div className="w-12 h-12 lg:w-14 lg:h-14 rounded-full border border-[#bc9e65]/45 flex flex-shrink-0 items-center justify-center bg-transparent shadow-sm mb-1 lg:mb-0"> <div className="w-12 h-12 lg:w-14 lg:h-14 rounded-full border border-[#bc9e65]/45 flex flex-shrink-0 items-center justify-center bg-transparent shadow-sm mb-1 lg:mb-0 mt-4 lg:mt-0">
<div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-[#bc9e65]/25 flex items-center justify-center"> <div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-[#bc9e65]/25 flex items-center justify-center">
<CategoryIcon /> <CategoryIcon />
</div> </div>
@ -294,7 +294,7 @@ export default function EventsAccordion() {
</p> </p>
{/* Notched Enquire CTA Button */} {/* Notched Enquire CTA Button */}
<div className="mt-2 lg:mt-4 select-none"> <div className="mt-4 lg:mt-4 mb-4 lg:mb-0 select-none flex-shrink-0">
<button <button
className="inline-flex items-center justify-center bg-[#0a4a2b] border border-[#d8c396]/80 text-[#fcfaf2] rounded-none px-5 py-2 lg:px-6 lg:py-2.5 uppercase font-sans font-bold text-sm lg:text-base tracking-wider relative hover:bg-[#0c5030] transition-colors duration-300 shadow-md" className="inline-flex items-center justify-center bg-[#0a4a2b] border border-[#d8c396]/80 text-[#fcfaf2] rounded-none px-5 py-2 lg:px-6 lg:py-2.5 uppercase font-sans font-bold text-sm lg:text-base tracking-wider relative hover:bg-[#0c5030] transition-colors duration-300 shadow-md"
style={{ style={{

2
src/components/Footer.tsx
View File

@ -25,7 +25,7 @@ export default function Footer() {
alt="Footer Backdrop" alt="Footer Backdrop"
fill fill
priority priority
className="object-fill" className="object-cover object-center"
/> />
</div> </div>

54
src/components/SpatialSanctuary.tsx
View File

@ -93,7 +93,7 @@ export default function SpatialSanctuary() {
> >
{/* ==================== SLIDE 1: THE CULINARY HERITAGE MAIN COVER ==================== */} {/* ==================== SLIDE 1: THE CULINARY HERITAGE MAIN COVER ==================== */}
<div className="w-screen h-screen flex-shrink-0 relative flex flex-col justify-center px-6 sm:px-12 md:px-16 pt-12 pb-20 overflow-hidden bg-[#fdfcf7]"> <div className="w-screen h-screen flex-shrink-0 relative flex flex-col justify-start lg:justify-center px-4 sm:px-12 md:px-16 pt-20 lg:pt-12 pb-24 lg:pb-20 overflow-y-auto lg:overflow-hidden bg-[#fdfcf7] custom-scrollbar">
{/* Parchment background image for Slide 1 */} {/* Parchment background image for Slide 1 */}
<Image <Image
src="/images/home/culinary-heritage/our-culinary-heritage-bg-1.webp" src="/images/home/culinary-heritage/our-culinary-heritage-bg-1.webp"
@ -110,7 +110,7 @@ export default function SpatialSanctuary() {
<div className="max-w-7xl mx-auto w-full flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12 relative z-10"> <div className="max-w-7xl mx-auto w-full flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12 relative z-10">
{/* Left Side details */} {/* Left Side details */}
<div className="w-full lg:w-[50%] flex flex-col items-center lg:items-start text-center lg:text-left justify-center select-text"> <div className="w-full lg:w-[50%] flex flex-col items-center lg:items-start text-center lg:text-left justify-start lg:justify-center select-text">
{/* Pre-title with Gold star crest */} {/* Pre-title with Gold star crest */}
<div className="flex flex-col items-center lg:items-start mb-2 pointer-events-none select-none"> <div className="flex flex-col items-center lg:items-start mb-2 pointer-events-none select-none">
@ -123,7 +123,7 @@ export default function SpatialSanctuary() {
</div> </div>
{/* Main Headline */} {/* Main Headline */}
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase mb-4"> <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase mb-2 lg:mb-4">
Our Culinary<br /> Our Culinary<br />
<span className="text-[#bc9e65] font-extrabold block mt-1">Heritage</span> <span className="text-[#bc9e65] font-extrabold block mt-1">Heritage</span>
</h2> </h2>
@ -138,12 +138,12 @@ export default function SpatialSanctuary() {
</div> </div>
{/* Description narrative */} {/* Description narrative */}
<p className="font-sans text-sm sm:text-base text-stone-700 leading-relaxed tracking-wider max-w-lg mb-6"> <p className="font-sans text-xs sm:text-base text-stone-700 leading-relaxed tracking-wider max-w-lg mb-4 lg:mb-6">
Swipe or scroll to explore the rich, traditional recipes of My Dosa Place, bringing stone-ground batters, fresh local spices, and traditional techniques to life. 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> </p>
{/* Scroll Down Slide Indicator */} {/* Scroll Down Slide Indicator */}
<div className="flex items-center gap-2 mb-6 pointer-events-none select-none text-[#bc9e65]"> <div className="flex items-center gap-2 mb-4 lg:mb-6 pointer-events-none select-none text-[#bc9e65]">
<span className="font-sans text-sm tracking-[0.2em] font-bold uppercase"> <span className="font-sans text-sm tracking-[0.2em] font-bold uppercase">
Scroll down to slide right Scroll down to slide right
</span> </span>
@ -157,45 +157,45 @@ export default function SpatialSanctuary() {
<div className="grid grid-cols-2 gap-4 w-full max-w-lg"> <div className="grid grid-cols-2 gap-4 w-full max-w-lg">
{/* Card 1: Recipes */} {/* 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"> <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
<Image src="/images/home/culinary-heritage/icons/culinary-heritage.webp" alt="Heritage Recipes" width={32} height={32} className="object-contain mb-2" /> <Image src="/images/home/culinary-heritage/icons/culinary-heritage.webp" alt="Heritage Recipes" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
<h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1"> <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
Heritage Recipes Heritage Recipes
</h5> </h5>
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[180px]"> <p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
Timeless recipes rooted in tradition. Timeless recipes rooted in tradition.
</p> </p>
</div> </div>
{/* Card 2: Ghee */} {/* 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"> <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
<Image src="/images/home/culinary-heritage/icons/culinary-pure.webp" alt="Pure A2 Ghee" width={32} height={32} className="object-contain mb-2" /> <Image src="/images/home/culinary-heritage/icons/culinary-pure.webp" alt="Pure A2 Ghee" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
<h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1"> <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
Pure A2 Ghee Pure A2 Ghee
</h5> </h5>
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[180px]"> <p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
Traditional ghee that enriches the flavor. Traditional ghee that enriches the flavor.
</p> </p>
</div> </div>
{/* Card 3: Dosa */} {/* 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"> <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
<Image src="/images/home/culinary-heritage/icons/culinary-dosa.webp" alt="Artisanal Dosa" width={32} height={32} className="object-contain mb-2" /> <Image src="/images/home/culinary-heritage/icons/culinary-dosa.webp" alt="Artisanal Dosa" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
<h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1"> <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
Artisanal Dosa Artisanal Dosa
</h5> </h5>
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[180px]"> <p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
Stone-ground batter fermented to perfection. Stone-ground batter fermented to perfection.
</p> </p>
</div> </div>
{/* Card 4: Feasts */} {/* 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"> <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
<Image src="/images/home/culinary-heritage/icons/culinary-feast.webp" alt="Imperial Feasts" width={32} height={32} className="object-contain mb-2" /> <Image src="/images/home/culinary-heritage/icons/culinary-feast.webp" alt="Imperial Feasts" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
<h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1"> <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
Imperial Feasts Imperial Feasts
</h5> </h5>
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[180px]"> <p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
Grand platters reflecting royal tastes. Grand platters reflecting royal tastes.
</p> </p>
</div> </div>
@ -205,8 +205,8 @@ export default function SpatialSanctuary() {
</div> </div>
{/* Right Side: Thali Archway photo overlap */} {/* Right Side: Thali Archway photo overlap */}
<div className="w-full lg:w-[46%] flex justify-center lg:justify-end relative select-none pointer-events-none"> <div className="hidden lg:flex w-full lg:w-[46%] justify-center lg:justify-end relative select-none pointer-events-none mt-6 lg:mt-0">
<div className="w-[320px] h-[320px] sm:w-[460px] sm:h-[460px] md:w-[480px] md:h-[480px] relative"> <div className="w-[180px] h-[180px] sm:w-[320px] sm:h-[320px] md:w-[400px] md:h-[400px] lg:w-[480px] lg:h-[480px] relative">
<Image <Image
src="/images/home/culinary-heritage/our-culinary-heritage-right.webp" src="/images/home/culinary-heritage/our-culinary-heritage-right.webp"
alt="My Dosa Place Spatial Dining Sanctuary" alt="My Dosa Place Spatial Dining Sanctuary"
@ -494,10 +494,10 @@ export default function SpatialSanctuary() {
</div> </div>
{/* ==================== PINNED BOTTOM BANNER BAR (OUTSIDE TRACK) ==================== */} {/* ==================== 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"> <div className="absolute bottom-0 left-0 w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-2.5 z-30 flex items-center justify-center gap-2 sm:gap-4 pointer-events-none select-none">
<span className="font-serif text-sm text-[#bc9e65] font-semibold italic">My Dosa Place</span> <span className="font-serif text-sm text-[#bc9e65] font-semibold italic hidden sm:block">My Dosa Place</span>
<span className="h-4 w-[1px] bg-[#bc9e65]/40" /> <span className="h-4 w-[1px] bg-[#bc9e65]/40 hidden sm:block" />
<span className="font-sans text-sm sm:text-sm tracking-[0.25em] text-[#bc9e65] font-bold uppercase"> <span className="font-sans text-[9px] sm:text-sm tracking-[0.1em] sm:tracking-[0.25em] text-[#bc9e65] font-bold uppercase text-center px-2">
ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE
</span> </span>
</div> </div>