header updated

src/components/header.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Image, VStack, Text, Link } from '@chakra-ui/react';
+import { Box, Flex, Image, VStack, Text } from '@chakra-ui/react';
 import { GiHamburgerMenu } from "react-icons/gi";
 import { IoCloseSharp } from "react-icons/io5";
 import { colors } from '../colors';
@@ -69,11 +69,19 @@ function Header({ showMenu = false }: HeaderProps) {
         };
     }, []);
 
+    const scrollToSection = (sectionId: string) => {
+        const element = document.getElementById(sectionId.replace('#', ''));
+        if (element) {
+            element.scrollIntoView({ behavior: 'smooth' });
+        }
+        setIsDrawerOpen(false);
+    };
+
     const menuItems = [
-        { label: '40+常見健康問題', href: '#info' },
+        { label: '40+常見健康問題', id: 'info' },
-        { label: '營萃護心油四大優勢', href: '#advantages' },
+        { label: '營萃護心油四大優勢', id: 'advantages' },
-        { label: '護心食譜', href: '#recipes' },
+        { label: '護心食譜', id: 'recipes' },
-        { label: '更多食用油健康真相', href: '#truth' },
+        { label: '更多食用油健康真相', id: 'truth' },
     ];
 
     return (
@@ -143,24 +151,18 @@ function Header({ showMenu = false }: HeaderProps) {
                     >
                         <VStack align="stretch" gap={4} mt={4}>
                             {menuItems.map((item, index) => (
-                                <Link
+                                <Box
                                     key={index}
-                                    href={item.href}
+                                    onClick={() => scrollToSection(item.id)}
-                                    onClick={() => setIsDrawerOpen(false)}
+                                    p={3}
-                                    textDecoration="none"
+                                    borderRadius="md"
-                                    _hover={{ textDecoration: 'none' }}
+                                    _hover={{ bg: 'gray.100' }}
+                                    cursor="pointer"
                                 >
-                                    <Box
+                                    <Text fontSize="lg" fontWeight="medium">
-                                        p={3}
+                                        {item.label}
-                                        borderRadius="md"
+                                    </Text>
-                                        _hover={{ bg: 'gray.100' }}
+                                </Box>
-                                        cursor="pointer"
-                                    >
-                                        <Text fontSize="lg" fontWeight="medium">
-                                            {item.label}
-                                        </Text>
-                                    </Box>
-                                </Link>
                             ))}
                         </VStack>
                     </DrawerBody>

src/components/new_ui/advantages.tsx

@@ -122,6 +122,7 @@ function Advantages() {
     const isMainInView = useInView(mainRef, { once: true });
     return (
         <MotionBox
+            id="advantages"
             ref={mainRef}
             position="relative"
             w="100%"

src/components/new_ui/info.tsx

@@ -104,7 +104,7 @@ function Info() {
                             cursor="pointer"
                             onClick={() => setSelectedInfo(info.id)}
                             bg={selectedInfo === info.id ? '#3D6741' : '#BCBCBC'}
-                            border={selectedInfo === info.id ? "4px solid #99BF35" : "none"}
+                            border={selectedInfo === info.id ? { base: "1px solid #99BF35", sm: "1px solid #99BF35", md: "4px solid #99BF35", lg: "4px solid #99BF35", xl: "4px solid #99BF35" } : "none"}
                             borderRadius={{ base: '15px', sm: '15px', md: '18px', lg: '20px', xl: '20px' }}
                             display="flex"
                             alignItems="center"

src/components/new_ui/truth.tsx

@@ -108,6 +108,7 @@ function Truth() {
 
     return (
         <MotionBox
+            id="truth"
             ref={mainRef}
             position="relative"
             w="100%"