first

src/components/bestoil.tsx

@@ -0,0 +1,143 @@
+import { Box, Stack, Image, Flex, useBreakpointValue, Text, SimpleGrid } from '@chakra-ui/react'
+import { colors } from '../colors';
+
+function Bestoil() {
+    const cook = useBreakpointValue({
+        base: "/images/cook_mb.png",
+        sm: "/images/cook_mb.png",
+        md: "/images/cook_pc.png",
+
+    });
+    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 formatText = (text: string) => {
+        return text.split('\n').map((line, i) => (
+            <Box key={i}
+                color={'white'}
+                fontSize='9px'
+                mt={-2}
+                className='font-noto-sans font-regular'
+            >
+                {line.split('\t').map((segment, j) => (
+                    j === 0 ? segment : <Text as="span" ml={4} key={j}>{segment}</Text>
+                ))}
+                {i < text.split('\n').length - 1 && <br />}
+            </Box>
+        ));
+    };
+
+    return (
+        <Stack
+            position="relative"
+            w="100%"
+            overflow="hidden"
+
+            bgColor={colors.backgroundColor}
+        >
+
+            <Flex
+                w='100%'
+                justify={"center"}
+            >
+                <Image src="/images/best5.png"
+                    fit='contain'
+                    width={'500px'} />
+                <Image src="/images/oilchart.png"
+                    fit='contain'
+                    width={'500px'} />
+
+            </Flex>
+
+            <Stack
+                w='100%'
+                align={"center"}
+
+            >
+                <Image src={cook}
+                    w={{ base: "100%", sm: "100%", md: '600px' }}
+                    fit='contain'
+                />
+
+                <Text
+                    w={{ base: "90%", sm: "90%", md: '600px' }}
+                    fontSize={'lg'}
+                    className='NotoSansCJKtc font-regular'
+                    color={colors.textColor}
+                    textAlign={"center"}>
+                    {"不同食油的脂肪酸組合各有優勢，而長期使用單一油種則可能令營養失衡。營萃護心油融合5種優質食油，發揮更全面的健康效益："}
+                </Text>
+
+
+                <Box width="100%" display="flex" flexDirection="column" alignItems="center" mt={5}>
+                    <Flex flexWrap="wrap" justifyContent="center" gap="15px" maxWidth="945px">
+                        {oilCube.map((item, index) => (
+                            <Stack
+                                key={index}
+                                w='270px'
+                                h='90px'
+                                bgImage={item.bgColor}
+                                roundedTopLeft={'30px'}
+                                roundedBottomRight={'30px'}
+                                p={4}
+                                justify="center"
+                            >
+                                <Text
+
+                                    color="white"
+                                    className='font-melle font-black'
+                                    fontSize="2xl"
+                                    mb={-1}
+                                >
+                                    {item.title}
+                                </Text>
+                                <Text
+
+                                    color={colors.backgroundColor}
+                                    className='font-melle font-medium'
+                                    mt={-1}
+                                >
+                                    {item.text}
+                                </Text>
+                            </Stack>
+                        ))}
+                    </Flex>
+                </Box>
+
+
+
+            </Stack>
+
+
+
+        </Stack>
+    )
+
+
+}
+
+export default Bestoil