added static filters on the events page

src/components/eventInfoShort/EventInfoShort.js

@@ -18,7 +18,7 @@ export class EventInfoShort extends React.Component {
                         <div className="event-date">
                             {
                                 dateArr.map(
-                                    (el, ind) => ind > 0 ? <span>{el} </span> : null
+                                    (el, ind) => ind > 0 ? <span key={ind}>{el} </span> : null
                                 )
                             }
                         </div>

src/components/eventInfoShort/eventInfoShort.scss

@@ -30,7 +30,7 @@
         height: 100%;
         padding: 10px;
         border-top: solid 3px $color-blue;
-        background: $color-grey-2;
+        background: $color-grey-light;
 
         h3 {
             font-size: 1.3rem;

src/components/filtersEvents/FiltersEvents.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Field, reduxForm } from 'redux-form';
+
+import './filtersEvents.scss';
+
+let FiltersEvents = props => {
+    const { handleSubmit } = props;
+
+    const submit = value => {
+        console.log(value);
+        //postLoginSubmit(value);
+    };
+
+    return (
+        <form className="form" onSubmit={handleSubmit(submit)}>
+            <div>
+                <label htmlFor="country">Country</label>
+                <Field name="country" component="select">
+                    <option value="country1">country1</option>
+                    <option value="country2">country2</option>
+                </Field>
+            </div>
+            <div>
+                <label htmlFor="city">City</label>
+                <Field name="city" component="select">
+                    <option value="city1">city1</option>
+                    <option value="city2">city2</option>
+                </Field>
+            </div>
+            <div>
+                <label htmlFor="typeEvent">Type event</label>
+                <Field name="typeEvent" component="select">
+                    <option value="Marathon">Marathon</option>
+                    <option value="Triathlon">Triathlon</option>
+                    <option value="Cycling">Cycling</option>
+                </Field>
+            </div>
+            <button type="submit">Search</button>
+        </form>
+    )
+};
+
+FiltersEvents = reduxForm({
+    form: 'filters'
+})(FiltersEvents)
+
+export default FiltersEvents

src/components/filtersEvents/filtersEvents.scss

@@ -0,0 +1,127 @@
+@import "../../styles/variables";
+
+.event {
+    &-item {
+        padding: 0 5px 20px 5px;
+
+        a {
+            display: block;
+            height: 100%;
+
+            &:hover {
+                .event-cap,
+                .event-date {
+                    color: $color-white;
+                }
+
+                .bg,
+                .event-picture {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    &-content {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+        padding: 10px;
+        border-top: solid 3px $color-blue;
+        background: $color-grey-2;
+
+        h3 {
+            font-size: 1.3rem;
+            text-transform: uppercase;
+        }
+
+        .place {
+            font-size: 1.4rem;
+        }
+
+        .bg {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.6);
+            z-index: 2;
+        }
+    }
+
+    &-cap {
+        position: relative;
+        z-index: 3;
+        color: $color-white;
+    }
+
+    &-date {
+        position: relative;
+        text-align: right;
+        z-index: 3;
+        font-size: 1.4rem;
+        color: $color-white;
+
+        span {
+            &:first-child {
+                font-weight: $semi-bold;
+            }
+
+            &:last-child {
+                display: block;
+                font-size: 1.1rem;
+            }
+        }
+    }
+
+    &-picture {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+
+        img {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%,-50%);
+            width: 100%;
+        }
+    }
+
+    @media (min-width: 768px) {
+        &-item {
+            width: 50%;
+
+            a {
+                &:hover {
+                    .event-cap,
+                    .event-date {
+                        color: $color-white;
+                    }
+
+                    .bg,
+                    .event-picture {
+                        display: block;
+                    }
+                }
+            }
+        }
+
+        &-date,
+        &-cap {
+            color: $color-black;
+        }
+
+        &-picture, &-content .bg {
+            display: none;
+        }
+    }
+}

src/conteiners/events/Events.js

@@ -7,6 +7,7 @@ import { getAllEvents } from "../../actions/getAllEvents";
 import './events.scss';
 
 import Sidebar from '../../components/sidebar/Sidebar';
+import FiltersEvents from '../../components/filtersEvents/FiltersEvents';
 import EventInfoShort from '../../components/eventInfoShort/EventInfoShort';
 
 export class Events extends React.Component {
@@ -20,9 +21,17 @@ export class Events extends React.Component {
         return (
             <>
                 <Sidebar />
-                <div className="container-wrap">
+                <div className="container-wrap events">
+                    <div className="caption-page">
+                        <h2>Events</h2>
+                    </div>
+                    <div className="events-filters">
+                        <h4>Events filters</h4>
+                        <FiltersEvents />
+                    </div>
+                    
                     <div className="events-content">
-                        Events
+                        <h4>Events</h4>
 
                         <div className="events-list">
                             {

src/conteiners/events/events.scss

@@ -1,8 +1,27 @@
 @import "../../styles/variables";
 
 .events {
+    background-image: url('../../assets/img/page-bg.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: fixed;
+    background-position: center;
+
+    h4 {
+        margin-bottom: 15px;
+        text-align: center;
+        font-size: 1.4rem;
+    }
+
+    &-filters {
+        background: $color-white;
+        margin: 0 0 15px;
+        padding: 16px;
+    }
+
     &-content {
-        padding: 50px 0;
+        background: $color-white;
+        padding: 30px 16px 50px 16px;
     }
 
     &-list {

src/conteiners/home/Home.js

@@ -15,7 +15,7 @@ export default class Home extends React.Component {
                 <Sidebar/>
                 <div className="hero">
                     <div className="container-wrap">
-                        <h1>International triathlon competitions among professionals and amateurs</h1>                       
+                        <h1>International competitions among professionals and amateurs</h1>                       
                     </div>                    
 
                     <div className="bg"></div>

src/styles/base.scss

@@ -128,6 +128,15 @@ button {
         width: 100%;
         //padding-left: 16px;
         padding-right: 50px;
-        padding-left: 330px;
+        padding-left: 320px;
+    }
+}
+
+.caption-page {
+    padding: 60px 0;
+
+    h2 {
+        color: $color-white;
+        font-size: 5rem;
     }
 }