257 lines
11 KiB
TypeScript
257 lines
11 KiB
TypeScript
import { Box, Stack, Image, Flex, useBreakpointValue, Text } from '@chakra-ui/react'
|
||
import { motion, useInView, useAnimation } from 'framer-motion'
|
||
import { useRef, useEffect } from 'react'
|
||
|
||
function Oil_info() {
|
||
const oilinfotitle = useBreakpointValue({
|
||
base: "/images/mboilinfotitle.webp",
|
||
sm: "/images/mboilinfotitle.webp",
|
||
md: "/images/oilinfotitle.webp",
|
||
});
|
||
|
||
const oilinfogroup = useBreakpointValue({
|
||
base: "/images/mboilinfogroup.webp",
|
||
sm: "/images/mboilinfogroup.webp",
|
||
md: "/images/pcoilinfogroup.webp",
|
||
});
|
||
|
||
|
||
// Animation controls for the header section
|
||
const headerControls = useAnimation();
|
||
const headerRef = useRef(null);
|
||
const headerInView = useInView(headerRef, { once: true, amount: 0.3 });
|
||
|
||
// Animation controls for the footer group image
|
||
const footerControls = useAnimation();
|
||
const footerRef = useRef(null);
|
||
const footerInView = useInView(footerRef, { once: true, amount: 0.3 });
|
||
|
||
// Trigger animations when elements come into view
|
||
useEffect(() => {
|
||
if (headerInView) {
|
||
headerControls.start({
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: { duration: 0.8, ease: "easeOut" }
|
||
});
|
||
}
|
||
}, [headerInView, headerControls]);
|
||
|
||
useEffect(() => {
|
||
if (footerInView) {
|
||
footerControls.start({
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: { duration: 0.8, ease: "easeOut" }
|
||
});
|
||
}
|
||
}, [footerInView, footerControls]);
|
||
|
||
// const formatText = (text: string) => {
|
||
// return text.split('\n').map((line, i) => (
|
||
// <Box key={i}
|
||
// color={'white'}
|
||
// fontSize='8px'
|
||
// mt={-2}
|
||
// 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 (
|
||
<Stack
|
||
position="relative"
|
||
w="100%"
|
||
overflow="hidden"
|
||
bgColor={'#4E8C34'}
|
||
>
|
||
<Stack>
|
||
<Flex
|
||
|
||
direction="column"
|
||
bgImage={"url('/images/oilinfobg.webp')"}
|
||
bgSize="cover"
|
||
backgroundPosition="center"
|
||
bgRepeat="no-repeat"
|
||
w='100%'
|
||
h='300px'
|
||
>
|
||
<Flex
|
||
mt={{ base: 10, sm: 10, md: 10 }}
|
||
justify={"center"}
|
||
align={"center"}
|
||
>
|
||
<Stack
|
||
w={{ base: '75%', sm: '75%', md: '300px' }}
|
||
h='auto'
|
||
alignItems={"center"}
|
||
justify={"center"}
|
||
align={"center"}
|
||
>
|
||
<Image src="/images/oilinfoheadertitle.webp"
|
||
fit='contain'
|
||
w='100%'
|
||
h='auto'
|
||
loading="lazy"
|
||
></Image>
|
||
</Stack>
|
||
<Stack
|
||
display={{ base: 'none', sm: 'none', md: 'flex' }}
|
||
w='500px'
|
||
align={"flex-end"}
|
||
justify={"center"}
|
||
>
|
||
<Text
|
||
color='white'
|
||
className='NotoSansCJKtc font-regular'
|
||
mb={10}
|
||
lineHeight={1.5}
|
||
fontSize={'lg'}
|
||
>
|
||
{"市場上食油選擇繁多，卻缺少一款真正符合人體對脂肪酸需求的「黃金比例」食油。長期依賴單一油種（如橄欖油、葵花籽油），可能導致脂肪酸及 Omega-3、6、9 攝取失衡。研究顯示，當人體吸收過多Omega-6，發炎風險可增 3 倍，無形中加重心血管負擔。"}
|
||
</Text>
|
||
</Stack>
|
||
</Flex>
|
||
</Flex>
|
||
</Stack>
|
||
|
||
{/* Rest of the component remains the same until the footer image */}
|
||
|
||
<Stack
|
||
display={{ base: 'flex', sm: 'flex', md: 'none' }}
|
||
mt={{ base: "-40px", sm: 0, md: 0 }}
|
||
w="100%"
|
||
align={"center"}
|
||
>
|
||
<Text
|
||
w="80%"
|
||
color='white'
|
||
className='NotoSansCJKtc font-regular'
|
||
lineHeight={1.5}
|
||
fontSize={'lg'}
|
||
>
|
||
{"市場上食油選擇繁多，卻缺少一款真正符合人體對脂肪酸需求的「黃金比例」食油。長期依賴單一油種（如橄欖油、葵花籽油），可能導致脂肪酸及 Omega-3、6、9 攝取失衡。研究顯示，當人體吸收過多Omega-6，發炎風險可增 3 倍，無形中加重心血管負擔。"}
|
||
</Text>
|
||
</Stack>
|
||
|
||
<Stack
|
||
w='100%'
|
||
gap={0}
|
||
align='center'
|
||
>
|
||
<Flex
|
||
w={{ base: '80%', sm: '80%', md: "100%" }}
|
||
justify={{ base: 'flex-start', sm: 'flex-start', md: 'center' }}
|
||
display={{ base: 'flex', sm: 'flex', md: 'none' }}
|
||
>
|
||
<Image src={oilinfotitle}
|
||
w='400px'
|
||
mt={{ base: 2, sm: 2, md: -12 }}
|
||
loading="lazy"
|
||
/>
|
||
</Flex>
|
||
|
||
<Flex
|
||
mt={{ base: 0, sm: 0, md: "-60px" }}
|
||
direction={{ base: 'column', sm: 'column', md: 'row' }}
|
||
gap={3}
|
||
align={"center"}
|
||
>
|
||
<Image src="/images/oilinfooil.webp"
|
||
w={{ base: '70%', sm: '80%', md: '350px' }}
|
||
loading="lazy"
|
||
/>
|
||
<Stack
|
||
justify={"center"}
|
||
w={{ base: '80%', sm: '80%', md: '400px', lg: '500px' }}
|
||
>
|
||
{/* <Stack
|
||
display={{ base: 'flex', sm: 'flex', md: 'none' }}
|
||
>
|
||
{formatText(`*營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。
|
||
^根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算`)}
|
||
</Stack> */}
|
||
|
||
<Stack
|
||
display={{ base: 'none', sm: 'none', md: 'flex' }}
|
||
>
|
||
<Image src='/images/oilinfotitle.webp'
|
||
w='500px'
|
||
loading="lazy"
|
||
/>
|
||
</Stack>
|
||
|
||
<Text
|
||
w={{ base: '100%', sm: '100%', md: '400px', lg: '450px' }}
|
||
color='white'
|
||
ml = {1}
|
||
className='NotoSansCJKtc font-medium'
|
||
mb={10}
|
||
lineHeight={1.5}
|
||
fontSize={'lg'}
|
||
>
|
||
<Box as="span" className='NotoSansCJKtc font-xbold' display="inline">獅球嘜營萃護心油，</Box>
|
||
{"根據世界衛生組織建議之黃金比例脂肪酸調製，有助調節膽固醇，保護心血管健康，並預防與飲食相關的慢性疾病。"}
|
||
</Text>
|
||
{/* <Text
|
||
color='white'
|
||
className='NotoSansCJKtc font-medium'
|
||
mb={10}
|
||
lineHeight={1.5}
|
||
fontSize={'lg'}
|
||
>
|
||
{"獅球嘜「營萃護心油」採用黃金比例調配，讓每一滴都成為心血管的隱形防護網。"}
|
||
</Text> */}
|
||
{/* <Stack
|
||
display={{ base: 'none', sm: 'none', md: 'flex' }}
|
||
mt={-5}>
|
||
{formatText(`*營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。
|
||
^根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算`)}
|
||
</Stack> */}
|
||
</Stack>
|
||
</Flex>
|
||
</Stack>
|
||
|
||
<Flex
|
||
direction="column"
|
||
bgImage={"url('/images/oilinfofooterbg.webp')"}
|
||
bgSize="cover"
|
||
backgroundPosition="center"
|
||
bgRepeat="no-repeat"
|
||
w='100%'
|
||
h='auto'
|
||
>
|
||
<Stack
|
||
w='100%'
|
||
mb={10}
|
||
align={"center"}
|
||
ref={footerRef}
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
animate={footerControls}
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
width: '100%'
|
||
}}
|
||
|
||
>
|
||
<Image
|
||
src={oilinfogroup}
|
||
w={{ base: "80%", sm: "80%", md: '500px' }}
|
||
loading="lazy"
|
||
/>
|
||
</motion.div>
|
||
</Stack>
|
||
</Flex >
|
||
</Stack >
|
||
);
|
||
}
|
||
export default Oil_info;
|