advantages section

src/components/new_ui/advantages.tsx

@@ -0,0 +1,149 @@
+import { Box, Stack, Image, Flex, Text, SimpleGrid } from '@chakra-ui/react'
+import { useState } from 'react'
+import { motion } from 'framer-motion'
+
+const MotionImage = motion.create(Image)
+const MotionFlex = motion.create(Flex)
+const MotionBox = motion.create(Box)
+
+interface InfoData {
+    id: number
+    title: string
+    image: string
+    titleImage: string
+    titleImage2: string
+    description: string
+}
+
+const info = [
+    {
+        id: 1,
+        title: "減少壞膽固醇",
+        description: `**根據世界衛生組織數據，高反式脂肪攝取可令全因死亡率上升34%，**冠心病發病率上升21%，及死亡率上升24%。全球每年因反式脂肪導致心血管疾病死亡病例已高達54萬人1。
+
+獅球嘜營萃護心油每食用份量含0克反式脂肪，有助減少壞膽固醇，減低患心臟病嘅風險。`,
+        image: "/images/new/1.webp",
+        titleImage: "/images/new/adv_img1.webp",
+        titleImage2: "/images/new/adv1.webp"
+    },
+    {
+        id: 2,
+        title: "黃金比例脂肪酸調配",
+        description: `根據世衛建議，脂肪攝取應以不飽和脂肪為主，當中包括多元與單元不飽和脂肪酸，同時應減少飽和脂肪攝取，以維持整體健康比例。
+					
+獅球嘜營萃護心油就係根據呢個原則調配出符合黃金比例嘅配方，幫助身體攝取每日必需嘅脂肪酸，並促進脂溶性維他命A、D、E、K嘅吸收，全面支援日常健康所需。 `,
+        image: "/images/new/2.webp",
+        titleImage: "/images/new/adv_img2.webp",
+        titleImage2: "/images/new/adv2.webp"
+    },
+    {
+        id: 3,
+        title: "比一般食油",
+        description: `Omega-3有助降低三酸甘油脂水平，並喺一定程度上減少血管發炎反應，從而支援血管彈性及正常血液循環，為心臟健康打好基礎。
+
+獅球嘜營萃護心油內嘅Omega-3比例較一般花生油及粟米油高，特別有助經常外出用餐嘅都市人平衡脂肪酸攝取比例，從而支援心血管健康。 `,
+        image: "/images/new/3.webp",
+        titleImage: "/images/new/adv_img3.webp",
+        titleImage2: "/images/new/adv3.webp"
+    },
+    {
+        id: 4,
+        title: "功效更全面",
+        description: "",
+        image: "/images/new/4.webp",
+        titleImage: "/images/new/adv_img4.webp",
+        titleImage2: "/images/new/adv4.webp"
+    }
+];
+
+
+const renderDescription = (text: string) => {
+    const parts = text.split(/(\*\*.*?\*\*)/)
+
+    return parts.map((part, index) => {
+        if (part.startsWith('**') && part.endsWith('**')) {
+            return (
+                <Text as="span" key={index} fontWeight={800} >
+                    {part.slice(2, -2)}
+                </Text>
+            )
+        }
+        return <Text as="span" key={index}>{part}</Text>
+    })
+}
+
+
+function Advantages() {
+
+
+    return (
+        <Box
+            position="relative"
+            w="100%"
+            h="auto"
+            bgColor="#9AC035"
+            zIndex={3}
+            overflow="hidden"
+            justifyItems={'center'}
+        >
+
+            <SimpleGrid
+                columns={{ base: 1, sm: 1, md: 2 }}
+                p={4}
+                w={{ base: '50vw', sm: '50vw', md: '50vw', lg: '50vw', xl: '60vw' }}
+                h={'auto'}
+
+            >
+                {info.map((item) => (
+                    <Stack
+                        w={'100%'}
+                        alignItems="center"
+                        key={item.id}>
+                        <Image
+                            w={{ base: '40vw', sm: '40vw', md: '20vw', lg: '20vw', xl: '110px' }}
+                            src={item.image}
+                        />
+
+                        <Image
+                            mt={'-50px'}
+                            h={{ base: '40vw', sm: '40vw', md: '20vw', lg: '20vw', xl: '80px' }}
+                            src={item.titleImage2}
+                        />
+
+                        <Text
+                            mt={'-25px'}
+                            className='font-melle font-xbold'
+                            fontWeight={400}
+                            color='white'
+                            fontSize={{ base: '6vw', sm: '6vw', md: '3vw', lg: '2.5vw', xl: '5xl' }}
+                        >
+                            {item.title}
+                        </Text>
+                        <Image
+                            h={{ base: '40vw', sm: '40vw', md: '20vw', lg: '20vw', xl: item.id != 4 ? '200px' : '300px' }}
+                            src={item.titleImage}
+                        />
+
+                        <Text
+                            w={{ base: '90%', sm: '90%', md: '80%', lg: '80%', xl: '80%' }}
+                            className="font-noto-sans font-demi-light"
+                            fontSize={{ base: 'md', sm: 'lg', md: 'xl', lg: '2xl', xl: '2xl' }}
+                            color="white"
+                            lineHeight="1.8"
+                            textAlign="left"
+                            whiteSpace="pre-wrap"
+                        >
+                            {renderDescription(item.description)}
+                        </Text>
+
+                    </Stack>
+                ))}
+            </SimpleGrid>
+
+
+
+        </Box >
+    )
+}
+
+export default Advantages;

src/components/new_ui/info.tsx

@@ -2,7 +2,6 @@ import { Box, Stack, Image, Flex, Text } from '@chakra-ui/react'
 import { useState } from 'react'
 import { motion } from 'framer-motion'
 
-const MotionStack = motion.create(Stack)
 const MotionImage = motion.create(Image)
 const MotionFlex = motion.create(Flex)
 const MotionBox = motion.create(Box)
@@ -96,7 +95,7 @@ function Info() {
                     viewport={{ once: true, amount: 0.3 }}
                     transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
                 >
-                    {infoData.map((info, index) => (
+                    {infoData.map((info) => (
                         <Box
                             key={info.id}
                             w={{ base: '20vw', sm: '110px', md: '150px', lg: '150px', xl: '150px' }}

src/pages/main.tsx

@@ -3,6 +3,7 @@ import Hero1 from '../components/new_ui/hero1'
 import Hero2 from '../components/new_ui/hero2'
 import Wraning from '@/components/new_ui/wraning'
 import Info from '@/components/new_ui/info'
+import Advantages from '@/components/new_ui/advantages'
 
 
 
@@ -14,6 +15,7 @@ function MainPage() {
       <Hero2 />
       <Wraning />
       <Info />
+      <Advantages />
     </>
   )
 }