I added Nav icon Hover in navbar.css

frontend/package.json

@@ -11,13 +11,14 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
     "bootstrap": "^5.0.0-alpha1",
-    "chokidar": "^2.1.8",
+    "chokidar": "^3.5.3",
     "react": "^17.0.1",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.1",
     "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
+    "recharts": "^2.7.2",
     "semantic-ui-css": "^2.4.1",
     "start": "^5.1.0",
     "styled-components": "^5.2.1",

frontend/src/Components/Navbar/Navbar.js

@@ -1,5 +1,6 @@
 import React from "react"
 import NavComp from "./NavComp.js"
+import Logo from "./GS_logo_black(1).png";
 
 const Navbar = () => {
 

frontend/src/Components/Navbar/navbar.css

@@ -21,9 +21,28 @@
   .nav-link {
     font-size: 1.2em;
     margin: 0px 8px;
+    border-radius: 10%;
     font-weight: bold;
   }
+  @keyframes buttonAnimation {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.2);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
 
+  .nav-link:hover {
+    border-radius: 10%;
+    background-color: #e05d00;
+    color: white;
+    cursor: pointer;
+    animation: buttonAnimation 2s infinite;
+  }
 
   .navbar-toggler {
     background-color: #e05d00;
@@ -41,6 +60,7 @@
     padding: 10px;
     text-align: center;
   }
+
   .mob-show{
     display: flex;
       flex-direction: row;

frontend/src/Pages/Homepage.js

@@ -1,27 +1,27 @@
 import React from 'react';
 import Mission from "../Components/Mission/Mission";
-import Impact from "../Components/ourImpact/ourImpact"
-import Community from "../Components/ourCommunity/ourCommunity"
+import Impact from "../Components/OurImpact/OurImpact"
+import Community from "../Components/OurCommunity/OurCommunity"
 import Testimonial from "../Components/Testimonial/Testimonial"
 import About from "../Components/Common/About"
 import Newsletter from "../Components/Common/Newsletter"
 import Join from "../Components/Common/Join"
 import Navbar from "../Components/Navbar/Navbar"
 import ScrollTop from "../Components/ScrollTop/ScrollTop";
-
 import Upcomingeve from "../Components/Upcomingeve/Upcomingeve";
 
+
+
 const HomePage = () => {
     return (
         <>
-            <Navbar/>
-
-            <About/>
+            < Navbar/>
+            <About />
             <Mission />
             <Impact />
-            <Community/>
+            <Community />
             <Newsletter />
-            <Upcomingeve/>
+            <Upcomingeve />
             <Testimonial />
             <Join />
             <ScrollTop />