Feat: Create About.jsx

package.json

@@ -12,7 +12,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "^3.4.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/Routes.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-import Home from "./Home";
+import Home from "./home/Home";
 import Members from "./members/Members";
 import MemberPortfolio from "./members/MemberPortfolio";
 import Member from "./members/Member";
@@ -20,18 +20,20 @@ import ProtectedRoute from "./ProtectedRoute";
 import Navigation from "./Navigation";
 import AuthProvider from "./AuthContext";
 import Programs from "./organizations/Programs";
-
+import About from "./home/About";
 
 export default function Routes() {
-
   return (
     <Router>
       <AuthProvider>
         <Navigation />
         <Switch>
-          <Route exact path="/" >
+          <Route exact path="/">
             <Home />
           </Route>
+          <Route exact path="/about">
+            <About />
+          </Route>
           <ProtectedRoute exact path="/members">
             <Members />
           </ProtectedRoute>
@@ -53,35 +55,26 @@ export default function Routes() {
           <ProtectedRoute path="/organizations/programs/">
             <Program />
           </ProtectedRoute>
-          <ProtectedRoute
-            exact path="/portfolio">
+          <ProtectedRoute exact path="/portfolio">
             <Portfolio />
           </ProtectedRoute>
-          <ProtectedRoute
-            exact path="/personal-details">
+          <ProtectedRoute exact path="/personal-details">
             <PersonalDetails />
           </ProtectedRoute>
-          <ProtectedRoute
-            exact path="/additional-info">
+          <ProtectedRoute exact path="/additional-info">
             <AdditionalInfo />
           </ProtectedRoute>
-          <ProtectedRoute
-            exact path="/personal-background">
+          <ProtectedRoute exact path="/personal-background">
             <PersonalBackground />
           </ProtectedRoute>
-          <ProtectedRoute
-            exact path="/request-history">
-          </ProtectedRoute>
-          <ProtectedRoute
-            exact path="/organization-portfolio">
+          <ProtectedRoute exact path="/request-history"></ProtectedRoute>
+          <ProtectedRoute exact path="/organization-portfolio">
             <EditPrograms />
           </ProtectedRoute>
-          <ProtectedRoute
-            exact path="/organization-profile">
+          <ProtectedRoute exact path="/organization-profile">
             <EditOrganization />
           </ProtectedRoute>
-          <ProtectedRoute
-            path="/organization-programs/">
+          <ProtectedRoute path="/organization-programs/">
             <EditProgram />
           </ProtectedRoute>
           <Route path="/register">

src/home/About.css

@@ -0,0 +1,19 @@
+.container {
+  width: 100%;
+  box-shadow: none;
+  background-color: #fff;
+  word-spacing: 2px;
+}
+
+h1 {
+  color: #990666;
+  padding-top: 0.5em;
+  text-align: center;
+  font-weight: 900;
+  margin: 1rem !important;
+}
+
+a {
+  color: #57d5ff;
+  text-decoration: underline;
+}

src/home/About.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import "./About.css";
+
+export default function About() {
+  return (
+    <div className="container" id="home">
+      <div className="top">
+        <img
+          width="100%"
+          height="350px"
+          alt="About section"
+          src="https://user-images.githubusercontent.com/37622734/93429699-30e60d80-f8df-11ea-99b5-46778a23ddc3.png"
+        />
+      </div>
+      <div className="middle">
+        <h1>About BridgeInTech</h1>
+      </div>
+      <div className="bottom">
+        <p>
+          Bridge-In-Tech is one of open source projects under AnitaB.org Open
+          Source umbrella. It is inspired by the existing{" "}
+          <a
+            href="https://github.com/anitab-org/mentorship-backend/wiki"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            AnitaB.org Mentorship System
+          </a>{" "}
+          which is an application that matches women in tech to mentor each
+          other, on career development, through 1:1 relations during a certain
+          period of time. BridgelnTech takes this idea further by encouraging
+          organizations to collaborate with mentors and mentees on mentoring
+          programs. Through Bridge-In-Tech, an organization can offer a
+          mentorship program to a mentor and a mentee that is customised to meet
+          the needed skills set within its organisation while providing a safety
+          and supportive environment for these mentor/mentee to work in.
+          Although the main focus is to empower women in tech, following
+          AnitaB.org's values that welcomed all allies who support equity in
+          tech, this application is also open to anyone that consider themselves
+          allies.
+        </p>
+        <a
+          href="https://medium.com/anitab-org-open-source/bridgeintech-by-anitab-org-85745853865d?source=friends_link&sk=fcb616ef0ac7e1e85ac6b58b513a56ee"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Read more about the project here...
+        </a>
+      </div>
+    </div>
+  );
+}