208 lines
7.0 KiB
TypeScript
208 lines
7.0 KiB
TypeScript
import { Box, Stack, Image, Flex, useBreakpointValue, Text } from '@chakra-ui/react'
|
||
import { colors } from '../colors';
|
||
import {motion, useInView } from 'framer-motion'
|
||
import { useRef } from 'react'
|
||
|
||
// Create motion components from Chakra components
|
||
|
||
const MotionStack = motion(Stack);
|
||
|
||
const footerText = `守護您和家人的心臟健康，
|
||
食得安心，護心更放心！`
|
||
|
||
|
||
function Bestoil() {
|
||
|
||
const formatText = (text: string) => {
|
||
return text.split('\n').map((line, i) => (
|
||
<Box key={i}
|
||
color={colors.textColor}
|
||
lineHeight={1}
|
||
fontSize='4xl'
|
||
textAlign={{ sm: 'flex-start', md: 'center' }}
|
||
className='font-melle font-xbold'
|
||
>
|
||
{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 cook = useBreakpointValue({
|
||
base: "/images/cook_mb.webp",
|
||
sm: "/images/cook_mb.webp",
|
||
md: "/images/goldandhealthytext.webp",
|
||
});
|
||
|
||
// Create refs for elements we want to animate
|
||
|
||
|
||
const oilCubesRef = useRef(null);
|
||
|
||
// Check if elements are in view
|
||
|
||
|
||
const isOilCubesInView = useInView(oilCubesRef, { once: true });
|
||
|
||
const oilCube = [
|
||
{
|
||
bgColor: 'linear-gradient(to right,#00609E ,#008FD0,#00609E )',
|
||
title: '米糠油',
|
||
text: '含天然谷維素，具抗氧化作用，有助維持血管健康'
|
||
},
|
||
{
|
||
bgColor: 'linear-gradient(to right,#D44E2D ,#EAA72E,#D44E2D )',
|
||
title: '芥花籽油',
|
||
text: '富含多元不飽和脂肪酸Omega-3、6，有助降低心血管疾病風險'
|
||
},
|
||
{
|
||
bgColor: 'linear-gradient(to right,#7DAE3A ,#AFC226,#7DAE3A )',
|
||
title: '橄欖油',
|
||
text: '富含單元不飽和脂肪酸Omega-9，有助保護心臟健康'
|
||
},
|
||
{
|
||
bgColor: 'linear-gradient(to right,#0098D2 ,#00AFE6,#0098D2 )',
|
||
title: '亞麻籽油',
|
||
text: '是亞麻酸(Omega-3) 的良好來源，有助維持細胞健康'
|
||
},
|
||
{
|
||
bgColor: 'linear-gradient(to right,#D23431 ,#E28C24,#D23431 )',
|
||
title: '高油酸葵花籽油',
|
||
text: '低飽和脂肪，穩定性高，適合高溫烹調'
|
||
},
|
||
]
|
||
|
||
return (
|
||
<Stack
|
||
position="relative"
|
||
w="100%"
|
||
overflow="hidden"
|
||
bgColor={colors.backgroundColor}
|
||
>
|
||
<Flex
|
||
w='100%'
|
||
gap={0}
|
||
justify={"center"}
|
||
align={"center"}
|
||
direction={{ base: "column", sm: "column", md: "row" }}
|
||
>
|
||
<Stack
|
||
w={{ base: "70%", sm: "80%", md: '350px', lg: '500px' }}
|
||
align={"center"}
|
||
mr={{ base: 0, sm: 0, md: '-80px' }}
|
||
mt={{ base: 10, sm: 10, md: 0 }}
|
||
>
|
||
<Image src="/images/best5.webp"
|
||
fit='contain'
|
||
loading="lazy"
|
||
/>
|
||
|
||
<Image src='/images/cookmethods.webp'
|
||
w={'70%'}
|
||
display={{ base: "none", sm: "none", md: "flex" }}
|
||
fit='contain'
|
||
loading="lazy"
|
||
/>
|
||
</Stack>
|
||
|
||
|
||
|
||
|
||
<Image src="/images/oilchart.webp"
|
||
fit='contain'
|
||
w={{ base: "80%", sm: "90%", md: '350px', lg: '500px' }}
|
||
loading="lazy"
|
||
/>
|
||
|
||
</Flex>
|
||
|
||
<Stack
|
||
w='100%'
|
||
align={"center"}
|
||
>
|
||
|
||
<Image src={cook}
|
||
w={{ base: "80%", sm: "80%", md: '600px' }}
|
||
fit='contain'
|
||
loading="lazy"
|
||
/>
|
||
|
||
<Text
|
||
w={{ base: "90%", sm: "90%", md: '600px' }}
|
||
fontSize={'lg'}
|
||
className='NotoSansCJKtc font-regular'
|
||
color={colors.textColor}
|
||
textAlign={"center"}>
|
||
{"不同食油的脂肪酸組合各有優勢，而長期使用單一油種則可能令營養失衡。營萃護心油融合5種優質食油，發揮更全面的健康效益："}
|
||
</Text>
|
||
|
||
<Box
|
||
width="100%"
|
||
display="flex"
|
||
flexDirection={{ base: "row", sm: "row", md: "column" }}
|
||
alignItems="center"
|
||
mt={5}
|
||
ref={oilCubesRef}
|
||
>
|
||
<Flex flexWrap="wrap" justifyContent="center" gap="15px" maxWidth="945px">
|
||
{oilCube.map((item, index) => (
|
||
<MotionStack
|
||
key={index}
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={isOilCubesInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
||
transition={{ duration: 0.5, delay: index * 0.15 }}
|
||
w='300px'
|
||
h='110px'
|
||
bgImage={item.bgColor}
|
||
roundedTopLeft={'30px'}
|
||
roundedBottomRight={'30px'}
|
||
p={4}
|
||
justify="center"
|
||
>
|
||
<Text
|
||
color="white"
|
||
className='font-melle font-black'
|
||
fontSize="2xl"
|
||
mb={-1}
|
||
>
|
||
{item.title}
|
||
</Text>
|
||
<Text
|
||
color={colors.backgroundColor}
|
||
className='font-melle font-medium'
|
||
mt={-1}
|
||
>
|
||
{item.text}
|
||
</Text>
|
||
</MotionStack>
|
||
))}
|
||
</Flex>
|
||
</Box>
|
||
|
||
<Stack
|
||
w={{ base: "90%", sm: "90%", md: '500px' }}
|
||
mt={5}
|
||
align={'center'}
|
||
mb={20}
|
||
>
|
||
<Image src={"/images/bestfootertext.webp"}
|
||
w='100%'
|
||
>
|
||
</Image>
|
||
<Stack mt={-3}
|
||
>
|
||
{formatText(footerText)}
|
||
</Stack>
|
||
</Stack>
|
||
|
||
|
||
|
||
|
||
</Stack>
|
||
</Stack>
|
||
)
|
||
}
|
||
|
||
export default Bestoil
|