design: merge horizontal gallery slides directly into SpatialSanctuary component

src/app/page.tsx

@@ -6,7 +6,6 @@ import EntranceExperience from "@/components/EntranceExperience";
 import RestaurantStory from "@/components/RestaurantStory";
 import ChefShowcase from "@/components/ChefShowcase";
 import SpatialSanctuary from "@/components/SpatialSanctuary";
-import InteriorGallery from "@/components/InteriorGallery";
 import Testimonials from "@/components/Testimonials";
 import EventsAccordion from "@/components/EventsAccordion";
 import MenuPreview from "@/components/MenuPreview";
@@ -50,9 +49,6 @@ export default function Home() {
         {/* Section 5.5: The Spatial Sanctuary details */}
         <SpatialSanctuary />
 
-        {/* Section 6: GSAP Horizontal space gallery */}
-        <InteriorGallery />
-
         {/* Section 7: 3D-tilting Testimonials diaries */}
         <Testimonials />
 

src/components/SpatialSanctuary.tsx

@@ -1,11 +1,100 @@
 "use client";
 
+import { useEffect, useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 import Image from "next/image";
 
+gsap.registerPlugin(ScrollTrigger);
+
 export default function SpatialSanctuary() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const trackRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const track = trackRef.current;
+    if (!container || !track) return;
+
+    const ctx = gsap.context(() => {
+      // Calculate horizontal translation distance
+      const trackWidth = track.scrollWidth;
+      const scrollDistance = trackWidth - window.innerWidth;
+
+      // Horizontal Scroll Trigger for track sliding
+      const scrollTween = gsap.to(track, {
+        x: -scrollDistance,
+        ease: "none",
+        scrollTrigger: {
+          trigger: container,
+          pin: true,
+          start: "top top",
+          end: `+=${scrollDistance}`, // scroll length matches translation
+          scrub: 1,
+          invalidateOnRefresh: true,
+        },
+      });
+
+      // Parallax Zoom Effect on individual slide images
+      const images = track.querySelectorAll(".gallery-img");
+      images.forEach((img) => {
+        gsap.fromTo(
+          img,
+          { scale: 1.0 },
+          {
+            scale: 1.12,
+            ease: "none",
+            scrollTrigger: {
+              trigger: img,
+              containerAnimation: scrollTween, // sync with horizontal tween
+              start: "left right",
+              end: "right left",
+              scrub: true,
+            },
+          }
+        );
+      });
+    }, container);
+
+    return () => ctx.revert();
+  }, []);
+
+  const gallerySlides = [
+    {
+      title: "The Teakwood Columns",
+      subtitle: "T H E   T E A K   C O U R T",
+      desc: "Supported by eighty grand hand-carved pillars sourced from Chettinad, framing a courtyard that captures cooling cross-breezes.",
+      img: "/images/chettinad_interior.png",
+    },
+    {
+      title: "The Royal Banquet Court",
+      subtitle: "I M P E R I A L   D I N I N G",
+      desc: "Our ceremonial feast hall features heavy teak tables, soft yellow lanterns, and floral motifs (Kolams) hand-drawn with rice flour daily.",
+      img: "/images/royal_dining_experience.png",
+    },
+    {
+      title: "The Sanctuary Lobby",
+      subtitle: "T H E   W E L C O M E   A N T E R O O M",
+      desc: "Paved with rough-cut temple stone tiles, featuring bubbling brass vessels (urlis) filled with fresh jasmine buds and marigolds.",
+      img: "/images/south_indian_welcome.png",
+    },
+  ];
+
   return (
-    <section className="relative py-24 md:py-32 px-6 sm:px-12 md:px-24 overflow-hidden select-none bg-[#fdfcf7] min-h-[90vh] flex flex-col justify-between">
+    <div
-      {/* Parchment background containing sketches and mandalas */}
+      ref={containerRef}
+      className="relative w-full h-screen overflow-hidden bg-[#060b08] select-none"
+    >
+      {/* Horizontal Scroll Track container */}
+      <div
+        ref={trackRef}
+        className="absolute top-0 left-0 h-full flex flex-row items-center z-10"
+        style={{ width: `${(gallerySlides.length + 1) * 100}vw` }}
+      >
+        
+        {/* ==================== SLIDE 1: THE SPATIAL SANCTUARY 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]">
+          {/* Parchment background image for Slide 1 */}
           <Image
             src="/images/sanctuary_bg.png"
             alt="Traditional South Indian Sanctuary Background"
@@ -17,13 +106,13 @@ export default function SpatialSanctuary() {
           {/* Traditional Temple Borders */}
           <div className="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-gold-dark via-gold-light to-gold-dark opacity-35 z-10" />
 
-      {/* Content Container */}
+          {/* Slide Content layout */}
-      <div className="max-w-7xl mx-auto w-full flex-1 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: Text Details and Grid of 4 Cards */}
+            {/* 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">
               
-          {/* Pre-title with Gold Crest */}
+              {/* Pre-title with Gold star crest */}
               <div className="flex flex-col items-center lg:items-start mb-2 pointer-events-none select-none">
                 <svg className="w-5 h-5 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" />
@@ -48,7 +137,7 @@ export default function SpatialSanctuary() {
                 <div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
               </div>
 
-          {/* Narrative Paragraph */}
+              {/* Description narrative */}
               <p className="font-sans text-xs sm:text-sm text-stone-700 leading-relaxed tracking-wider max-w-lg mb-6">
                 Swipe or scroll to explore the visual spatial transitions of My Dosa Place, bringing heritage pillars, brass lanterns, and set feast tables to life.
               </p>
@@ -123,7 +212,7 @@ export default function SpatialSanctuary() {
 
             </div>
 
-        {/* Right Side: Cropped Traditional Archway scene with overlay leaves & badge */}
+            {/* 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">
                 <Image
@@ -138,15 +227,60 @@ export default function SpatialSanctuary() {
             </div>
 
           </div>
+        </div>
 
-      {/* Bottom Gold-Bordered Green Banner */}
+        {/* ==================== SLIDES 2-4: HORIZONTAL GALLERY DETAILS ==================== */}
-      <div className="w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-2.5 z-10 flex items-center justify-center gap-4 pointer-events-none select-none mt-12">
+        {gallerySlides.map((slide, idx) => (
+          <div
+            key={idx}
+            className="w-screen h-screen flex-shrink-0 flex items-center justify-center relative p-8 md:p-16 bg-[#060b08]"
+          >
+            <div className="relative w-full h-[85%] md:h-[80%] rounded-xl overflow-hidden border border-gold/10 group shadow-[0_30px_70px_rgba(0,0,0,0.8)]">
+              {/* Image Layer */}
+              <div className="absolute inset-0 w-full h-full">
+                <Image
+                  src={slide.img || ""}
+                  alt={slide.title}
+                  fill
+                  sizes="90vw"
+                  className="gallery-img object-cover brightness-[0.65] contrast-[1.05] transition-all duration-[1s]"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-[#060b08] via-transparent to-transparent opacity-85" />
+              </div>
+
+              {/* Corner Filigree Borders */}
+              <div className="absolute inset-4 border border-gold/10 rounded-lg pointer-events-none z-20" />
+              <div className="absolute inset-[22px] border border-dashed border-gold/5 rounded-lg pointer-events-none z-20" />
+
+              {/* Glassmorphic Description overlay card */}
+              <div className="absolute bottom-10 left-6 md:left-12 max-w-md p-6 md:p-8 rounded-lg bg-black/45 backdrop-blur-md border border-[#d8c396]/25 shadow-2xl z-30 transition-transform duration-500 hover:-translate-y-2 select-text text-left">
+                <span className="font-sans text-[9px] tracking-[0.3em] text-[#bc9e65] font-bold block mb-2 pointer-events-none select-none">
+                  {slide.subtitle}
+                </span>
+                
+                <h3 className="font-serif text-2xl font-bold text-white tracking-wide uppercase mb-3 pointer-events-none select-none">
+                  {slide.title}
+                </h3>
+                
+                <p className="font-sans text-xs md:text-sm text-stone-200 leading-relaxed tracking-wide">
+                  {slide.desc}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
+
+      </div>
+
+      {/* ==================== PINNED BOTTOM BANNER BAR (OUTSIDE TRACK) ==================== */}
+      <div className="absolute bottom-0 left-0 w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-2.5 z-30 flex items-center justify-center gap-4 pointer-events-none select-none">
         <span className="font-serif text-xs 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">
           ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE
         </span>
       </div>
-    </section>
+
+    </div>
   );
 }