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

updated ui

Browse Source
This commit is contained in:
philipcheung
2025-11-04 12:50:27 +08:00
parent 21cc9905b7
commit f5392cf597
8 changed files with 83 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/new/buttons.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 200 KiB

BIN
public/images/new/heart.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 197 KiB

After

Width:  |  Height:  |  Size: 345 KiB

20
src/components/new_ui/advantages.tsx
View File

@@ -1,4 +1,4 @@
import { Box, Stack, Image, Flex, Text, SimpleGrid } from '@chakra-ui/react'
import { Box, Stack, Image, Flex, Text, SimpleGrid, HStack } from '@chakra-ui/react'
import { motion, useInView } from 'framer-motion'
import { useRef } from 'react'
const MotionImage = motion.create(Image)
@@ -139,19 +139,25 @@ function Advantages() {
<Stack
position="relative"
w="100%"
h={{ base: '20vw', sm: '20vw', md: '20vw', lg: '20vw', xl: '25vw' }}
justifyItems={'center'}
alignItems={'center'}
gap={0}
>
<Image
src='/images/new/heart.webp'
position="absolute"
left="50%"
transform="translateX(-50%)"
w={{ base: '30vw', sm: '30vw', md: '30vw', lg: '30vw', xl: '30vw' }}
w={{ base: '75vw', sm: '75vw', md: '40vw', lg: '40vw', xl: '40vw' }}
/>
<Text
className='font-melle font-xbold'
fontSize={{ base: '2xl', sm: '3xl', md: '3vw', lg: '3vw', xl: '3vw' }}
color={'white'}
mt={-2}
>
{'四大優勢，世一選擇！'}
</Text>
</Stack>
<MotionSimpleGrid

14
src/components/new_ui/hero1.tsx
View File

@@ -200,7 +200,7 @@ function Hero1() {
<Box
position={'absolute'}
w={bigWarningSize}
right={{ base: '11vw', sm: '11vw', md: '18vw', lg: '18vw', xl: '18vw' }}
right={{ base: '5vw', sm: '5vw', md: '18vw', lg: '18vw', xl: '18vw' }}
top={{ base: '12vw', sm: '12vw', md: '20vw', lg: '20vw', xl: '10vw' }}
css={{
animation: 'floatSlow 3.3s ease-in-out infinite',
@@ -218,7 +218,7 @@ function Hero1() {
{/* Warning Texts */}
<Box
position={'absolute'}
w={{ base: "20vw", sm: "20vw", md: "11vw", lg: "11vw", xl: "10vw" }}
w={{ base: "25vw", sm: "25vw", md: "11vw", lg: "11vw", xl: "10vw" }}
left={{ base: "23vw", sm: "23vw", md: "30vw", lg: "30vw", xl: "37vw" }}
top={{ base: "9vw", sm: "9vw", md: "7vw", lg: "7vw", xl: "3vw" }}
css={{
@@ -236,7 +236,7 @@ function Hero1() {
</Box>
<Box
position={'absolute'}
w={{ base: "20vw", sm: "20vw", md: "10vw", lg: "10vw", xl: "9vw" }}
w={{ base: "27vw", sm: "27vw", md: "10vw", lg: "10vw", xl: "9vw" }}
left={{ base: "35vw", sm: "35vw", md: "18vw", lg: "18vw", xl: "25vw" }}
top={{ base: "25vw", sm: "25vw", md: "20vw", lg: "20vw", xl: "14vw" }}
css={{
@@ -254,8 +254,8 @@ function Hero1() {
</Box>
<Box
position={'absolute'}
w={{ base: "29vw", sm: "29vw", md: "14vw", lg: "14vw", xl: "13vw" }}
right={{ base: "20vw", sm: "20vw", md: "34vw", lg: "34vw", xl: "35vw" }}
w={{ base: "34vw", sm: "34vw", md: "14vw", lg: "14vw", xl: "13vw" }}
right={{ base: "15vw", sm: "15vw", md: "34vw", lg: "34vw", xl: "35vw" }}
top={{ base: "10vw", sm: "10vw", md: "7vw", lg: "7vw", xl: "5vw" }}
css={{
animation: 'floatSlow 3.8s ease-in-out infinite',
@@ -272,8 +272,8 @@ function Hero1() {
</Box>
<Box
position={'absolute'}
w={{ base: "13vw", sm: "13vw", md: "8vw", lg: "8vw", xl: "7vw" }}
right={{ base: "14vw", sm: "14vw", md: "26vw", lg: "26vw", xl: "26vw" }}
w={{ base: "19vw", sm: "19vw", md: "8vw", lg: "8vw", xl: "7vw" }}
right={{ base: "10vw", sm: "10vw", md: "26vw", lg: "26vw", xl: "26vw" }}
top={{ base: "35vw", sm: "35vw", md: "18vw", lg: "18vw", xl: "12vw" }}
css={{
animation: 'floatFast 3.3s ease-in-out infinite',

2
src/components/new_ui/info.tsx
View File

@@ -42,7 +42,7 @@ const infoData: InfoData[] = [
image: '/images/new/info_4.webp',
description: `香港人生活節奏急促，一日三餐唔係叫外賣就出街食，而餐廳普遍使用 Omega-6 偏高嘅食油（如大豆油）。**長期攝取會令體內Omega-6遠多於Omega-3，脂肪酸比例失衡，促進身體慢性發炎。**
失衡嘅狀況如果未能得到改善，會慢慢出現容易攰、記憶力下降、專注力不足等情況；若持續惡化，仲可能影響腦部神經傳導，進一步提升患上**腦霧及失智症**嘅風險。 `
如果失衡未能改善，尤其Omega-3長期攝取不足，就容易出現易攰、記憶力下降、專注力不足等情況。隨住狀況持續惡化，仲可能影響腦部神經傳導，提升**腦霧同失智症**風險。`
}
]

21
src/components/new_ui/oilInfo.tsx
View File

@@ -1,6 +1,7 @@
import { Box, Image, SimpleGrid } from '@chakra-ui/react'
import { motion, useInView } from 'framer-motion'
import { useRef } from 'react'
import { useRouter, useRouterState } from '@tanstack/react-router'
const MotionImage = motion.create(Image)
const MotionBox = motion.create(Box)
@@ -9,6 +10,20 @@ const MotionSimpleGrid = motion.create(SimpleGrid)
function OilInfo() {
const mainRef = useRef(null);
const isMainInView = useInView(mainRef, { once: true });
const router = useRouter();
const { location } = useRouterState();
const handleRecipeNavigation = () => {
const isOnRecipePage = location.pathname === '/recipe';
if (isOnRecipePage) {
// Already on recipe page
return;
}
// Navigate from main page - force reload to ensure Instagram embeds work
window.location.href = '/recipe';
};
return (
<MotionBox
@@ -62,11 +77,13 @@ function OilInfo() {
transition={{ duration: 0.6, delay: 0.8, ease: "easeOut" }}
>
<MotionImage
src='/images/new/recipe_button.webp'
w={{ base: '100%', sm: '90%', md: '85%' }}
src='/images/new/buttons.webp'
w={{ base: '100%', sm: '100%', md: '90%' }}
initial={{ opacity: 0, scale: 0.8 }}
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
transition={{ duration: 0.5, delay: 1.0, ease: "easeOut" }}
cursor="pointer"
onClick={handleRecipeNavigation}
/>
</MotionBox>

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

@@ -135,6 +135,7 @@ function Truth() {
</MotionText>
<MotionStack
mx="auto"
mt={{ base: 3, sm: -5, md: -5, lg: -5, xl: -5 }}
columns={{ base: 1, sm: 1, md: 2 }}
p={{ base: 5, sm: 12, md: 20 }}
@@ -188,6 +189,7 @@ function Truth() {
>
<MotionStack
w='100%'
mt={5}
justify={'center'}
align={'center'}
initial={{ opacity: 0, scale: 0.9 }}
@@ -210,9 +212,9 @@ function Truth() {
<MotionFlex
gap={12}
direction={{ base: 'column', sm: 'column', md: 'row' }}
justify="center"
justifyItems="center"
mt={5}
align={'flex-end'}
align={{ base: 'center', sm: 'center', md: 'flex-end', lg: 'flex-end', xl: 'flex-end' }}
initial={{ opacity: 0, y: 30 }}
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
@@ -225,7 +227,8 @@ function Truth() {
transition={{ duration: 0.5, delay: 0.5 + index * 0.2, ease: "easeOut" }}
>
<MotionStack
w='250px'
w={{ base: '250px', sm: '250px', md: '220px', lg: '250px', xl: '250px' }}
mx="auto"
justify={'flex-end'}
initial={{ opacity: 0, y: 20 }}
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}

63
src/pages/recipe.tsx
View File

@@ -6,34 +6,29 @@ import { useEffect, useState } from 'react'
const igPosts = [
{
id: 1,
title: "Healthy Oil Recipe 1",
url: "https://www.instagram.com/reel/DQiyajyET7l/?igsh=NzZnbmduNjc0Zjlo"
title: "Sam Sam Kitchen",
subTitle: "蜂蜜芥末煎三文魚",
url: "https://www.instagram.com/p/DLrhFq6JnKV/?utm_source=ig_web_button_share_sheet"
},
{
id: 2,
title: "Healthy Oil Recipe 2",
url: "https://www.instagram.com/reel/DO5f01Pj_By/?igsh=NjhhMnpxczllaHQ1"
title: "阿婆廚房",
subTitle: "懶人版蝦多士",
url: "https://www.instagram.com/reel/DMaP9jaSeDV/?utm_source=ig_web_button_share_sheet"
},
{
id: 3,
title: "Healthy Oil Recipe 3",
url: "https://www.instagram.com/p/DQicBYxE9IA/?igsh=MWIybmo4YXNxdnBlbw=="
title: "Cook1cook",
subTitle: "慳油炸雞法",
url: "https://www.instagram.com/reel/DL4i5TXtI4B/?igsh=MXBsYXoyOGJucXE0ZQ"
},
{
id: 4,
title: "Healthy Oil Recipe 4",
url: "https://www.instagram.com/p/DQCAnNrEWfF/?igsh=MXc0Z25qNm9jaWtyNA=="
title: "Travelogue by Tracy",
subTitle: "酥炸牛油果天婦羅",
url: "https://www.instagram.com/reel/DOYeOUfEUoP/"
},
{
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() {
@@ -155,38 +150,48 @@ function Recipe() {
<Image
src="/images/new/recipe_title.webp"
w={{ base: '70vw', md: '50vw', lg: '30vw' }}
mt = {20}
mt={20}
mx="auto"
/>
<SimpleGrid
columns={{ base: 1, sm: 1, md: 2 }}
columns={{ base: 1, sm: 1, md: 2, lg: 2, xl: 3 }}
p={{ base: 10, sm: 20, md: 20 }}
w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '70%' }}
w={{ base: '100%', sm: '100%', md: '100%', lg: '80%', xl: '85%' }}
h={'auto'}
gap={{ base: 10, md: 5 }}
mx="auto"
justifyItems={'center'}
alignItems={'center'}
alignItems={'flex-start'}
>
{igPosts.map((post) => (
<Box
key={post.id}
justifyItems={'center'}
justifyItems={'flex-start'}
alignItems={'center'}
width={325}
>
<Text
color={'#2E683D'}
mb={2}
className='font-melle font-xbold'
fontSize={{ base: "2xl", md: "2xl", lg: "22xl2px", xl: "2xl" }}>
color={'#3F8C04'}
className='font-noto-sans'
fontWeight={'400'}
fontSize={{ base: "2xl", md: "2xl", lg: "2xl", xl: "2xl" }}>
{post.title}
</Text>
<InstagramEmbed url={post.url} width={328} />
<Text
color={'#3F8C04'}
mb={2}
className='font-melle font-xbold'
fontSize={{ base: "2xl", md: "2xl", lg: "2xl", xl: "2xl" }}>
{post.subTitle}
</Text>
<InstagramEmbed url={post.url}
width={328}
/>
</Box>
))}