191 lines
8.3 KiB
TypeScript
191 lines
8.3 KiB
TypeScript
import { Box, Stack, Image, Text, Flex, SimpleGrid } from '@chakra-ui/react'
|
||
import { colors } from '../colors';
|
||
import { useEffect, useRef } from 'react';
|
||
import { motion, useInView, useAnimation } from 'framer-motion'
|
||
|
||
// Create motion components from Chakra UI components
|
||
|
||
const MotionImage = motion(Image);
|
||
const MotionText = motion(Text);
|
||
|
||
|
||
function Hero2() {
|
||
const textStackRef = useRef<HTMLDivElement>(null);
|
||
const imageStackRef = useRef<HTMLDivElement>(null);
|
||
|
||
// Create refs and animation controls for scroll-based animations
|
||
const containerRef = useRef<HTMLDivElement>(null);
|
||
const isInView = useInView(containerRef, { once: true, amount: 0.2 });
|
||
const textControls = useAnimation();
|
||
const imageControls = useAnimation();
|
||
|
||
// Trigger animations when component comes into view
|
||
useEffect(() => {
|
||
if (isInView) {
|
||
textControls.start("visible");
|
||
imageControls.start("visible");
|
||
} else {
|
||
textControls.start("hidden");
|
||
imageControls.start("hidden");
|
||
}
|
||
}, [isInView, textControls, imageControls]);
|
||
|
||
// Add this useEffect to measure and update heights
|
||
useEffect(() => {
|
||
const updateHeight = () => {
|
||
if (textStackRef.current) {
|
||
// const height = textStackRef.current.offsetHeight;
|
||
}
|
||
};
|
||
|
||
// Initial measurement
|
||
updateHeight();
|
||
|
||
// Setup resize observer for responsive adjustments
|
||
const resizeObserver = new ResizeObserver(updateHeight);
|
||
if (textStackRef.current) {
|
||
resizeObserver.observe(textStackRef.current);
|
||
}
|
||
|
||
// Cleanup
|
||
return () => {
|
||
if (textStackRef.current) {
|
||
resizeObserver.disconnect();
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<Box
|
||
ref={containerRef}
|
||
w="100%"
|
||
position="relative"
|
||
zIndex="1"
|
||
bgColor={colors.backgroundColor}
|
||
>
|
||
<Flex
|
||
direction="column"
|
||
justify={"flex-start"}
|
||
align={"center"}
|
||
>
|
||
<Image
|
||
src="/images/hero2title.webp"
|
||
w={{ base: "420px", sm: "450px", md: "450px", lg: "350px", xl: "350px" }}
|
||
maxW={"95%"}
|
||
/>
|
||
<SimpleGrid
|
||
gap="25px"
|
||
columns={{ base: 1, md: 1, lg: 2, xl: 2 }}
|
||
px="4"
|
||
mb={12}
|
||
maxW="full"
|
||
mx="0"
|
||
marginTop={{ base: -7, md: -3, lg: 0, xl: 0 }}
|
||
height={{ base: "auto", md: "auto", lg: "auto", xl: "25vw", '2xl': "15vw" }}
|
||
>
|
||
<Flex justify="flex-end">
|
||
<Stack
|
||
id='image_stack'
|
||
ref={imageStackRef}
|
||
alignItems='flex-end'
|
||
display={{ base: "none", md: "none", lg: "flex" }}
|
||
w={{ md: "80%", lg: "70%", xl: "65%" }}
|
||
h={"auto"}
|
||
>
|
||
<Image
|
||
src="/images/asking.jpg"
|
||
rounded="4xl"
|
||
loading="lazy"
|
||
marginTop={'10px'}
|
||
height={{ md: "100%", lg: "85%", xl: "65%" }}
|
||
fit="cover"
|
||
objectPosition="center"
|
||
|
||
/>
|
||
</Stack>
|
||
</Flex>
|
||
|
||
<Flex justify={{ sm: 'center', md: "center", lg: "flex-start" }}>
|
||
<Stack
|
||
w={{ sm: "100%", md: "80%", lg: "90%", xl: "65%" }}
|
||
h="auto"
|
||
id="text_stack"
|
||
ref={textStackRef}
|
||
align={{ sm: 'flex-start', md: "flex-start", lg: "flex-start" }}
|
||
>
|
||
<Flex direction={"column"}>
|
||
<MotionText
|
||
color={colors.textColor}
|
||
className="font-melle font-medium"
|
||
fontSize={{ base: "2xl", sm: "3xl", md: "3xl", lg: "3xl" }}
|
||
variants={{
|
||
hidden: { x: -10, opacity: 0 },
|
||
visible: { x: 0, opacity: 1 }
|
||
}}
|
||
initial="hidden"
|
||
animate={textControls}
|
||
transition={{ duration: 0.5, delay: 0.6 }}
|
||
>
|
||
<strong>外出用餐</strong>難控用油，
|
||
</MotionText>
|
||
<MotionText
|
||
color={colors.textColor}
|
||
className="font-melle font-medium"
|
||
fontSize={{ base: "2xl", sm: "3xl", md: "3xl", lg: "3xl" }}
|
||
marginTop={-3}
|
||
variants={{
|
||
hidden: { x: -10, opacity: 0 },
|
||
visible: { x: 0, opacity: 1 }
|
||
}}
|
||
initial="hidden"
|
||
animate={textControls}
|
||
transition={{ duration: 0.5, delay: 0.7 }}
|
||
>
|
||
不健康油脂或增<strong>「三高」</strong>風險
|
||
</MotionText>
|
||
</Flex>
|
||
<MotionImage
|
||
src="/images/asking.jpg"
|
||
rounded="4xl"
|
||
loading="lazy"
|
||
marginTop={'3px'}
|
||
w={{ md: "90%", lg: "65%", xl: "75%" }}
|
||
display={{ base: "flex", md: "flex", lg: "none" }}
|
||
fit="cover"
|
||
objectPosition="center"
|
||
variants={{
|
||
hidden: { scale: 0.95, opacity: 0 },
|
||
visible: { scale: 1, opacity: 1 }
|
||
}}
|
||
initial="hidden"
|
||
animate={imageControls}
|
||
transition={{ duration: 0.7, delay: 0.4 }}
|
||
whileHover={{ scale: 1.03 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
/>
|
||
|
||
<MotionText
|
||
color={colors.textColor}
|
||
className="font-noto-sans font-regular"
|
||
lineHeight={1.5}
|
||
fontSize={'md'}
|
||
w={{ md: "90%", lg: "65%", xl: "75%" }}
|
||
variants={{
|
||
hidden: { y: 20, opacity: 0 },
|
||
visible: { y: 0, opacity: 1 }
|
||
}}
|
||
initial="hidden"
|
||
animate={textControls}
|
||
transition={{ duration: 0.8, delay: 0.8 }}
|
||
>
|
||
{"都市人難免外出用餐，即使精選食材，也無法控制下鍋的食油，一天吃進多少隱形壞油難以估算。在家煮食雖可自選用油，但你確定自己用的是「好油」嗎？長期攝取高飽和脂肪、反式脂肪（如牛油、豬油、加工食品、重複使用的煎炸油），會提升壞膽固醇，導致血管堵塞，增加高血壓、高血脂及心血管疾病風險。"}
|
||
</MotionText>
|
||
</Stack>
|
||
</Flex>
|
||
</SimpleGrid>
|
||
</Flex>
|
||
</Box>
|
||
);
|
||
}
|
||
export default Hero2;
|