From 6392ee020ff7171ffec4dd556402a47f0d3a30a1 Mon Sep 17 00:00:00 2001
From: philipcheung <zerophilip2013hk@gmail.com>
Date: Sun, 2 Nov 2025 15:34:48 +0800
Subject: [PATCH] oilInfo component added animation

---
 src/components/new_ui/oilInfo.tsx | 51 +++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/components/new_ui/oilInfo.tsx b/src/components/new_ui/oilInfo.tsx
index ec0ebe3..f393c4a 100644
--- a/src/components/new_ui/oilInfo.tsx
+++ b/src/components/new_ui/oilInfo.tsx
@@ -1,52 +1,79 @@
-import { Box, Stack, Image, Flex, Text, SimpleGrid } from '@chakra-ui/react'
+import { Box, Image, SimpleGrid } from '@chakra-ui/react'
+import { motion, useInView } from 'framer-motion'
+import { useRef } from 'react'
+
+const MotionImage = motion.create(Image)
+const MotionBox = motion.create(Box)
+const MotionSimpleGrid = motion.create(SimpleGrid)
 
 function OilInfo() {
+    const mainRef = useRef(null);
+    const isMainInView = useInView(mainRef, { once: true });
 
     return (
-        <Box
+        <MotionBox
+            ref={mainRef}
             position="relative"
             w="100%"
             bgColor="#FFFBD3"
             zIndex={3}
             overflow="hidden"
             justifyItems={'center'}
+            initial={{ opacity: 0 }}
+            animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
         >
 
-            <SimpleGrid
+            <MotionSimpleGrid
                 columns={{ base: 1, sm: 1, md: 2 }}
                 p={{ base: 10, sm: 20, md: 20 }}
                 w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '60%' }}
                 h={'auto'}
                 gap={{ base: 10, md: 0 }}
                 justifyItems={'center'}
-                    alignItems={'center'}
+                alignItems={'center'}
+                initial={{ opacity: 0, y: 50 }}
+                animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
+                transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
             >
 
-                <Box
+                <MotionBox
                     justifyItems={'center'}
                     alignItems={'center'}
+                    initial={{ opacity: 0, x: -50 }}
+                    animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
+                    transition={{ duration: 0.6, delay: 0.4, ease: "easeOut" }}
                 >
-                    <Image
+                    <MotionImage
                         src='/images/cookmethods.webp'
                         alt='cooking methods'
                         w={{ base: '100%', sm: '90%', md: '85%' }}
+                        initial={{ opacity: 0, scale: 0.8 }}
+                        animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
+                        transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
                     />
-                </Box>
+                </MotionBox>
 
-                <Box
+                <MotionBox
                     justifyItems={'center'}
                     alignItems={'center'}
+                    initial={{ opacity: 0, x: 50 }}
+                    animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
+                    transition={{ duration: 0.6, delay: 0.8, ease: "easeOut" }}
                 >
-                    <Image
+                    <MotionImage
                         src='/images/new/recipe_button.webp'
                         w={{ base: '100%', sm: '90%', md: '85%' }}
+                        initial={{ opacity: 0, scale: 0.8 }}
+                        animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
+                        transition={{ duration: 0.5, delay: 1.0, ease: "easeOut" }}
                     />
-                </Box>
+                </MotionBox>
 
 
-            </SimpleGrid >
+            </MotionSimpleGrid>
 
-        </Box >
+        </MotionBox>
     )
 }