add developers page

src/components/Header.tsx

@@ -1,6 +1,7 @@
 import React, {FC} from 'react';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faUser} from '@fortawesome/free-solid-svg-icons';
+import {faConnectdevelop} from '@fortawesome/free-brands-svg-icons';
 
 interface IProps {
   title: string;
@@ -13,6 +14,9 @@ const Header: FC<IProps> = ({title, lead, icon = 'faUser'}) => {
     if (icon === 'faUser') {
       return <FontAwesomeIcon icon={faUser} />;
     }
+    if (icon === 'connectdevelop') {
+      return <FontAwesomeIcon icon={faConnectdevelop} />;
+    }
   };
 
   return (

src/constants/routes.ts

@@ -5,3 +5,4 @@
 export const LANDING: string = '/';
 export const SIGN_UP: string = '/signup';
 export const SIGN_IN: string = '/signin';
+export const DEVELOPERS: string = '/developers';

src/pages/Developers.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import Header from '../components/Header';
+
+const Developers = () => (
+  <section className="container">
+    <Header
+      title="Developers"
+      lead="Browse and connect with developers"
+      icon="connectdevelop"
+    />
+
+    <div className="profiles">
+      <div className="profile bg-light">
+        <img
+          src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200"
+          alt="Some guy"
+          className="round-img"
+        />
+        <div>
+          <h2>John Doe</h2>
+          <p>Developer at Microsoft</p>
+          <p>Seattle, WA</p>
+          <a href="profile.html" className="btn btn-primary">
+            View Profile
+          </a>
+        </div>
+        <ul>
+          <li className="text-primary">
+            <i className="fa fa-check">HTML</i>
+          </li>
+
+          <li className="text-primary">
+            <i className="fa fa-check">CSS</i>
+          </li>
+          <li className="text-primary">
+            <i className="fa fa-check">JavaScript</i>
+          </li>
+
+          <li className="text-primary">
+            <i className="fa fa-check">Python</i>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+);
+
+export default Developers;

src/router/Router.tsx

@@ -3,6 +3,7 @@ import {Switch, Route} from 'react-router-dom';
 import Landing from '../pages/Landing';
 import SignUp from '../pages/SignUp';
 import SignIn from '../pages/SignIn';
+import Developers from '../pages/Developers';
 import * as ROUTES from '../constants/routes';
 
 const Router: FC = () => (
@@ -10,6 +11,7 @@ const Router: FC = () => (
     <Route exact path={ROUTES.LANDING} component={Landing} />
     <Route exact path={ROUTES.SIGN_UP} component={SignUp} />
     <Route exact path={ROUTES.SIGN_IN} component={SignIn} />
+    <Route exact path={ROUTES.DEVELOPERS} component={Developers} />
   </Switch>
 );