info page

src/components/new_ui/info.tsx

@@ -0,0 +1,123 @@
+import { Box, Stack, Image, Flex, Text } from '@chakra-ui/react'
+import { useState } from 'react'
+
+interface InfoData {
+    id: number
+    title: string
+    image: string
+    description: string
+}
+
+const infoData: InfoData[] = [
+    { 
+        id: 1, 
+        title: '膽固醇\n超標', 
+        image: '/images/new/info_1.webp',
+        description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。'
+    },
+    { 
+        id: 2, 
+        title: '中央肥胖\n脂肪肝', 
+        image: '/images/new/info_2.webp',
+        description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。'
+    },
+    { 
+        id: 3, 
+        title: '皮膚暗啞\n容易脫髮', 
+        image: '/images/new/info_3.webp',
+        description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。'
+    },
+    { 
+        id: 4, 
+        title: '經常容易\n覺得疲倦', 
+        image: '/images/new/info_4.webp',
+        description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。'
+    }
+]
+
+function Info() {
+    const [selectedInfo, setSelectedInfo] = useState<number>(1)
+
+    return (
+        <Box
+            position="relative"
+            w="100%"
+            minH={{ base: "163vw", sm: "163vw", md: "75vw", lg: "50vw", xl: "45vw" }}
+            bgColor="#4E8C36"
+            zIndex={3}
+            overflow="hidden"
+            justifyItems={'center'}
+        >
+            <Stack alignItems={'center'} gap={{ base: 4, sm: 4, md: 6, lg: 8, xl: 8 }}>
+                <Image 
+                    src='/images/new/info_title.webp'
+                    w={{ base: '90vw', sm: '90vw', md: '34vw', lg: '22vw', xl: '22vw' }}
+                    mt={'50px'}
+                />
+
+                <Flex
+                    gap={{ base: 2, sm: 2, md: 3, lg: 4, xl: 4 }}
+                    flexWrap="wrap"
+                    justifyContent="center"
+                    px={{ base: 4, sm: 4, md: 0, lg: 0, xl: 0 }}
+                >
+                    {infoData.map((info) => (
+                        // buttons
+                        <Box
+                            key={info.id}
+                            w={{ base: '42vw', sm: '42vw', md: '18vw', lg: '12vw', xl: '8vw' }}
+                            h={{ base: '20vw', sm: '20vw', md: '9vw', lg: '6vw', xl: '5vw' }}
+                            cursor="pointer"
+                            onClick={() => setSelectedInfo(info.id)}
+                            bg={selectedInfo === info.id ? '#3D6741' : '#D4D4D4'}
+                            border="4px solid #99BF35"
+                            borderRadius={{ base: '20px', sm: '20px', md: '18px', lg: '16px', xl: '14px' }}
+                            display="flex"
+                            alignItems="center"
+                            justifyContent="center"
+                            textAlign="center"
+                            className="font-melle font-xbold"
+                            fontSize={{ base: '4vw', sm: '4vw', md: '1.8vw', lg: '1.2vw', xl: '1vw' }}
+                            color={selectedInfo === info.id ? '#FFFFFF' : '#333333'}
+                            whiteSpace="pre-line"
+                            lineHeight="1.2"
+                            transition="all 0.3s ease"
+                            px={2}
+                        >
+                            {info.title}
+                        </Box>
+                    ))}
+                </Flex>
+
+                <Box
+                    w={{ base: '85vw', sm: '85vw', md: '60vw', lg: '45vw', xl: '40vw' }}
+                    bg="white"
+                    borderRadius="20px"
+                    overflow="hidden"
+                    mb={{ base: 8, sm: 8, md: 12, lg: 16, xl: 16 }}
+                    boxShadow="0 4px 20px rgba(0,0,0,0.15)"
+                    border="3px solid #E5E5E5"
+                >
+                    <Image
+                        src={infoData.find(info => info.id === selectedInfo)?.image}
+                        w="100%"
+                        transition="all 0.3s ease"
+                    />
+                    <Box p={{ base: 5, sm: 5, md: 6, lg: 8, xl: 8 }}>
+                        <Text
+                            className="font-melle font-medium"
+                            fontSize={{ base: '3.5vw', sm: '3.5vw', md: '1.5vw', lg: '1.1vw', xl: '1vw' }}
+                            color="#333333"
+                            lineHeight="1.8"
+                            textAlign="left"
+                        >
+                            {infoData.find(info => info.id === selectedInfo)?.description}
+                        </Text>
+                    </Box>
+                </Box>
+            </Stack>
+        </Box >
+    )
+}
+
+export default Info;

src/pages/main.tsx

@@ -2,6 +2,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'
 
 
 
@@ -12,6 +13,7 @@ function MainPage() {
       <Hero1 />
       <Hero2 />
       <Wraning />
+      <Info />
     </>
   )
 }