From f32a2dd307a817f306dfeeca21b7c93340be5328 Mon Sep 17 00:00:00 2001
From: philipcheung <zerophilip2013hk@gmail.com>
Date: Mon, 17 Mar 2025 10:13:04 +0800
Subject: [PATCH] remove animation box

---
 src/components/bestoil.tsx | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/bestoil.tsx b/src/components/bestoil.tsx
index 9c5dbfa..7f5d864 100644
--- a/src/components/bestoil.tsx
+++ b/src/components/bestoil.tsx
@@ -4,7 +4,7 @@ import { motion, useInView } from 'framer-motion'
 import { useRef } from 'react'
 
 // Create motion components from Chakra components
-const MotionBox = motion(Box);
+
 const MotionStack = motion(Stack);
 
 
@@ -17,12 +17,12 @@ function Bestoil() {
 
     // Create refs for elements we want to animate
 
-    const cookRef = useRef(null);
+
     const oilCubesRef = useRef(null);
 
     // Check if elements are in view
 
-    const isCookInView = useInView(cookRef, { once: true });
+
     const isOilCubesInView = useInView(oilCubesRef, { once: true });
 
     const oilCube = [
@@ -86,18 +86,11 @@ function Bestoil() {
                 w='100%'
                 align={"center"}
             >
-                <MotionBox
-                    ref={cookRef}
-                    initial={{ opacity: 0, y: 50 }}
-                    animate={isCookInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
-                    transition={{ duration: 0.8 }}
-                    justifyItems={"center"}
-                >
-                    <Image src={cook}
-                        w={{ base: "80%", sm: "80%", md: '600px' }}
-                        fit='contain'
-                    />
-                </MotionBox>
+
+                <Image src={cook}
+                    w={{ base: "80%", sm: "80%", md: '600px' }}
+                    fit='contain'
+                />
 
                 <Text
                     w={{ base: "90%", sm: "90%", md: '600px' }}