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

changed the page path, added old footer, fixed oil cube display ** problem

Browse Source
This commit is contained in:
philipcheung
2025-11-11 11:04:50 +08:00
parent e8e820f710
commit 9f68f445b9
8 changed files with 120 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/header.tsx
View File

@@ -74,8 +74,8 @@ function Header({ showMenu = false }: HeaderProps) {
const scrollToSection = (sectionId: string) => {
const targetId = sectionId.replace('#', '');
const isOnMainPage = location.pathname === '/';
const element = isOnMainPage ? document.getElementById(targetId) : null;
const isOn40PlusPage = location.pathname === '/40+';
const element = isOn40PlusPage ? document.getElementById(targetId) : null;
if (element) {
// Close drawer first, then scroll after animation completes
@@ -96,8 +96,8 @@ function Header({ showMenu = false }: HeaderProps) {
window.dispatchEvent(new CustomEvent('pending-scroll-section'));
}
if (!isOnMainPage) {
router.navigate({ to: '/' });
if (!isOn40PlusPage) {
router.navigate({ to: '/40+' });
}
};
@@ -128,7 +128,7 @@ function Header({ showMenu = false }: HeaderProps) {
const handleMenuClick = (itemId: string) => {
if (itemId === 'recipes') {
const isOnRecipePage = location.pathname === '/recipe';
const isOnRecipePage = location.pathname === '/40+/recipe';
if (isOnRecipePage) {
// Already on recipe page, just close drawer
@@ -136,8 +136,8 @@ function Header({ showMenu = false }: HeaderProps) {
return;
}
// Navigate from main page - force reload to ensure Instagram embeds work
window.location.href = '/recipe';
// Navigate to recipe page - force reload to ensure Instagram embeds work
window.location.href = '/40+/recipe';
return;
} else {
// Scroll to section (drawer will be closed inside scrollToSection)

10
src/components/layout.tsx
View File

@@ -1,4 +1,4 @@
import { Outlet } from '@tanstack/react-router'
import { Outlet, useRouterState } from '@tanstack/react-router'
import {
Box,
Container,
@@ -6,17 +6,23 @@ import {
import Footer from './footer'
import OldFooter from './oldFooter'
function Layout() {
const { location } = useRouterState()
// Use oldFooter for main page (/), footer for /40+ pages
const isMainPage = location.pathname === '/'
return (
<Container maxW="100vw" p={0} m={0} mt={0}>
{/* <Header showMenu={showMenu} /> */}
<Box position="relative">
<Outlet />
</Box>
<Footer />
{isMainPage ? <OldFooter /> : <Footer />}
</Container>
)
}

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

@@ -213,7 +213,7 @@ function Advantages() {
columns={{ base: 1, sm: 1, md: 1 }}
p={4}
pb={10}
mt = {20}
mt={20}
w={{ base: '100%', sm: '95vw', md: '90vw', lg: '85vw', xl: '65vw' }}
h={'auto'}
mx="auto"
@@ -333,7 +333,7 @@ function Advantages() {
fontSize={{ md: "1vw", lg: "1.0vw", xl: "0.8vw" }}
mt={-1}
>
{item.text}
{renderCubeDescription(item.text)}
</Text>
</Stack>
))}

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

@@ -19,7 +19,7 @@ const infoData: InfoData[] = [
id: 1,
title: '膽固醇\n超標',
image: '/images/new/blood.webp',
description: `長期攝取過多**飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用嘅煎炸油）**，會令體內**壞膽固醇（LDL）上升、好膽固醇（HDL）下降**，導致膽固醇積聚喺血管內壁，形成血塊堵塞血管，有機會引致**中風、心肌梗塞，**甚至**心臟病**等嚴重後果。`,
description: `長期攝取過多**飽和脂肪及反式脂肪(如牛油、加工食品、或重複使用嘅煎炸油)**，會令體內**壞膽固醇(LDL)上升、好膽固醇(HDL)下降**，導致膽固醇積聚喺血管內壁，形成血塊堵塞血管，有機會引致**中風、心肌梗塞，**甚至**心臟病**等嚴重後果。`,
url: 'https://www.perplexity.ai/search/a0afe979-4fbd-41bf-a160-18b3ecfb86c9'
},
{
@@ -44,7 +44,7 @@ const infoData: InfoData[] = [
id: 4,
title: '經常容易\n覺得疲倦',
image: '/images/new/brain.webp',
description: `香港人生活節奏急促，一日三餐唔係叫外賣就出街食，而餐廳普遍使用 Omega-6 偏高嘅食油（如大豆油）。**長期攝取會令體內Omega-6遠多於Omega-3，脂肪酸比例失衡，促進身體慢性發炎。**
description: `香港人生活節奏急促，一日三餐唔係叫外賣就出街食，而餐廳普遍使用 Omega-6 偏高嘅食油(如大豆油)。**長期攝取會令體內Omega-6遠多於Omega-3，脂肪酸比例失衡，促進身體慢性發炎。**
如果失衡未能改善，尤其Omega-3長期攝取不足，就容易出現易攰、記憶力下降、專注力不足等情況。隨住狀況持續惡化，仲可能影響腦部神經傳導，提升**腦霧同失智症**風險。`,
url: 'https://www.perplexity.ai/search/969824ce-4976-4bfa-9825-d8780f6b4405'

87
src/components/oldFooter.tsx Normal file
View File

@@ -0,0 +1,87 @@
import { Stack, Flex, Image, Text, Box } from '@chakra-ui/react';
import { colors } from '../colors';
const footerText = `*獅球嘜品牌產品系列中首次推出之護心食用油
+根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算
#每食用分量含0克反式脂肪
▲Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎
▼營萃護心油的omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎，維持心血管健康`
function OldFooter() {
const formatText = (text: string) => {
return text.split('\n').map((line, i) => (
<Box key={i}
className='font-noto-sans font-regular'
color={colors.textColor}
fontSize={'10px'}
ml={2}
>
{line.charAt(0).match(/[\*\^\▲\+\▼\#]/) ? (
<>
<Text as="span" fontSize="6px" verticalAlign="super">{line.charAt(0)}</Text>
{line.substring(1).split('\t').map((segment, j) => (
j === 0 ? segment : <Text as="span" ml={4} key={j}>{segment}</Text>
))}
</>
) : (
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>
));
};
const currentYear = new Date().getFullYear();
return (
<Stack bg={colors.topBarColor} py={5} w="full"
align={'center'}
>
<Text
className='font-melle font-xbold'
fontSize={'4xl'}
color={'white'}
>
{"查詢：29437810"}
</Text>
<Flex alignItems={'center'} justifyContent={'center'} direction="column">
<Image src="/images/header_logo.webp" alt="Logo" width="150px" />
</Flex>
<Flex
alignItems={'flex-end'}
w={{ base: '100%', sm: '100%', md: '60%', lg: '55%', xl: '55%' }}
h={{ base: '180px', sm: '180px', md: '130px' }}
>
<Stack gap={0}
position={'absolute'}
bottom={1}
>
{formatText(footerText)}
<Text
className='font-noto-sans font-regular'
color={colors.textColor}
fontSize={'10px'}
mt={2}
ml={2}
>
{`Copyright © ${currentYear}合興食油（香港）有限公司 版權所有，不得轉載。`}
</Text>
{/* <Text
className='font-noto-sans font-regular'
color={colors.textColor}
fontSize={'8px'}
ml={2}
>
{`參考資料 | 台灣營養師張益堯在節目《奕起聊健康》上分享關於「油脂」的健康 https://bit.ly/3FmZkCo https://bit.ly/4htQ9gt`}
</Text> */}
</Stack>
</Flex>
</Stack>
);
}
export default OldFooter;

2
src/pages/main.tsx
View File

@@ -17,7 +17,7 @@ function MainPage() {
const { location } = useRouterState()
useEffect(() => {
if (location.pathname !== '/') {
if (location.pathname !== '/40+') {
return
}

2
src/pages/recipe.tsx
View File

@@ -163,7 +163,7 @@ function Recipe() {
alignItems="center"
top={{ base: "140px", md: "140px", lg: "140px", xl: "140px" }}
left={{ base: "0vw", md: "2vw", lg: "2vw", xl: "2vw" }}
onClick={() => router.navigate({ to: '/' })}
onClick={() => router.navigate({ to: '/40+' })}
cursor="pointer"
_hover={{ opacity: 0.8 }}
>

22
src/router.tsx
View File

@@ -9,30 +9,30 @@ const rootRoute = createRootRoute({
component: Layout,
})
// Main page route (new landing page)
// Home page route (main landing page at /)
const indexRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/',
component: MainPage,
})
// Home page route (old content)
const homeRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/home',
component: HomePage,
})
// Recipe page route
// Main page route (40+ page)
const mainRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/40+',
component: MainPage,
})
// Recipe page route (under 40+)
const recipeRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/recipe',
path: '/40+/recipe',
component: RecipePage,
})
// Create the router
const router = createRouter({
routeTree: rootRoute.addChildren([indexRoute, homeRoute, recipeRoute]),
routeTree: rootRoute.addChildren([indexRoute, mainRoute, recipeRoute]),
})
export default router