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

2025-11-11 11:04:50 +08:00
parent e8e820f710
commit 9f68f445b9
8 changed files with 120 additions and 27 deletions
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -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)
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -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>
  )
 }
--- a/src/components/new_ui/advantages.tsx
+++ b/src/components/new_ui/advantages.tsx
@@ -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>
                                    ))}
@@ -455,7 +455,7 @@ function Advantages() {
                        <MotionText
                            w={{ base: '90%', sm: '80%', md: '80%', lg: '80%', xl: '80%' }}
                            className="font-noto-sans font-demi-light"
-                           fontSize={{ base: '17.5px', sm: 'xl', md: 'xl', lg: '2xl', xl: '2xl' }}
+                            fontSize={{ base: '17.5px', sm: 'xl', md: 'xl', lg: '2xl', xl: '2xl' }}
                            color="white"
                            lineHeight="1.8"
                            textAlign="left"
--- a/src/components/new_ui/info.tsx
+++ b/src/components/new_ui/info.tsx
@@ -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'
--- a/src/components/oldFooter.tsx
+++ b/src/components/oldFooter.tsx
@@ -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;
--- a/src/pages/main.tsx
+++ b/src/pages/main.tsx
@@ -17,7 +17,7 @@ function MainPage() {
  const { location } = useRouterState()

  useEffect(() => {
-    if (location.pathname !== '/') {
+    if (location.pathname !== '/40+') {
      return
    }

--- a/src/pages/recipe.tsx
+++ b/src/pages/recipe.tsx
@@ -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 }}
            >
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -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