feat: align and scale our story section with interior_royal image
This commit is contained in:
Alaguraj0361
parent
db9fd93c69
commit
be42c2b480
@ -1,135 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import { useRef } from "react";
|
||||
import { motion, useScroll, useTransform } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function RestaurantStory() {
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// High-performance scroll tracking bound to the section's pinning viewport
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: sectionRef,
|
||||
offset: ["start start", "end end"],
|
||||
});
|
||||
|
||||
// Slide 1 (1928) - Active from progress 0.0 to 0.33
|
||||
const imgOpacity1 = useTransform(scrollYProgress, [0, 0.25, 0.33, 0.40], [1, 1, 0, 0]);
|
||||
const imgScale1 = useTransform(scrollYProgress, [0, 0.33], [1.0, 1.08]);
|
||||
const textOpacity1 = useTransform(scrollYProgress, [0, 0.25, 0.33], [1, 1, 0]);
|
||||
const textY1 = useTransform(scrollYProgress, [0, 0.25, 0.33], [0, 0, -40]);
|
||||
const bgYearOpacity1 = useTransform(scrollYProgress, [0, 0.25, 0.33], [0.12, 0.12, 0]);
|
||||
const bgYearY1 = useTransform(scrollYProgress, [0, 0.33], [0, -80]);
|
||||
|
||||
// Slide 2 (1972) - Active from progress 0.33 to 0.66
|
||||
const imgOpacity2 = useTransform(scrollYProgress, [0.25, 0.33, 0.58, 0.66], [0, 1, 1, 0]);
|
||||
const imgScale2 = useTransform(scrollYProgress, [0.25, 0.33, 0.66], [0.95, 1.0, 1.08]);
|
||||
const textOpacity2 = useTransform(scrollYProgress, [0.25, 0.33, 0.58, 0.66], [0, 1, 1, 0]);
|
||||
const textY2 = useTransform(scrollYProgress, [0.25, 0.33, 0.58, 0.66], [40, 0, 0, -40]);
|
||||
const bgYearOpacity2 = useTransform(scrollYProgress, [0.25, 0.33, 0.58, 0.66], [0, 0.12, 0.12, 0]);
|
||||
const bgYearY2 = useTransform(scrollYProgress, [0.25, 0.66], [80, -80]);
|
||||
|
||||
// Slide 3 (2026) - Active from progress 0.66 to 1.0
|
||||
const imgOpacity3 = useTransform(scrollYProgress, [0.58, 0.66, 0.90], [0, 1, 1]);
|
||||
const imgScale3 = useTransform(scrollYProgress, [0.58, 0.66, 1.0], [0.95, 1.0, 1.08]);
|
||||
const textOpacity3 = useTransform(scrollYProgress, [0.58, 0.66, 0.90], [0, 1, 1]);
|
||||
const textY3 = useTransform(scrollYProgress, [0.58, 0.66, 1.0], [40, 0, 0]);
|
||||
const bgYearOpacity3 = useTransform(scrollYProgress, [0.58, 0.66, 0.90], [0, 0.12, 0.12]);
|
||||
const bgYearY3 = useTransform(scrollYProgress, [0.58, 1.0], [80, 0]);
|
||||
|
||||
const timelineEvents = [
|
||||
{
|
||||
year: "1928",
|
||||
title: "The Palace Foundation",
|
||||
text: "Our journey began in a grand Chettinad palace. Built with Burmese teak and Italian marble, the mansion served as a sanctuary of hospitality, welcoming royal emissaries and regional chieftains with legendary feasts.",
|
||||
tag: "Circa 1928",
|
||||
},
|
||||
{
|
||||
year: "1972",
|
||||
title: "Preserving Ancient Spices",
|
||||
text: "The royal recipes were transcribed from palm leaves. Master spice-blenders preserved the art of hand-pounding cardamoms, cinnamon, and red sun-dried chilies in stone mortars, ensuring the flavors remained pristine.",
|
||||
tag: "Circa 1972",
|
||||
},
|
||||
{
|
||||
year: "2026",
|
||||
title: "The Modern Legacy Sanctuary",
|
||||
text: "Today, My Dosa Place brings this heritage into the modern era. We unite century-old cooking methodologies with contemporary culinary presentation, inviting you to dine like royalty in Waterloo.",
|
||||
tag: "Royal Dining",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={sectionRef}
|
||||
className="relative h-[300vh] bg-[#f6f3ea] select-none"
|
||||
>
|
||||
<section className="relative py-20 md:py-28 px-6 sm:px-12 md:px-24 bg-[#f6f3ea] overflow-hidden select-none">
|
||||
{/* 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-25" />
|
||||
|
||||
{/* Sticky Pinned Container */}
|
||||
<div className="sticky top-0 w-full h-screen flex flex-col lg:flex-row items-center justify-center overflow-hidden px-6 sm:px-12 md:px-24 gap-12 lg:gap-24">
|
||||
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-16 relative z-10">
|
||||
|
||||
{/* Left Side: Gopuram Arched Frame Visual Court */}
|
||||
<div className="w-full lg:w-1/2 flex items-center justify-center relative h-[45vh] lg:h-[70vh]">
|
||||
{/* Left Side: Story & Features Details (Fully Center-Aligned) */}
|
||||
<div className="w-full lg:w-[53%] flex flex-col items-center text-center justify-center">
|
||||
|
||||
{/* Subtle Outer Temple Halo */}
|
||||
<div className="absolute w-[360px] h-[360px] sm:w-[480px] sm:h-[480px] rounded-full bg-gold/10 blur-[80px] -z-10 pointer-events-none" />
|
||||
|
||||
{/* Golden Corner Trim Background Shield */}
|
||||
<div className="absolute inset-y-0 w-full max-w-[340px] sm:max-w-[420px] bg-[#fcf9f2]/60 border border-gold/15 rounded-t-[180px] -z-10 p-4 shadow-[inset_0_0_40px_rgba(216,195,150,0.05)]">
|
||||
<div className="absolute inset-2 border border-gold/10 rounded-t-[170px]" />
|
||||
{/* Badge Pre-title with Gold Crest */}
|
||||
<div className="flex flex-col items-center mb-4">
|
||||
{/* Gold Lamp/Lotus Crest */}
|
||||
<svg className="w-8 h-8 text-[#d8c396] mb-2" viewBox="0 0 100 100" fill="none">
|
||||
<path d="M50 15 C52 35 70 45 75 50 C65 55 55 58 50 75 C45 58 35 55 25 50 C30 45 48 35 50 15 Z" fill="currentColor" />
|
||||
<circle cx="50" cy="50" r="4.5" fill="#8b2635" />
|
||||
<path d="M35 78 L65 78" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#8b2635] font-bold block">
|
||||
••••• OUR STORY •••••
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Main Gopuram Image Stack Frame */}
|
||||
{/* Main Headline */}
|
||||
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wide text-[#0a4a2b] leading-tight">
|
||||
A Tradition Served<br /> with Love
|
||||
</h2>
|
||||
|
||||
{/* Traditional Gold Divider */}
|
||||
<div className="flex items-center gap-4 my-6 justify-center">
|
||||
<div className="w-16 h-[1.5px] bg-gradient-to-r from-transparent to-[#d8c396]" />
|
||||
<div className="w-2.5 h-2.5 rotate-45 border border-[#d8c396] bg-[#8b2635]" />
|
||||
<div className="w-16 h-[1.5px] bg-gradient-to-l from-transparent to-[#d8c396]" />
|
||||
</div>
|
||||
|
||||
{/* Paragraph Narrative */}
|
||||
<p className="font-sans text-xs sm:text-sm lg:text-base text-stone-700 leading-relaxed max-w-xl text-center tracking-wide mb-8">
|
||||
At My Dosa Place, food is more than just a meal, it's a tradition passed down through generations. From authentic recipes to warm hospitality, we bring the true essence of South India to your table.
|
||||
</p>
|
||||
|
||||
{/* Traditional Bottom Gold Divider */}
|
||||
<div className="flex items-center gap-4 mb-10 justify-center">
|
||||
<div className="w-16 h-[1.5px] bg-gradient-to-r from-transparent to-[#d8c396]" />
|
||||
<div className="w-2.5 h-2.5 rotate-45 border border-[#d8c396] bg-[#8b2635]" />
|
||||
<div className="w-16 h-[1.5px] bg-gradient-to-l from-transparent to-[#d8c396]" />
|
||||
</div>
|
||||
|
||||
{/* Grid of 4 Key Features */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-6 sm:gap-4 w-full">
|
||||
|
||||
{/* Feature 1: Veg */}
|
||||
<div className="flex flex-col items-center text-center group">
|
||||
<div className="w-12 h-12 rounded-full border border-[#188754]/30 flex items-center justify-center mb-3 bg-[#fcfaf2] transition-transform duration-300 group-hover:scale-110 shadow-sm">
|
||||
<svg className="w-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 3.5 1 9a7 7 0 0 1-9 9z" />
|
||||
<path d="M19 2c-2.26 4.33-5.27 7.14-8 10" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 className="font-sans text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
100% Pure Veg
|
||||
</h4>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-600 leading-relaxed max-w-[120px]">
|
||||
Pure vegetarian food made with the finest ingredients.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2: Recipes */}
|
||||
<div className="flex flex-col items-center text-center group">
|
||||
<div className="w-12 h-12 rounded-full border border-[#188754]/30 flex items-center justify-center mb-3 bg-[#fcfaf2] transition-transform duration-300 group-hover:scale-110 shadow-sm">
|
||||
<svg className="w-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 12h18" />
|
||||
<path d="M5 12v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-6" />
|
||||
<path d="M12 3v3" />
|
||||
<path d="M8 4v2" />
|
||||
<path d="M16 4v2" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 className="font-sans text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Authentic Recipes
|
||||
</h4>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-600 leading-relaxed max-w-[120px]">
|
||||
Traditional recipes crafted with authentic South Indian flavors.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3: Hospitality */}
|
||||
<div className="flex flex-col items-center text-center group">
|
||||
<div className="w-12 h-12 rounded-full border border-[#188754]/30 flex items-center justify-center mb-3 bg-[#fcfaf2] transition-transform duration-300 group-hover:scale-110 shadow-sm">
|
||||
<svg className="w-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
|
||||
<path d="M12 3c-1.5 3-4 4.5-4 7.5a4 4 0 0 0 8 0c0-3-2.5-4.5-4-7.5z" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M6 18h12v2H6z" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M9 20v2h6v-2z" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 className="font-sans text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Warm Hospitality
|
||||
</h4>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-600 leading-relaxed max-w-[120px]">
|
||||
A homely environment with friendly service and a smile.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 4: Love */}
|
||||
<div className="flex flex-col items-center text-center group">
|
||||
<div className="w-12 h-12 rounded-full border border-[#188754]/30 flex items-center justify-center mb-3 bg-[#fcfaf2] transition-transform duration-300 group-hover:scale-110 shadow-sm">
|
||||
<svg className="w-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 className="font-sans text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Made With Love
|
||||
</h4>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-600 leading-relaxed max-w-[120px]">
|
||||
Every dish is prepared with love, care and traditional values.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Right Side: Larger Gopuram Arched Frame Counter Image */}
|
||||
<div className="w-full lg:w-[42%] flex justify-center relative">
|
||||
|
||||
{/* Ambient Glow */}
|
||||
<div className="absolute w-[400px] h-[400px] rounded-full bg-gold/10 blur-[80px] -z-10 pointer-events-none" />
|
||||
|
||||
{/* Shield frame backing shadow */}
|
||||
<div className="absolute inset-y-0 w-full max-w-[420px] bg-[#fcf9f2]/75 border border-gold/15 rounded-t-[200px] -z-10 shadow-md" />
|
||||
|
||||
{/* Gopuram Arch Masked Image Wrapper */}
|
||||
<div
|
||||
className="w-[300px] h-[380px] sm:w-[380px] sm:h-[480px] relative overflow-hidden shadow-2xl z-10"
|
||||
className="w-[340px] h-[420px] sm:w-[420px] sm:h-[520px] relative overflow-hidden shadow-2xl z-10"
|
||||
style={{
|
||||
clipPath: "url(#gopuram-arch)",
|
||||
WebkitClipPath: "url(#gopuram-arch)",
|
||||
}}
|
||||
>
|
||||
{/* Image 1: 1928 Mansion */}
|
||||
<motion.div
|
||||
style={{ opacity: imgOpacity1, scale: imgScale1 }}
|
||||
className="absolute inset-0 w-full h-full"
|
||||
>
|
||||
<div className="w-full h-full relative group">
|
||||
<Image
|
||||
src="/images/my_dosa_place_interior_webgl.jpg"
|
||||
alt="Chettinad Palace Mansion"
|
||||
src="/images/my_dosa_place_interior_royal.jpg"
|
||||
alt="My Dosa Place Pillars Dining Court"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 40vw"
|
||||
className="object-cover brightness-[0.95]"
|
||||
className="object-cover brightness-[0.98] transition-transform duration-700 group-hover:scale-105"
|
||||
priority
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Image 2: 1972 Spice Altar */}
|
||||
<motion.div
|
||||
style={{ opacity: imgOpacity2, scale: imgScale2 }}
|
||||
className="absolute inset-0 w-full h-full"
|
||||
>
|
||||
<Image
|
||||
src="/images/south_indian_welcome.png"
|
||||
alt="South Indian Traditional Welcome"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 40vw"
|
||||
className="object-cover brightness-[0.95]"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Image 3: 2026 Thali Feast */}
|
||||
<motion.div
|
||||
style={{ opacity: imgOpacity3, scale: imgScale3 }}
|
||||
className="absolute inset-0 w-full h-full"
|
||||
>
|
||||
<Image
|
||||
src="/images/my_dosa_place_food_webgl.jpg"
|
||||
alt="Royal Feast Banquet"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 40vw"
|
||||
className="object-cover brightness-[0.95]"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Inset Double Border Stroke Overlay */}
|
||||
<svg
|
||||
@ -182,155 +203,11 @@ export default function RestaurantStory() {
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Active Era Tag Frame (Bottom Overlay) */}
|
||||
<div className="absolute bottom-[-16px] z-20 flex flex-col items-center">
|
||||
{/* Tag 1 */}
|
||||
<motion.div
|
||||
style={{ opacity: imgOpacity1 }}
|
||||
className="absolute bg-[#8b2635] border border-gold/45 px-4 py-1 text-[10px] tracking-[0.25em] text-[#fcfaf2] uppercase font-serif font-semibold shadow-md whitespace-nowrap"
|
||||
>
|
||||
{timelineEvents[0].tag}
|
||||
</motion.div>
|
||||
{/* Tag 2 */}
|
||||
<motion.div
|
||||
style={{ opacity: imgOpacity2 }}
|
||||
className="absolute bg-[#8b2635] border border-gold/45 px-4 py-1 text-[10px] tracking-[0.25em] text-[#fcfaf2] uppercase font-serif font-semibold shadow-md whitespace-nowrap"
|
||||
>
|
||||
{timelineEvents[1].tag}
|
||||
</motion.div>
|
||||
{/* Tag 3 */}
|
||||
<motion.div
|
||||
style={{ opacity: imgOpacity3 }}
|
||||
className="absolute bg-[#8b2635] border border-gold/45 px-4 py-1 text-[10px] tracking-[0.25em] text-[#fcfaf2] uppercase font-serif font-semibold shadow-md whitespace-nowrap"
|
||||
>
|
||||
{timelineEvents[2].tag}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Right Side: Narrative Parallax Slides */}
|
||||
<div className="w-full lg:w-1/2 flex flex-col justify-center relative h-[45vh] lg:h-[70vh]">
|
||||
|
||||
{/* Giant Outline Parallax Background Years */}
|
||||
<div className="absolute inset-0 flex items-center justify-end pointer-events-none overflow-hidden select-none -z-10">
|
||||
<motion.span
|
||||
style={{
|
||||
opacity: bgYearOpacity1,
|
||||
y: bgYearY1,
|
||||
WebkitTextStroke: "1.5px rgba(216, 195, 150, 0.28)",
|
||||
color: "transparent",
|
||||
}}
|
||||
className="absolute text-[24vw] lg:text-[18vw] font-serif font-black tracking-tighter"
|
||||
>
|
||||
1928
|
||||
</motion.span>
|
||||
<motion.span
|
||||
style={{
|
||||
opacity: bgYearOpacity2,
|
||||
y: bgYearY2,
|
||||
WebkitTextStroke: "1.5px rgba(216, 195, 150, 0.28)",
|
||||
color: "transparent",
|
||||
}}
|
||||
className="absolute text-[24vw] lg:text-[18vw] font-serif font-black tracking-tighter"
|
||||
>
|
||||
1972
|
||||
</motion.span>
|
||||
<motion.span
|
||||
style={{
|
||||
opacity: bgYearOpacity3,
|
||||
y: bgYearY3,
|
||||
WebkitTextStroke: "1.5px rgba(216, 195, 150, 0.28)",
|
||||
color: "transparent",
|
||||
}}
|
||||
className="absolute text-[24vw] lg:text-[18vw] font-serif font-black tracking-tighter"
|
||||
>
|
||||
2026
|
||||
</motion.span>
|
||||
</div>
|
||||
|
||||
{/* Section Header */}
|
||||
<div className="mb-8 select-none">
|
||||
<span className="font-sans text-[10px] tracking-[0.45em] uppercase text-[#188754] font-bold block mb-1">
|
||||
O U R C H R O N I C L E S
|
||||
</span>
|
||||
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#188754] uppercase">
|
||||
DOSA CHRONICLES
|
||||
</h2>
|
||||
<div className="w-24 h-[1px] bg-gradient-to-r from-[#d8c396] to-transparent mt-3" />
|
||||
</div>
|
||||
|
||||
{/* Interactive Slides Container */}
|
||||
<div className="relative w-full max-w-xl h-[220px] sm:h-[180px] flex items-center">
|
||||
|
||||
{/* Slide 1 */}
|
||||
<motion.div
|
||||
style={{ opacity: textOpacity1, y: textY1 }}
|
||||
className="absolute inset-x-0 flex flex-col justify-center pointer-events-none"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="font-serif text-xl sm:text-2xl font-black text-[#8b2635] tracking-widest">
|
||||
{timelineEvents[0].year}
|
||||
</span>
|
||||
<span className="h-[1px] w-6 bg-gold/45" />
|
||||
<h3 className="font-serif text-sm sm:text-base font-bold text-stone-800 uppercase tracking-widest">
|
||||
{timelineEvents[0].title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="font-sans text-xs sm:text-sm text-stone-700 leading-relaxed text-justify tracking-wide">
|
||||
{timelineEvents[0].text}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Slide 2 */}
|
||||
<motion.div
|
||||
style={{ opacity: textOpacity2, y: textY2 }}
|
||||
className="absolute inset-x-0 flex flex-col justify-center pointer-events-none"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="font-serif text-xl sm:text-2xl font-black text-[#8b2635] tracking-widest">
|
||||
{timelineEvents[1].year}
|
||||
</span>
|
||||
<span className="h-[1px] w-6 bg-gold/45" />
|
||||
<h3 className="font-serif text-sm sm:text-base font-bold text-stone-800 uppercase tracking-widest">
|
||||
{timelineEvents[1].title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="font-sans text-xs sm:text-sm text-stone-700 leading-relaxed text-justify tracking-wide">
|
||||
{timelineEvents[1].text}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Slide 3 */}
|
||||
<motion.div
|
||||
style={{ opacity: textOpacity3, y: textY3 }}
|
||||
className="absolute inset-x-0 flex flex-col justify-center pointer-events-none"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="font-serif text-xl sm:text-2xl font-black text-[#8b2635] tracking-widest">
|
||||
{timelineEvents[2].year}
|
||||
</span>
|
||||
<span className="h-[1px] w-6 bg-gold/45" />
|
||||
<h3 className="font-serif text-sm sm:text-base font-bold text-stone-800 uppercase tracking-widest">
|
||||
{timelineEvents[2].title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="font-sans text-xs sm:text-sm text-stone-700 leading-relaxed text-justify tracking-wide">
|
||||
{timelineEvents[2].text}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Royal Seal Watermark */}
|
||||
<div className="flex items-center gap-3 mt-8 opacity-75 select-none">
|
||||
<div className="w-9 h-9 rounded-full border border-[#8b2635]/30 flex items-center justify-center font-serif text-[10px] text-[#8b2635] font-bold tracking-widest relative">
|
||||
DR
|
||||
<div className="absolute inset-0.5 border border-dashed border-[#8b2635]/20 rounded-full" />
|
||||
</div>
|
||||
<span className="font-serif text-[10px] tracking-[0.25em] text-[#8b2635] uppercase font-bold">
|
||||
{/* Arch Caption Label Overlay */}
|
||||
<div className="absolute bottom-[-16px] z-20">
|
||||
<div className="bg-[#8b2635] border border-gold/45 px-5 py-1 text-[10px] tracking-[0.25em] text-[#fcfaf2] uppercase font-serif font-semibold shadow-md whitespace-nowrap">
|
||||
Heritage Sanctuary
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user