From 94fd66d344c9bb3a3c82c77ed13242d4cd1334d6 Mon Sep 17 00:00:00 2001
From: vidhya <vidhya@metatroncube.in>
Date: Mon, 20 Jul 2026 17:25:33 +0530
Subject: [PATCH] footer, Culinary section, Assembly section Responsive updated

---
 src/components/EventsAccordion.tsx  |  8 ++---
 src/components/Footer.tsx           |  2 +-
 src/components/SpatialSanctuary.tsx | 54 ++++++++++++++---------------
 3 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/components/EventsAccordion.tsx b/src/components/EventsAccordion.tsx
index 6752b8c..c0c523e 100644
--- a/src/components/EventsAccordion.tsx
+++ b/src/components/EventsAccordion.tsx
@@ -182,7 +182,7 @@ export default function EventsAccordion() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.8, delay: 0.1, ease: "easeOut" }}
-          className="flex flex-col lg:flex-row gap-5 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) => {
             const isActive = idx === activeIdx;
@@ -266,10 +266,10 @@ export default function EventsAccordion() {
                     </div>
 
                     {/* 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 */}
-                      <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">
                           <CategoryIcon />
                         </div>
@@ -294,7 +294,7 @@ export default function EventsAccordion() {
                       </p>
                       
                       {/* 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 
                           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={{
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 2ce54a0..dccede1 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -25,7 +25,7 @@ export default function Footer() {
           alt="Footer Backdrop"
           fill
           priority
-          className="object-fill"
+          className="object-cover object-center"
         />
       </div>
 
diff --git a/src/components/SpatialSanctuary.tsx b/src/components/SpatialSanctuary.tsx
index c183109..71e7070 100644
--- a/src/components/SpatialSanctuary.tsx
+++ b/src/components/SpatialSanctuary.tsx
@@ -93,7 +93,7 @@ export default function SpatialSanctuary() {
       >
 
         {/* ==================== 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 */}
           <Image
             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">
 
             {/* 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 */}
               <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>
 
               {/* 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 />
                 <span className="text-[#bc9e65] font-extrabold block mt-1">Heritage</span>
               </h2>
@@ -138,12 +138,12 @@ export default function SpatialSanctuary() {
               </div>
 
               {/* 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.
               </p>
 
               {/* 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">
                   Scroll down to slide right
                 </span>
@@ -157,45 +157,45 @@ export default function SpatialSanctuary() {
               <div className="grid grid-cols-2 gap-4 w-full max-w-lg">
 
                 {/* Card 1: Recipes */}
-                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-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-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
+                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
+                  <Image src="/images/home/culinary-heritage/icons/culinary-heritage.webp" alt="Heritage Recipes" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
+                  <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
                     Heritage Recipes
                   </h5>
-                  <p className="font-sans text-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.
                   </p>
                 </div>
 
                 {/* 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-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
+                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
+                  <Image src="/images/home/culinary-heritage/icons/culinary-pure.webp" alt="Pure A2 Ghee" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
+                  <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
                     Pure A2 Ghee
                   </h5>
-                  <p className="font-sans text-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.
                   </p>
                 </div>
 
                 {/* 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-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
+                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
+                  <Image src="/images/home/culinary-heritage/icons/culinary-dosa.webp" alt="Artisanal Dosa" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
+                  <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
                     Artisanal Dosa
                   </h5>
-                  <p className="font-sans text-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.
                   </p>
                 </div>
 
                 {/* 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-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
+                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
+                  <Image src="/images/home/culinary-heritage/icons/culinary-feast.webp" alt="Imperial Feasts" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
+                  <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
                     Imperial Feasts
                   </h5>
-                  <p className="font-sans text-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.
                   </p>
                 </div>
@@ -205,8 +205,8 @@ export default function SpatialSanctuary() {
             </div>
 
             {/* 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="w-[320px] h-[320px] sm:w-[460px] sm:h-[460px] md:w-[480px] md:h-[480px] relative">
+            <div className="hidden lg:flex w-full lg:w-[46%] justify-center lg:justify-end relative select-none pointer-events-none mt-6 lg:mt-0">
+              <div className="w-[180px] h-[180px] sm:w-[320px] sm:h-[320px] md:w-[400px] md:h-[400px] lg:w-[480px] lg:h-[480px] relative">
                 <Image
                   src="/images/home/culinary-heritage/our-culinary-heritage-right.webp"
                   alt="My Dosa Place Spatial Dining Sanctuary"
@@ -494,10 +494,10 @@ export default function SpatialSanctuary() {
       </div>
 
       {/* ==================== PINNED BOTTOM BANNER BAR (OUTSIDE TRACK) ==================== */}
-      <div className="absolute bottom-0 left-0 w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-2.5 z-30 flex items-center justify-center gap-4 pointer-events-none select-none">
-        <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-sm sm:text-sm tracking-[0.25em] text-[#bc9e65] font-bold uppercase">
+      <div className="absolute bottom-0 left-0 w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-2.5 z-30 flex items-center justify-center gap-2 sm:gap-4 pointer-events-none select-none">
+        <span className="font-serif text-sm text-[#bc9e65] font-semibold italic hidden sm:block">My Dosa Place</span>
+        <span className="h-4 w-[1px] bg-[#bc9e65]/40 hidden sm:block" />
+        <span className="font-sans text-[9px] sm:text-sm tracking-[0.1em] sm:tracking-[0.25em] text-[#bc9e65] font-bold uppercase text-center px-2">
           ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE
         </span>
       </div>