design: redesign Spatial Sanctuary overlay section to match premium mockup
This commit is contained in:
Alaguraj0361
parent
fb669ef89c
commit
f4bf443943
BIN
public/images/sanctuary_arch.png
Normal file
BIN
public/images/sanctuary_arch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 642 KiB |
BIN
public/images/sanctuary_bg.png
Normal file
BIN
public/images/sanctuary_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1010 KiB |
@ -7,6 +7,7 @@ import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
||||
import { useTexture } from "@react-three/drei";
|
||||
import * as THREE from "three";
|
||||
import Image from "next/image";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
@ -365,32 +366,159 @@ export default function EntranceExperience() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ----------------- FOOD PLATTER STORYTELLING CARD (REVEALS AT END) ----------------- */}
|
||||
{/* ----------------- SPATIAL SANCTUARY OVERLAY (REVEALS AT END) ----------------- */}
|
||||
<AnimatePresence>
|
||||
{scrollProgress > 0.75 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50, scale: 0.95 }}
|
||||
animate={{ opacity: 1, x: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, x: -50, scale: 0.95 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
className="absolute top-28 left-8 z-30 w-[340px] sm:w-[400px] max-w-[calc(100vw-32px)] max-sm:top-auto max-sm:bottom-16 max-sm:left-4 max-sm:right-4 max-sm:mx-auto bg-[#fcfaf2]/95 border-2 border-double border-gold/45 rounded-3xl p-6 sm:p-8 shadow-2xl pointer-events-none"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="absolute inset-0 z-35 w-full h-full bg-[#fdfcf7] flex flex-col justify-between"
|
||||
>
|
||||
{/* Inner traditional gold frame */}
|
||||
<div className="absolute top-2 left-2 right-2 bottom-2 border border-gold/15 pointer-events-none rounded-[22px]" />
|
||||
{/* 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"
|
||||
/>
|
||||
|
||||
<span className="font-sans text-[#188754] text-[10px] sm:text-[11px] tracking-[0.4em] uppercase font-bold block mb-2.5 text-center mt-1">
|
||||
P U R E V E G E T A R I A N F E A S T
|
||||
</span>
|
||||
{/* 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" />
|
||||
|
||||
<h3 className="font-serif text-[#188754] text-xl sm:text-2xl tracking-[0.15em] uppercase font-bold mb-3 text-center">
|
||||
A Royal Banquet
|
||||
</h3>
|
||||
{/* 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 px-6 sm:px-12 md:px-16 pt-16 pb-20 relative z-10">
|
||||
|
||||
<div className="w-24 h-[1px] bg-gradient-to-r from-transparent via-[#d8c396] to-transparent mx-auto mb-4" />
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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 */}
|
||||
<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>
|
||||
|
||||
{/* 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
|
||||
/>
|
||||
</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">
|
||||
<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>
|
||||
|
||||
<p className="font-sans text-xs sm:text-[13px] text-stone-800 leading-relaxed tracking-wider font-medium text-justify">
|
||||
Your table is set. Experience a royal banquet served on fresh banana leaves, where crispy ghee-roasted dosas, steaming lentil sambar, and hand-ground chutneys await you.
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user