diff --git a/.eslintrc.js b/.eslintrc.js index 778655c..e00cedf 100644 --- 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 index 6c3be4c..181bccb 100644 --- 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 index 5385d05..08c42ad 100644 --- 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 new file mode 100644 index 0000000..6a40e87 --- /dev/null +++ b/src/App.css @@ -0,0 +1,4 @@ +#root { + width: 100vw; + height: 100vh; +} diff --git a/src/app.js b/src/app.js index 941b387..eaf234e 100644 --- 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 = () => ; + +export default App; diff --git a/src/index.html b/src/index.html index eb85b64..9687b62 100644 --- a/src/index.html +++ b/src/index.html @@ -1,15 +1,13 @@ - - - - Document - - - -

+ + + + URGO + + +
- - - \ No newline at end of file + + diff --git a/src/index.js b/src/index.js index ef3f4e7..4d97665 100644 --- 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(, root); diff --git a/src/views/Footer/Footer.css b/src/views/Footer/Footer.css new file mode 100644 index 0000000..2628778 --- /dev/null +++ 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 new file mode 100644 index 0000000..49b0772 --- /dev/null +++ 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 = () => ( + + + + + + ngrok + + + + + + Goals + + + Team + + + Contact + + + Initiatives + + + Login + + + Faqs + + + + + + +); + +export default Footer; diff --git a/src/views/Home/Home.css b/src/views/Home/Home.css new file mode 100644 index 0000000..f3249ef --- /dev/null +++ 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 new file mode 100644 index 0000000..61129b6 --- /dev/null +++ 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 = () => ( + + + + + + + ngrok + + + + + + Goals + + + Team + + + Contact + + + Initiatives + + + Login + + + Faqs + + + + + +

Uganda Governments Revenue Online

+

You and I can help improve Our Country and local communitys Revenue

+ +
MOBILIZE AND BE PART OF GROWTH
+ + + + #sdgcompetition2020 + Copyright@Team-266 + + Github + + + + + +