BuildForSDG · briantical · May 17, 2020 · May 18, 2020 · May 23, 2020
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,17 +5,22 @@ module.exports = {
     node: true,
     jest: true
   },
-  extends: ['airbnb-base'],
+  extends: ['plugin:react/recommended', 'airbnb-base'],
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly'
   },
+  parser: 'babel-eslint',
   parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
     ecmaVersion: 2018,
     sourceType: 'module'
   },
   rules: {
     'comma-dangle': ['error', 'never'],
     'no-param-reassign': ['error', { props: false }]
-  }
+  },
+  plugins: ['react']
 };
diff --git a/babel.config.js b/babel.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   presets: [
     [
+      '@babel/preset-react',
       '@babel/preset-env',
       {
         targets: {

diff --git a/package.json b/package.json
@@ -32,14 +32,23 @@
     "url": "https://github.com/BuildForSDG/js-starter/issues"
   },
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "bootstrap": "^4.5.0",
+    "react": "^16.13.1",
+    "react-bootstrap": "^1.0.1",
+    "react-dom": "^16.13.1"
+  },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "babel-eslint": "^10.1.0",
     "babel-jest": "^25.4.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.0.0",
     "eslint-config-airbnb-base": "^14.1.0",
     "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.20.0",
     "jest": "^25.4.0",
     "parcel-bundler": "^1.12.4"
   },

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,4 @@
+#root {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/src/app.js b/src/app.js
@@ -1,3 +1,9 @@
-const app = async () => '#BuildforSDG';
+import React from 'react';
+import { Home } from './views';
 
-export default app;
+import './App.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const App = () => <Home />;
+
+export default App;
diff --git a/src/index.html b/src/index.html
@@ -1,15 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-
-    <h2 data-app-name></h2>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>URGO</title>
+  </head>
+  <body>
+    <div id="root"></div>
 
     <script src="./index.js"></script>
-
-</body>
-</html>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,11 +1,7 @@
-import app from './app';
+import React from 'react';
+import { render } from 'react-dom';
 
-const startApp = async () => {
-  const header = document.querySelector('[data-app-name]');
-  if (!header) return;
+import App from './App';
 
-  const programName = await app();
-  header.textContent = programName;
-};
-
-document.addEventListener('DOMContentLoaded', startApp);
+const root = document.getElementById('root');
+render(<App />, root);
diff --git a/src/views/Footer/Footer.css b/src/views/Footer/Footer.css
@@ -0,0 +1,23 @@
+.footer {
+  bottom: 0;
+  width: 100%;
+  min-height: 96px;
+  position: absolute;
+  color: rgb(255, 255, 255);
+  background-color: rgb(34, 34, 34);
+}
+
+#footer_content {
+  max-width: 960px;
+}
+
+.footer a,
+.footer a:hover {
+  color: rgb(255, 255, 255);
+  text-decoration: none;
+}
+
+.footer a:hover,
+.footer a:active {
+  text-decoration: underline;
+}
diff --git a/src/views/Footer/index.js b/src/views/Footer/index.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Row, Col } from 'react-bootstrap';
+import './Footer.css';
+
+const Footer = () => (
+  <Row className="footer align-items-center justify-content-center">
+    <Col id="footer_content">
+      <Row className="justify-content-center align-items-center">
+        <Col className="col-4">
+          <a href="#" style={{ fontWeight: 'bold' }}>
+            ngrok
+          </a>
+        </Col>
+        <Col>
+          <Row>
+            <Col>
+              <a href="#">Goals</a>
+            </Col>
+            <Col>
+              <a href="#">Team</a>
+            </Col>
+            <Col>
+              <a href="#">Contact</a>
+            </Col>
+            <Col>
+              <a href="#">Initiatives</a>
+            </Col>
+            <Col>
+              <a href="#">Login</a>
+            </Col>
+            <Col>
+              <a href="#">Faqs </a>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    </Col>
+  </Row>
+);
+
+export default Footer;
diff --git a/src/views/Home/Home.css b/src/views/Home/Home.css
@@ -0,0 +1,69 @@
+.content {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 96px;
+}
+
+#homecontent {
+  min-width: 960px;
+  padding-top: 96px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+#navcontent {
+  width: 712px;
+  min-height: 96px;
+  margin-bottom: 48px;
+}
+
+#navcontent a {
+  color: rgb(34, 34, 34);
+}
+
+#brand {
+  width: 640px;
+}
+
+#brand p {
+  font-style: italic;
+  color: rgb(96, 95, 95);
+}
+
+#brand a {
+  text-decoration: none;
+}
+
+#brand a div {
+  height: 3rem;
+  max-width: 20rem;
+  border-radius: 1rem;
+  color: rgb(255, 255, 255);
+  background-color: rgb(0, 0, 0);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  padding: 0 0.5rem;
+}
+
+#about {
+  width: 640px;
+  margin-top: 48px;
+  min-height: 96px;
+}
+
+.trend {
+  font-weight: bold;
+}
+
+#about a {
+  color: rgb(34, 34, 34);
+  text-decoration: none;
+}
+
+#sidebar {
+  background-color: rgb(34, 34, 34);
+}
diff --git a/src/views/Home/index.js b/src/views/Home/index.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
+
+import Footer from '../Footer';
+import './Home.css';
+
+const Home = () => (
+  <Container fluid style={{ width: '100%', height: '100%' }}>
+    <Row className="content">
+      <Col id="homecontent">
+        <Row id="navcontent" className="justify-content-center align-items-center">
+          <Col className="col-3">
+            <a href="#" style={{ fontWeight: 'bold' }}>
+              ngrok
+            </a>
+          </Col>
+          <Col>
+            <Row>
+              <Col>
+                <a href="#">Goals</a>
+              </Col>
+              <Col>
+                <a href="#">Team</a>
+              </Col>
+              <Col>
+                <a href="#">Contact</a>
+              </Col>
+              <Col>
+                <a href="#">Initiatives</a>
+              </Col>
+              <Col>
+                <a href="#">Login</a>
+              </Col>
+              <Col>
+                <a href="#">Faqs </a>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row id="brand" className="justify-content-center align-items-center">
+          <h2>Uganda Governments Revenue Online</h2>
+          <p>You and I can help improve Our Country and local communitys Revenue</p>
+          <a href="#">
+            <div>MOBILIZE AND BE PART OF GROWTH</div>
+          </a>
+        </Row>
+        <Row id="about" className="justify-content-center align-items-center">
+          <Col className="trend col-6">#sdgcompetition2020</Col>
+          <Col className="col-4">Copyright@Team-266</Col>
+          <Col className="col-2">
+            <a href="#">Github</a>
+          </Col>
+        </Row>
+      </Col>
+      <Col id="sidebar" />
+    </Row>
+    <Footer />
+  </Container>
+);
+
+export default Home;
diff --git a/src/views/index.js b/src/views/index.js
@@ -0,0 +1,4 @@
+import Home from './Home';
+import Footer from './Footer';
+
+export { Home, Footer };