diff --git a/src/components/new_ui/advantages.tsx b/src/components/new_ui/advantages.tsx
index 423e84e..88f467e 100644
--- a/src/components/new_ui/advantages.tsx
+++ b/src/components/new_ui/advantages.tsx
@@ -1,15 +1,61 @@
-import { Box, Stack, Image, Flex, Text, SimpleGrid } from '@chakra-ui/react'
+import { Box, Stack, Image, Flex, Text, SimpleGrid, HStack } from '@chakra-ui/react'
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)
const MotionStack = motion(Stack);
+const MotionHStack = motion(HStack);
const MotionSimpleGrid = motion.create(SimpleGrid);
const MotionText = motion(Text);
import { colors } from '../../colors';
+function contextPeopleImageMt(index: number) {
+ switch (index) {
+ case 0:
+ return { md: -4, lg: "-3.5vw", xl: "-1.5vw" };
+
+ case 1:
+ return { md: -1, lg:"-1vw", xl: "0vw" };
+
+ case 2:
+ return { md: -4, lg: "-3.5vw", xl: "-1.5vw" };
+
+ case 3:
+ return { md: -4, lg: "-3.5vw", xl: "-1.5vw" };
+
+ }
+
+}
+
+function contextPeopleImageSize(index: number) {
+ switch (index) {
+ case 0:
+ return { md: '20vw', lg: '15vw', xl: '12vw' };
+ case 1:
+ return { md: '20vw', lg: '20vw', xl: '16vw' };
+ case 2:
+ return { md: '20vw', lg: '10vw', xl: '8vw' };
+ case 3:
+ return { md: '20vw', lg: '25vw', xl: '16vw' };
+ }
+}
+
+function contextTitleImageSize(index: number) {
+
+ switch (index) {
+ case 0:
+ return { md: '17vw', lg: '17vw', xl: '12vw' };
+ case 1:
+ return { md: '17vw', lg: '20vw', xl: '13vw' };
+ case 2:
+ return { md: '17vw', lg: '25vw', xl: '16vw' };
+ case 3:
+ return { md: '17vw', lg: '25vw', xl: '16vw' };
+ }
+
+}
const oilCube = [
{
@@ -52,7 +98,8 @@ const info = [
},
{
id: 2,
- title: "黃金比例脂肪酸調配",
+ title: `黃金比例
+脂肪酸調配`,
description: `根據世衛建議，脂肪攝取應以**不飽和脂肪為主**，當中包括多元與單元不飽和脂肪酸，同時應減少飽和脂肪攝取，以維持整體健康比例。
獅球嘜營萃護心油就係根據呢個原則調配出符合**世衛黃金比例**嘅配方²，幫助身體攝取每日必需嘅脂肪酸，並促進**脂溶性維他命A、D、E、K**嘅吸收，全面支援日常健康所需。 `,
@@ -160,8 +207,170 @@ function Advantages() {
+
+ {info.map((item, index) => (
+
+
+
+
+
+
+
+
+
+ {item.title}
+
+
+
+
+
+
+
+
+
+ {index === 3 ? (
+
+
+ {oilCube.map((item, index) => (
+
+
+ {item.title}
+
+
+ {item.text}
+
+
+ ))}
+
+
+ ) : (
+
+ {renderDescription(item.description)}
+ )}
+
+
+
+
+
+ ))}
+
+
+
+
+
-