ui updated

src/components/new_ui/advantages.tsx

@@ -198,7 +198,7 @@ function Advantages() {
 
                 <Text
                     className='font-melle font-xbold'
-                    fontSize={{ base: '7vw', sm: '7vw', md: '4vw', lg: '4vw', xl: '3.5vw' }}
+                    fontSize={{ base: '7.5vw', sm: '7.5vw', md: '4vw', lg: '4vw', xl: '4vw' }}
                     color={'white'}
                     mt={-2}
                 >
@@ -455,7 +455,7 @@ function Advantages() {
                         <MotionText
                             w={{ base: '90%', sm: '80%', md: '80%', lg: '80%', xl: '80%' }}
                             className="font-noto-sans font-demi-light"
-                           fontSize={{ base: 'xl', sm: 'xl', md: 'xl', lg: '2xl', xl: '2xl' }}
+                           fontSize={{ base: '21px', sm: 'xl', md: 'xl', lg: '2xl', xl: '2xl' }}
                             color="white"
                             lineHeight="1.8"
                             textAlign="left"

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

src/pages/recipe.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, SimpleGrid, Image } from '@chakra-ui/react'
+import { Box, Text, SimpleGrid, Image, HStack } from '@chakra-ui/react'
 import { InstagramEmbed } from 'react-social-media-embed';
 import Header from '@/components/header';
 import { useEffect, useState } from 'react'
@@ -156,21 +156,26 @@ function Recipe() {
         >
             <Header showMenu={true} />
 
-            <Box
-                w="100px"
-                h="100px"
+            <HStack
                 position="absolute"
                 display="flex"
                 justifyContent="center"
                 alignItems="center"
-                top={{ base: "180px", md: "180px", lg: "180px", xl: "180px" }}
+                top={{ base: "140px", md: "140px", lg: "140px", xl: "140px" }}
                 left={{ base: "0vw", md: "2vw", lg: "2vw", xl: "2vw" }}
                 onClick={() => router.navigate({ to: '/' })}
                 cursor="pointer"
                 _hover={{ opacity: 0.8 }}
             >
-                <IoCaretBackOutline color = {colors.topBarColor} size={50}/>
-            </Box>
+                <IoCaretBackOutline color={colors.topBarColor} size={50} />
+                <Text
+                    className='font-melle font-xbold'
+                    color={'#468A06'}
+                    fontSize={{ base: "2xl", md: "2xl", lg: "2xl", xl: "2xl" }}
+                >
+                    {'返回上一頁'}
+                </Text>
+            </HStack>
 
             <Image
                 src="/images/new/recipe_title.webp"