remove animation box

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>
 
                 <Text
                     w={{ base: "90%", sm: "90%", md: '600px' }}