From e7eccb30e06f4f6f284c06971a33b7d09be33f8e Mon Sep 17 00:00:00 2001
From: philipcheung <zerophilip2013hk@gmail.com>
Date: Sun, 9 Nov 2025 20:47:42 +0800
Subject: [PATCH] ui updated

---
 src/components/new_ui/advantages.tsx | 222 ++++++++++++++++++++++++++-
 1 file changed, 216 insertions(+), 6 deletions(-)

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() {
 
             </Stack>
 
+
             <MotionSimpleGrid
-                columns={{ base: 1, sm: 1, md: 2 }}
+                display={{ base: 'none', sm: 'none', md: 'block', lg: 'block', xl: 'block' }}
+                columns={{ base: 1, sm: 1, md: 1 }}
+                p={4}
+                pb={10}
+                w={{ base: '100%', sm: '95vw', md: '90vw', lg: '85vw', xl: '55vw' }}
+                h={'auto'}
+                mx="auto"
+                initial={{ opacity: 0, y: 50 }}
+                animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
+                transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
+
+            >
+                {info.map((item, index) => (
+                    <MotionHStack
+                        w={'100%'}
+                        justifyContent={'flex-start'}
+                        alignItems={'flex-start'}
+                        key={item.id}
+                        mt={index != 0 ? 16 : 0}
+                        initial={{ opacity: 0, y: 30 }}
+                        animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+                        transition={{ duration: 0.6, delay: index * 0.15, ease: "easeOut" }}
+                    >
+                        <MotionStack
+                            flex={0.4}
+                            alignItems={'center'}>
+                            <MotionHStack
+                                alignItems={'flex-start'}
+                                mt={-4}
+                            >
+                                <MotionImage
+                                    w={{ base: '45vw', sm: '180px', md: '80px', lg: '110px', xl: '5vw' }}
+                                    src={item.image}
+                                    initial={{ opacity: 0, scale: 0.8 }}
+                                    animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
+                                    transition={{ duration: 0.5, delay: index * 0.15 + 0.1, ease: "easeOut" }}
+                                />
+
+                                <MotionStack
+                                    mt={2}
+                                    gap={0}
+                                    justifyContent={'flex-start'}
+                                    alignItems={'center'}
+
+                                >
+                                    <MotionImage
+                                        fit={'contain'}
+                                        w={contextTitleImageSize(index)}
+                                        src={item.titleImage2}
+                                        initial={{ opacity: 0, scale: 0.9 }}
+                                        animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
+                                        transition={{ duration: 0.5, delay: index * 0.15 + 0.2, ease: "easeOut" }}
+                                    />
+
+                                    <MotionText
+
+                                        className='font-melle font-xbold'
+                                        fontWeight={800}
+                                        textAlign={'center'}
+                                        mt={-1}
+                                        whiteSpace="pre-wrap"
+                                        color='white'
+                                        lineHeight="1"
+                                        fontSize={{ md: '1.5vw', lg: '2.5vw', xl: '1.5vw' }}
+                                        initial={{ opacity: 0, x: -20 }}
+                                        animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}
+                                        transition={{ duration: 0.5, delay: index * 0.15 + 0.3, ease: "easeOut" }}
+                                    >
+                                        {item.title}
+                                    </MotionText>
+
+                                </MotionStack>
+                            </MotionHStack>
+
+                            <MotionImage
+                                w={contextPeopleImageSize(index)}
+                                fit={'contain'}
+                                mt={contextPeopleImageMt(index)}
+                                src={item.titleImage}
+                                initial={{ opacity: 0, y: 20 }}
+                                animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+                                transition={{ duration: 0.5, delay: index * 0.15 + 0.4, ease: "easeOut" }}
+                            />
+                        </MotionStack>
+
+
+                        {index === 3 ? (
+                            <Box
+                                flex={0.6}
+                                ml={14}
+                                display="flex"
+                                flexDirection={{ base: "row", sm: "row", md: "column" }}
+                                alignItems="flex-start"
+                                mt={5}
+                                ref={oilCubesRef}
+                            >
+                                <Flex flexWrap="wrap" justifyContent="flex-start" gap="15px" maxW="680px">
+                                    {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={{ md: '13vw',lg: '20vw', xl: '13vw' }}
+                                            h={{ md: '5vw',lg: '8vw', xl: '5vw' }}
+                                            bgImage={item.bgColor}
+                                            roundedTopLeft={'30px'}
+                                            roundedBottomRight={'30px'}
+                                            p={4}
+                                            justify="center"
+                                        >
+                                            <Text
+                                                color="white"
+                                                className='font-melle font-black'
+                                                fontSize={{ md: "1.3vw", lg: "2.3vw", xl: "1.3vw" }}
+                                                mb={-1}
+                                            >
+                                                {item.title}
+                                            </Text>
+                                            <Text
+                                                color={colors.backgroundColor}
+                                                className='font-melle font-medium'
+                                                fontSize={{ md: "0.8vw", lg: "1.2vw", xl: "0.8vw" }}
+                                                mt={-1}
+                                            >
+                                                {item.text}
+                                            </Text>
+                                        </MotionStack>
+                                    ))}
+                                </Flex>
+                            </Box>
+                        ) : (
+                            <MotionText
+                                w={{ base: '90%', sm: '80%', md: '80%', lg: '80%', xl: '80%' }}
+                                className="font-noto-sans font-demi-light"
+                                fontSize={{ base: 'xl', sm: 'xl', md: 'lg', lg: 'lg', xl: 'lg' }}
+                                color="white"
+                                flex={0.6}
+                                ml={14}
+                                alignSelf="flex-start"
+                                lineHeight="1.8"
+                                textAlign="left"
+                                whiteSpace="pre-wrap"
+                                initial={{ opacity: 0, y: 20 }}
+                                animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+                                transition={{ duration: 0.5, delay: index * 0.15 + 0.5, ease: "easeOut" }}
+                            >
+                                {renderDescription(item.description)}
+                            </MotionText>)}
+
+
+
+
+                    </MotionHStack>
+                ))}
+            </MotionSimpleGrid>
+
+
+
+            <MotionSimpleGrid
+                display={{ base: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}
+                columns={{ base: 1, sm: 1, md: 1 }}
                 p={4}
                 pb={10}
                 w={{ base: '100%', sm: '95vw', md: '90vw', lg: '80vw', xl: '70vw' }}
@@ -264,12 +473,12 @@ function Advantages() {
                                 width="100%"
                                 display="flex"
                                 flexDirection={'column'}
-                                alignItems="center"
+                                alignItems="flex-start"
                                 ref={oilCubesRef}
                                 mt={-4}
                                 ml={3}
                             >
-                                <MotionFlex flexDirection={'column'} justifyContent="center" gap="10px" maxWidth="945px"
+                                <MotionFlex flexDirection={'row'} flexWrap="wrap" justifyContent="flex-start" gap="10px" maxWidth="680px"
                                     initial={{ opacity: 0, y: 30 }}
                                     animate={isOilCubesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
                                     transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
@@ -280,7 +489,8 @@ function Advantages() {
                                             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'
+                                            w='calc(50% - 5px)'
+                                            minW='280px'
                                             h='100px'
                                             bgImage={item.bgColor}
                                             roundedTopLeft={'30px'}