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 RestaurantStory from "@/components/RestaurantStory";
|
||||||
import ChefShowcase from "@/components/ChefShowcase";
|
import ChefShowcase from "@/components/ChefShowcase";
|
||||||
import SpatialSanctuary from "@/components/SpatialSanctuary";
|
import SpatialSanctuary from "@/components/SpatialSanctuary";
|
||||||
import InteriorGallery from "@/components/InteriorGallery";
|
|
||||||
import Testimonials from "@/components/Testimonials";
|
import Testimonials from "@/components/Testimonials";
|
||||||
import EventsAccordion from "@/components/EventsAccordion";
|
import EventsAccordion from "@/components/EventsAccordion";
|
||||||
import MenuPreview from "@/components/MenuPreview";
|
import MenuPreview from "@/components/MenuPreview";
|
||||||
@ -50,9 +49,6 @@ export default function Home() {
|
|||||||
{/* Section 5.5: The Spatial Sanctuary details */}
|
{/* Section 5.5: The Spatial Sanctuary details */}
|
||||||
<SpatialSanctuary />
|
<SpatialSanctuary />
|
||||||
|
|
||||||
{/* Section 6: GSAP Horizontal space gallery */}
|
|
||||||
<InteriorGallery />
|
|
||||||
|
|
||||||
{/* Section 7: 3D-tilting Testimonials diaries */}
|
{/* Section 7: 3D-tilting Testimonials diaries */}
|
||||||
<Testimonials />
|
<Testimonials />
|
||||||
|
|
||||||
|
|||||||
@ -1,152 +1,286 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
import gsap from "gsap";
|
||||||
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
export default function SpatialSanctuary() {
|
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 (
|
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}
|
||||||
<Image
|
className="relative w-full h-screen overflow-hidden bg-[#060b08] select-none"
|
||||||
src="/images/sanctuary_bg.png"
|
>
|
||||||
alt="Traditional South Indian Sanctuary Background"
|
{/* Horizontal Scroll Track container */}
|
||||||
fill
|
<div
|
||||||
priority
|
ref={trackRef}
|
||||||
className="object-fill pointer-events-none select-none z-0"
|
className="absolute top-0 left-0 h-full flex flex-row items-center z-10"
|
||||||
/>
|
style={{ width: `${(gallerySlides.length + 1) * 100}vw` }}
|
||||||
|
>
|
||||||
{/* 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">
|
|
||||||
|
|
||||||
{/* Left Side: Text Details and Grid of 4 Cards */}
|
{/* ==================== SLIDE 1: THE SPATIAL SANCTUARY MAIN COVER ==================== */}
|
||||||
<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-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 */}
|
||||||
{/* Pre-title with Gold Crest */}
|
<Image
|
||||||
<div className="flex flex-col items-center lg:items-start mb-2 pointer-events-none select-none">
|
src="/images/sanctuary_bg.png"
|
||||||
<svg className="w-5 h-5 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
|
alt="Traditional South Indian Sanctuary Background"
|
||||||
<path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" />
|
fill
|
||||||
</svg>
|
priority
|
||||||
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
className="object-fill pointer-events-none select-none z-0"
|
||||||
— OUR STORY —
|
/>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Main Headline */}
|
{/* Traditional Temple Borders */}
|
||||||
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase mb-4">
|
<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" />
|
||||||
The Spatial<br />
|
|
||||||
<span className="text-[#bc9e65] font-extrabold block mt-1">Sanctuary</span>
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
{/* Traditional Gold Divider */}
|
{/* Slide Content layout */}
|
||||||
<div className="flex items-center gap-3 w-40 mb-5 justify-center lg:justify-start pointer-events-none select-none">
|
<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="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
|
||||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
|
||||||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
|
||||||
</svg>
|
|
||||||
<div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Narrative Paragraph */}
|
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Scroll Down Slide Indicator */}
|
|
||||||
<div className="flex items-center gap-2 mb-6 pointer-events-none select-none text-[#bc9e65]">
|
|
||||||
<span className="font-sans text-[9px] tracking-[0.2em] font-bold uppercase">
|
|
||||||
Scroll down to slide right
|
|
||||||
</span>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
|
||||||
<circle cx="12" cy="12" r="10" />
|
|
||||||
<path d="M12 8v8M12 16l4-4M12 16l-4-4" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Grid of 4 Sanctuary Features */}
|
|
||||||
<div className="grid grid-cols-2 gap-4 w-full max-w-lg">
|
|
||||||
|
|
||||||
{/* Card 1: Pillars */}
|
{/* Left Side details */}
|
||||||
<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="w-full lg:w-[50%] flex flex-col items-center lg:items-start text-center lg:text-left justify-center select-text">
|
||||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
||||||
<path d="M6 20V4M18 20V4M4 20h16M4 4h16M9 8h6M9 12h6M9 16h6" strokeLinecap="round" />
|
{/* Pre-title with Gold star crest */}
|
||||||
</svg>
|
<div className="flex flex-col items-center lg:items-start mb-2 pointer-events-none select-none">
|
||||||
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
<svg className="w-5 h-5 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
|
||||||
Heritage Pillars
|
<path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" />
|
||||||
</h5>
|
</svg>
|
||||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
|
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||||
Timeless architecture rooted in tradition.
|
— OUR STORY —
|
||||||
|
</span>
|
||||||
|
</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">
|
||||||
|
The Spatial<br />
|
||||||
|
<span className="text-[#bc9e65] font-extrabold block mt-1">Sanctuary</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Traditional Gold Divider */}
|
||||||
|
<div className="flex items-center gap-3 w-40 mb-5 justify-center lg:justify-start pointer-events-none select-none">
|
||||||
|
<div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
||||||
|
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||||||
|
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||||||
|
</svg>
|
||||||
|
<div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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>
|
</p>
|
||||||
|
|
||||||
|
{/* Scroll Down Slide Indicator */}
|
||||||
|
<div className="flex items-center gap-2 mb-6 pointer-events-none select-none text-[#bc9e65]">
|
||||||
|
<span className="font-sans text-[9px] tracking-[0.2em] font-bold uppercase">
|
||||||
|
Scroll down to slide right
|
||||||
|
</span>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="10" />
|
||||||
|
<path d="M12 8v8M12 16l4-4M12 16l-4-4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Grid of 4 Sanctuary Features */}
|
||||||
|
<div className="grid grid-cols-2 gap-4 w-full max-w-lg">
|
||||||
|
|
||||||
|
{/* Card 1: Pillars */}
|
||||||
|
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
|
||||||
|
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||||
|
<path d="M6 20V4M18 20V4M4 20h16M4 4h16M9 8h6M9 12h6M9 16h6" strokeLinecap="round" />
|
||||||
|
</svg>
|
||||||
|
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||||
|
Heritage Pillars
|
||||||
|
</h5>
|
||||||
|
<p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
|
||||||
|
Timeless architecture rooted in tradition.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card 2: Lanterns */}
|
||||||
|
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
|
||||||
|
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||||
|
<path d="M12 2v3M8 9h8v8H8zM12 17v5M5 9c0-3.5 3-4 7-4s7 .5 7 4" strokeLinecap="round" />
|
||||||
|
</svg>
|
||||||
|
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||||
|
Brass Lanterns
|
||||||
|
</h5>
|
||||||
|
<p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
|
||||||
|
Traditional lighting that sets the mood.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card 3: Feast Tables */}
|
||||||
|
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
|
||||||
|
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||||
|
<path d="M3 10h18M5 10v9M19 10v9M8 6h8M12 3v3" strokeLinecap="round" />
|
||||||
|
</svg>
|
||||||
|
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||||
|
Set Feast Tables
|
||||||
|
</h5>
|
||||||
|
<p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
|
||||||
|
Every table is a celebration of South Indian flavors.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card 4: Hospitality */}
|
||||||
|
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
|
||||||
|
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||||
|
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
|
||||||
|
</svg>
|
||||||
|
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||||
|
Warm Hospitality
|
||||||
|
</h5>
|
||||||
|
<p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
|
||||||
|
Where every guest feels at home.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Card 2: Lanterns */}
|
{/* Right Side: Thali Archway photo overlap */}
|
||||||
<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="w-full lg:w-[46%] flex justify-center lg:justify-end relative select-none pointer-events-none">
|
||||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
<div className="w-[320px] h-[320px] sm:w-[460px] sm:h-[460px] md:w-[480px] md:h-[480px] relative">
|
||||||
<path d="M12 2v3M8 9h8v8H8zM12 17v5M5 9c0-3.5 3-4 7-4s7 .5 7 4" strokeLinecap="round" />
|
<Image
|
||||||
</svg>
|
src="/images/sanctuary_arch.png"
|
||||||
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
alt="My Dosa Place Spatial Dining Sanctuary"
|
||||||
Brass Lanterns
|
fill
|
||||||
</h5>
|
sizes="(max-width: 1024px) 100vw, 46vw"
|
||||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
|
className="object-contain"
|
||||||
Traditional lighting that sets the mood.
|
priority
|
||||||
</p>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Card 3: Feast Tables */}
|
|
||||||
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
|
|
||||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
||||||
<path d="M3 10h18M5 10v9M19 10v9M8 6h8M12 3v3" strokeLinecap="round" />
|
|
||||||
</svg>
|
|
||||||
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
|
||||||
Set Feast Tables
|
|
||||||
</h5>
|
|
||||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
|
|
||||||
Every table is a celebration of South Indian flavors.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Card 4: Hospitality */}
|
|
||||||
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
|
|
||||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
||||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
|
|
||||||
</svg>
|
|
||||||
<h5 className="font-serif text-[10px] sm:text-[11px] font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
|
||||||
Warm Hospitality
|
|
||||||
</h5>
|
|
||||||
<p className="font-sans text-[8px] sm:text-[9px] text-stone-550 leading-relaxed max-w-[110px]">
|
|
||||||
Where every guest feels at home.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right Side: Cropped Traditional Archway scene with overlay leaves & badge */}
|
{/* ==================== SLIDES 2-4: HORIZONTAL GALLERY DETAILS ==================== */}
|
||||||
<div className="w-full lg:w-[46%] flex justify-center lg:justify-end relative select-none pointer-events-none">
|
{gallerySlides.map((slide, idx) => (
|
||||||
<div className="w-[320px] h-[320px] sm:w-[460px] sm:h-[460px] md:w-[480px] md:h-[480px] relative">
|
<div
|
||||||
<Image
|
key={idx}
|
||||||
src="/images/sanctuary_arch.png"
|
className="w-screen h-screen flex-shrink-0 flex items-center justify-center relative p-8 md:p-16 bg-[#060b08]"
|
||||||
alt="My Dosa Place Spatial Dining Sanctuary"
|
>
|
||||||
fill
|
<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)]">
|
||||||
sizes="(max-width: 1024px) 100vw, 46vw"
|
{/* Image Layer */}
|
||||||
className="object-contain"
|
<div className="absolute inset-0 w-full h-full">
|
||||||
priority
|
<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>
|
||||||
</div>
|
))}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bottom Gold-Bordered Green Banner */}
|
{/* ==================== PINNED BOTTOM BANNER BAR (OUTSIDE TRACK) ==================== */}
|
||||||
<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">
|
<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="font-serif text-xs text-[#bc9e65] font-semibold italic">My Dosa Place</span>
|
||||||
<span className="h-4 w-[1px] bg-[#bc9e65]/40" />
|
<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">
|
<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
|
ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user