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,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<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 */}
|
||||
<Image
|
||||
src="/images/sanctuary_bg.png"
|
||||
alt="Traditional South Indian Sanctuary Background"
|
||||
fill
|
||||
priority
|
||||
className="object-fill pointer-events-none select-none z-0"
|
||||
/>
|
||||
|
||||
{/* 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">
|
||||
<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` }}
|
||||
>
|
||||
|
||||
{/* Left Side: Text Details and Grid of 4 Cards */}
|
||||
<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 */}
|
||||
<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" />
|
||||
</svg>
|
||||
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||
— OUR STORY —
|
||||
</span>
|
||||
</div>
|
||||
{/* ==================== 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"
|
||||
fill
|
||||
priority
|
||||
className="object-fill pointer-events-none select-none z-0"
|
||||
/>
|
||||
|
||||
{/* 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 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" />
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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">
|
||||
{/* 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">
|
||||
|
||||
{/* 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.
|
||||
{/* 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 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" />
|
||||
</svg>
|
||||
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||
— 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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
{/* 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
|
||||
src="/images/sanctuary_arch.png"
|
||||
alt="My Dosa Place Spatial Dining Sanctuary"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 46vw"
|
||||
className="object-contain"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Right Side: Cropped Traditional Archway scene with overlay leaves & badge */}
|
||||
<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
|
||||
src="/images/sanctuary_arch.png"
|
||||
alt="My Dosa Place Spatial Dining Sanctuary"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 46vw"
|
||||
className="object-contain"
|
||||
priority
|
||||
/>
|
||||
{/* ==================== 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>
|
||||
))}
|
||||
|
||||
</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">
|
||||
{/* ==================== 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