design: merge horizontal gallery slides directly into SpatialSanctuary component
This commit is contained in:
Alaguraj0361
parent
eff6bff691
commit
33ab8314d3
@ -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 />
|
||||
|
||||
|
||||
@ -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">
|
||||
{/* Parchment background containing sketches and mandalas */}
|
||||
<div
|
||||
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 */}
|
||||
<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">
|
||||
{/* Slide Content layout */}
|
||||
<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 */}
|
||||
<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">
|
||||
{/* ==================== SLIDES 2-4: HORIZONTAL GALLERY DETAILS ==================== */}
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user