257 lines
11 KiB
TypeScript
257 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { motion, useScroll, useTransform } from "framer-motion";
|
|
import gsap from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import Image from "next/image";
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
export default function RestaurantStory() {
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
const parchmentRef = useRef<HTMLDivElement>(null);
|
|
const titleRef = useRef<HTMLHeadingElement>(null);
|
|
|
|
// Framer Motion scroll tracking for simple parallax of background and frames
|
|
const { scrollYProgress } = useScroll({
|
|
target: sectionRef,
|
|
offset: ["start end", "end start"],
|
|
});
|
|
|
|
const yBackground = useTransform(scrollYProgress, [0, 1], ["-10%", "10%"]);
|
|
const yImage1 = useTransform(scrollYProgress, [0, 1], ["0%", "-15%"]);
|
|
const yImage2 = useTransform(scrollYProgress, [0, 1], ["10%", "-5%"]);
|
|
|
|
useEffect(() => {
|
|
const parchment = parchmentRef.current;
|
|
if (!parchment) return;
|
|
|
|
const ctx = gsap.context(() => {
|
|
// Vintage paper reveal: expands vertically like a scroll unrolling
|
|
gsap.fromTo(
|
|
parchment,
|
|
{
|
|
clipPath: "polygon(0 48%, 100% 48%, 100% 52%, 0 52%)",
|
|
scale: 0.95,
|
|
},
|
|
{
|
|
clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
|
|
scale: 1,
|
|
duration: 2,
|
|
ease: "power3.inOut",
|
|
scrollTrigger: {
|
|
trigger: parchment,
|
|
start: "top 80%",
|
|
end: "top 30%",
|
|
scrub: true,
|
|
},
|
|
}
|
|
);
|
|
|
|
// Text ink reveal: lines fade and spread slightly on scroll
|
|
const textLines = parchment.querySelectorAll(".ink-reveal");
|
|
textLines.forEach((line) => {
|
|
gsap.fromTo(
|
|
line,
|
|
{ opacity: 0.1, filter: "blur(4px)", y: 15 },
|
|
{
|
|
opacity: 1,
|
|
filter: "blur(0px)",
|
|
y: 0,
|
|
duration: 1.2,
|
|
scrollTrigger: {
|
|
trigger: line,
|
|
start: "top 85%",
|
|
end: "top 60%",
|
|
scrub: true,
|
|
},
|
|
}
|
|
);
|
|
});
|
|
}, parchment);
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
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.",
|
|
},
|
|
{
|
|
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.",
|
|
},
|
|
{
|
|
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.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section
|
|
ref={sectionRef}
|
|
className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center items-center overflow-hidden bg-[#f6f3ea]"
|
|
>
|
|
{/* 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" />
|
|
|
|
<div className="container max-w-6xl relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
|
|
|
{/* Left Side: Vintage Parchment Scroll */}
|
|
<div className="lg:col-span-7 w-full">
|
|
<div
|
|
ref={parchmentRef}
|
|
className="relative w-full py-16 px-8 md:px-12 rounded-lg shadow-xl border border-gold/30 overflow-hidden"
|
|
style={{
|
|
background: "linear-gradient(135deg, #fcf9f2 0%, #f6eeda 100%)",
|
|
boxShadow: "inset 0 0 35px rgba(24, 135, 84, 0.05), 0 20px 40px -10px rgba(28, 45, 36, 0.08)",
|
|
}}
|
|
>
|
|
{/* Distressed Paper Edges and Watermark */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(#cda570_1px,transparent_1px)] [background-size:24px_24px] opacity-10 pointer-events-none" />
|
|
<div className="absolute inset-4 border border-maroon/10 pointer-events-none" />
|
|
<div className="absolute inset-[18px] border-2 border-double border-maroon/20 pointer-events-none" />
|
|
|
|
{/* Brass Corner Accents */}
|
|
<div className="absolute top-4 left-4 w-4 h-4 border-t border-l border-maroon/40" />
|
|
<div className="absolute top-4 right-4 w-4 h-4 border-t border-r border-maroon/40" />
|
|
<div className="absolute bottom-4 left-4 w-4 h-4 border-b border-l border-maroon/40" />
|
|
<div className="absolute bottom-4 right-4 w-4 h-4 border-b border-r border-maroon/40" />
|
|
|
|
{/* Scroll Header */}
|
|
<div className="text-center mb-12 flex flex-col items-center">
|
|
<span className="font-sans text-[10px] tracking-[0.4em] uppercase text-maroon-light font-bold mb-2">
|
|
O U R C H R O N I C L E S
|
|
</span>
|
|
<h2
|
|
ref={titleRef}
|
|
className="font-serif text-3xl md:text-5xl font-bold tracking-wide text-maroon uppercase"
|
|
>
|
|
OUR DOSA CHRONICLES
|
|
</h2>
|
|
<div className="w-20 h-[1.5px] bg-maroon/30 mt-3" />
|
|
</div>
|
|
|
|
{/* Timeline List */}
|
|
<div className="flex flex-col gap-10 relative pl-4 md:pl-8 border-l border-maroon/15">
|
|
{timelineEvents.map((event, idx) => (
|
|
<div key={idx} className="relative group ink-reveal">
|
|
{/* Timeline Node Ring */}
|
|
<div className="absolute -left-[21px] md:-left-[37px] top-1.5 w-[13px] h-[13px] rounded-full bg-[#eae0d0] border-[3px] border-maroon group-hover:scale-125 transition-transform duration-300 shadow-sm" />
|
|
|
|
{/* Event Meta */}
|
|
<div className="flex flex-col md:flex-row md:items-baseline gap-1 md:gap-4 mb-2">
|
|
<span className="font-serif text-xl md:text-2xl font-black text-maroon-light tracking-wider">
|
|
{event.year}
|
|
</span>
|
|
<h3 className="font-serif text-base md:text-lg font-bold text-wood uppercase tracking-wider">
|
|
{event.title}
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Event Text */}
|
|
<p className="font-sans text-sm text-stone-800 leading-relaxed max-w-lg">
|
|
{event.text}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom Seal Decoration */}
|
|
<div className="flex justify-center mt-12">
|
|
<div className="w-10 h-10 rounded-full border border-maroon/30 flex items-center justify-center font-serif text-[10px] text-maroon font-bold tracking-wider relative">
|
|
DR
|
|
<div className="absolute inset-1 border border-dashed border-maroon/20 rounded-full" />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Side: Vintage Framed Pictures with Parallax */}
|
|
<div className="lg:col-span-5 flex flex-col gap-8 relative items-center justify-center">
|
|
|
|
{/* Framed Image 1: Mansion Detail */}
|
|
<motion.div
|
|
className="w-72 h-96 relative border-8 border-wood bg-darkbg rounded shadow-[0_15px_35px_rgba(0,0,0,0.6)] p-2 z-10"
|
|
style={{ y: yImage1 }}
|
|
>
|
|
{/* Brass Inner Frame Border */}
|
|
<div className="absolute inset-1 border border-gold-dark/40" />
|
|
<div className="w-full h-full relative overflow-hidden">
|
|
<Image
|
|
src="/images/my_dosa_place_interior_royal.jpg"
|
|
alt="Vintage Teak Columns"
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 30vw"
|
|
className="object-cover brightness-100 hover:scale-105 transition-transform duration-700"
|
|
/>
|
|
</div>
|
|
{/* Title Tag */}
|
|
<div className="absolute -bottom-4 left-1/2 -translate-x-1/2 bg-wood border border-gold/40 px-3 py-1 text-[10px] tracking-widest text-[#188754] uppercase font-serif font-bold">
|
|
Circa 1928
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Framed Image 2: Gopuram Temple Arch styled layout */}
|
|
<div className="relative self-end lg:-mr-12 -mt-16 z-20 flex flex-col items-center">
|
|
<motion.div
|
|
className="w-56 h-72 relative overflow-hidden shadow-2xl"
|
|
style={{
|
|
y: yImage2,
|
|
clipPath: "url(#gopuram-arch)",
|
|
WebkitClipPath: "url(#gopuram-arch)"
|
|
}}
|
|
>
|
|
<div className="w-full h-full relative">
|
|
<Image
|
|
src="/images/my_dosa_place_food_royal.png"
|
|
alt="Traditional Serving"
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 25vw"
|
|
className="object-cover brightness-100 hover:scale-105 transition-transform duration-700"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Title Tag (Placed outside the clip-path container so it isn't cropped) */}
|
|
<div className="absolute -bottom-4 bg-wood border border-gold/40 px-3 py-1 text-[9px] tracking-widest text-[#188754] uppercase font-serif z-30 font-bold shadow-md">
|
|
Royal Dining
|
|
</div>
|
|
</div>
|
|
|
|
{/* Background Ambient Glow */}
|
|
<div className="absolute w-80 h-80 rounded-full bg-maroon/20 blur-[100px] -z-10 pointer-events-none" />
|
|
</div>
|
|
|
|
{/* SVG ClipPath Definition for the Gopuram Temple Arch frame */}
|
|
<svg width="0" height="0" className="absolute pointer-events-none">
|
|
<defs>
|
|
<clipPath id="gopuram-arch" clipPathUnits="objectBoundingBox">
|
|
<path d="M 0.5,0
|
|
C 0.65,0 0.72,0.06 0.72,0.15
|
|
C 0.72,0.18 0.74,0.19 0.76,0.2
|
|
C 0.85,0.22 0.88,0.28 0.88,0.35
|
|
C 0.88,0.38 0.9,0.39 0.92,0.4
|
|
C 0.98,0.42 1,0.48 1,0.55
|
|
L 1,1
|
|
L 0,1
|
|
C 0,0.48 0.02,0.42 0.08,0.4
|
|
C 0.1,0.39 0.12,0.38 0.12,0.35
|
|
C 0.12,0.28 0.15,0.22 0.24,0.2
|
|
C 0.26,0.19 0.28,0.18 0.28,0.15
|
|
C 0.28,0.06 0.35,0 0.5,0 Z" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|