From f2d308e8900e0375955a01b9e119b5906889bde8 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Tue, 14 Jul 2026 16:30:33 +0530
Subject: [PATCH] feat: animate menu section gopuram and palace sketches

---
 src/components/MenuPreview.tsx | 92 +++++++++++++++++++++++++++-------
 1 file changed, 74 insertions(+), 18 deletions(-)

diff --git a/src/components/MenuPreview.tsx b/src/components/MenuPreview.tsx
index 318be1a..a24ce7b 100644
--- a/src/components/MenuPreview.tsx
+++ b/src/components/MenuPreview.tsx
@@ -165,31 +165,87 @@ export default function MenuPreview() {
       {/* Parallax Background Gopuram sketch (Left Watermark) */}
       <motion.div
         style={{ y: gopuramY, x: gopuramX }}
-        className="absolute top-12 left-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-none mix-blend-multiply opacity-[0.12]"
+        className="absolute top-12 left-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-auto mix-blend-multiply z-0"
       >
-        <Image
-          src="/images/menu_gopuram_sketch.png"
-          alt="Gopuram Sketch"
-          fill
-          priority
-          sizes="(max-width: 768px) 30vw, 20vw"
-          className="object-contain filter grayscale"
-        />
+        <motion.div
+          initial={{ opacity: 0, scale: 0.92, rotate: -2, x: -30 }}
+          whileInView={{ 
+            opacity: 0.14, 
+            scale: 1, 
+            rotate: 0,
+            x: 0,
+            transition: { duration: 1.6, ease: "easeOut" } 
+          }}
+          viewport={{ once: true }}
+          animate={{
+            y: [0, -6, 3, -6, 0],
+            x: [0, 3, -3, 2, 0],
+            rotate: [0, 1.2, -1.2, 0.6, 0]
+          }}
+          transition={{
+            y: { repeat: Infinity, duration: 8, ease: "easeInOut" },
+            x: { repeat: Infinity, duration: 10, ease: "easeInOut" },
+            rotate: { repeat: Infinity, duration: 12, ease: "easeInOut" }
+          }}
+          whileHover={{ 
+            scale: 1.05, 
+            opacity: 0.28, 
+            filter: "sepia(0.4) saturate(1.3) drop-shadow(0 10px 15px rgba(216,195,150,0.15))"
+          }}
+          className="w-full h-full relative cursor-pointer"
+        >
+          <Image
+            src="/images/menu_gopuram_sketch.png"
+            alt="Gopuram Sketch"
+            fill
+            priority
+            sizes="(max-width: 768px) 30vw, 20vw"
+            className="object-contain filter grayscale transition-all duration-300"
+          />
+        </motion.div>
       </motion.div>
 
       {/* Parallax Background Palace sketch (Right Watermark) */}
       <motion.div
         style={{ y: palaceY, x: palaceX }}
-        className="absolute top-12 right-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-none mix-blend-multiply opacity-[0.12]"
+        className="absolute top-12 right-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-auto mix-blend-multiply z-0"
       >
-        <Image
-          src="/images/menu_palace_sketch.png"
-          alt="Palace Sketch"
-          fill
-          priority
-          sizes="(max-width: 768px) 30vw, 20vw"
-          className="object-contain filter grayscale"
-        />
+        <motion.div
+          initial={{ opacity: 0, scale: 0.92, rotate: 2, x: 30 }}
+          whileInView={{ 
+            opacity: 0.14, 
+            scale: 1, 
+            rotate: 0,
+            x: 0,
+            transition: { duration: 1.6, ease: "easeOut" } 
+          }}
+          viewport={{ once: true }}
+          animate={{
+            y: [0, 6, -3, 6, 0],
+            x: [0, -3, 3, -2, 0],
+            rotate: [0, -1.2, 1.2, -0.6, 0]
+          }}
+          transition={{
+            y: { repeat: Infinity, duration: 9, ease: "easeInOut" },
+            x: { repeat: Infinity, duration: 11, ease: "easeInOut" },
+            rotate: { repeat: Infinity, duration: 13, ease: "easeInOut" }
+          }}
+          whileHover={{ 
+            scale: 1.05, 
+            opacity: 0.28, 
+            filter: "sepia(0.4) saturate(1.3) drop-shadow(0 10px 15px rgba(216,195,150,0.15))"
+          }}
+          className="w-full h-full relative cursor-pointer"
+        >
+          <Image
+            src="/images/menu_palace_sketch.png"
+            alt="Palace Sketch"
+            fill
+            priority
+            sizes="(max-width: 768px) 30vw, 20vw"
+            className="object-contain filter grayscale transition-all duration-300"
+          />
+        </motion.div>
       </motion.div>
 
       <div className="max-w-6xl mx-auto relative z-10">