ui updated

src/components/new_ui/truth.tsx

@@ -1,6 +1,6 @@
 import { Box, HStack, Image, Stack, Text, Link, Flex } from '@chakra-ui/react'
-import { motion, useInView } from 'framer-motion'
-import { useEffect, useRef } from 'react';
+import { motion, useInView, useAnimation } from 'framer-motion'
+import { useEffect, useRef, useState } from 'react';
 
 const MotionBox = motion.create(Box)
 const MotionStack = motion.create(Stack)
@@ -73,6 +73,7 @@ function Truth() {
     const titleRef = useRef<HTMLDivElement>(null);
     const isMainInView = useInView(mainRef, { once: true });
     const isTitleInView = useInView(titleRef, { once: true });
+    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 
 
     // Load Facebook SDK and initialize the plugin
@@ -168,13 +169,29 @@ function Truth() {
                                 window.open(url, '_blank');
                             }
                         }}
+                        onHoverStart={() => setHoveredIndex(index)}
+                        onHoverEnd={() => setHoveredIndex(null)}
                     >
                         <MotionImage
                             src={item.image}
                             alt={`truth item ${item.id}`}
                             w={{ base: '70px', sm: '70px', md: '70px', lg: '70px', xl: '70px' }}
                             initial={{ opacity: 0, scale: 0.8 }}
-                            animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
+                            animate={isMainInView ? (hoveredIndex === index ?
+                                { opacity: 1, scale: 1.2 } :
+                                {
+                                    opacity: 1,
+                                    scale: [1, 1.05, 1],
+                                    transition: {
+                                        scale: {
+                                            duration: 2.5,
+                                            ease: "easeInOut",
+                                            repeat: Infinity,
+                                            repeatType: "loop"
+                                        }
+                                    }
+                                }
+                            ) : { opacity: 0, scale: 0.7 }}
                             transition={{ duration: 0.4, delay: 0.4 + index * 0.1, ease: "easeOut" }}
                         />
                         <MotionText