ui updated

src/components/bestoil.tsx

@@ -1,14 +1,34 @@
 import { Box, Stack, Image, Flex, useBreakpointValue, Text } from '@chakra-ui/react'
 import { colors } from '../colors';
-import { motion, useInView } from 'framer-motion'
+import {motion, useInView } from 'framer-motion'
 import { useRef } from 'react'
 
 // Create motion components from Chakra components
 
 const MotionStack = motion(Stack);
 
+const footerText = `守護您和家人的心臟健康，
+食得安心，護心更放心！`
+
 
 function Bestoil() {
+
+    const formatText = (text: string) => {
+        return text.split('\n').map((line, i) => (
+            <Box key={i}
+                color={colors.textColor}
+                lineHeight={1}
+                fontSize='4xl'
+                textAlign={{ sm: 'flex-start', md: 'center' }}
+                className='font-melle font-xbold'
+            >
+                {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>
+        ));
+    };
     const cook = useBreakpointValue({
         base: "/images/cook_mb.webp",
         sm: "/images/cook_mb.webp",
@@ -34,7 +54,7 @@ function Bestoil() {
         {
             bgColor: 'linear-gradient(to right,#D44E2D ,#EAA72E,#D44E2D )',
             title: '芥花籽油',
-            text: '富含多元不飽和脂肪Omega-3、6，有助降低心血管疾病風險'
+            text: '富含多元不飽和脂肪酸Omega-3、6，有助降低心血管疾病風險'
         },
         {
             bgColor: 'linear-gradient(to right,#7DAE3A ,#AFC226,#7DAE3A )',
@@ -71,7 +91,7 @@ function Bestoil() {
                     w={{ base: "70%", sm: "80%", md: '350px', lg: '500px' }}
                     align={"center"}
                     mr={{ base: 0, sm: 0, md: '-80px' }}
-                    mt = {{ base: 10, sm: 10, md: 0 }}
+                    mt={{ base: 10, sm: 10, md: 0 }}
                 >
                     <Image src="/images/best5.webp"
                         fit='contain'
@@ -92,7 +112,7 @@ function Bestoil() {
                 <Image src="/images/oilchart.webp"
                     fit='contain'
                     w={{ base: "80%", sm: "90%", md: '350px', lg: '500px' }}
-                    loading="lazy" 
+                    loading="lazy"
                 />
 
             </Flex>
@@ -105,7 +125,7 @@ function Bestoil() {
                 <Image src={cook}
                     w={{ base: "80%", sm: "80%", md: '600px' }}
                     fit='contain'
-                    loading="lazy" 
+                    loading="lazy"
                 />
 
                 <Text
@@ -160,15 +180,25 @@ function Bestoil() {
                     </Flex>
                 </Box>
 
-                <Text
-                    w={{ base: "90%", sm: "90%", md: '700px' }}
-                    fontSize={'lg'}
-                    my={5}
-                    className='NotoSansCJKtc font-regular'
-                    color={colors.textColor}
-                    textAlign={"center"}>
-                    {"選擇「營萃護心油」，助你和家人攝取理想脂肪酸比例，食得安心，護心更放心！"}
-                </Text>
+                <Stack
+                    w={{ base: "90%", sm: "90%", md: '500px' }}
+                    mt={5}
+                    align={'center'}
+                    mb={20}
+                >
+                    <Image src={"/images/bestfootertext.webp"}
+                        w='100%'
+                    >
+                    </Image>
+                    <Stack mt={-3}
+                    >
+                        {formatText(footerText)}
+                    </Stack>
+                </Stack>
+
+
+
+
             </Stack>
         </Stack>
     )