header updated

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%"
@@ -232,7 +233,7 @@ function Truth() {
                         >
                             <Link href={image.link}>
                                 <MotionImage src={image.image} cursor="pointer" fit={'contain'}
-                                    loading="lazy" 
+                                    loading="lazy"
                                     initial={{ opacity: 0, scale: 0.9 }}
                                     animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
                                     transition={{ duration: 0.3, delay: 1.2 + index * 0.2, ease: "easeOut" }}