ui updated

src/components/compare.tsx

@@ -1,34 +1,34 @@
-import { Box, Stack, Image, Flex, SimpleGrid, Text } from '@chakra-ui/react'
+import { Box, Stack, Image, Flex, SimpleGrid } 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不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。
-                   此產品沒有根據《藥劑業及毒藥條例》或《中醫藥條例》註冊，為此產品作出的任何聲稱亦沒有為進行該等註冊而接受評核，此產品並不供作診斷、治療或預防任何疾病之用。`
+// 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>
-        ));
-    };
+    // 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
@@ -38,7 +38,7 @@ function Compare() {
         >
             <SimpleGrid columns={2}
                 maxW="full"
-                h={{ base: '200vw', sm: '170vw', md: '145vw', lg: '61vw', xl: '61w' }}
+                h={{ base: '140vw', sm: '140vw', md: '125vw', lg: '55vw', xl: '55vw' }}
                 mb="20px" // Add 20px bottom margin
                 position="relative"
                 zIndex="1"
@@ -91,11 +91,11 @@ function Compare() {
                         transform="translateX(-51%)"
                         zIndex="1"
                     >
-                        <Box
+                        {/* <Box
                             w='auto'
                             h='auto'>
                             {formatText(statement)}
-                        </Box>
+                        </Box> */}
 
                     </Box>
                 </Stack>