final updated

src/components/compare.tsx

@@ -38,7 +38,7 @@ function Compare() {
         >
             <SimpleGrid columns={2}
                 maxW="full"
-                h={{ base: '140vw', sm: '140vw', md: '125vw', lg: '55vw', xl: '55vw' }}
+                h={{ base: '140vw', sm: '130vw', md: '120vw', lg: '50vw', xl: '50vw' }}
                 mb="20px" // Add 20px bottom margin
                 position="relative"
                 zIndex="1"

src/components/footer.tsx

@@ -2,10 +2,9 @@ import { Stack, Flex, Image, Text, Box } from '@chakra-ui/react';
 import { colors } from '../colors';
 
 const footerText = `*獅球嘜品牌產品系列中首次推出之護心食用油
-^營萃護心油根據世界衛生組織建議之每日人體脂肪酸攝取比例調製，其成分內的Omega-3比例較一般花生油、粟米油高，特別有助平衡慣常外出用餐的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，有助維持心血管健康
++根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算
 #每食用分量含0克反式脂肪
 ▲Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎
-+根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算
 ▼營萃護心油的omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎，維持心血管健康`
 function Footer() {
 
@@ -19,7 +18,7 @@ function Footer() {
             >
                 {line.charAt(0).match(/[\*\^\▲\+\▼\#]/) ? (
                     <>
-                        <Text as="span" fontSize="7px" verticalAlign="super">{line.charAt(0)}</Text>
+                        <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>
                         ))}

src/components/hero2.tsx

@@ -89,7 +89,7 @@ function Hero2() {
                             ref={imageStackRef}
                             alignItems='flex-end'
                             display={{ base: "none", md: "none", lg: "flex" }}
-                            w={{ md: "80%", lg: "70%", xl: "60%" }}
+                            w={{ md: "80%", lg: "70%", xl: "65%" }}
                             h={"auto"}
                         >
                             <Image
@@ -107,7 +107,7 @@ function Hero2() {
 
                     <Flex justify={{ sm: 'center', md: "center", lg: "flex-start" }}>
                         <Stack
-                            w={{ sm: "100%", md: "80%", lg: "90%", xl: "60%" }}
+                            w={{ sm: "100%", md: "80%", lg: "90%", xl: "65%" }}
                             h="auto"
                             id="text_stack"
                             ref={textStackRef}

src/components/oil_info.tsx

@@ -113,7 +113,7 @@ function Oil_info() {
                                 lineHeight={1.5}
                                 fontSize={'lg'}
                             >
-                                {"市場上食油選擇繁多，卻缺少一款真正符合人體對脂肪酸需求的「黃金比例」食油。長期依賴單一油種（如橄欖油、葵花籽油），可能導致脂肪酸及 Omega-3、6、9 攝取失衡。研究顯示，當人體吸收過多Omega-6，發炎風險可增 3 倍，無形中加重心血管負擔。"}
+                                {"市場上食油選擇繁多，卻缺少一款真正符合人體對脂肪酸需求的「黃金比例」食油。長期依賴單一油種（如橄欖油、葵花籽油），可能導致脂肪酸及Omega-3、6、9攝取失衡。研究顯示，當人體吸收過多Omega-6，會大幅增加發炎風險，無形中加重心血管負擔。"}
                             </Text>
                         </Stack>
                     </Flex>
@@ -135,7 +135,7 @@ function Oil_info() {
                     lineHeight={1.5}
                     fontSize={'lg'}
                 >
-                    {"市場上食油選擇繁多，卻缺少一款真正符合人體對脂肪酸需求的「黃金比例」食油。長期依賴單一油種（如橄欖油、葵花籽油），可能導致脂肪酸及 Omega-3、6、9 攝取失衡。研究顯示，當人體吸收過多Omega-6，發炎風險可增 3 倍，無形中加重心血管負擔。"}
+                    {"市場上食油選擇繁多，卻缺少一款真正符合人體對脂肪酸需求的「黃金比例」食油。長期依賴單一油種（如橄欖油、葵花籽油），可能導致脂肪酸及Omega-3、6、9攝取失衡。研究顯示，當人體吸收過多Omega-6，會大幅增加發炎風險，無形中加重心血管負擔。"}
                 </Text>
             </Stack>
 

src/components/qa.tsx

@@ -1,105 +1,113 @@
-import { Box, Image, Text, Flex, Accordion } from '@chakra-ui/react'
+import React from 'react';
+import { Box, Image, Text, Flex, Accordion } from '@chakra-ui/react';
 import { colors } from '../colors';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
+
 const MotionBox = motion(Box);
+
 const questions = [
     {
         image: '/images/q1.png',
-        question: "煮餸落少啲油，甚至唔落油就等於健康？",
-        answer: "錯！油脂是身體合成荷爾蒙的重要材料，若完全不攝取油脂，可能會導致皮膚變乾、容易脫髮，對女生來說更可能影響生理週期。簡單來說，身體需要「好脂肪」來幫助吸收營養，適量攝取優質油脂更有助維持細胞健康！"
+        question: '煮餸落少啲油，甚至唔落油就等於健康？',
+        answer:
+            '錯！油脂是身體合成荷爾蒙的重要材料，若完全不攝取油脂，可能會導致皮膚變乾、容易脫髮，對女生來說更可能影響生理週期。簡單來說，身體需要「好脂肪」來幫助吸收營養，適量攝取優質油脂更有助維持細胞健康！',
     },
     {
         image: '/images/q2.png',
-        question: "用橄欖油煮食就一定最健康？",
-        answer: "未必！橄欖油雖富含單元不飽和脂肪酸如Omega-9，但人體可自行合成，而其 Omega-3 和 Omega-6 含量偏低，脂肪酸比例並不均衡，對小孩及孕婦來說，長期單一使用可能無法滿足他們對營養素的需求。而初榨橄欖油煙點低（約190°C），高溫煮食容易產生有害物質，反成健康負擔。"
+        question: '用橄欖油煮食就一定最健康？',
+        answer:
+            '未必！橄欖油雖富含單元不飽和脂肪酸如Omega-9，但人體可自行合成，而其 Omega-3 和 Omega-6 含量偏低，脂肪酸比例並不均衡，對小孩及孕婦來說，長期單一使用可能無法滿足他們對營養素的需求。而初榨橄欖油煙點低（約190°C），高溫煮食容易產生有害物質，反成健康負擔。',
     },
     {
         image: '/images/q3.png',
-        question: "使用單一油種的食用油較好？",
-        answer: "未必！ 長期只用一種食油，猶如「偏食」，容易導致脂肪酸攝取失衡，影響健康。不同食油各有優缺點，例如米糠油、橄欖油、葵花籽油Omega-3偏低，不適合發育中的小孩、孕婦及哺乳中的婦女長期單一使用；初榨橄欖油與初榨亞麻籽油不耐高溫；花生油與牛油果油的飽和脂肪偏高，增加心血管堵塞的風險。"
+        question: '使用單一油種的食用油較好？',
+        answer:
+            '未必！ 長期只用一種食油，猶如「偏食」，容易導致脂肪酸攝取失衡，影響健康。不同食油各有優缺點，例如米糠油、橄欖油、葵花籽油Omega-3偏低，不適合發育中的小孩、孕婦及哺乳中的婦女長期單一使用；初榨橄欖油與初榨亞麻籽油不耐高溫；花生油與牛油果油的飽和脂肪偏高，增加心血管堵塞的風險。',
     },
     {
         image: '/images/q4.png',
-        question: "貴價油 = 健康油？",
+        question: '貴價油 = 健康油？',
         answer: `錯！健康關鍵在於「脂肪酸比例」，而非價格！
 不同脂肪酸對健康影響各異：
 	•	單元不飽和脂肪酸（MUFA / 例如Omega-9） – 有助降低壞膽固醇。
-	•	多元不飽和脂肪酸（PUFA / 例如Omega-3、6） – 為人體必需脂肪酸，身體不能合成製造，必須從食物中吸收；但人體無法自行合成，需攝取適當比例，Omega-6 過多會造成身體慢性發炎1
-	•	飽和脂肪（SFA） – 過量攝取會提升壞膽固醇，影響心血管健康。`
+	•	多元不飽和脂肪酸（PUFA / 例如Omega-3、6） – 為人體必須脂肪酸，身體不能合成製造，必須從食物中吸收並攝取適當比例；而攝取過多Omega-6 則會造成身體慢性發炎1。
+	•	飽和脂肪（SFA） – 過量攝取會提升壞膽固醇，影響心血管健康。`,
     },
     {
         image: '/images/q5.png',
-        question: "食油種類太多，點揀先唔會中伏？",
+        question: '食油種類太多，點揀先唔會中伏？',
         answer: `市面上的食油種類繁多，從花生油、粟米油、芥花籽油、橄欖油、米糠油到牛油果油，每種油都有不同的營養價值和適用範圍。要選擇真正健康和適合日常使用的食油，只需記住 3 個關鍵原則：
 
 看煙點：高溫煎炸選用煙點高於200°C的食油，可減少有害物質產生
 看脂肪酸比例：單元不飽和脂肪酸（MUFA）與多元不飽和脂肪酸（PUFA）比例，確保均衡攝取營養
-看認證：符合國際營養機構推薦，如世界衛生組織（WHO）建議的脂肪酸攝取比例`
-    }
-]
+看認證：符合國際營養機構推薦，如世界衛生組織（WHO）建議的脂肪酸攝取比例`,
+    },
+];
 
 function Qa() {
-    const formatText = (text: string, questionIndex: number) => {
-        const boldPhrases = ["錯！", "未必！", "	•	單元不飽和脂肪酸", "	•	多元不飽和脂肪酸", "	•	飽和脂肪", "看煙點：", "看脂肪酸比例：", "看認證："];
+    const formatText = (text: string) => {
+        const boldPhrases = ["錯！", "未必！", "	•	單元不飽和脂肪酸", "	•	多元不飽和脂肪酸", "	•	飽和脂肪（SFA）", "看煙點：", "看脂肪酸比例：", "看認證："];
 
         return text.split('\n').map((line, i) => {
-            const matchingPhrase = boldPhrases.find(phrase => line.startsWith(phrase));
-            const hasBoldPhrase = !!matchingPhrase;
-            const boldPart = hasBoldPhrase ? matchingPhrase : "";
-            const restOfLine = hasBoldPhrase ? line.substring(matchingPhrase.length) : line;
-
-            return (
-                <Box key={i}
-                    color={colors.textColor}
-                    fontSize='lg'
-                    ml={1}
-                    className='font-noto-sans font-regular'
-                >
-                    {hasBoldPhrase && (
-                        <Text as="span" className='font-noto-sans font-black'>
-                            {boldPart}
-                        </Text>
-                    )}
-                    {restOfLine.split('\t').map((segment, j) => {
-                        // Special handling for superscript in question index 3
-                        if (questionIndex === 3) {
-                            const parts = segment.split(/(\d+)$/);
-                            if (parts.length > 1) {
-                                return (
-                                    <Text as="span" ml={j === 0 ? 0 : 4} key={j}>
-                                        {parts[0]}
-                                        <Text as="sup" fontSize="xs">{parts[1]}</Text>
-                                    </Text>
-                                );
+            // Explicitly type parts as an array that can contain strings or React nodes
+            let parts: (string | React.ReactNode)[] = [line];
+            
+            boldPhrases.forEach(phrase => {
+                let newParts: (string | React.ReactNode)[] = [];
+                parts.forEach(part => {
+                    if (typeof part === "string") {
+                        let partStrings = part.split(phrase);
+                        for (let j = 0; j < partStrings.length; j++) {
+                            newParts.push(partStrings[j]);
+                            if (j !== partStrings.length - 1) {
+                                newParts.push(<Text as="span" fontWeight="bold">{phrase}</Text>);
                             }
                         }
-                        return (
-                            <Text as="span" ml={j === 0 ? 0 : 4} key={j}>
-                                {segment}
-                            </Text>
-                        );
-                    })}
-                    {i < text.split('\n').length - 1 && <br />}
-                </Box>
+                    } else {
+                        newParts.push(part);
+                    }
+                });
+                parts = newParts;
+            });
+
+            // 处理包含"發炎1"的文本，添加上标
+            parts = parts.map((part) => {
+                if (typeof part === "string" && part.includes('發炎1')) {
+                    // 找到"發炎1"的位置
+                    const index = part.indexOf('發炎1');
+                    // 分割字符串：前部分 + "發炎" + 后部分
+                    const before = part.substring(0, index);
+                    const after = part.substring(index + 3); // "發炎1"长度为3
+                    
+                    // 返回带有上标的JSX
+                    return (
+                        <>
+                            {before}發炎<Text as="sup" fontSize="0.6em" verticalAlign="super">1</Text>{after}
+                        </>
+                    );
+                }
+                return part;
+            });
+
+            return (
+                <Text key={i} color={colors.textColor} fontSize="lg" className="font-noto-sans font-regular" whiteSpace="pre-line" mt={i !== 0 ? 2 : 0}>
+                    {parts}
+                </Text>
             );
         });
     };
 
-
     return (
-        <Box
-            w="100%"
-            position="relative"
-        >
-            <Accordion.Root variant="plain" multiple={true} >
+        <Box w="100%" position="relative">
+            <Accordion.Root variant="plain" multiple={true}>
                 {questions.map((item, index) => {
                     // Create a ref for each question item
                     const questionRef = useRef(null);
                     // Use useInView with once:true to trigger animation only once when scrolled into view
                     const isInView = useInView(questionRef, {
-                        once: true,  // Only trigger once
-                        amount: 0.3  // Trigger when 30% of element is in viewport
+                        once: true, // Only trigger once
+                        amount: 0.3, // Trigger when 30% of element is in viewport
                     });
 
                     return (
@@ -111,71 +119,76 @@ function Qa() {
                             transition={{
                                 duration: 0.6,
                                 delay: index * 0.15,
-                                ease: "easeOut"
+                                ease: 'easeOut',
                             }}
                         >
-                            <Accordion.Item value={item.question} width={'full'} bgColor='white'>
+                            <Accordion.Item value={item.question} width={'full'} bgColor="white">
                                 <Accordion.ItemTrigger
                                     _hover={{
                                         boxShadow: 'none',
                                         outline: 'none',
-                                        border: 'none'
+                                        border: 'none',
                                     }}
                                     _focus={{
                                         boxShadow: 'none',
                                         outline: 'none',
-                                        border: 'none'
+                                        border: 'none',
                                     }}
                                     _active={{
                                         boxShadow: 'none',
                                         outline: 'none',
-                                        border: 'none'
+                                        border: 'none',
                                     }}
-                                    bgColor={index % 2 == 0 ? 'white' : '#FBFCF3'} height='auto'
-                                    justifyContent='center'
-                                    w='full'
-                                    alignItems={'center'}>
-                                    <Flex w={{ base: '95%', sm: '95%', md: '80%', lg: '70%', xl: '50%' }}
-                                        direction={{ base: 'column', sm: "column", md: 'row' }}
+                                    bgColor={index % 2 == 0 ? 'white' : '#FBFCF3'}
+                                    height="auto"
+                                    justifyContent="center"
+                                    w="full"
+                                    alignItems={'center'}
+                                >
+                                    <Flex
+                                        w={{ base: '95%', sm: '95%', md: '80%', lg: '70%', xl: '50%' }}
+                                        direction={{ base: 'column', sm: 'column', md: 'row' }}
                                         marginY={4}
                                     >
-                                        <Flex w={{ base: '15%', sm: '15%', md: '10%', lg: '10%', xl: '10%' }}
+                                        <Flex
+                                            w={{ base: '15%', sm: '15%', md: '10%', lg: '10%', xl: '10%' }}
                                             justifyContent={{ base: 'flex-start', sm: 'flex-start', md: 'flex-end' }}
-                                            alignItems='center'>
-                                            <Image src={item.image}
+                                            alignItems="center"
+                                        >
+                                            <Image
+                                                src={item.image}
                                                 mt={2.5}
                                                 mr={{ base: 0, sm: 0, md: 1.5 }}
                                                 w={{ base: '70px', sm: '70px', md: '45px', lg: '45px', xl: '45px' }}
                                             />
                                         </Flex>
-                                        <Flex w='90%'
-                                            alignItems={'center'}>
-                                            <Text
-                                                color={colors.textColor}
-                                                fontSize='2xl'
-                                                className='font-noto-sans font-black'
-                                            >{item.question}</Text>
+                                        <Flex w="90%" alignItems={'center'}>
+                                            <Text color={colors.textColor} fontSize="2xl" className="font-noto-sans font-black">
+                                                {item.question}
+                                            </Text>
                                         </Flex>
                                     </Flex>
                                 </Accordion.ItemTrigger>
                                 <Accordion.ItemContent>
-                                    <Accordion.ItemBody
-                                        bgColor={index % 2 == 0 ? 'white' : '#FBFCF3'}
-                                        justifyItems={'center'}>
+                                    <Accordion.ItemBody bgColor={index % 2 == 0 ? 'white' : '#FBFCF3'} justifyItems={'center'}>
                                         <Flex w={{ base: '95%', sm: '95%', md: '80%', lg: '70%', xl: '50%' }}>
-                                            <Flex w={{ base: '3%', sm: '2%', md: '10%', lg: '10%', xl: '10%' }}
+                                            <Flex
+                                                w={{ base: '3%', sm: '2%', md: '10%', lg: '10%', xl: '10%' }}
                                                 justifyContent={{ base: 'flex-start', sm: 'flex-start', md: 'flex-end' }}
-                                                alignItems='center'>
-                                            </Flex>
-                                            <Flex w={{ base: '97%', sm: '98%', md: '90%', lg: '90%', xl: '90%' }}
-                                                direction={'column'}>
-                                                {formatText(item.answer, index)}
-                                                {index == 3 ? (
-                                                    <Text mt={5} color={colors.textColor} fontSize={'xs'} className='font-noto-sans font-regular'>
-                                                        <Box as="sup" fontSize="0.6em" mr="1px">1</Box>
-                                                        {" Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。"}
+                                                alignItems="center"
+                                            ></Flex>
+                                            <Flex w={{ base: '97%', sm: '98%', md: '90%', lg: '90%', xl: '90%' }} direction={'column'}>
+                                                {formatText(item.answer)}
+                                                {index === 3 ? (
+                                                    <Text mt={5} color={colors.textColor} fontSize={'xs'} className="font-noto-sans font-regular">
+                                                        <Box as="sup" fontSize="0.6em" mr="1px" lineHeight="normal">
+                                                            1
+                                                        </Box>
+                                                        {' Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。'}
                                                     </Text>
-                                                ) : (<Flex />)}
+                                                ) : (
+                                                    <Flex />
+                                                )}
                                             </Flex>
                                         </Flex>
                                     </Accordion.ItemBody>
@@ -188,4 +201,5 @@ function Qa() {
         </Box>
     );
 }
-export default Qa;
+
+export default Qa;

src/components/salespoint.tsx

@@ -1,4 +1,4 @@
-import {Stack, Image, Text, Flex, Link } from '@chakra-ui/react'
+import { Stack, Image, Text, Flex, Link } from '@chakra-ui/react'
 import { colors } from '../colors';
 import { useEffect, useRef } from 'react';
 import { motion, useInView } from 'framer-motion'
@@ -104,10 +104,10 @@ function Salespoint() {
                             w='250px'
                             justify={'flex-end'}
                         >
-                            <Link href={image.link}>
-                                <Image src={image.image} cursor="pointer" fit={'contain'}
-                                    loading="lazy" />
-                            </Link>
+                            {/* <Link href={image.link}> */}
+                            <Image src={image.image} cursor="pointer" fit={'contain'}
+                                loading="lazy" />
+                            {/* </Link> */}
                         </Stack>
                     </motion.div>
                 ))}
@@ -152,7 +152,7 @@ function Salespoint() {
                     _focus={{ outline: 'none', boxShadow: 'none' }}
                     _active={{ outline: 'none', boxShadow: 'none' }}>
                     <Image
-                        src={'/images/facebook_2.webp'}
+                        src={'/images/facebook.webp'}
                         alt="salespoint"
                         w={"400px"}
                         loading='lazy'