sum bugg fiexes

frontend/package.json

@@ -12,6 +12,8 @@
     "@testing-library/user-event": "^12.8.3",
     "bootstrap": "^5.0.0-alpha1",
     "chokidar": "^2.1.8",
+    "postcss": "^8.4.21",
+    "postcss-safe-parser": "^6.0.0",
     "react": "^17.0.1",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.1",

frontend/src/App.js

@@ -3,7 +3,7 @@ import { Fragment } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import "semantic-ui-css/semantic.min.css";
 import './App.css';
-import React, { PureComponent } from 'react';
+// import React, { PureComponent } from 'react';
 // Pages Import
 
 
@@ -13,7 +13,7 @@ import Home from './Components/Home/Home';
 import About from './Components/Common/About';
 import Eventsection from './Components/EventSection/EventSection';
 import OurPrograms from './Components/OurPrograms/OurPrograms';
-import OurCommunity from './Components/OurCommunity/OurCommunity';
+import OurCommunity from './Components/OurCommunity/ourCommunity';
 import OurImpact from './Components/OurImpact/OurImpact';
 
 

frontend/src/Components/Navbar/NavComp.js

@@ -7,7 +7,7 @@ const NavComp = () =>{
     return(
         <Navbar bg="light" expand="lg">
   <Navbar.Brand href="#home">
-  <a className="navbar-brand" href="#">
+  <a className="navbar-brand" href="#/brand">
     <img src={Logo} alt="logo" className="image" />
       </a>
 
@@ -22,8 +22,8 @@ const NavComp = () =>{
       <Nav className="nav-link">Login</Nav>
     </Nav>
     <div className="mob-show">
-    <div><a href="#" className="button">Donate Now</a></div>
-      <div><a href="#" className="button">Join Us</a></div>
+    <div><a href="#/donate" className="button">Donate Now</a></div>
+      <div><a href="#/donate" className="button">Join Us</a></div>
     </div>
   </Navbar.Collapse>
 </Navbar>

frontend/src/Components/Navbar/Navbar.js

@@ -1,11 +1,14 @@
 import React from "react"
-import NavComp from "./NavComp.js"
+// import NavComp from "./NavComp.js"
+
+import Logo from "./GS_logo_black(1).png";
+
 
 const Navbar = () => {
 
   return (
     <nav className="navbar navbar-expand-lg navbar-light">
-      <a className="navbar-brand" href="#">
+      <a className="navbar-brand" href="#/logo">
       <img src={Logo} alt="logo" className="image" />
       </a>
       <button
@@ -28,12 +31,12 @@ const Navbar = () => {
             </a>
           </li>
           <li className="nav-item">
-            <a className="nav-link" href="#">
+            <a className="nav-link" href="#/link">
               About
             </a>
           </li>
           <li className="nav-item">
-            <a className="nav-link" href="#">
+            <a className="nav-link" href="#/evnt">
               Event
             </a>
           </li>
@@ -53,18 +56,18 @@ const Navbar = () => {
             </a>
           </li>
           <li className="nav-item">
-            <a className="nav-link" href="#">
+            <a className="nav-link" href="#/contact/">
               Contact
             </a>
           </li>
           <li className="nav-item">
-            <a className="nav-link" href="#">
+            <a className="nav-link" href="#/login">
               Login
             </a>
           </li>
         </ul>
-        <a href="#" className="button">Donate Now</a>
-        <a href="#" className="button">Join Us</a>
+        <a href="#/donate" className="button">Donate Now</a>
+        <a href="#/join us" className="button">Join Us</a>
       </div>
     </nav>
 

frontend/src/Components/ourCommunity/ourCommunity.js

@@ -1,6 +1,6 @@
 import "./ourCommunity.css";
 import React from 'react';
-const ourCommunity = () => {
+const OurCommunity = () => {
 
     return (
       <div> 
@@ -10,7 +10,7 @@ const ourCommunity = () => {
       <div className="our_community_outerdiv" >
 
       <div className="our_community_div1" >
-       <a href="#" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTm9vJSpYrySadslLo4azrFIS4hJphw6DOsp1gQF0CH4HxyxldPsxlpOcE5wHocA_nScRk&usqp=CAU" >
+       <a href="#/images" ><img src="https://encrypclted-tbn0.gstatic.com/images?q=tbn:ANd9GcTm9vJSpYrySadslLo4azrFIS4hJphw6DOsp1gQF0CH4HxyxldPsxlpOcE5wHocA_nScRk&usqp=CAU"alt="communiti_imagesgit" >
       </img>
       </a>
       </div>
@@ -25,4 +25,4 @@ const ourCommunity = () => {
         </div>
     );
   };
-  export default ourCommunity; 
+  export default OurCommunity; 

frontend/src/Components/ourImpact/ourImpact.js

@@ -1,49 +1,49 @@
 import "./ourImpact.css";
 import React from 'react';
-import { PieChart, Pie, Sector, Cell, ResponsiveContainer } from 'recharts';
-const ourImpact = () => {
-
-    const data01 = require("../../Test_data/ourImpactPiChartData.js").data01;
-    return (
-      <div> 
-        <h1 className="our_impact" ><b>OUR IMPACT</b></h1>
+import { PieChart, Pie, ResponsiveContainer } from 'recharts';
+import { data01 } from "../../Test_data/ourImpactPiChartData.js";
+import { Link } from "react-router-dom";
+
+const OurImpact = () => {
+  return (
+    <div> 
+      <h1 className="our_impact"><b>OUR IMPACT</b></h1>
+
+      <div className="our_impact_outerdiv">
 
-        <div className="our_impact_outerdiv" >
-        <a href="#" >
-        <div className="hover_effect1 " >
-          <b>Learn More</b>
-        </div>
-        </a>
-
-        <div className="our_impact_div1" >
-          <div className="our_impact_div11 our_impact_innerdiv"><b>25K</b><br/>Students</div>
-          <div className="our_impact_div12 our_impact_innerdiv" ><b>25K</b><br/>Students</div>
-          <div className="our_impact_div13 our_impact_innerdiv" ><b>25K</b><br/>Students</div>
-          <div className="our_impact_div14 our_impact_innerdiv" ><b>25K</b><br/>Students</div>
-          <div className="our_impact_div15 our_impact_innerdiv" ><b>25K</b><br/>Students</div>
-          <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
-        </div>
+        <Link to="/learn">
+          <div className="hover_effect1">
+            <b>Learn More</b>
+          </div>
+        </Link>
 
-
-        <a href="#" >
-        <div className="hover_effect2 " >
-          <b>Learn More</b>
+        <div className="our_impact_div1">
+          {[...Array(5)].map((_, index) => (
+            <div key={index} className={`our_impact_div1${index+1} our_impact_innerdiv`}>
+              <b>25K</b><br/>Students
+            </div>
+          ))}
+          <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
         </div>
-        </a>
-        <div className="our_impact_div2" >
 
-          <ResponsiveContainer width="100%" height="62%">
-          <PieChart width={400} height={400}>
-            <Pie data={data01} dataKey="value" cx="50%" cy="50%" outerRadius={60} fill="#9844d8" />
-          </PieChart>
-        </ResponsiveContainer>
-
-          <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
-        </div>
-
-        </div>
+        <Link to="/learn">
+          <div className="hover_effect2">
+            <b>Learn More</b>
+          </div>
+        </Link>
 
+        <div className="our_impact_div2">
+          <ResponsiveContainer width="100%" height={250}>
+            <PieChart>
+              <Pie data={data01} dataKey="value" cx="50%" cy="50%" outerRadius={60} fill="#9844d8" />
+            </PieChart>
+          </ResponsiveContainer>
+          <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
         </div>
-    );
-  };
-  export default ourImpact; 
+
+      </div>
+    </div>
+  );
+};
+
+export default OurImpact;

frontend/src/Pages/Homepage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Mission from "../Components/Mission/Mission";
-import Impact from "../Components/ourImpact/ourImpact"
+import Impact from "../Components/OurImpact/OurImpact"
 import Community from "../Components/ourCommunity/ourCommunity"
 import Testimonial from "../Components/Testimonial/Testimonial"
 import About from "../Components/Common/About"