info component added animations with framer-motion

src/components/new_ui/info.tsx

@@ -1,5 +1,11 @@
 import { Box, Stack, Image, Flex, Text } from '@chakra-ui/react'
 import { useState } from 'react'
+import { motion } from 'framer-motion'
+
+const MotionStack = motion.create(Stack)
+const MotionImage = motion.create(Image)
+const MotionFlex = motion.create(Flex)
+const MotionBox = motion.create(Box)
 
 interface InfoData {
     id: number
@@ -70,19 +76,27 @@ function Info() {
             justifyItems={'center'}
         >
             <Stack alignItems={'center'} gap={{ base: 4, sm: 4, md: 6, lg: 8, xl: 8 }}>
-                <Image
+                <MotionImage
                     src='/images/new/info_title.webp'
                     w={{ base: '90vw', sm: '80vw', md: '45vw', lg: '35vw', xl: '22vw' }}
                     mt={'50px'}
+                    initial={{ opacity: 0, y: -30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true, amount: 0.3 }}
+                    transition={{ duration: 0.8, ease: "easeOut" }}
                 />
 
-                <Flex
+                <MotionFlex
                     gap={{ base: 1, sm: 2, md: 3, lg: 4, xl: 2 }}
                     flexWrap="wrap"
                     justifyContent="center"
                     px={{ base: 4, sm: 4, md: 0, lg: 0, xl: 0 }}
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true, amount: 0.3 }}
+                    transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
                 >
-                    {infoData.map((info) => (
+                    {infoData.map((info, index) => (
                         <Box
                             key={info.id}
                             w={{ base: '20vw', sm: '110px', md: '150px', lg: '150px', xl: '150px' }}
@@ -109,9 +123,9 @@ function Info() {
                             {info.title}
                         </Box>
                     ))}
-                </Flex>
+                </MotionFlex>
 
-                <Box
+                <MotionBox
                     w={{ base: '83vw', sm: '460px', md: '500px', lg: '500px', xl: '500px' }}
                     bg="white"
                     justifyItems={'center'}
@@ -119,7 +133,10 @@ function Info() {
                     borderRadius="20px"
                     mb={{ base: 8, sm: 8, md: 12, lg: 16, xl: 16 }}
                     boxShadow="0 4px 20px rgba(0,0,0,0.15)"
-
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    whileInView={{ opacity: 1, scale: 1 }}
+                    viewport={{ once: true, amount: 0.3 }}
+                    transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
                 >
                     <Image
                         src={infoData.find(info => info.id === selectedInfo)?.image}
@@ -140,7 +157,7 @@ function Info() {
                             {renderDescription(infoData.find(info => info.id === selectedInfo)?.description || '')}
                         </Text>
                     </Box>
-                </Box>
+                </MotionBox>
             </Stack>
         </Box >
     )