philip-cat/healthy_oil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

recipe page updated

Browse Source
This commit is contained in:
philipcheung
2025-11-02 20:36:37 +08:00
parent 736578dae3
commit 999ee7224f
9 changed files with 333 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/header.tsx
View File

@@ -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
View 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;

28
src/components/new_ui/truth.tsx
View File

@@ -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>

3
src/pages/home.tsx
View File

@@ -6,10 +6,11 @@ import Qa from '../components/qa'
import Oil_info from '../components/oil_info'
import Bestoil from '../components/bestoil'
import Salespoint from '../components/salespoint'
import Header2 from '@/components/header2'
function HomePage() {
return (
<>
<Header2 />
<Hero1 />
<Box mt={{ base: "-5vw", sm: "-5vw", md: "-5vw", lg: "-5vw", xl: "-5vw" }}>
<Hero2 />

131
src/pages/recipe.tsx Normal file
View File

@@ -0,0 +1,131 @@
import { Box, Text, SimpleGrid, Image } from '@chakra-ui/react'
import { InstagramEmbed } from 'react-social-media-embed';
import Header from '@/components/header';
import { useEffect, useState } from 'react'
const igPosts = [
{
id: 1,
title: "Healthy Oil Recipe 1",
url: "https://www.instagram.com/reel/DQiyajyET7l/?igsh=NzZnbmduNjc0Zjlo"
},
{
id: 2,
title: "Healthy Oil Recipe 2",
url: "https://www.instagram.com/reel/DO5f01Pj_By/?igsh=NjhhMnpxczllaHQ1"
},
{
id: 3,
title: "Healthy Oil Recipe 3",
url: "https://www.instagram.com/p/DQicBYxE9IA/?igsh=MWIybmo4YXNxdnBlbw=="
},
{
id: 4,
title: "Healthy Oil Recipe 4",
url: "https://www.instagram.com/p/DQCAnNrEWfF/?igsh=MXc0Z25qNm9jaWtyNA=="
},
{
id: 5,
title: "Healthy Oil Recipe 5",
url: "https://www.instagram.com/reel/DQbruJ2Ejpz/?igsh=Mm96NWljMWdyOW56"
},
{
id: 6,
title: "Healthy Oil Recipe 6",
url: "https://www.instagram.com/reel/DQe5gwTkjCf/?igsh=MXZ2aHRjN3Vnd2RjcQ=="
}
];
function Recipe() {
const [headerHeight, setHeaderHeight] = useState(80);
useEffect(() => {
const updateHeaderHeight = () => {
const header = document.querySelector('[data-header="true"]');
if (header) {
const height = header.getBoundingClientRect().height;
setHeaderHeight(height);
}
};
const delayedUpdate = () => {
setTimeout(updateHeaderHeight, 100);
};
delayedUpdate();
const resizeObserver = new ResizeObserver(() => {
setTimeout(updateHeaderHeight, 50);
});
const header = document.querySelector('[data-header="true"]');
if (header) {
resizeObserver.observe(header);
}
window.addEventListener('resize', delayedUpdate);
return () => {
window.removeEventListener('resize', delayedUpdate);
resizeObserver.disconnect();
};
}, []);
return (
<Box
position="relative"
w="100%"
bgColor="#FFFBD3"
zIndex={3}
overflow="hidden"
justifyItems={'center'}
pt={`${headerHeight}px`}
>
<Header showMenu={true} />
<Image
src="/images/new/recipe_title.webp"
w={{ base: '70vw', md: '50vw', lg: '30vw' }}
mt = {20}
/>
<SimpleGrid
columns={{ base: 1, sm: 1, md: 2 }}
p={{ base: 10, sm: 20, md: 20 }}
w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '70%' }}
h={'auto'}
gap={{ base: 10, md: 5 }}
justifyItems={'center'}
alignItems={'center'}
>
{igPosts.map((post) => (
<Box
justifyItems={'center'}
alignItems={'center'}
width={325}
>
<Text
color={'#2E683D'}
mb={2}
className='font-melle font-xbold'
fontSize={{ base: "2xl", md: "2xl", lg: "22xl2px", xl: "2xl" }}>
{post.title}
</Text>
<InstagramEmbed url={post.url} width={328} />
</Box>
))}
</SimpleGrid>
</Box>
)
}
export default Recipe;

10
src/router.tsx
View File

@@ -2,6 +2,7 @@ import { createRouter, createRootRoute, createRoute } from '@tanstack/react-rout
import Layout from './components/layout'
import MainPage from './pages/main'
import HomePage from './pages/home'
import RecipePage from './pages/recipe'
// Create a root route with layout
const rootRoute = createRootRoute({
@@ -22,9 +23,16 @@ const homeRoute = createRoute({
component: HomePage,
})
// Recipe page route
const recipeRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/recipe',
component: RecipePage,
})
// Create the router
const router = createRouter({
routeTree: rootRoute.addChildren([indexRoute, homeRoute]),
routeTree: rootRoute.addChildren([indexRoute, homeRoute, recipeRoute]),
})
export default router