updated the ui v315

src/components/compare.tsx

@@ -1,15 +1,35 @@
-import { Box, Stack, Image, Flex, SimpleGrid } from '@chakra-ui/react'
-import {useRef } from 'react';
+import { Box, Stack, Image, Flex, SimpleGrid, Text } from '@chakra-ui/react'
+import { useRef } from 'react';
 import { motion } from 'framer-motion';
+import { colors } from '../colors';
 
 // Create motion versions of Chakra components
 
 const MotionImage = motion(Image);
 
+const statement = `*營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。
+                   ^Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。
+                   此產品沒有根據《藥劑業及毒藥條例》或《中醫藥條例》註冊，為此產品作出的任何聲稱亦沒有為進行該等註冊而接受評核，此產品並不供作診斷、治療或預防任何疾病之用。`
 
 function Compare() {
     const compareRef = useRef(null);
 
+    const formatText = (text: string) => {
+        return text.split('\n').map((line, i) => (
+            <Box key={i}
+                color={colors.textColor}
+                fontSize='10px'
+                mx={5}
+                className='font-noto-sans font-regular'
+            >
+                {line.split('\t').map((segment, j) => (
+                    j === 0 ? segment : <Text as="span" ml={4} key={j}>{segment}</Text>
+                ))}
+                {i < text.split('\n').length - 1 && <br />}
+            </Box>
+        ));
+    };
+
     return (
         <Box
             ref={compareRef}
@@ -18,7 +38,7 @@ function Compare() {
         >
             <SimpleGrid columns={2}
                 maxW="full"
-                h={{ base: '140vw', sm: '140vw', md: '120vw', lg: '50vw', xl: '55vw' }}
+                h={{ base: '200vw', sm: '170vw', md: '145vw', lg: '61vw', xl: '61w' }}
                 mb="20px" // Add 20px bottom margin
                 position="relative"
                 zIndex="1"
@@ -61,7 +81,25 @@ function Compare() {
                         viewport={{ once: true }}
                         transition={{ duration: 1.5 }}
                     />
+                    <Box
+                        width={'full'}
+                        justifyItems={'center'}
+                        position="absolute"
+                        bottom="17%"
+                        left="50%"
+                        transform="translateX(-51%)"
+                        zIndex="1"
+                    >
+                        <Box
+                            w='auto'
+                            h='auto'>
+                            {formatText(statement)}
+                        </Box>
+
+                    </Box>
                 </Stack>
+
+
             </SimpleGrid>
 
             {/* Use a larger negative margin to pull the flex up into the grid area */}