diff --git a/public/images/asking.jpg b/public/images/asking.jpg new file mode 100644 index 0000000..32c11c8 Binary files /dev/null and b/public/images/asking.jpg differ diff --git a/public/images/conpareheart.webp b/public/images/conpareheart.webp index c1c12c3..34acba4 100644 Binary files a/public/images/conpareheart.webp and b/public/images/conpareheart.webp differ diff --git a/public/images/cookmethods.webp b/public/images/cookmethods.webp new file mode 100644 index 0000000..903278f Binary files /dev/null and b/public/images/cookmethods.webp differ diff --git a/public/images/goldandhealthytext.webp b/public/images/goldandhealthytext.webp new file mode 100644 index 0000000..dfacb51 Binary files /dev/null and b/public/images/goldandhealthytext.webp differ diff --git a/public/images/headerlogo.webp b/public/images/headerlogo.webp index 7b9a990..effa41c 100644 Binary files a/public/images/headerlogo.webp and b/public/images/headerlogo.webp differ diff --git a/public/images/lionglobe_product_mobile.webp b/public/images/lionglobe_product_mobile.webp new file mode 100644 index 0000000..589b2ff Binary files /dev/null and b/public/images/lionglobe_product_mobile.webp differ diff --git a/public/images/lionglobe_product_pc.webp b/public/images/lionglobe_product_pc.webp new file mode 100644 index 0000000..863bd12 Binary files /dev/null and b/public/images/lionglobe_product_pc.webp differ diff --git a/public/images/peoples.webp b/public/images/peoples.webp new file mode 100644 index 0000000..8168c48 Binary files /dev/null and b/public/images/peoples.webp differ diff --git a/src/components/bestoil.tsx b/src/components/bestoil.tsx index 7f5d864..7d9cb37 100644 --- a/src/components/bestoil.tsx +++ b/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,15 +62,26 @@ function Bestoil() { > - - + align={"center"} + mr={{ base: 0, sm: 0, md: '-80px' }} + > + + + + diff --git a/src/components/compare.tsx b/src/components/compare.tsx index 2c85214..2746cce 100644 --- a/src/components/compare.tsx +++ b/src/components/compare.tsx @@ -1,15 +1,35 @@ -import { Box, Stack, Image, Flex, SimpleGrid } from '@chakra-ui/react' -import {useRef } from '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) => ( + + {line.split('\t').map((segment, j) => ( + j === 0 ? segment : {segment} + ))} + {i < text.split('\n').length - 1 &&
} + + )); + }; + return ( + + + {formatText(statement)} + + + + + {/* Use a larger negative margin to pull the flex up into the grid area */} diff --git a/src/components/footer.tsx b/src/components/footer.tsx index 2caae6b..097c937 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -16,9 +16,7 @@ function Footer() { Logo - - {"【積極求變 健康向前】"} - + - - {`Copyright © ${currentYear}合興食油（香港）有限公司 版權所有，不得轉載。`} - + + {`Copyright © ${currentYear}合興食油（香港）有限公司 版權所有，不得轉載。`} + + + {`參考資料 | 台灣營養師張益堯在節目《奕起聊健康》上分享關於「油脂」的健康 https://bit.ly/3FmZkCo https://bit.ly/4htQ9gt`} + + ); diff --git a/src/components/header.tsx b/src/components/header.tsx index 5a14435..b6093a0 100644 --- a/src/components/header.tsx +++ b/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() { Logo - - {"【積極求變 健康向前】"} - ); diff --git a/src/components/hero1.tsx b/src/components/hero1.tsx index a1f0de5..bbfa297 100644 --- a/src/components/hero1.tsx +++ b/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", - sm: "/images/oil.webp", + base: "/images/lionglobe_product_mobile.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" }} > + + + + 世界衛生組織建議， {"人體應攝取良好的脂肪酸比例，這可由食油中攝取，從而調節膽固醇，保護心血管健康。"} - {"獅球嘜「營萃護心油」採用黃金比例調配，讓每一滴都成為心血管的隱形防護網。"} - + */} diff --git a/src/components/qa.tsx b/src/components/qa.tsx index 9e04c59..130a02b 100644 --- a/src/components/qa.tsx +++ b/src/components/qa.tsx @@ -22,11 +22,11 @@ const questions = [ { image: '/images/q4.png', question: "貴價油 = 健康油？", - answer: `健康關鍵在於「脂肪酸比例」，而非價格！ + answer: `錯！健康關鍵在於「脂肪酸比例」，而非價格！ 不同脂肪酸對健康影響各異： -\t• 單元不飽和脂肪酸（MUFA / 例如Omega-9） - 有助降低壞膽固醇 -\t• 多元不飽和脂肪酸（PUFA / 例如Omega-3、6） - 需攝取適當比例，Omega-6過多會引發炎症 -\t• 飽和脂肪（SFA） - 過量攝取會提升壞膽固醇，影響心血管健康` +• 單元不飽和脂肪酸（MUFA / 例如Omega-9） - 有助降低壞膽固醇 +• 多元不飽和脂肪酸（PUFA / 例如Omega-3、6） - 需攝取適當比例，Omega-6過多會引發炎症 +• 飽和脂肪（SFA） - 過量攝取會提升壞膽固醇，影響心血管健康` }, { image: '/images/q5.png', @@ -41,20 +41,38 @@ const questions = [ function Qa() { const formatText = (text: string) => { - return text.split('\n').map((line, i) => ( - - {line.split('\t').map((segment, j) => ( - j === 0 ? segment : {segment} - ))} - {i < text.split('\n').length - 1 &&
} - - )); + // 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 ( + + {hasBoldPhrase && ( + + {boldPart} + + )} + {restOfLine.split('\t').map((segment, j) => ( + j === 0 ? segment : {segment} + ))} + {i < text.split('\n').length - 1 &&
} + + ); + }); }; + + return ( {shopImages.map((image, index) => (