ui updated
This commit is contained in:
parent
53e3f86b10
commit
c1e33928e3
30
index.html
30
index.html
|
|
@ -6,11 +6,39 @@
|
|||
<link rel="icon" type="image/webp" href="/Lion_ head.webp" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="健康革新世衛黃金比例調配" />
|
||||
<meta name="keywords" content="獅球嘜,營萃護心油, organic oil, cooking oil" />
|
||||
<meta
|
||||
name="keywords"
|
||||
content="獅球嘜,營萃護心油, organic oil, cooking oil"
|
||||
/>
|
||||
<title>獅球嘜 | 營萃護心油</title>
|
||||
|
||||
<!-- Google Tag Manager -->
|
||||
<script>
|
||||
(function (w, d, s, l, i) {
|
||||
w[l] = w[l] || [];
|
||||
w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
|
||||
var f = d.getElementsByTagName(s)[0],
|
||||
j = d.createElement(s),
|
||||
dl = l != "dataLayer" ? "&l=" + l : "";
|
||||
j.async = true;
|
||||
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
|
||||
f.parentNode.insertBefore(j, f);
|
||||
})(window, document, "script", "dataLayer", "GTM-NS5QVQCP");
|
||||
</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript
|
||||
><iframe
|
||||
src="https://www.googletagmanager.com/ns.html?id=GTM-NS5QVQCP"
|
||||
height="0"
|
||||
width="0"
|
||||
style="display: none; visibility: hidden"
|
||||
></iframe
|
||||
></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 230 KiB After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 43 KiB |
|
|
@ -15,7 +15,7 @@ import Footer from './components/footer'
|
|||
function App() {
|
||||
return (
|
||||
<>
|
||||
<Container maxW="100vw" p={0} m={0}>
|
||||
<Container maxW="100vw" p={0} m={0} mt={0}>
|
||||
<Header />
|
||||
{/* Hero Section */}
|
||||
<Box position="relative">
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
<Box key={i}
|
||||
color={colors.textColor}
|
||||
lineHeight={1}
|
||||
fontSize='4xl'
|
||||
textAlign={{ sm: 'flex-start', md: 'center' }}
|
||||
className='font-melle font-xbold'
|
||||
>
|
||||
{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 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 }}
|
||||
>
|
||||
<Image src="/images/best5.webp"
|
||||
fit='contain'
|
||||
|
|
@ -92,7 +112,7 @@ function Bestoil() {
|
|||
<Image src="/images/oilchart.webp"
|
||||
fit='contain'
|
||||
w={{ base: "80%", sm: "90%", md: '350px', lg: '500px' }}
|
||||
loading="lazy"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
</Flex>
|
||||
|
|
@ -105,7 +125,7 @@ function Bestoil() {
|
|||
<Image src={cook}
|
||||
w={{ base: "80%", sm: "80%", md: '600px' }}
|
||||
fit='contain'
|
||||
loading="lazy"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<Text
|
||||
|
|
@ -160,15 +180,25 @@ function Bestoil() {
|
|||
</Flex>
|
||||
</Box>
|
||||
|
||||
<Text
|
||||
w={{ base: "90%", sm: "90%", md: '700px' }}
|
||||
fontSize={'lg'}
|
||||
my={5}
|
||||
className='NotoSansCJKtc font-regular'
|
||||
color={colors.textColor}
|
||||
textAlign={"center"}>
|
||||
{"選擇「營萃護心油」，助你和家人攝取理想脂肪酸比例，食得安心，護心更放心！"}
|
||||
</Text>
|
||||
<Stack
|
||||
w={{ base: "90%", sm: "90%", md: '500px' }}
|
||||
mt={5}
|
||||
align={'center'}
|
||||
mb={20}
|
||||
>
|
||||
<Image src={"/images/bestfootertext.webp"}
|
||||
w='100%'
|
||||
>
|
||||
</Image>
|
||||
<Stack mt={-3}
|
||||
>
|
||||
{formatText(footerText)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
|
||||
|
||||
|
||||
</Stack>
|
||||
</Stack>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
<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>
|
||||
));
|
||||
};
|
||||
// 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
|
||||
|
|
@ -38,7 +38,7 @@ function Compare() {
|
|||
>
|
||||
<SimpleGrid columns={2}
|
||||
maxW="full"
|
||||
h={{ base: '200vw', sm: '170vw', md: '145vw', lg: '61vw', xl: '61w' }}
|
||||
h={{ base: '140vw', sm: '140vw', md: '125vw', lg: '55vw', xl: '55vw' }}
|
||||
mb="20px" // Add 20px bottom margin
|
||||
position="relative"
|
||||
zIndex="1"
|
||||
|
|
@ -91,11 +91,11 @@ function Compare() {
|
|||
transform="translateX(-51%)"
|
||||
zIndex="1"
|
||||
>
|
||||
<Box
|
||||
{/* <Box
|
||||
w='auto'
|
||||
h='auto'>
|
||||
{formatText(statement)}
|
||||
</Box>
|
||||
</Box> */}
|
||||
|
||||
</Box>
|
||||
</Stack>
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
<Box key={i}
|
||||
className='font-noto-sans font-regular'
|
||||
color={colors.textColor}
|
||||
fontSize={'10px'}
|
||||
ml={2}
|
||||
>
|
||||
{line.charAt(0).match(/[\*\^\▲\+\▼\#]/) ? (
|
||||
<>
|
||||
<Text as="span" fontSize="7px" 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"
|
||||
|
|
@ -21,23 +52,25 @@ function Footer() {
|
|||
<Flex
|
||||
alignItems={'flex-end'}
|
||||
w={{ base: '100%', sm: '100%', md: '60%', lg: '55%', xl: '55%' }}
|
||||
h='60px'
|
||||
h={{ base: '180px', sm: '180px', md: '130px' }}
|
||||
|
||||
>
|
||||
<Stack gap={0}
|
||||
position={'absolute'}
|
||||
bottom={1}
|
||||
|
||||
<Stack gap={0}
|
||||
position={'absolute'}
|
||||
bottom={1}
|
||||
>
|
||||
{formatText(footerText)}
|
||||
<Text
|
||||
className='font-noto-sans font-regular'
|
||||
color={colors.textColor}
|
||||
fontSize={'8px'}
|
||||
mt={5}
|
||||
fontSize={'10px'}
|
||||
mt={2}
|
||||
ml={2}
|
||||
>
|
||||
{`Copyright © ${currentYear}合興食油（香港）有限公司 版權所有，不得轉載。`}
|
||||
</Text>
|
||||
<Text
|
||||
{/* <Text
|
||||
className='font-noto-sans font-regular'
|
||||
color={colors.textColor}
|
||||
fontSize={'8px'}
|
||||
|
|
@ -45,7 +78,7 @@ function Footer() {
|
|||
ml={2}
|
||||
>
|
||||
{`參考資料 | 台灣營養師張益堯在節目《奕起聊健康》上分享關於「油脂」的健康 https://bit.ly/3FmZkCo https://bit.ly/4htQ9gt`}
|
||||
</Text>
|
||||
</Text> */}
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Stack>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const MotionText = motion(Text);
|
|||
function Hero2() {
|
||||
const textStackRef = useRef<HTMLDivElement>(null);
|
||||
const imageStackRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
|
||||
// Create refs and animation controls for scroll-based animations
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const isInView = useInView(containerRef, { once: true, amount: 0.2 });
|
||||
|
|
@ -63,21 +63,21 @@ function Hero2() {
|
|||
zIndex="1"
|
||||
bgColor={colors.backgroundColor}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
justify={"flex-start"}
|
||||
<Flex
|
||||
direction="column"
|
||||
justify={"flex-start"}
|
||||
align={"center"}
|
||||
>
|
||||
<Image
|
||||
<Image
|
||||
src="/images/hero2title.webp"
|
||||
w={{base:"420px",sm:"450px",md:"450px",lg:"350px",xl:"350px"}}
|
||||
w={{ base: "420px", sm: "450px", md: "450px", lg: "350px", xl: "350px" }}
|
||||
maxW={"95%"}
|
||||
/>
|
||||
<SimpleGrid
|
||||
gap="25px"
|
||||
columns={{ base: 1, md: 1, lg: 2, xl: 2 }}
|
||||
px="4"
|
||||
mb = {10}
|
||||
mb={12}
|
||||
maxW="full"
|
||||
mx="0"
|
||||
marginTop={{ base: -7, md: -3, lg: 0, xl: 0 }}
|
||||
|
|
@ -95,12 +95,12 @@ function Hero2() {
|
|||
<Image
|
||||
src="/images/asking.jpg"
|
||||
rounded="4xl"
|
||||
loading="lazy"
|
||||
loading="lazy"
|
||||
marginTop={'10px'}
|
||||
height={{ md: "100%", lg: "85%", xl: "65%" }}
|
||||
fit="cover"
|
||||
objectPosition="center"
|
||||
|
||||
|
||||
/>
|
||||
</Stack>
|
||||
</Flex>
|
||||
|
|
@ -114,9 +114,9 @@ function Hero2() {
|
|||
align={{ sm: 'flex-start', md: "flex-start", lg: "flex-start" }}
|
||||
>
|
||||
<Flex direction={"column"}>
|
||||
<MotionText
|
||||
color={colors.textColor}
|
||||
className="font-melle font-medium"
|
||||
<MotionText
|
||||
color={colors.textColor}
|
||||
className="font-melle font-medium"
|
||||
fontSize={{ base: "2xl", sm: "3xl", md: "3xl", lg: "3xl" }}
|
||||
variants={{
|
||||
hidden: { x: -10, opacity: 0 },
|
||||
|
|
@ -128,10 +128,10 @@ function Hero2() {
|
|||
>
|
||||
<strong>外出用餐</strong>難控用油，
|
||||
</MotionText>
|
||||
<MotionText
|
||||
color={colors.textColor}
|
||||
className="font-melle font-medium"
|
||||
fontSize={{ base: "2xl", sm: "3xl", md: "3xl", lg: "3xl" }}
|
||||
<MotionText
|
||||
color={colors.textColor}
|
||||
className="font-melle font-medium"
|
||||
fontSize={{ base: "2xl", sm: "3xl", md: "3xl", lg: "3xl" }}
|
||||
marginTop={-3}
|
||||
variants={{
|
||||
hidden: { x: -10, opacity: 0 },
|
||||
|
|
@ -147,9 +147,9 @@ function Hero2() {
|
|||
<MotionImage
|
||||
src="/images/asking.jpg"
|
||||
rounded="4xl"
|
||||
loading="lazy"
|
||||
loading="lazy"
|
||||
marginTop={'3px'}
|
||||
h={{ md: "90%", lg: "65%", xl: "65%" }}
|
||||
w={{ md: "90%", lg: "65%", xl: "75%" }}
|
||||
display={{ base: "flex", md: "flex", lg: "none" }}
|
||||
fit="cover"
|
||||
objectPosition="center"
|
||||
|
|
@ -164,10 +164,12 @@ function Hero2() {
|
|||
whileTap={{ scale: 0.98 }}
|
||||
/>
|
||||
|
||||
<MotionText
|
||||
color={colors.textColor}
|
||||
className="font-noto-sans font-regular"
|
||||
lineHeight={2}
|
||||
<MotionText
|
||||
color={colors.textColor}
|
||||
className="font-noto-sans font-regular"
|
||||
lineHeight={1.5}
|
||||
fontSize={'md'}
|
||||
w={{ md: "90%", lg: "65%", xl: "75%" }}
|
||||
variants={{
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: { y: 0, opacity: 1 }
|
||||
|
|
|
|||
|
|
@ -47,21 +47,21 @@ function Oil_info() {
|
|||
}
|
||||
}, [footerInView, footerControls]);
|
||||
|
||||
const formatText = (text: string) => {
|
||||
return text.split('\n').map((line, i) => (
|
||||
<Box key={i}
|
||||
color={'white'}
|
||||
fontSize='8px'
|
||||
mt={-2}
|
||||
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>
|
||||
));
|
||||
};
|
||||
// const formatText = (text: string) => {
|
||||
// return text.split('\n').map((line, i) => (
|
||||
// <Box key={i}
|
||||
// color={'white'}
|
||||
// fontSize='8px'
|
||||
// mt={-2}
|
||||
// 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 (
|
||||
<Stack
|
||||
|
|
@ -168,33 +168,34 @@ function Oil_info() {
|
|||
/>
|
||||
<Stack
|
||||
justify={"center"}
|
||||
w={{ base: '80%', sm: '80%', md: '550px' }}
|
||||
w={{ base: '80%', sm: '80%', md: '400px', lg: '500px' }}
|
||||
>
|
||||
<Stack
|
||||
{/* <Stack
|
||||
display={{ base: 'flex', sm: 'flex', md: 'none' }}
|
||||
>
|
||||
{formatText(`**營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。
|
||||
{formatText(`*營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。
|
||||
^根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算`)}
|
||||
</Stack>
|
||||
</Stack> */}
|
||||
|
||||
<Stack
|
||||
display={{ base: 'none', sm: 'none', md: 'flex' }}
|
||||
>
|
||||
<Image src='/images/oilinfotitle.webp'
|
||||
w='550px'
|
||||
w='500px'
|
||||
loading="lazy"
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Text
|
||||
w={{ base: '100%', sm: '100%', md: '500px' }}
|
||||
w={{ base: '100%', sm: '100%', md: '400px', lg: '450px' }}
|
||||
color='white'
|
||||
ml = {1}
|
||||
className='NotoSansCJKtc font-medium'
|
||||
mb={10}
|
||||
lineHeight={1.5}
|
||||
fontSize={'lg'}
|
||||
>
|
||||
<Box as="span" className='NotoSansCJKtc font-xbold' display="inline">獅球嘜營萃護心油，</Box>
|
||||
<Box as="span" className='NotoSansCJKtc font-xbold' display="inline">獅球嘜營萃護心油，</Box>
|
||||
{"根據世界衛生組織建議之黃金比例脂肪酸調製，有助調節膽固醇，保護心血管健康，並預防與飲食相關的慢性疾病。"}
|
||||
</Text>
|
||||
{/* <Text
|
||||
|
|
@ -206,12 +207,12 @@ function Oil_info() {
|
|||
>
|
||||
{"獅球嘜「營萃護心油」採用黃金比例調配，讓每一滴都成為心血管的隱形防護網。"}
|
||||
</Text> */}
|
||||
<Stack
|
||||
{/* <Stack
|
||||
display={{ base: 'none', sm: 'none', md: 'flex' }}
|
||||
mt={-5}>
|
||||
{formatText(`**營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。
|
||||
{formatText(`*營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。
|
||||
^根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算`)}
|
||||
</Stack>
|
||||
</Stack> */}
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Stack>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
</Text>
|
||||
)}
|
||||
{restOfLine.split('\t').map((segment, j) => (
|
||||
j === 0 ? segment : <Text as="span" ml={4} key={j}>{segment}</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Text as="span" ml={j === 0 ? 0 : 4} key={j}>
|
||||
{segment}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
{i < text.split('\n').length - 1 && <br />}
|
||||
</Box>
|
||||
);
|
||||
|
|
@ -155,7 +169,13 @@ function Qa() {
|
|||
</Flex>
|
||||
<Flex w={{ base: '97%', sm: '98%', md: '90%', lg: '90%', xl: '90%' }}
|
||||
direction={'column'}>
|
||||
{formatText(item.answer)}
|
||||
{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不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。"}
|
||||
</Text>
|
||||
) : (<Flex />)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Accordion.ItemBody>
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ function Salespoint() {
|
|||
justify={'flex-end'}
|
||||
>
|
||||
<Link href={image.link}>
|
||||
<Image src={image.image} cursor="pointer"
|
||||
<Image src={image.image} cursor="pointer" fit={'contain'}
|
||||
loading="lazy" />
|
||||
</Link>
|
||||
</Stack>
|
||||
|
|
|
|||
Loading…
Reference in New Issue