feat: modify nav item hover effect

Author: elainefan331

src/components/NavBar/NavItems.tsx

@@ -80,12 +80,8 @@ const NavItems: React.FC = () => {
                         color: Colors.white,
                         transition: "color 0.3s ease, transform 0.3s ease",
                         "&:hover": {
-                          color: Colors.green,
-                          transform: "scale(1.05)",
+                          transform: "scale(1.2)",
                           cursor: "pointer",
-                          boxShadow: `0px 0px 15px ${Colors.green}`,
-                          borderRadius: "5px",
-                          padding: "5px",
                         },
                       }}
                     >
@@ -103,12 +99,8 @@ const NavItems: React.FC = () => {
                         color: Colors.white,
                         transition: "color 0.3s ease, transform 0.3s ease",
                         "&:hover": {
-                          color: Colors.green,
-                          transform: "scale(1.05)",
+                          transform: "scale(1.2)",
                           cursor: "pointer",
-                          boxShadow: `0px 0px 15px ${Colors.green}`,
-                          borderRadius: "5px",
-                          padding: "5px",
                         },
                       }}
                     >

src/pages/Home.tsx

@@ -105,34 +105,8 @@ const Home: React.FC = () => {
       </Box>
 
       {/* section 4*/}
-      <Box
-        ref={section4Ref}
-        // sx={{
-        //   zIndex: "2",
-        //   position: "relative",
-        //   width: "100%",
-        //   backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2371feed'/%3E%3Cstop offset='1' stop-color='%2371feed' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23abb2f9'/%3E%3Cstop offset='1' stop-color='%23abb2f9' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231fa0f6'/%3E%3Cstop offset='1' stop-color='%231fa0f6' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2302DEC4'/%3E%3Cstop offset='1' stop-color='%2302DEC4' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%235865F2'/%3E%3Cstop offset='1' stop-color='%235865F2' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E")`,
-        //   backgroundAttachment: "fixed",
-        //   backgroundSize: "cover",
-        //   padding: "5rem 7rem",
-        //   display: "flex",
-        //   flexDirection: "column",
-        //   justifyContent: "flex-end",
-        //   alignItems: "center",
-        // }}
-      >
+      <Box ref={section4Ref}>
         <Section4 />
-        {/* <img
-          src={`${process.env.PUBLIC_URL}/img/section4_workflow.png`}
-          alt="workflow of the website"
-          style={{
-            width: "45%",
-            height: "auto",
-            padding: "2rem",
-            position: "relative",
-            zIndex: "2",
-          }}
-        ></img> */}
       </Box>
 
       <NodeInfoPanel