Added boostrap 4 to project and shared components

package-lock.json

@@ -2474,6 +2474,16 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "boostrap": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/boostrap/-/boostrap-2.0.0.tgz",
+      "integrity": "sha512-JEeFMOweKeGXEM9rt95eaVISOkluG9aKcl0jQCETOVH9jynCZxuBZe2oWgcWJpj5wqYWZl625SnW7OgHT2Ineg=="
+    },
+    "bootstrap": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
+      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -8728,6 +8738,11 @@
         "topo": "2.0.2"
       }
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -10244,6 +10259,11 @@
         "ts-pnp": "1.0.1"
       }
     },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",

package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "boostrap": "^2.0.0",
+    "bootstrap": "^4.3.1",
+    "jquery": "^3.3.1",
+    "popper.js": "^1.15.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "2.1.8"

src/components/App.js

@@ -1,28 +1,12 @@
 import React, { Component } from 'react';
-import Header from './shared/header';
+import Home from './pages/home'
-import Footer from "./shared/footer"
 import './App.css';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <Header/>
+        <Home/>
-        <header className="App-header">
-          <img src="" className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-        <Footer/>
       </div>
     );
   }

src/components/pages/home.js

@@ -0,0 +1,18 @@
+import React, {Component} from 'react';
+import Header from '../shared/header';
+import Footer from "../shared/footer";
+import Carousel from '../shared/carousel';
+
+class Home extends Component {
+  render() {
+    return (
+      <div>
+        <Header/>
+        <Carousel/>
+        <Footer/>
+      </div>
+    );
+  }
+}
+
+export default Home;

src/components/shared/carousel.js

@@ -0,0 +1,33 @@
+import React, {Component} from 'react';
+import CarouselImageOne from '../../images/home/carouselImageOne.jpg'
+import CarouselImageTwo from '../../images/home/carouselImageTwo.jpg'
+
+class Carousel extends Component {
+  render() {
+    return (
+      <div id="carouselExampleControls" className="carousel slide" data-ride="carousel">
+        <div className="carousel-inner">
+          <div className="carousel-item active">
+            <img src={CarouselImageOne} className="d-block w-100" alt="..."/>
+          </div>
+          <div className="carousel-item">
+            <img src={CarouselImageOne} className="d-block w-100" alt="..."/>
+          </div>
+          <div className="carousel-item">
+            <img src={CarouselImageOne} className="d-block w-100" alt="..."/>
+          </div>
+        </div>
+        <a className="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+          <span className="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span className="sr-only">Previous</span>
+        </a>
+        <a className="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+          <span className="carousel-control-next-icon" aria-hidden="true"></span>
+          <span className="sr-only">Next</span>
+        </a>
+      </div>
+    );
+  }
+}
+
+export default Carousel;

src/components/shared/footer.js

@@ -1,12 +1,21 @@
 import React, {Component} from 'react';
-import ReactDOM from 'react-dom';
 
 class Footer extends Component {
   render() {
     return (
-      <h1>
+      <div className="container-fluid">
-        This is a footer!
+        <div className="row">
-      </h1>
+          <div class="col-sm">
+            One
+          </div>
+          <div class="col-sm">
+            Two
+          </div>
+          <div class="col-sm">
+            Three
+          </div>
+        </div>
+      </div>
     );
   }
 }

src/components/shared/header.js

@@ -1,12 +1,30 @@
 import React, {Component} from 'react';
-import ReactDOM from 'react-dom';
 
 class Header extends Component {
   render() {
     return (
-      <h1>
+      <nav className="navbar navbar-expand-lg navbar-light bg-light">
-        This is a header!
+        <a className="navbar-brand" href="#">Navbar</a>
-      </h1>
+        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse">
+          <ul className="navbar-nav">
+            <li className="nav-item active">
+              <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#">Features</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#">Pricing</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#" aria-disabled="true">Disabled</a>
+            </li>
+          </ul>
+        </div>
+      </nav>
     );
   }
 }

src/index.css

@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}

src/index.js

@@ -1,6 +1,11 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+// eslint-disable-next-line
+import $ from 'jquery'; 
+// eslint-disable-next-line
+import Popper from 'popper.js'; 
+import 'bootstrap/dist/js/bootstrap.bundle.min';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './components/App';
 import * as serviceWorker from './serviceWorker';