the last events added on the home page

src/components/sidebar/Sidebar.js

@@ -33,10 +33,9 @@ const siteMenu = [
 ];
 
 export class Sidebar extends React.Component {
-   // const {history} = this.props;
-
     logout(e) {
         localStorage.removeItem('showProfile');
+        document.location.reload(true);
     }
 
     render() {

src/conteiners/home/Home.js

@@ -3,30 +3,59 @@ import React from 'react';
 import './home.scss';
 
 import Sidebar from '../../components/sidebar/Sidebar';
+import EventInfoShort from '../../components/eventInfoShort/EventInfoShort';
+import logo from '../../assets/img/logo.png';
+import bgVideo from '../../assets/img/bg-video.mp4';
 
 export default class Home extends React.Component {
     state = {
-        videoURL: 'https://gcs-vimeo.akamaized.net/exp=1562893179~acl=%2A%2F1021052489.mp4%2A~hmac=6ef33efd6a7867f05a06d888e576e87a48b2f33f42ca65ed7e78cd0d7a5cf3b0/vimeo-prod-skyfire-std-us/01/2799/9/238996987/1021052489.mp4'
+        videoURL: 'https://gcs-vimeo.akamaized.net/exp=1564565194~acl=%2A%2F1021052489.mp4%2A~hmac=f6d3e53b00695ca1e6920c195176211b64e179e250acfcdaf35bb334a60cac3f/vimeo-prod-skyfire-std-us/01/2799/9/238996987/1021052489.mp4'
     }
 
     render() {
+        const { events } = this.props;
         return (
             <>
                 <Sidebar history={this.props.history}/>
                 <div className="hero">
                     <div className="container-wrap">
-                        <h1>International competitions among professionals and amateurs</h1>                       
+                        <div className="hero-wrap">
+                            <div className="hero-logo">
+                                <img src={logo} alt="logo"/>
+                                <h3><span>Just</span>tri it</h3>
+                            </div>
+                            <h1>International competitions among professionals and amateurs</h1>
+                        </div>                
                     </div>                    
 
                     <div className="bg"></div>
                     <div className="bg-img"></div>
 
                     <video id="background-video" loop autoPlay>
-                        <source src={this.state.videoURL} type="video/mp4" />
-                        <source src={this.state.videoURL} type="video/ogg" />
+                        <source src={bgVideo} type="video/mp4" />
+                        <source src={bgVideo} type="video/ogg" />
                         Your browser does not support the video tag.
                     </video>
                 </div>
+                <div className="container-wrap home events">
+                    <div className="events-content">
+                        <h4>Last Events</h4>
+
+                        <div className="events-list">
+                            {
+                                events.reverse().map( (event,ind) => ind < 6 && <EventInfoShort
+                                    key={event._id}
+                                    title={event.title}
+                                    country={event.country}
+                                    city={event.city}
+                                    id={event._id}
+                                    eventDate={event.eventDate}
+                                    imgSrc={event.mainBannerPicture} />
+                                )
+                            }
+                        </div>
+                    </div>
+                </div>
             </>
         )
     }

src/conteiners/home/home.scss

@@ -7,8 +7,41 @@
     display: flex;
     align-items: center;
 
+    &-logo {
+        position: relative;
+        z-index: 4;
+        display: flex;
+        align-items: center;
+        margin-bottom: 50px;
+
+        img {
+            max-width: 300px;
+            width: 100%;
+        }
+
+        h3 {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding-left: 60px;
+            font-size: 9rem;
+            font-weight: $bold;
+            color: $color-white;
+            line-height: 1;
+            text-transform: uppercase;
+            text-align: center;
+            padding-top: 20px;
+
+            span {
+                display: block;
+                font-size: 11rem;
+            }
+        }
+    }
+
     h1 {
-        font-size: 36px;
+        font-size: 5rem;
+        font-weight: $bold;
         color: $color-white;
         position: relative;
         z-index: 4;
@@ -55,4 +88,16 @@
             display: none;
         }
     }
+}
+
+.home {
+    padding-top: 60px;
+
+    &.events {
+        background-image: url('../../assets/img/girl-bg.jpg');
+    }
+
+    .event-content {
+        min-height: 180px;
+    }
 }

src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
-import createHistory from 'history/createBrowserHistory';
+import { createBrowserHistory } from 'history';
 
 import * as serviceWorker from './serviceWorker';
 import './index.scss';
@@ -11,7 +11,7 @@ import Router from './router';
 import { store } from "./store.js";
 
 
-const history = createHistory();
+const history = createBrowserHistory();
 
 ReactDOM.render(
     <Provider store={store}>

src/router.js

@@ -31,8 +31,9 @@ export class Router extends React.Component {
 		return(
 			<div className="container">
 			    <Switch>
-                    <Route exact path="/" component={Home} />
-
+                    <Route exact path="/" render={ props => (
+                        <Home events={events} />
+                    )} />
                     <Route exact path="/events" render={ props => (
                         <Events events={events} />
                     )} />