From 899400173de0746fd8bffe2be113249d981f6b20 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Wed, 15 Jul 2026 17:34:33 +0530
Subject: [PATCH] feat: integrate Framer Motion scroll entrance animations for
 Heritage Story, Menu Items, Chef Showcase details, and Events Accordion
 sections

---
 src/components/ChefShowcase.tsx    | 50 +++++++++++++++++++-----
 src/components/EventsAccordion.tsx | 21 ++++++++--
 src/components/MenuPreview.tsx     | 11 ++++--
 src/components/RestaurantStory.tsx | 61 ++++++++++++++++++++++++------
 4 files changed, 113 insertions(+), 30 deletions(-)

diff --git a/src/components/ChefShowcase.tsx b/src/components/ChefShowcase.tsx
index fbc5cf0..30b824c 100644
--- a/src/components/ChefShowcase.tsx
+++ b/src/components/ChefShowcase.tsx
@@ -145,7 +145,13 @@ export default function ChefShowcase() {
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
           
           {/* Left Column: Chef Details */}
-          <div className="lg:col-span-7 flex flex-col items-center lg:items-start text-center lg:text-left justify-center select-text">
+          <motion.div
+            initial={{ opacity: 0, x: -45 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+            className="lg:col-span-7 flex flex-col items-center lg:items-start text-center lg:text-left justify-center select-text"
+          >
             
             <div className="flex flex-col items-center lg:items-start mb-2">
               <ChefLotusOrnament />
@@ -187,10 +193,16 @@ export default function ChefShowcase() {
               </span>
             </div>
 
-          </div>
+          </motion.div>
 
           {/* Right Column: Chef Cooking Portrait with Overlay Badge */}
-          <div className="lg:col-span-5 flex justify-center relative">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 30 }}
+            whileInView={{ opacity: 1, scale: 1, y: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 0.85, ease: "easeOut" }}
+            className="lg:col-span-5 flex justify-center relative"
+          >
             
             {/* 30+ Years Experience Badge Overlay */}
             <div className="absolute -top-6 -right-6 w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-[#bc9e65]/80 bg-black/45 backdrop-blur-md z-30 shadow-2xl flex flex-col items-center justify-center text-center p-3 select-none pointer-events-none">
@@ -224,12 +236,18 @@ export default function ChefShowcase() {
               />
             </div>
 
-          </div>
+          </motion.div>
 
         </div>
 
         {/* Middle Highlights Card Section */}
-        <div className="bg-black/25 backdrop-blur-sm border border-[#d8c396]/30 rounded-2xl p-6 sm:p-8 mt-4 shadow-2xl relative z-10 divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/20 grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 select-text">
+        <motion.div
+          initial={{ opacity: 0, y: 25 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.7, delay: 0.1, ease: "easeOut" }}
+          className="bg-black/25 backdrop-blur-sm border border-[#d8c396]/30 rounded-2xl p-6 sm:p-8 mt-4 shadow-2xl relative z-10 divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/20 grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 select-text"
+        >
           
           {/* Feature 1: Authentic Recipes */}
           <div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
@@ -274,13 +292,19 @@ export default function ChefShowcase() {
             <p className="font-sans text-[10px] sm:text-[11px] text-stone-300 leading-relaxed max-w-[150px] mx-auto">Every dish is prepared with care, devotion & warmth.</p>
           </div>
 
-        </div>
+        </motion.div>
 
         {/* Bottom Section: Quote on the Left & Spices Parchment Card on the Right */}
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center mt-6">
           
           {/* Bottom Left: Gopuram Sketch Background & Large Narrative Quote */}
-          <div className="lg:col-span-5 relative flex flex-col justify-center min-h-[160px] pl-4 sm:pl-6 select-text">
+          <motion.div
+            initial={{ opacity: 0, x: -35 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+            className="lg:col-span-5 relative flex flex-col justify-center min-h-[160px] pl-4 sm:pl-6 select-text"
+          >
             {/* Quote details */}
             <div className="relative z-10 select-text text-left">
               <span className="text-[#c62828] text-7xl font-serif leading-none select-none block -mb-4">“</span>
@@ -297,10 +321,16 @@ export default function ChefShowcase() {
                 <div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
               </div>
             </div>
-          </div>
+          </motion.div>
 
           {/* Bottom Right: Spices Parchment Card */}
-          <div className="lg:col-span-7 flex justify-end">
+          <motion.div
+            initial={{ opacity: 0, x: 35 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+            className="lg:col-span-7 flex justify-end"
+          >
             <div className="w-full max-w-[620px] relative bg-[#fdfcf7]/95 border border-[#d8c396]/55 rounded-none p-5 sm:p-8 min-h-[160px] shadow-[0_15px_30px_rgba(0,0,0,0.5)] flex flex-col justify-center overflow-visible select-text text-left">
               
               {/* Inner border line overlay */}
@@ -340,7 +370,7 @@ export default function ChefShowcase() {
 
 
             </div>
-          </div>
+          </motion.div>
 
         </div>
 
diff --git a/src/components/EventsAccordion.tsx b/src/components/EventsAccordion.tsx
index 6edfd3e..4292bd9 100644
--- a/src/components/EventsAccordion.tsx
+++ b/src/components/EventsAccordion.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { motion } from "framer-motion";
 import Image from "next/image";
 
 // Custom Ornate Gold Category SVG Icons
@@ -150,7 +151,13 @@ export default function EventsAccordion() {
       <div className="container max-w-6xl mx-auto relative z-10 flex flex-col h-full">
         
         {/* Title Block Header */}
-        <div className="mb-12 flex flex-col items-center text-center select-text">
+        <motion.div
+          initial={{ opacity: 0, y: 35 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-80px" }}
+          transition={{ duration: 0.75, ease: "easeOut" }}
+          className="mb-12 flex flex-col items-center text-center select-text"
+        >
           {/* Gold Star/Diamond Emblem header */}
           <div className="flex flex-col items-center mb-2 pointer-events-none select-none">
             <svg className="w-5 h-5 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
@@ -184,10 +191,16 @@ export default function EventsAccordion() {
           <p className="font-sans text-xs sm:text-sm text-stone-700 leading-relaxed tracking-wider max-w-xl mx-auto">
             From intimate royal gatherings to grand celebrations, experience curated culinary journeys that leave lasting impressions.
           </p>
-        </div>
+        </motion.div>
 
         {/* Horizontal Accordion Track */}
-        <div className="flex flex-col lg:flex-row gap-5 h-[620px] lg:h-[460px] w-full items-stretch relative z-20">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8, delay: 0.1, ease: "easeOut" }}
+          className="flex flex-col lg:flex-row gap-5 h-[620px] lg:h-[460px] w-full items-stretch relative z-20"
+        >
           {events.map((event, idx) => {
             const isActive = idx === activeIdx;
             const CategoryIcon = event.icon;
@@ -322,7 +335,7 @@ export default function EventsAccordion() {
               </div>
             );
           })}
-        </div>
+        </motion.div>
 
       </div>
     </section>
diff --git a/src/components/MenuPreview.tsx b/src/components/MenuPreview.tsx
index 280f6f1..1ebd2fa 100644
--- a/src/components/MenuPreview.tsx
+++ b/src/components/MenuPreview.tsx
@@ -97,10 +97,13 @@ const CategoryPill = ({ tag, type }: { tag: string; type: "green" | "gold" | "or
   );
 };
 
-const MenuItemCard = ({ name, desc, tag, type, img }: MenuItemProps) => (
+const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { index: number }) => (
   <motion.div
+    initial={{ opacity: 0, y: 20 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    viewport={{ once: true, margin: "-50px" }}
+    transition={{ duration: 0.5, delay: (index % 5) * 0.08, ease: "easeOut" }}
     whileHover={{ y: -2, scale: 1.01 }}
-    transition={{ duration: 0.25 }}
     className="group relative bg-[#fdfcf9] border border-[#d8c396]/45 rounded-none p-4 pl-22 pr-4 min-h-[96px] shadow-[0_4px_12px_rgba(10,74,43,0.03)] hover:shadow-[0_8px_20px_rgba(10,74,43,0.07)] hover:border-[#bc9e65] flex flex-col justify-center select-text overflow-visible"
   >
     {/* Inner decorative inset line */}
@@ -319,14 +322,14 @@ export default function MenuPreview() {
             {/* Left Column Item Cards */}
             <div className="flex flex-col gap-6 pl-2 pr-2 md:pl-4">
               {leftColumnItems.map((item, index) => (
-                <MenuItemCard key={index} {...item} />
+                <MenuItemCard key={index} {...item} index={index} />
               ))}
             </div>
 
             {/* Right Column Item Cards */}
             <div className="flex flex-col gap-6 pl-2 pr-2 md:pr-4">
               {rightColumnItems.map((item, index) => (
-                <MenuItemCard key={index} {...item} />
+                <MenuItemCard key={index} {...item} index={index} />
               ))}
             </div>
 
diff --git a/src/components/RestaurantStory.tsx b/src/components/RestaurantStory.tsx
index baba01c..7722732 100644
--- a/src/components/RestaurantStory.tsx
+++ b/src/components/RestaurantStory.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import { motion } from "framer-motion";
 
 const StoryPreTitleOrnament = () => (
   <svg className="w-4 h-4 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
@@ -38,7 +39,13 @@ export default function RestaurantStory() {
       <div className="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-8 relative z-10">
         
         {/* Left Side: Story & Features Details (Fully Center-Aligned) */}
-        <div className="w-full lg:w-[50%] flex flex-col items-center text-center justify-center">
+        <motion.div
+          initial={{ opacity: 0, y: 35 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-80px" }}
+          transition={{ duration: 0.75, ease: "easeOut" }}
+          className="w-full lg:w-[50%] flex flex-col items-center text-center justify-center"
+        >
           
           {/* Pre-title with Gold Crest */}
           <div className="flex flex-col items-center mb-2">
@@ -69,7 +76,13 @@ export default function RestaurantStory() {
           <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 sm:gap-4 w-full mt-4">
             
             {/* Feature 1: Veg */}
-            <div className="flex flex-col items-center text-center group select-text">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9, y: 15 }}
+              whileInView={{ opacity: 1, scale: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: 0.1, ease: "easeOut" }}
+              className="flex flex-col items-center text-center group select-text"
+            >
               <div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none">
                 <svg className="w-6 h-6 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                   <circle cx="12" cy="12" r="10" />
@@ -84,10 +97,16 @@ export default function RestaurantStory() {
               <p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
                 Pure vegetarian food made with the finest ingredients.
               </p>
-            </div>
+            </motion.div>
 
             {/* Feature 2: Recipes */}
-            <div className="flex flex-col items-center text-center group select-text">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9, y: 15 }}
+              whileInView={{ opacity: 1, scale: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
+              className="flex flex-col items-center text-center group select-text"
+            >
               <div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none">
                 <svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                   <path d="M4 10h16c0 5-2.5 8-8 8s-8-3-8-8z" />
@@ -102,10 +121,16 @@ export default function RestaurantStory() {
               <p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
                 Traditional recipes crafted with authentic South Indian flavors.
               </p>
-            </div>
+            </motion.div>
 
             {/* Feature 3: Hospitality */}
-            <div className="flex flex-col items-center text-center group select-text">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9, y: 15 }}
+              whileInView={{ opacity: 1, scale: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
+              className="flex flex-col items-center text-center group select-text"
+            >
               <div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none">
                 <svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                   <path d="M12 20V4" />
@@ -120,10 +145,16 @@ export default function RestaurantStory() {
               <p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
                 A homely environment with friendly service and a smile.
               </p>
-            </div>
+            </motion.div>
 
             {/* Feature 4: Love */}
-            <div className="flex flex-col items-center text-center group select-text">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9, y: 15 }}
+              whileInView={{ opacity: 1, scale: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
+              className="flex flex-col items-center text-center group select-text"
+            >
               <div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none">
                 <svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                   <circle cx="12" cy="12" r="10" />
@@ -136,14 +167,20 @@ export default function RestaurantStory() {
               <p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
                 Every dish is prepared with love, care and traditional values.
               </p>
-            </div>
+            </motion.div>
 
           </div>
 
-        </div>
+        </motion.div>
 
         {/* Right Side: Mockup Gopuram Archway thali frame */}
-        <div className="w-full lg:w-[46%] flex justify-center lg:justify-end relative z-10">
+        <motion.div
+          initial={{ opacity: 0, x: 45, scale: 0.96 }}
+          whileInView={{ opacity: 1, x: 0, scale: 1 }}
+          viewport={{ once: true, margin: "-80px" }}
+          transition={{ duration: 0.85, ease: "easeOut" }}
+          className="w-full lg:w-[46%] flex justify-center lg:justify-end relative z-10"
+        >
           {/* Crop-extracted story thali arch image */}
           <div className="w-[340px] h-[340px] sm:w-[480px] sm:h-[480px] md:w-[500px] md:h-[500px] relative pointer-events-none select-none">
             <Image
@@ -155,7 +192,7 @@ export default function RestaurantStory() {
               priority
             />
           </div>
-        </div>
+        </motion.div>
 
       </div>
     </section>