diff --git a/src/components/new_ui/advantages.tsx b/src/components/new_ui/advantages.tsx
index 57e9a3f..ef03c4f 100644
--- a/src/components/new_ui/advantages.tsx
+++ b/src/components/new_ui/advantages.tsx
@@ -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 (
+
+ {content}
+
+ )
+ }
+ return {part}
+ })
+}
+
function Advantages() {
-
+ const oilCubesRef = useRef(null);
+ const isOilCubesInView = useInView(oilCubesRef, { once: true });
return (
@@ -100,34 +148,34 @@ function Advantages() {
alignItems="center"
key={item.id}>
{item.title}
+ {item.id === 4 ? (
+
+
+ {oilCube.map((item, index) => (
+
+
+ {item.title}
+
+
+ {renderCubeDescription(item.text)}
+
+
+ ))}
+
+
+
+ ) : (
+ <>
+ )}
+
))}