updated the ui v315

src/components/bestoil.tsx

@@ -12,7 +12,7 @@ function Bestoil() {
     const cook = useBreakpointValue({
         base: "/images/cook_mb.webp",
         sm: "/images/cook_mb.webp",
-        md: "/images/cook_pc.webp",
+        md: "/images/goldandhealthytext.webp",
     });
 
     // Create refs for elements we want to animate
@@ -62,16 +62,27 @@ function Bestoil() {
         >
             <Flex
                 w='100%'
+                gap={0}
                 justify={"center"}
                 align={"center"}
                 direction={{ base: "column", sm: "column", md: "row" }}
             >
-
+                <Stack
+                    w={{ base: "70%", sm: "80%", md: '350px', lg: '500px' }}
+                    align={"center"}
+                    mr={{ base: 0, sm: 0, md: '-80px' }}
+                >
                     <Image src="/images/best5.webp"
                         fit='contain'
-                    w={{ base: "70%", sm: "80%", md: '350px', lg: '500px' }}
                     />
 
+                    <Image src='/images/cookmethods.webp'
+                        w={'70%'}
+                        display={{ base: "none", sm: "none", md: "flex" }}
+                        fit='contain'
+                    />
+                </Stack>
+
 
 
 

src/components/compare.tsx

@@ -1,15 +1,35 @@
-import { Box, Stack, Image, Flex, SimpleGrid } from '@chakra-ui/react'
+import { Box, Stack, Image, Flex, SimpleGrid, Text } from '@chakra-ui/react'
 import { useRef } from 'react';
 import { motion } from 'framer-motion';
+import { colors } from '../colors';
 
 // Create motion versions of Chakra components
 
 const MotionImage = motion(Image);
 
+const statement = `*營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。
+                   ^Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。
+                   此產品沒有根據《藥劑業及毒藥條例》或《中醫藥條例》註冊，為此產品作出的任何聲稱亦沒有為進行該等註冊而接受評核，此產品並不供作診斷、治療或預防任何疾病之用。`
 
 function Compare() {
     const compareRef = useRef(null);
 
+    const formatText = (text: string) => {
+        return text.split('\n').map((line, i) => (
+            <Box key={i}
+                color={colors.textColor}
+                fontSize='10px'
+                mx={5}
+                className='font-noto-sans font-regular'
+            >
+                {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>
+        ));
+    };
+
     return (
         <Box
             ref={compareRef}
@@ -18,7 +38,7 @@ function Compare() {
         >
             <SimpleGrid columns={2}
                 maxW="full"
-                h={{ base: '140vw', sm: '140vw', md: '120vw', lg: '50vw', xl: '55vw' }}
+                h={{ base: '200vw', sm: '170vw', md: '145vw', lg: '61vw', xl: '61w' }}
                 mb="20px" // Add 20px bottom margin
                 position="relative"
                 zIndex="1"
@@ -61,7 +81,25 @@ function Compare() {
                         viewport={{ once: true }}
                         transition={{ duration: 1.5 }}
                     />
+                    <Box
+                        width={'full'}
+                        justifyItems={'center'}
+                        position="absolute"
+                        bottom="17%"
+                        left="50%"
+                        transform="translateX(-51%)"
+                        zIndex="1"
+                    >
+                        <Box
+                            w='auto'
+                            h='auto'>
+                            {formatText(statement)}
+                        </Box>
+
+                    </Box>
                 </Stack>
+
+
             </SimpleGrid>
 
             {/* Use a larger negative margin to pull the flex up into the grid area */}

src/components/footer.tsx

@@ -16,25 +16,37 @@ function Footer() {
             </Text>
             <Flex alignItems={'center'} justifyContent={'center'} direction="column">
                 <Image src="/images/headerlogo.webp" alt="Logo" width="150px" />
-                <Text textAlign={'center'} marginLeft={3} marginTop={2} className="font-melle font-medium" color={'#075C39'}>
+
-                    {"【積極求變 健康向前】"}
-                </Text>
             </Flex>
             <Flex
                 alignItems={'flex-end'}
                 w={{ base: '100%', sm: '100%', md: '60%', lg: '55%', xl: '55%' }}
                 h='60px'
 
+            >
+                <Stack gap={0} 
+                position={'absolute'}
+                bottom={1}
                 >
                     <Text
                         className='font-noto-sans font-regular'
                         color={colors.textColor}
-                    fontSize={{ base: 'xs', sm: 'sm', md: 'md', lg: 'md', xl: 'md' }}
+                        fontSize={'8px'}
                         mt={5}
                         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>
     );

src/components/header.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Image, Text, } from '@chakra-ui/react';
+import { Box, Flex, Image, } from '@chakra-ui/react';
 import {colors} from '../colors';
 
 function Header() {
@@ -6,9 +6,6 @@ function Header() {
         <Box bg={colors.topBarColor} py={4} w="full">
             <Flex alignItems={'center'} justifyContent={'center'} direction="column">
                 <Image src="/images/headerlogo.webp" alt="Logo" width="150px" />
-                <Text textAlign={'center'} marginLeft={3} marginTop={2} className="font-melle font-medium" color={'#075C39'}>
-                    {"【積極求變 健康向前】"}
-                </Text>
             </Flex>
         </Box>
     );

src/components/hero1.tsx

@@ -4,8 +4,8 @@ import { motion } from 'framer-motion'
 function Hero1() {
     const MotionImage = motion(ChakraImage);
     const oilImage = useBreakpointValue({
-        base: "/images/oilmobile.webp",
+        base: "/images/lionglobe_product_mobile.webp",
-        sm: "/images/oil.webp",
+        sm: "/images/lionglobe_product_pc.webp",
 
     });
     return (
@@ -82,7 +82,7 @@ function Hero1() {
                             justifyContent={{ base: "center", sm: "flex-start", md: "flex-start", lg: "flex-start", xl: "flex-start" }}
                         >
                             <MotionImage
-                                src="/images/people2.webp"
+                                src="/images/peoples.webp"
                                 h={{ base: "120vw", sm: "70vw", md: "50vw", lg: "50vw", xl: "50vw" }}
                                 // maxH={"50%"}
                                 marginRight={{ base: "-30%", sm: "0", md: "0", lg: "0", xl: "0" }}

src/components/hero2.tsx

@@ -92,7 +92,7 @@ function Hero2() {
                             h={"auto"}
                         >
                             <Image
-                                src="/images/oldman.jpg"
+                                src="/images/asking.jpg"
                                 rounded="4xl"
                                 marginTop={'10px'}
                                 height={{ md: "100%", lg: "85%", xl: "65%" }}
@@ -143,7 +143,7 @@ function Hero2() {
                                 </MotionText>
                             </Flex>
                             <MotionImage
-                                src="/images/oldman.jpg"
+                                src="/images/asking.jpg"
                                 rounded="4xl"
                                 marginTop={'3px'}
                                 h={{ md: "90%", lg: "65%", xl: "65%" }}
@@ -163,7 +163,7 @@ function Hero2() {
 
                             <MotionText 
                                 color={colors.textColor} 
-                                className="font-noto-sans font-bold" 
+                                className="font-noto-sans font-regular" 
                                 lineHeight={2}
                                 variants={{
                                     hidden: { y: 20, opacity: 0 },

src/components/oil_info.tsx

@@ -146,6 +146,7 @@ function Oil_info() {
                 <Flex
                     w={{ base: '80%', sm: '80%', md: "100%" }}
                     justify={{ base: 'flex-start', sm: 'flex-start', md: 'center' }}
+                    display={{ base: 'flex', sm: 'flex', md: 'none' }}
                 >
                     <Image src={oilinfotitle}
                         w='400px'
@@ -173,6 +174,15 @@ function Oil_info() {
                             ^根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算`)}
                         </Stack>
 
+                        <Stack
+                            display={{ base: 'none', sm: 'none', md: 'flex' }}
+                        >
+                            <Image src='/images/mboilinfotitle.webp'
+                                w='400px'
+                               
+                            />
+                        </Stack>
+
                         <Text
                             color='white'
                             className='NotoSansCJKtc font-medium'
@@ -183,7 +193,7 @@ function Oil_info() {
                             <Box as="span" className='NotoSansCJKtc font-xbold' display="inline">世界衛生組織建議，</Box>
                             {"人體應攝取良好的脂肪酸比例，這可由食油中攝取，從而調節膽固醇，保護心血管健康。"}
                         </Text>
-                        <Text
+                        {/* <Text
                             color='white'
                             className='NotoSansCJKtc font-medium'
                             mb={10}
@@ -191,7 +201,7 @@ function Oil_info() {
                             fontSize={'lg'}
                         >
                             {"獅球嘜「營萃護心油」採用黃金比例調配，讓每一滴都成為心血管的隱形防護網。"}
-                        </Text>
+                        </Text> */}
                         <Stack
                             display={{ base: 'none', sm: 'none', md: 'flex' }}
                             mt={-5}>

src/components/qa.tsx

@@ -22,11 +22,11 @@ const questions = [
     {
         image: '/images/q4.png',
         question: "貴價油 = 健康油？",
-        answer: `健康關鍵在於「脂肪酸比例」，而非價格！
+        answer: `錯！健康關鍵在於「脂肪酸比例」，而非價格！
 不同脂肪酸對健康影響各異：
-\t• 單元不飽和脂肪酸（MUFA / 例如Omega-9） - 有助降低壞膽固醇
+• 單元不飽和脂肪酸（MUFA / 例如Omega-9） - 有助降低壞膽固醇
-\t• 多元不飽和脂肪酸（PUFA / 例如Omega-3、6） - 需攝取適當比例，Omega-6過多會引發炎症
+• 多元不飽和脂肪酸（PUFA / 例如Omega-3、6） - 需攝取適當比例，Omega-6過多會引發炎症
-\t• 飽和脂肪（SFA） - 過量攝取會提升壞膽固醇，影響心血管健康`
+• 飽和脂肪（SFA） - 過量攝取會提升壞膽固醇，影響心血管健康`
     },
     {
         image: '/images/q5.png',
@@ -41,20 +41,38 @@ const questions = [
 
 function Qa() {
     const formatText = (text: string) => {
-        return text.split('\n').map((line, i) => (
+        // Define all the phrases that should have the bold styling
+        const boldPhrases = ["錯！", "未必！", "• 單元不飽和脂肪酸", "• 多元不飽和脂肪酸", "• 飽和脂肪", "看煙點：", "看脂肪酸比例：", "看認證："];
+
+        return text.split('\n').map((line, i) => {
+            // Check if the line starts with any of the bold phrases
+            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'
                 >
-                {line.split('\t').map((segment, j) => (
+                    {hasBoldPhrase && (
+                        <Text as="span" className='font-noto-sans font-black'>
+                            {boldPart}
+                        </Text>
+                    )}
+                    {restOfLine.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>
-        ));
+            );
+        });
     };
+
+
     return (
         <Box
             w="100%"

src/components/salespoint.tsx

@@ -89,6 +89,8 @@ function Salespoint() {
                 gap={12}
                 direction={{ base: 'column', sm: 'column', md: 'row' }}
                 justify="center"
+                align={'flex-end'}
+            
             >
                 {shopImages.map((image, index) => (
                     <motion.div