From be42c2b4807ab1748dee1d67e6ce1d067361864e Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Tue, 14 Jul 2026 15:53:20 +0530
Subject: [PATCH] feat: align and scale our story section with interior_royal
 image

---
 src/components/RestaurantStory.tsx | 389 ++++++++++-------------------
 1 file changed, 133 insertions(+), 256 deletions(-)

diff --git a/src/components/RestaurantStory.tsx b/src/components/RestaurantStory.tsx
index 40f7b5d..47ccf4a 100644
--- a/src/components/RestaurantStory.tsx
+++ b/src/components/RestaurantStory.tsx
@@ -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>