diff --git a/index.html b/index.html index 9fd4bee..11892c2 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,39 @@ - + 獅球嘜 | 營萃護心油 + + + +
+ + + diff --git a/public/images/bestfootertext.webp b/public/images/bestfootertext.webp new file mode 100644 index 0000000..a7c6448 Binary files /dev/null and b/public/images/bestfootertext.webp differ diff --git a/public/images/compareheart.webp b/public/images/compareheart.webp index f571e9a..5ceea4c 100644 Binary files a/public/images/compareheart.webp and b/public/images/compareheart.webp differ diff --git a/public/images/mboilinfogroup.webp b/public/images/mboilinfogroup.webp index 6da2921..98d3158 100644 Binary files a/public/images/mboilinfogroup.webp and b/public/images/mboilinfogroup.webp differ diff --git a/public/images/mboilinfotitle.webp b/public/images/mboilinfotitle.webp index d839c1a..be91692 100644 Binary files a/public/images/mboilinfotitle.webp and b/public/images/mboilinfotitle.webp differ diff --git a/public/images/oilinfotitle.webp b/public/images/oilinfotitle.webp index 36094ee..40f7e18 100644 Binary files a/public/images/oilinfotitle.webp and b/public/images/oilinfotitle.webp differ diff --git a/public/images/pcoilinfogroup.webp b/public/images/pcoilinfogroup.webp index 455c396..24f54e7 100644 Binary files a/public/images/pcoilinfogroup.webp and b/public/images/pcoilinfogroup.webp differ diff --git a/public/images/we.webp b/public/images/we.webp index b70d824..67d47f9 100644 Binary files a/public/images/we.webp and b/public/images/we.webp differ diff --git a/src/App.tsx b/src/App.tsx index 6df43c3..f6f2ea8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,7 +15,7 @@ import Footer from './components/footer' function App() { return ( <> - +
{/* Hero Section */} diff --git a/src/components/bestoil.tsx b/src/components/bestoil.tsx index 85e1ffc..dbe33f4 100644 --- a/src/components/bestoil.tsx +++ b/src/components/bestoil.tsx @@ -1,14 +1,34 @@ import { Box, Stack, Image, Flex, useBreakpointValue, Text } from '@chakra-ui/react' import { colors } from '../colors'; -import { motion, useInView } from 'framer-motion' +import {motion, useInView } from 'framer-motion' import { useRef } from 'react' // Create motion components from Chakra components const MotionStack = motion(Stack); +const footerText = `守護您和家人的心臟健康， +食得安心，護心更放心！` + function Bestoil() { + + 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 &&
} + + )); + }; const cook = useBreakpointValue({ base: "/images/cook_mb.webp", sm: "/images/cook_mb.webp", @@ -34,7 +54,7 @@ function Bestoil() { { bgColor: 'linear-gradient(to right,#D44E2D ,#EAA72E,#D44E2D )', title: '芥花籽油', - text: '富含多元不飽和脂肪Omega-3、6，有助降低心血管疾病風險' + text: '富含多元不飽和脂肪酸Omega-3、6，有助降低心血管疾病風險' }, { bgColor: 'linear-gradient(to right,#7DAE3A ,#AFC226,#7DAE3A )', @@ -71,7 +91,7 @@ function Bestoil() { w={{ base: "70%", sm: "80%", md: '350px', lg: '500px' }} align={"center"} mr={{ base: 0, sm: 0, md: '-80px' }} - mt = {{ base: 10, sm: 10, md: 0 }} + mt={{ base: 10, sm: 10, md: 0 }} > @@ -105,7 +125,7 @@ function Bestoil() { - - {"選擇「營萃護心油」，助你和家人攝取理想脂肪酸比例，食得安心，護心更放心！"} - + + + + + {formatText(footerText)} + + + + + + ) diff --git a/src/components/compare.tsx b/src/components/compare.tsx index 969b887..73ea5c0 100644 --- a/src/components/compare.tsx +++ b/src/components/compare.tsx @@ -1,34 +1,34 @@ -import { Box, Stack, Image, Flex, SimpleGrid, Text } from '@chakra-ui/react' +import { Box, Stack, Image, Flex, SimpleGrid } 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不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。 - 此產品沒有根據《藥劑業及毒藥條例》或《中醫藥條例》註冊，為此產品作出的任何聲稱亦沒有為進行該等註冊而接受評核，此產品並不供作診斷、治療或預防任何疾病之用。` +// 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 &&
} - - )); - }; + // 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)} - + */} diff --git a/src/components/footer.tsx b/src/components/footer.tsx index cbbacb4..4e8427c 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -1,7 +1,38 @@ -import { Stack, Flex, Image, Text, } from '@chakra-ui/react'; +import { Stack, Flex, Image, Text, Box } from '@chakra-ui/react'; import { colors } from '../colors'; +const footerText = `*獅球嘜品牌產品系列中首次推出之護心食用油 +^營萃護心油根據世界衛生組織建議之每日人體脂肪酸攝取比例調製，其成分內的Omega-3比例較一般花生油、粟米油高，特別有助平衡慣常外出用餐的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，有助維持心血管健康 +#每食用分量含0克反式脂肪 +▲Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎 ++根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算 +▼營萃護心油的omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎，維持心血管健康` function Footer() { + + const formatText = (text: string) => { + return text.split('\n').map((line, i) => ( + + {line.charAt(0).match(/[\*\^\▲\+\▼\#]/) ? ( + <> + {line.charAt(0)} + {line.substring(1).split('\t').map((segment, j) => ( + j === 0 ? segment : {segment} + ))} + + ) : ( + line.split('\t').map((segment, j) => ( + j === 0 ? segment : {segment} + )) + )} + {i < text.split('\n').length - 1 &&
} + + )); + }; const currentYear = new Date().getFullYear(); return ( - + {formatText(footerText)} {`Copyright © ${currentYear}合興食油（香港）有限公司 版權所有，不得轉載。`} - {`參考資料 | 台灣營養師張益堯在節目《奕起聊健康》上分享關於「油脂」的健康 https://bit.ly/3FmZkCo https://bit.ly/4htQ9gt`} - + */} diff --git a/src/components/hero2.tsx b/src/components/hero2.tsx index e785eec..ecb6c6a 100644 --- a/src/components/hero2.tsx +++ b/src/components/hero2.tsx @@ -12,7 +12,7 @@ const MotionText = motion(Text); function Hero2() { const textStackRef = useRef(null); const imageStackRef = useRef(null); - + // Create refs and animation controls for scroll-based animations const containerRef = useRef(null); const isInView = useInView(containerRef, { once: true, amount: 0.2 }); @@ -63,21 +63,21 @@ function Hero2() { zIndex="1" bgColor={colors.backgroundColor} > - - @@ -114,9 +114,9 @@ function Hero2() { align={{ sm: 'flex-start', md: "flex-start", lg: "flex-start" }} > - 外出用餐難控用油， - - { - return text.split('\n').map((line, i) => ( - - {line.split('\t').map((segment, j) => ( - j === 0 ? segment : {segment} - ))} - {i < text.split('\n').length - 1 &&
} - - )); - }; + // 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(`**營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。 + {formatText(`*營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。 ^根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算`)} - + */} - 獅球嘜營萃護心油， + 獅球嘜營萃護心油， {"根據世界衛生組織建議之黃金比例脂肪酸調製，有助調節膽固醇，保護心血管健康，並預防與飲食相關的慢性疾病。"} {/* {"獅球嘜「營萃護心油」採用黃金比例調配，讓每一滴都成為心血管的隱形防護網。"} */} - - {formatText(`**營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。 + {formatText(`*營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。 ^根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算`)} - + */} diff --git a/src/components/qa.tsx b/src/components/qa.tsx index fffafdc..6ef12ed 100644 --- a/src/components/qa.tsx +++ b/src/components/qa.tsx @@ -12,7 +12,7 @@ const questions = [ { image: '/images/q2.png', question: "用橄欖油煮食就一定最健康？", - answer: "未必！橄欖油雖富含單元不飽和脂肪酸如Omega-9，但人體可自行合成，而其 Omega-3 和 Omega-6 含量偏低，僅約 1% 和 7%，脂肪酸比例並不均衡，對小孩及孕婦來說，長期單一使用可能無法滿足他們對營養素的需求。而初榨橄欖油煙點低（190°C），高溫煮食容易產生有害物質，反成健康負擔。" + answer: "未必！橄欖油雖富含單元不飽和脂肪酸如Omega-9，但人體可自行合成，而其 Omega-3 和 Omega-6 含量偏低，脂肪酸比例並不均衡，對小孩及孕婦來說，長期單一使用可能無法滿足他們對營養素的需求。而初榨橄欖油煙點低（約190°C），高溫煮食容易產生有害物質，反成健康負擔。" }, { image: '/images/q3.png', @@ -24,9 +24,9 @@ const questions = [ question: "貴價油 = 健康油？", answer: `錯！健康關鍵在於「脂肪酸比例」，而非價格！ 不同脂肪酸對健康影響各異： -• 單元不飽和脂肪酸（MUFA / 例如Omega-9） - 有助降低壞膽固醇 -• 多元不飽和脂肪酸（PUFA / 例如Omega-3、6） - 需攝取適當比例，Omega-6過多會引發炎症 -• 飽和脂肪（SFA） - 過量攝取會提升壞膽固醇，影響心血管健康` + • 單元不飽和脂肪酸（MUFA / 例如Omega-9） – 有助降低壞膽固醇。 + • 多元不飽和脂肪酸（PUFA / 例如Omega-3、6） – 為人體必需脂肪酸，身體不能合成製造，必須從食物中吸收；但人體無法自行合成，需攝取適當比例，Omega-6 過多會造成身體慢性發炎1 + • 飽和脂肪（SFA） – 過量攝取會提升壞膽固醇，影響心血管健康。` }, { image: '/images/q5.png', @@ -40,12 +40,10 @@ const questions = [ ] function Qa() { - const formatText = (text: string) => { - // Define all the phrases that should have the bold styling - const boldPhrases = ["錯！", "未必！", "• 單元不飽和脂肪酸", "• 多元不飽和脂肪酸", "• 飽和脂肪", "看煙點：", "看脂肪酸比例：", "看認證："]; + const formatText = (text: string, questionIndex: number) => { + 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 : ""; @@ -63,9 +61,25 @@ function Qa() { {boldPart} )} - {restOfLine.split('\t').map((segment, j) => ( - j === 0 ? segment : {segment} - ))} + {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 ( + + {parts[0]} + {parts[1]} + + ); + } + } + return ( + + {segment} + + ); + })} {i < text.split('\n').length - 1 &&
} ); @@ -155,7 +169,13 @@ function Qa() { - {formatText(item.answer)} + {formatText(item.answer, index)} + {index == 3 ? ( + + 1 + {" Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。"} + + ) : ()} diff --git a/src/components/salespoint.tsx b/src/components/salespoint.tsx index b1a99c2..01bb4b2 100644 --- a/src/components/salespoint.tsx +++ b/src/components/salespoint.tsx @@ -105,7 +105,7 @@ function Salespoint() { justify={'flex-end'} > -