132 lines
5.0 KiB
TypeScript
132 lines
5.0 KiB
TypeScript
import { Box, Stack, Image, Flex, SimpleGrid } from '@chakra-ui/react'
|
||
import { useRef } from 'react';
|
||
import { motion } from 'framer-motion';
|
||
|
||
|
||
// Create motion versions of Chakra components
|
||
|
||
const MotionImage = motion(Image);
|
||
|
||
// 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>
|
||
// ));
|
||
// };
|
||
|
||
return (
|
||
<Box
|
||
ref={compareRef}
|
||
w="100%"
|
||
position="relative"
|
||
>
|
||
<SimpleGrid columns={2}
|
||
maxW="full"
|
||
h={{ base: '140vw', sm: '130vw', md: '120vw', lg: '50vw', xl: '50vw' }}
|
||
mb="20px" // Add 20px bottom margin
|
||
position="relative"
|
||
zIndex="1"
|
||
>
|
||
<Stack
|
||
position="relative"
|
||
w="100%"
|
||
h="100%"
|
||
bgImage={`
|
||
linear-gradient(to bottom,
|
||
rgba(255, 251, 210, 1) 4%,
|
||
rgba(255, 251, 210, 0.1) 10%),
|
||
url(/images/bgyellow.jpg)
|
||
`}
|
||
bgSize="cover"
|
||
bgPos="center"
|
||
|
||
>
|
||
<Box bgColor="rgba(255, 251, 210, 0.4)" w="100%" h="100%" />
|
||
{/* Content container with z-index to appear above the background */}
|
||
</Stack>
|
||
<Stack
|
||
w="100%"
|
||
h="100%"
|
||
bgImage="linear-gradient(to bottom, #FFFBD2 4%, #E1E1E2 10%)"
|
||
>
|
||
{/* Content here */}
|
||
<MotionImage
|
||
src='/images/compareheart.webp'
|
||
width={{
|
||
base: '95%', sm: '90% ', md: '80% ', lg: '35% '
|
||
}}
|
||
position="absolute"
|
||
loading="lazy"
|
||
top="0%"
|
||
left="50.1%"
|
||
transform="translateX(-51%)"
|
||
zIndex="1"
|
||
initial={{ opacity: 0 }}
|
||
whileInView={{ opacity: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 1.5 }}
|
||
/>
|
||
<Box
|
||
width={'full'}
|
||
justifyItems={'center'}
|
||
position="absolute"
|
||
bottom="17%"
|
||
left="50%"
|
||
transform="translateX(-51%)"
|
||
zIndex="1"
|
||
>
|
||
{/* <Box
|
||
w='auto'
|
||
h='auto'>
|
||
{formatText(statement)}
|
||
</Box> */}
|
||
|
||
</Box>
|
||
</Stack>
|
||
|
||
|
||
</SimpleGrid>
|
||
|
||
{/* Use a larger negative margin to pull the flex up into the grid area */}
|
||
<Flex
|
||
direction="column"
|
||
justify="center"
|
||
align="center"
|
||
width="100%"
|
||
mt={{ base: '-25vw', sm: '-25vw', md: '-20vw', lg: '-10vw' }}
|
||
position="relative"
|
||
zIndex="2"
|
||
>
|
||
<MotionImage
|
||
src="/images/bigheart.webp"
|
||
width={{
|
||
base: '100%%', sm: '95% ', md: '80% ', lg: '35% '
|
||
}}
|
||
loading="lazy"
|
||
initial={{ opacity: 0 }}
|
||
whileInView={{ opacity: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 1.5 }}
|
||
/>
|
||
</Flex>
|
||
</Box>
|
||
)
|
||
}
|
||
export default Compare;
|