recipe page updated
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Box, Flex, Image, VStack, Text } from '@chakra-ui/react';
|
||||
import { Box, Flex, Image, VStack, Text, Stack, Link } from '@chakra-ui/react';
|
||||
import { GiHamburgerMenu } from "react-icons/gi";
|
||||
import { IoCloseSharp } from "react-icons/io5";
|
||||
import { colors } from '../colors';
|
||||
@@ -52,18 +52,18 @@ function Header({ showMenu = false }: HeaderProps) {
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
|
||||
if (currentScrollY > lastScrollY.current && currentScrollY > 100) {
|
||||
setIsVisible(false);
|
||||
} else {
|
||||
setIsVisible(true);
|
||||
}
|
||||
|
||||
|
||||
lastScrollY.current = currentScrollY;
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
@@ -86,10 +86,10 @@ function Header({ showMenu = false }: HeaderProps) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
ref={headerRef}
|
||||
bg={colors.topBarColor}
|
||||
py={4}
|
||||
<Box
|
||||
ref={headerRef}
|
||||
bg={colors.topBarColor}
|
||||
py={4}
|
||||
w="full"
|
||||
position="fixed"
|
||||
top={0}
|
||||
@@ -117,8 +117,8 @@ function Header({ showMenu = false }: HeaderProps) {
|
||||
style={{ display: 'block' }}
|
||||
/>
|
||||
) : (
|
||||
<GiHamburgerMenu
|
||||
size={40}
|
||||
<GiHamburgerMenu
|
||||
size={40}
|
||||
color="#2E683D"
|
||||
style={{ display: 'block' }}
|
||||
/>
|
||||
@@ -149,22 +149,42 @@ function Header({ showMenu = false }: HeaderProps) {
|
||||
padding={0}
|
||||
margin={0}
|
||||
>
|
||||
<VStack align="stretch" gap={4} mt={4}>
|
||||
<VStack align="stretch" gap={4} mt={4} justifyItems={'center'}>
|
||||
{menuItems.map((item, index) => (
|
||||
<Box
|
||||
h="100px"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
|
||||
key={index}
|
||||
onClick={() => scrollToSection(item.id)}
|
||||
p={3}
|
||||
borderRadius="md"
|
||||
_hover={{ bg: 'gray.100' }}
|
||||
_hover={{ bg: '#458B02' }}
|
||||
cursor="pointer"
|
||||
>
|
||||
<Text fontSize="lg" fontWeight="medium">
|
||||
<Text className='font-noto-sans font-xbold' fontSize="3xl" ml={10}>
|
||||
{item.label}
|
||||
</Text>
|
||||
</Box>
|
||||
))}
|
||||
<VStack
|
||||
w='100%'
|
||||
alignItems={'center'}
|
||||
>
|
||||
<Link href={"https://www.facebook.com/profile.php?id=100064320806613"}
|
||||
_focus={{ outline: 'none', boxShadow: 'none' }}
|
||||
_active={{ outline: 'none', boxShadow: 'none' }}>
|
||||
<Image
|
||||
src={'/images/facebook.webp'}
|
||||
alt="salespoint"
|
||||
w={"350px"}
|
||||
loading='lazy'
|
||||
/>
|
||||
</Link>
|
||||
</VStack>
|
||||
</VStack>
|
||||
|
||||
|
||||
</DrawerBody>
|
||||
</DrawerContent>
|
||||
</DrawerRoot>
|
||||
|
||||
14
src/components/header2.tsx
Normal file
14
src/components/header2.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Box, Flex, Image, } from '@chakra-ui/react';
|
||||
import { colors } from '../colors';
|
||||
|
||||
function Header2() {
|
||||
return (
|
||||
<Box bg={colors.topBarColor} py={4} w="full">
|
||||
<Flex alignItems={'center'} justifyContent={'center'} direction="column">
|
||||
<Image src="/images/header_logo.webp" alt="Logo" width="150px" />
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header2;
|
||||
@@ -118,7 +118,7 @@ function Truth() {
|
||||
justifyItems={'center'}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
>
|
||||
|
||||
<MotionText
|
||||
@@ -129,7 +129,7 @@ function Truth() {
|
||||
textAlign={'center'}
|
||||
initial={{ opacity: 0, y: -30 }}
|
||||
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: -30 }}
|
||||
transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
|
||||
transition={{ duration: 0.5, delay: 0.1, ease: "easeOut" }}
|
||||
>
|
||||
想知道更多食用油健康真相？
|
||||
</MotionText>
|
||||
@@ -145,7 +145,7 @@ function Truth() {
|
||||
alignItems={'flex-start'}
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
||||
transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
|
||||
transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
|
||||
>
|
||||
{truthItems.map((item, index) => (
|
||||
<MotionHStack
|
||||
@@ -155,7 +155,7 @@ function Truth() {
|
||||
alignItems={'flex-start'}
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 + index * 0.1, ease: "easeOut" }}
|
||||
transition={{ duration: 0.5, delay: 0.3 + index * 0.1, ease: "easeOut" }}
|
||||
>
|
||||
<MotionImage
|
||||
src={item.image}
|
||||
@@ -163,7 +163,7 @@ function Truth() {
|
||||
w={{ base: '70px', sm: '70px', md: '70px', lg: '70px', xl: '70px' }}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
||||
transition={{ duration: 0.4, delay: 0.8 + index * 0.1, ease: "easeOut" }}
|
||||
transition={{ duration: 0.4, delay: 0.4 + index * 0.1, ease: "easeOut" }}
|
||||
/>
|
||||
<MotionText
|
||||
className="font-noto-sans font-regular"
|
||||
@@ -171,7 +171,7 @@ function Truth() {
|
||||
fontSize={{ base: 'lg', sm: 'lg', md: 'lg', lg: 'lg', xl: 'lg' }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.5, delay: 1.0 + index * 0.1, ease: "easeOut" }}
|
||||
transition={{ duration: 0.5, delay: 0.5 + index * 0.1, ease: "easeOut" }}
|
||||
>
|
||||
{renderDescription(item.desc)}
|
||||
</MotionText>
|
||||
@@ -192,7 +192,7 @@ function Truth() {
|
||||
align={'center'}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
|
||||
transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
|
||||
transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
|
||||
>
|
||||
<MotionText
|
||||
className='font-melle font-xbold'
|
||||
@@ -200,7 +200,7 @@ function Truth() {
|
||||
fontSize={{ base: '2xl', sm: '3xl', md: '5xl', lg: '5xl', xl: '5xl' }}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={isTitleInView ? { opacity: 1 } : { opacity: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.6, ease: "easeOut" }}
|
||||
transition={{ duration: 0.4, delay: 0.3, ease: "easeOut" }}
|
||||
>
|
||||
點擊以下銷售點連結
|
||||
</MotionText>
|
||||
@@ -215,28 +215,28 @@ function Truth() {
|
||||
align={'flex-end'}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
||||
transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
|
||||
transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
|
||||
>
|
||||
{shopImages.map((image, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
||||
transition={{ duration: 0.5, delay: 0.8 + index * 0.2, ease: "easeOut" }}
|
||||
transition={{ duration: 0.5, delay: 0.5 + index * 0.2, ease: "easeOut" }}
|
||||
>
|
||||
<MotionStack
|
||||
w='250px'
|
||||
justify={'flex-end'}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.4, delay: 1.0 + index * 0.2, ease: "easeOut" }}
|
||||
transition={{ duration: 0.4, delay: 0.6 + index * 0.2, ease: "easeOut" }}
|
||||
>
|
||||
<Link href={image.link}>
|
||||
<MotionImage src={image.image} cursor="pointer" fit={'contain'}
|
||||
loading="lazy"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
|
||||
transition={{ duration: 0.3, delay: 1.2 + index * 0.2, ease: "easeOut" }}
|
||||
transition={{ duration: 0.3, delay: 0.7 + index * 0.2, ease: "easeOut" }}
|
||||
/>
|
||||
</Link>
|
||||
</MotionStack>
|
||||
@@ -251,7 +251,7 @@ function Truth() {
|
||||
mt={10}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
|
||||
transition={{ duration: 0.6, delay: 1.6, ease: "easeOut" }}
|
||||
transition={{ duration: 0.6, delay: 0.6, ease: "easeOut" }}
|
||||
>
|
||||
<Link href={"https://www.facebook.com/profile.php?id=100064320806613"}
|
||||
_focus={{ outline: 'none', boxShadow: 'none' }}
|
||||
@@ -263,7 +263,7 @@ function Truth() {
|
||||
loading='lazy'
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.5, delay: 1.8, ease: "easeOut" }}
|
||||
transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
|
||||
/>
|
||||
</Link>
|
||||
</MotionStack>
|
||||
|
||||
Reference in New Issue
Block a user