87 lines
3.5 KiB
TypeScript
87 lines
3.5 KiB
TypeScript
import { Stack, Flex, Image, Text, Box } from '@chakra-ui/react';
|
||
import { colors } from '../colors';
|
||
|
||
const footerText = `*獅球嘜品牌產品系列中首次推出之護心食用油
|
||
+根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算
|
||
#每食用分量含0克反式脂肪
|
||
▲Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎
|
||
▼營萃護心油的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="6px" 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"
|
||
align={'center'}
|
||
>
|
||
<Text
|
||
className='font-melle font-xbold'
|
||
fontSize={'4xl'}
|
||
color={'white'}
|
||
>
|
||
{"查詢：29437810"}
|
||
</Text>
|
||
<Flex alignItems={'center'} justifyContent={'center'} direction="column">
|
||
<Image src="/images/header_logo.webp" alt="Logo" width="150px" />
|
||
|
||
</Flex>
|
||
<Flex
|
||
alignItems={'flex-end'}
|
||
w={{ base: '100%', sm: '100%', md: '60%', lg: '55%', xl: '55%' }}
|
||
h={{ base: '180px', sm: '180px', md: '130px' }}
|
||
|
||
>
|
||
|
||
<Stack gap={0}
|
||
position={'absolute'}
|
||
bottom={1}
|
||
>
|
||
{formatText(footerText)}
|
||
<Text
|
||
className='font-noto-sans font-regular'
|
||
color={colors.textColor}
|
||
fontSize={'10px'}
|
||
mt={2}
|
||
ml={2}
|
||
>
|
||
{`Copyright © ${currentYear}合興食油（香港）有限公司 版權所有，不得轉載。`}
|
||
</Text>
|
||
{/* <Text
|
||
className='font-noto-sans font-regular'
|
||
color={colors.textColor}
|
||
fontSize={'8px'}
|
||
|
||
ml={2}
|
||
>
|
||
{`參考資料 | 台灣營養師張益堯在節目《奕起聊健康》上分享關於「油脂」的健康 https://bit.ly/3FmZkCo https://bit.ly/4htQ9gt`}
|
||
</Text> */}
|
||
</Stack>
|
||
</Flex>
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
export default Footer; |