advantages ui updated
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
import { Box, Stack, Image, Flex, Text, SimpleGrid } from '@chakra-ui/react'
|
||||
import { useState } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
import { motion, useInView } from 'framer-motion'
|
||||
import { useRef } from 'react'
|
||||
const MotionImage = motion.create(Image)
|
||||
const MotionFlex = motion.create(Flex)
|
||||
const MotionBox = motion.create(Box)
|
||||
|
||||
import { colors } from '../../colors';
|
||||
const MotionStack = motion(Stack);
|
||||
interface InfoData {
|
||||
id: number
|
||||
title: string
|
||||
@@ -15,13 +15,43 @@ interface InfoData {
|
||||
description: string
|
||||
}
|
||||
|
||||
|
||||
|
||||
const oilCube = [
|
||||
{
|
||||
bgColor: 'linear-gradient(to right,#00609E ,#008FD0,#00609E )',
|
||||
title: '米糠油',
|
||||
text: '含天然谷維素，具**抗氧化**作用，有助維持血管健康'
|
||||
},
|
||||
{
|
||||
bgColor: 'linear-gradient(to right,#D44E2D ,#EAA72E,#D44E2D )',
|
||||
title: '芥花籽油',
|
||||
text: '**富含多元不飽和脂肪酸**Omega-3、6，有助降低心血管疾病風險'
|
||||
},
|
||||
{
|
||||
bgColor: 'linear-gradient(to right,#7DAE3A ,#AFC226,#7DAE3A )',
|
||||
title: '橄欖油',
|
||||
text: '**富含單元不飽和脂肪酸**Omega-9，有助保護心臟健康'
|
||||
},
|
||||
{
|
||||
bgColor: 'linear-gradient(to right,#0098D2 ,#00AFE6,#0098D2 )',
|
||||
title: '亞麻籽油',
|
||||
text: '是**亞麻酸**(Omega-3) 的良好來源，有助維持細胞健康'
|
||||
},
|
||||
{
|
||||
bgColor: 'linear-gradient(to right,#D23431 ,#E28C24,#D23431 )',
|
||||
title: '高油酸葵花籽油',
|
||||
text: '低飽和脂肪，穩定性高，**適合高溫烹調**'
|
||||
},
|
||||
]
|
||||
|
||||
const info = [
|
||||
{
|
||||
id: 1,
|
||||
title: "減少壞膽固醇",
|
||||
description: `**根據世界衛生組織數據，高反式脂肪攝取可令全因死亡率上升34%，**冠心病發病率上升21%，及死亡率上升24%。全球每年因反式脂肪導致心血管疾病死亡病例已高達54萬人1。
|
||||
description: `**根據世界衛生組織數據，高反式脂肪攝取可令全因死亡率上升34%，**冠心病發病率上升 21%，及死亡率上升24%。全球每年因反式脂肪導致心血管疾病死亡病例已高達54萬人¹。
|
||||
|
||||
獅球嘜營萃護心油每食用份量含0克反式脂肪，有助減少壞膽固醇，減低患心臟病嘅風險。`,
|
||||
**獅球嘜營萃護心油每食用份量含0克反式脂肪，**有助減少壞膽固醇，減低患心臟病嘅風險。`,
|
||||
image: "/images/new/1.webp",
|
||||
titleImage: "/images/new/adv_img1.webp",
|
||||
titleImage2: "/images/new/adv1.webp"
|
||||
@@ -29,9 +59,9 @@ const info = [
|
||||
{
|
||||
id: 2,
|
||||
title: "黃金比例脂肪酸調配",
|
||||
description: `根據世衛建議，脂肪攝取應以不飽和脂肪為主，當中包括多元與單元不飽和脂肪酸，同時應減少飽和脂肪攝取，以維持整體健康比例。
|
||||
description: `根據世衛建議，脂肪攝取應以**不飽和脂肪為主，**當中包括多元與單元不飽和脂肪酸，同時應減少飽和脂肪攝取，以維持整體健康比例。
|
||||
|
||||
獅球嘜營萃護心油就係根據呢個原則調配出符合黃金比例嘅配方，幫助身體攝取每日必需嘅脂肪酸，並促進脂溶性維他命A、D、E、K嘅吸收，全面支援日常健康所需。 `,
|
||||
獅球嘜營萃護心油就係根據呢個原則調配出符合**世衛黃金比例**嘅配方²，幫助身體攝取每日必需嘅脂肪酸，並促進**脂溶性維他命A、D、E、K**嘅吸收，全面支援日常健康所需。 `,
|
||||
image: "/images/new/2.webp",
|
||||
titleImage: "/images/new/adv_img2.webp",
|
||||
titleImage2: "/images/new/adv2.webp"
|
||||
@@ -39,9 +69,9 @@ const info = [
|
||||
{
|
||||
id: 3,
|
||||
title: "比一般食油",
|
||||
description: `Omega-3有助降低三酸甘油脂水平，並喺一定程度上減少血管發炎反應，從而支援血管彈性及正常血液循環，為心臟健康打好基礎。
|
||||
description: `**Omega-3有助降低三酸甘油脂水平，**並喺一定程度上減少血管發炎反應，從而支援血管彈性及正常血液循環，為心臟健康打好基礎。
|
||||
|
||||
獅球嘜營萃護心油內嘅Omega-3比例較一般花生油及粟米油高，特別有助經常外出用餐嘅都市人平衡脂肪酸攝取比例，從而支援心血管健康。 `,
|
||||
**獅球嘜營萃護心油內嘅Omega-3比例較一般花生油及粟米油高，**特別有助經常外出用餐嘅都市人平衡脂肪酸攝取比例，從而支援心血管健康。 `,
|
||||
image: "/images/new/3.webp",
|
||||
titleImage: "/images/new/adv_img3.webp",
|
||||
titleImage2: "/images/new/adv3.webp"
|
||||
@@ -56,8 +86,7 @@ const info = [
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const renderDescription = (text: string) => {
|
||||
const renderCubeDescription = (text: string) => {
|
||||
const parts = text.split(/(\*\*.*?\*\*)/)
|
||||
|
||||
return parts.map((part, index) => {
|
||||
@@ -72,10 +101,29 @@ const renderDescription = (text: string) => {
|
||||
})
|
||||
}
|
||||
|
||||
const renderDescription = (text: string) => {
|
||||
const parts = text.split(/(\*\*.*?\*\*)/)
|
||||
|
||||
return parts.map((part, index) => {
|
||||
if (part.startsWith('**') && part.endsWith('**')) {
|
||||
const content = part.slice(2, -2)
|
||||
.replace(/\^2/g, '²')
|
||||
.replace(/\^1/g, '¹')
|
||||
return (
|
||||
<Text as="span" key={index} fontWeight={800} bgColor="#4E8C36" borderRadius="4px" px="2px">
|
||||
{content}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
return <Text as="span" key={index}>{part}</Text>
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function Advantages() {
|
||||
|
||||
|
||||
const oilCubesRef = useRef(null);
|
||||
const isOilCubesInView = useInView(oilCubesRef, { once: true });
|
||||
return (
|
||||
<Box
|
||||
position="relative"
|
||||
@@ -90,7 +138,7 @@ function Advantages() {
|
||||
<SimpleGrid
|
||||
columns={{ base: 1, sm: 1, md: 2 }}
|
||||
p={4}
|
||||
w={{ base: '50vw', sm: '50vw', md: '50vw', lg: '50vw', xl: '60vw' }}
|
||||
w={{ base: '50vw', sm: '90vw', md: '90vw', lg: '80vw', xl: '70vw' }}
|
||||
h={'auto'}
|
||||
|
||||
>
|
||||
@@ -100,34 +148,34 @@ function Advantages() {
|
||||
alignItems="center"
|
||||
key={item.id}>
|
||||
<Image
|
||||
w={{ base: '40vw', sm: '40vw', md: '20vw', lg: '20vw', xl: '110px' }}
|
||||
w={{ base: '40vw', sm: '180px', md: '80px', lg: '110px', xl: '110px' }}
|
||||
src={item.image}
|
||||
/>
|
||||
|
||||
<Image
|
||||
mt={'-50px'}
|
||||
h={{ base: '40vw', sm: '40vw', md: '20vw', lg: '20vw', xl: '80px' }}
|
||||
mt={{ base: '-30px', sm: '-70px', md: '-30px', lg: '-50px', xl: '-50px' }}
|
||||
h={{ base: '40vw', sm: '80px', md: '60px', lg: '80px', xl: '80px' }}
|
||||
src={item.titleImage2}
|
||||
/>
|
||||
|
||||
<Text
|
||||
mt={'-25px'}
|
||||
mt={{ base: '-25px', sm: '-25px', md: '-15px', lg: '-25px', xl: '-25px' }}
|
||||
className='font-melle font-xbold'
|
||||
fontWeight={400}
|
||||
color='white'
|
||||
fontSize={{ base: '6vw', sm: '6vw', md: '3vw', lg: '2.5vw', xl: '5xl' }}
|
||||
fontSize={{ base: '6vw', sm: '6vw', md: '3xl', lg: '5xl', xl: '5xl' }}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
<Image
|
||||
h={{ base: '40vw', sm: '40vw', md: '20vw', lg: '20vw', xl: item.id != 4 ? '200px' : '300px' }}
|
||||
h={{ base: '40vw', sm: item.id != 4 ? '200px' : '300px', md: item.id != 4 ? '180px' : '280px', lg: item.id != 4 ? '200px' : '300px', xl: item.id != 4 ? '200px' : '300px' }}
|
||||
src={item.titleImage}
|
||||
/>
|
||||
|
||||
<Text
|
||||
w={{ base: '90%', sm: '90%', md: '80%', lg: '80%', xl: '80%' }}
|
||||
w={{ base: '90%', sm: '70%', md: '80%', lg: '80%', xl: '80%' }}
|
||||
className="font-noto-sans font-demi-light"
|
||||
fontSize={{ base: 'md', sm: 'lg', md: 'xl', lg: '2xl', xl: '2xl' }}
|
||||
fontSize={{ base: 'md', sm: 'xl', md: 'xl', lg: '2xl', xl: '2xl' }}
|
||||
color="white"
|
||||
lineHeight="1.8"
|
||||
textAlign="left"
|
||||
@@ -136,6 +184,55 @@ function Advantages() {
|
||||
{renderDescription(item.description)}
|
||||
</Text>
|
||||
|
||||
{item.id === 4 ? (
|
||||
<Box
|
||||
width="100%"
|
||||
display="flex"
|
||||
flexDirection={'column'}
|
||||
alignItems="center"
|
||||
ref={oilCubesRef}
|
||||
mt={-4}
|
||||
ml={3}
|
||||
>
|
||||
<Flex flexWrap="wrap" justifyContent="center" gap="10px" maxWidth="945px">
|
||||
{oilCube.map((item, index) => (
|
||||
<MotionStack
|
||||
key={index}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={isOilCubesInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.15 }}
|
||||
w='300px'
|
||||
h='100px'
|
||||
bgImage={item.bgColor}
|
||||
roundedTopLeft={'30px'}
|
||||
roundedBottomRight={'30px'}
|
||||
p={4}
|
||||
justify="center"
|
||||
>
|
||||
<Text
|
||||
color="white"
|
||||
className='font-melle font-black'
|
||||
fontSize="2xl"
|
||||
mb={-1}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text
|
||||
color={colors.backgroundColor}
|
||||
className='font-melle font-medium'
|
||||
mt={-1}
|
||||
>
|
||||
{renderCubeDescription(item.text)}
|
||||
</Text>
|
||||
</MotionStack>
|
||||
))}
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
|
||||
</Stack>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
|
||||
Reference in New Issue
Block a user