diff --git a/src/app/page.tsx b/src/app/page.tsx index d3f9484..df5b5bd 100644 --- a/src/app/page.tsx +++ b/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 */} - {/* Section 6: GSAP Horizontal space gallery */} - - {/* Section 7: 3D-tilting Testimonials diaries */} diff --git a/src/components/SpatialSanctuary.tsx b/src/components/SpatialSanctuary.tsx index b2243a1..4273464 100644 --- a/src/components/SpatialSanctuary.tsx +++ b/src/components/SpatialSanctuary.tsx @@ -1,152 +1,286 @@ "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(null); + const trackRef = useRef(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 ( -
- {/* Parchment background containing sketches and mandalas */} - Traditional South Indian Sanctuary Background - - {/* Traditional Temple Borders */} -
- - {/* Content Container */} -
+
+ {/* Horizontal Scroll Track container */} +
- {/* Left Side: Text Details and Grid of 4 Cards */} -
- - {/* Pre-title with Gold Crest */} -
- - - - - — OUR STORY — - -
+ {/* ==================== SLIDE 1: THE SPATIAL SANCTUARY MAIN COVER ==================== */} +
+ {/* Parchment background image for Slide 1 */} + Traditional South Indian Sanctuary Background - {/* Main Headline */} -

- The Spatial
- Sanctuary -

+ {/* Traditional Temple Borders */} +
- {/* Traditional Gold Divider */} -
-
- - - -
-
- - {/* Narrative Paragraph */} -

- Swipe or scroll to explore the visual spatial transitions of My Dosa Place, bringing heritage pillars, brass lanterns, and set feast tables to life. -

- - {/* Scroll Down Slide Indicator */} -
- - Scroll down to slide right - - - - - -
- - {/* Grid of 4 Sanctuary Features */} -
+ {/* Slide Content layout */} +
- {/* Card 1: Pillars */} -
- - - -
- Heritage Pillars -
-

- Timeless architecture rooted in tradition. + {/* Left Side details */} +

+ + {/* Pre-title with Gold star crest */} +
+ + + + + — OUR STORY — + +
+ + {/* Main Headline */} +

+ The Spatial
+ Sanctuary +

+ + {/* Traditional Gold Divider */} +
+
+ + + +
+
+ + {/* Description narrative */} +

+ Swipe or scroll to explore the visual spatial transitions of My Dosa Place, bringing heritage pillars, brass lanterns, and set feast tables to life.

+ + {/* Scroll Down Slide Indicator */} +
+ + Scroll down to slide right + + + + + +
+ + {/* Grid of 4 Sanctuary Features */} +
+ + {/* Card 1: Pillars */} +
+ + + +
+ Heritage Pillars +
+

+ Timeless architecture rooted in tradition. +

+
+ + {/* Card 2: Lanterns */} +
+ + + +
+ Brass Lanterns +
+

+ Traditional lighting that sets the mood. +

+
+ + {/* Card 3: Feast Tables */} +
+ + + +
+ Set Feast Tables +
+

+ Every table is a celebration of South Indian flavors. +

+
+ + {/* Card 4: Hospitality */} +
+ + + +
+ Warm Hospitality +
+

+ Where every guest feels at home. +

+
+ +
+
- {/* Card 2: Lanterns */} -
- - - -
- Brass Lanterns -
-

- Traditional lighting that sets the mood. -

-
- - {/* Card 3: Feast Tables */} -
- - - -
- Set Feast Tables -
-

- Every table is a celebration of South Indian flavors. -

-
- - {/* Card 4: Hospitality */} -
- - - -
- Warm Hospitality -
-

- Where every guest feels at home. -

+ {/* Right Side: Thali Archway photo overlap */} +
+
+ My Dosa Place Spatial Dining Sanctuary +
-
- {/* Right Side: Cropped Traditional Archway scene with overlay leaves & badge */} -
-
- My Dosa Place Spatial Dining Sanctuary + {/* ==================== SLIDES 2-4: HORIZONTAL GALLERY DETAILS ==================== */} + {gallerySlides.map((slide, idx) => ( +
+
+ {/* Image Layer */} +
+ {slide.title} +
+
+ + {/* Corner Filigree Borders */} +
+
+ + {/* Glassmorphic Description overlay card */} +
+ + {slide.subtitle} + + +

+ {slide.title} +

+ +

+ {slide.desc} +

+
+
-
+ ))}
- {/* Bottom Gold-Bordered Green Banner */} -
+ {/* ==================== PINNED BOTTOM BANNER BAR (OUTSIDE TRACK) ==================== */} +
My Dosa Place ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE
-
+ + ); }