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,14 +151,9 @@ function Header({ showMenu = false }: HeaderProps) {
                     >
                         <VStack align="stretch" gap={4} mt={4}>
                             {menuItems.map((item, index) => (
-                                <Link
-                                    key={index}
-                                    href={item.href}
-                                    onClick={() => setIsDrawerOpen(false)}
-                                    textDecoration="none"
-                                    _hover={{ textDecoration: 'none' }}
-                                >
                                 <Box
+                                    key={index}
+                                    onClick={() => scrollToSection(item.id)}
                                     p={3}
                                     borderRadius="md"
                                     _hover={{ bg: 'gray.100' }}
@@ -160,7 +163,6 @@ function Header({ showMenu = false }: HeaderProps) {
                                         {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%"