Aseem

package.json

@@ -4,11 +4,14 @@
   "private": true,
   "homepage": "https://pec-css.github.io/acm-css-website",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "firebase": "^9.17.1",
     "bootstrap": "^5.2.3",
+    "firebase": "^9.17.1",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",

src/App.js

@@ -5,19 +5,25 @@ import Navbar from "./components/Navbar/Navbar";
 import Footer from "./components/Footer/Footer";
 import Home from "./components/Home/Home";
 import GithubChart from "./components/GithubChart/GithubChart";
+import Team from "./components/Team/Team";
+import About from "./components/About/About";
 
 const router = createBrowserRouter([
   { path: "/", element: <Home /> },
+  { path: '/team', element: <Team/> },
+  { path: '/about', element: <About/> },
   // Setting home page as default
-  { path: "*", element:<Home/>},
-]);
+  { path: "*", element:<Home/>}
+], {
+  basename: '/acm-css-website',
+});
 
 function App() {
   return (
     <div className="App">
       <Navbar />
       <GithubChart />
-      <RouterProvider router={router}/>
+      <RouterProvider router={router} crea/>
       <Footer />
     </div>
   );

src/components/About/About.js

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { Container, Card, Row, Col, Image, Button } from 'react-bootstrap';
+import './about.css';
+import img1 from './img/img1.jpg'
+
+class About extends Component {
+    render() {
+        return (
+            <Container>
+                <section className="about_section" id='left'>
+                    <h2 className='about_section_heading'>Who are we?</h2>
+                    <Row className='about_section_content'>
+                        <Col className='text_content'>
+                        The Association for Computing Machinery (ACM) is an international learned society for computing. It was founded in 1947 and is the world’s largest scientific and educational computing society. The ACM is an umbrella organization for academic and scholarly interests in computer science. PEC ACM CSS is a community of learners and leaders who teach each other to supplement the development of the members’ college education, specifically with regards to Computer Science. The vision of PEC ACM is to provide students exposure to the wide array of topics that fall under the umbrella of the field of computer science.
+                        </Col>
+                        <Col className='about_section_content_img' >
+                            <Image src={img1} alt='ACM Groups' fluid />
+                        </Col>
+                    </Row>
+
+                </section>
+                <section className="about_section" id='right'>
+                    <h2 className='about_section_heading'>How we operate?</h2>
+                    <Row className='about_section_content'>
+                        <Col className='about_section_content_img' >
+                            <Image src={img1} alt='ACM Groups' fluid />
+                        </Col>
+                        <Col className='text_content'>
+                            Lorem ipsum dolor sit amet, consectetur adipisci elit,
+                            sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrum exercitationem ullam
+                            corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+                            consequatur. Quis aute iure reprehenderit in voluptate velit
+                            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+                            obcaecat cupiditat non proident, sunt in culpa qui officia
+                            deserunt mollit anim id est laborum.
+                        </Col>
+                    </Row>
+                </section>
+                <section className="about_section" id='left'>
+                    <h2 className='about_section_heading'>Our mission</h2>
+                    <Row className='about_section_content'>
+                        <Col className='text_content'>
+                            Lorem ipsum dolor sit amet, consectetur adipisci elit,
+                            sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrum exercitationem ullam
+                            corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+                            consequatur. Quis aute iure reprehenderit in voluptate velit
+                            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+                            obcaecat cupiditat non proident, sunt in culpa qui officia
+                            deserunt mollit anim id est laborum.
+                        </Col>
+                        <Col className='about_section_content_img' >
+                            <Image src={img1} alt='ACM Groups' fluid />
+                        </Col>
+                    </Row>
+                </section>
+                <section className="about_section" id='right'>
+                    <h2 className='about_section_heading'>Our Vision?</h2>
+                    <Row className='about_section_content'>
+                        <Col className='about_section_content_img' >
+                            <Image src={img1} alt='ACM Groups' fluid />
+                        </Col>
+                        <Col className='text_content'>
+                            Lorem ipsum dolor sit amet, consectetur adipisci elit,
+                            sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrum exercitationem ullam
+                            corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+                            consequatur. Quis aute iure reprehenderit in voluptate velit
+                            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+                            obcaecat cupiditat non proident, sunt in culpa qui officia
+                            deserunt mollit anim id est laborum.
+                        </Col>
+                    </Row>
+                </section>
+
+            </Container>
+        );
+    }
+}
+export default About;

src/components/About/about.css

@@ -0,0 +1,39 @@
+.about_section{
+    padding-top:3rem;
+    padding-bottom:4rem;
+
+}
+#left{
+    text-align: left;
+}
+#right{
+    text-align: right;
+}
+.about_section_heading {
+    margin-bottom: 3rem;
+    font-size: 2.5rem;
+
+}
+.about_section_content{
+    margin-top: 2rem; 
+
+}
+.about_section_content.text_content{
+    color: #656565;
+    /* width: 55%; */
+    /* margin-left: auto;
+    margin-right: auto; */
+    font-size: 1.15rem;
+    max-width: 45%;
+}
+
+.about_section_content_img{
+    /* width:80%; */
+    /* margin: 4rem auto;
+    padding: 2rem 0; */
+    max-width: 45%;
+    border-radius: 50px;
+}
+img{
+    border-radius: 15px;
+}

src/components/Navbar/Navbar.js

@@ -51,13 +51,14 @@ const NavigationMenu = () => {
   return (
     <Navbar collapseOnSelect expand="lg">
       <Container>
-        <Navbar.Brand href="#home">pecacm</Navbar.Brand>
+        <Navbar.Brand href="/acm-css-website">pecacm</Navbar.Brand>
         <Navbar.Toggle aria-controls="responsive-navbar-nav" />
         <Navbar.Collapse id="responsive-navbar-nav">
           <Nav className="me-auto"></Nav>
           <Nav>
             {items.map((item, key) => (
               <Nav.Link
+                href={item.props.to}
                 key={key}
                 onMouseEnter={navLinkAnimation}
                 onMouseLeave={returnLinkAnimation}

src/components/Navbar/items.js

@@ -1,14 +1,14 @@
 const items = [
-  <div to={"/about"} className="navbar__nav-item" data-original="About">
+  <div to={"/acm-css-website/about"} className="navbar__nav-item" data-original="About">
     About
   </div>,
-  <div to={"/branches"} className="navbar__nav-item" data-original="Branches">
+  <div to={"/acm-css-website/branches"} className="navbar__nav-item" data-original="Branches">
     Branches
   </div>,
-  <div to={"/team"} className="navbar__nav-item" data-original="Team">
+  <div to={"/acm-css-website/team"} className="navbar__nav-item" data-original="Team">
     Team
   </div>,
-  <div to={"/Events"} className="navbar__nav-item" data-original="Events">
+  <div to={"/acm-css-website/Events"} className="navbar__nav-item" data-original="Events">
     Events
   </div>,
   <div

src/components/Team/Team.css

@@ -0,0 +1,6 @@
+.team-title{
+    padding: 8px;
+}
+.img-fluid{
+    height: 350px;
+}