updated
This commit is contained in:
@@ -1,13 +1,32 @@
|
||||
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 MotionBox = motion(Box);
|
||||
const MotionStack = motion(Stack);
|
||||
|
||||
|
||||
function Bestoil() {
|
||||
const cook = useBreakpointValue({
|
||||
base: "/images/cook_mb.png",
|
||||
sm: "/images/cook_mb.png",
|
||||
md: "/images/cook_pc.png",
|
||||
|
||||
});
|
||||
|
||||
// Create refs for elements we want to animate
|
||||
const bestOilRef = useRef(null);
|
||||
const oilChartRef = useRef(null);
|
||||
const cookRef = useRef(null);
|
||||
const oilCubesRef = useRef(null);
|
||||
|
||||
// Check if elements are in view
|
||||
const isBestOilInView = useInView(bestOilRef, { once: true });
|
||||
const isOilChartInView = useInView(oilChartRef, { once: true });
|
||||
const isCookInView = useInView(cookRef, { once: true });
|
||||
const isOilCubesInView = useInView(oilCubesRef, { once: true });
|
||||
|
||||
const oilCube = [
|
||||
{
|
||||
bgColor: 'linear-gradient(to right,#00609E ,#008FD0,#00609E )',
|
||||
@@ -35,53 +54,63 @@ function Bestoil() {
|
||||
text: '低飽和脂肪，穩定性高，適合高溫烹調'
|
||||
},
|
||||
]
|
||||
const formatText = (text: string) => {
|
||||
return text.split('\n').map((line, i) => (
|
||||
<Box key={i}
|
||||
color={'white'}
|
||||
fontSize='9px'
|
||||
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={colors.backgroundColor}
|
||||
>
|
||||
|
||||
<Flex
|
||||
w='100%'
|
||||
justify={"center"}
|
||||
align={"center"}
|
||||
direction={{ base: "column", sm: "column", md: "row" }}
|
||||
>
|
||||
<Image src="/images/best5.png"
|
||||
fit='contain'
|
||||
width={'500px'} />
|
||||
<Image src="/images/oilchart.png"
|
||||
fit='contain'
|
||||
width={'500px'} />
|
||||
<MotionBox
|
||||
ref={bestOilRef}
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
justifyItems={"center"}
|
||||
animate={isBestOilInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src="/images/best5.png"
|
||||
fit='contain'
|
||||
w={{ base: "70%", sm: "80%", md: '350px', lg: '500px' }}
|
||||
/>
|
||||
</MotionBox>
|
||||
|
||||
<MotionBox
|
||||
ref={oilChartRef}
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={isOilChartInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
justifyItems={"center"}
|
||||
>
|
||||
<Image src="/images/oilchart.png"
|
||||
fit='contain'
|
||||
w={{ base: "80%", sm: "90%", md: '350px', lg: '500px' }}
|
||||
/>
|
||||
</MotionBox>
|
||||
</Flex>
|
||||
|
||||
<Stack
|
||||
w='100%'
|
||||
align={"center"}
|
||||
|
||||
>
|
||||
<Image src={cook}
|
||||
w={{ base: "100%", sm: "100%", md: '600px' }}
|
||||
fit='contain'
|
||||
/>
|
||||
<MotionBox
|
||||
ref={cookRef}
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={isCookInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
justifyItems={"center"}
|
||||
>
|
||||
<Image src={cook}
|
||||
w={{ base: "80%", sm: "80%", md: '600px' }}
|
||||
fit='contain'
|
||||
/>
|
||||
</MotionBox>
|
||||
|
||||
<Text
|
||||
w={{ base: "90%", sm: "90%", md: '600px' }}
|
||||
@@ -92,14 +121,23 @@ function Bestoil() {
|
||||
{"不同食油的脂肪酸組合各有優勢，而長期使用單一油種則可能令營養失衡。營萃護心油融合5種優質食油，發揮更全面的健康效益："}
|
||||
</Text>
|
||||
|
||||
|
||||
<Box width="100%" display="flex" flexDirection="column" alignItems="center" mt={5}>
|
||||
<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) => (
|
||||
<Stack
|
||||
<MotionStack
|
||||
key={index}
|
||||
w='270px'
|
||||
h='90px'
|
||||
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'}
|
||||
@@ -107,7 +145,6 @@ function Bestoil() {
|
||||
justify="center"
|
||||
>
|
||||
<Text
|
||||
|
||||
color="white"
|
||||
className='font-melle font-black'
|
||||
fontSize="2xl"
|
||||
@@ -116,28 +153,29 @@ function Bestoil() {
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text
|
||||
|
||||
color={colors.backgroundColor}
|
||||
className='font-melle font-medium'
|
||||
mt={-1}
|
||||
>
|
||||
{item.text}
|
||||
</Text>
|
||||
</Stack>
|
||||
</MotionStack>
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
<Text
|
||||
w={{ base: "90%", sm: "90%", md: '700px' }}
|
||||
fontSize={'lg'}
|
||||
my={5}
|
||||
className='NotoSansCJKtc font-regular'
|
||||
color={colors.textColor}
|
||||
textAlign={"center"}>
|
||||
{"選擇「營萃護心油」，助你和家人攝取理想脂肪酸比例，食得安心，護心更放心！"}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
|
||||
|
||||
</Stack>
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default Bestoil
|
||||
|
||||
Reference in New Issue
Block a user