ui updated

src/components/footer.tsx

@@ -1,7 +1,38 @@
-import { Stack, Flex, Image, Text, } from '@chakra-ui/react';
+import { Stack, Flex, Image, Text, Box } from '@chakra-ui/react';
 import { colors } from '../colors';
 
+const footerText = `*獅球嘜品牌產品系列中首次推出之護心食用油
+^營萃護心油根據世界衛生組織建議之每日人體脂肪酸攝取比例調製，其成分內的Omega-3比例較一般花生油、粟米油高，特別有助平衡慣常外出用餐的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，有助維持心血管健康
+#每食用分量含0克反式脂肪
+▲Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎
++根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算
+▼營萃護心油的omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎，維持心血管健康`
 function Footer() {
+
+    const formatText = (text: string) => {
+        return text.split('\n').map((line, i) => (
+            <Box key={i}
+                className='font-noto-sans font-regular'
+                color={colors.textColor}
+                fontSize={'10px'}
+                ml={2}
+            >
+                {line.charAt(0).match(/[\*\^\▲\+\▼\#]/) ? (
+                    <>
+                        <Text as="span" fontSize="7px" verticalAlign="super">{line.charAt(0)}</Text>
+                        {line.substring(1).split('\t').map((segment, j) => (
+                            j === 0 ? segment : <Text as="span" ml={4} key={j}>{segment}</Text>
+                        ))}
+                    </>
+                ) : (
+                    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 currentYear = new Date().getFullYear();
     return (
         <Stack bg={colors.topBarColor} py={5} w="full"
@@ -21,23 +52,25 @@ function Footer() {
             <Flex
                 alignItems={'flex-end'}
                 w={{ base: '100%', sm: '100%', md: '60%', lg: '55%', xl: '55%' }}
-                h='60px'
+                h={{ base: '180px', sm: '180px', md: '130px' }}
 
             >
-                <Stack gap={0} 
-                position={'absolute'}
-                bottom={1}
+
+                <Stack gap={0}
+                    position={'absolute'}
+                    bottom={1}
                 >
+                    {formatText(footerText)}
                     <Text
                         className='font-noto-sans font-regular'
                         color={colors.textColor}
-                        fontSize={'8px'}
-                        mt={5}
+                        fontSize={'10px'}
+                        mt={2}
                         ml={2}
                     >
                         {`Copyright © ${currentYear}合興食油（香港）有限公司 版權所有，不得轉載。`}
                     </Text>
-                    <Text
+                    {/* <Text
                         className='font-noto-sans font-regular'
                         color={colors.textColor}
                         fontSize={'8px'}
@@ -45,7 +78,7 @@ function Footer() {
                         ml={2}
                     >
                         {`參考資料 | 台灣營養師張益堯在節目《奕起聊健康》上分享關於「油脂」的健康  https://bit.ly/3FmZkCo  https://bit.ly/4htQ9gt`}
-                    </Text>
+                    </Text> */}
                 </Stack>
             </Flex>
         </Stack>