Merge branch 'develop' into 451_link_performances_to_backend

src/components/Layout/Footer/footer.scss

@@ -3,6 +3,7 @@
   display: flex;
   flex-wrap: wrap;
   width: 100%;
+  margin-top: $margin-l;
 }
 
 .footer-container__copyright {
@@ -67,6 +68,10 @@
 }
 
 @media only screen and (min-width: 576px) {
+  .footer__container {
+    margin-top: $margin-l;
+  }
+
   .footer-container__copyright {
     text-align: left;
   }

src/components/Layout/Header/header.scss

@@ -3,10 +3,9 @@
   z-index: 100;
   width: 100%;
   background-color: $primary-color-darkblue-lighter;
-  box-shadow: 0 12px 30px rgba($primary-color-darkblue, .4);
+  box-shadow: 0 12px 30px rgba($primary-color-darkblue, 0.4);
   top: 0;
   @media only screen and (min-width: 992px) {
     position: static;
   }
 }
-

src/containers/Causes/ExploreCauses/ExploreCauses.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import ExploreCausesCategory from './ExploreCausesCategory'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   faPaw,
   faChild,
@@ -8,7 +9,8 @@ import {
   faLeaf,
   faMedkit,
   faBook,
-  faFemale
+  faFemale,
+  faAngleDoubleRight
 } from '@fortawesome/free-solid-svg-icons'
 
 let categoriesData = [
@@ -37,6 +39,9 @@ const ExploreCauses = () => {
     <div className="explore-causes-container">
       <h3 className="explore-causes-title white">Explore these causes</h3>
       <div className="explore-causes-categories">{renderedList}</div>
+      <div className="carousel-arrow">
+        <FontAwesomeIcon className="arrow-icon" icon={faAngleDoubleRight} />
+      </div>
     </div>
   )
 }

src/containers/Causes/ExploreCauses/ExploreCauses.scss

@@ -1,14 +1,19 @@
 .explore-causes-container {
   grid-column: 1/-1;
   margin: $margin-l auto;
+  overflow-x: scroll;
+  width: 100%;
+  position: relative;
 
   h3 {
     text-align: center;
   }
 
   .explore-causes-categories {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    width: 100%;
 
     .explore-causes-category {
       padding: $padding-xl;
@@ -19,8 +24,13 @@
       justify-content: center;
       margin-top: $margin-r;
       margin-right: $margin-r;
-      min-width: 170px;
-      min-height: 170px;
+      width: 170px;
+      height: 170px;
+
+      p {
+        font-size: 16px;
+        text-align: center;
+      }
 
       &:hover {
         cursor: pointer;
@@ -36,4 +46,47 @@
       }
     }
   }
+  .carousel-arrow {
+    width: 32px;
+    height: 32px;
+    background-color: $primary-color-white;
+    position: absolute;
+    top: 55%;
+    right: 0;
+    transform: translateY(0, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width: 576px) {
+  .explore-causes-container {
+    .explore-causes-categories {
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .explore-causes-category {
+        width: 48%;
+        margin-right: 0;
+      }
+    }
+    .carousel-arrow {
+      display: none;
+    }
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .explore-causes-container {
+    .explore-causes-categories {
+      flex-wrap: wrap;
+      justify-content: center;
+
+      .explore-causes-category {
+        width: 170px;
+        margin-right: $margin-r;
+      }
+    }
+  }
 }

src/containers/Home/Home.js

@@ -2,7 +2,39 @@ import React, { Component } from 'react'
 
 class Home extends Component {
   render() {
-    return <div>Home</div>
+    return (
+      <div className="home-container">
+        <div className="intro-text">
+          <h1 className="intro-heading">Drive the change with music</h1>
+          <p className="intro-paragraph">
+            Sing for Needs is a donation platform, which connects music
+            performances with inspiring causes to create change together with
+            the fans
+          </p>
+          <button className="intro-cta">Get started with Sing for Needs</button>
+          <p className="intro-usp">
+            Join over 100,000 artists, causes and changemakers
+          </p>
+        </div>
+        <div className="intro-visuals">
+          <img
+            id="image-1"
+            src="images/polaroid-sing-for-needs-1.jpg"
+            alt="Singer on the chair -- from Unsplash.com"
+          />
+          <img
+            id="image-2"
+            src="images/polaroid-sing-for-needs-2.jpg"
+            alt="Singer on the chair -- from Unsplash.com"
+          />
+          <img
+            id="image-3"
+            src="images/polaroid-sing-for-needs-3.jpg"
+            alt="Singer on the chair -- from Unsplash.com"
+          />
+        </div>
+      </div>
+    )
   }
 }
 

src/containers/Home/Home.scss

@@ -0,0 +1,159 @@
+.home-container {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  grid-column: 1/-1;
+  margin-top: $margin-l;
+  margin-bottom: $margin-xxl;
+  background-color: $primary-color-accent;
+  height: 500px;
+  background-image: radial-gradient(
+      ellipse at 50%,
+      rgba(21, 24, 40, 0.31) 0%,
+      $primary-color-darkblue 70%
+    ),
+    url("/images/sing-for-needs-home-page-bg.jpg");
+  background-size: cover;
+
+  h1,
+  p {
+    color: $primary-color-white;
+  }
+
+  h1 {
+    font-family: "proxima-nova", sans-serif;
+    font-weight: 800;
+    font-style: normal;
+    font-size: 3.157rem;
+    line-height: 0.9;
+    margin-bottom: $margin-s;
+  }
+
+  button {
+    margin-top: $margin-r;
+    margin-bottom: $margin-xs;
+    max-width: fit-content;
+  }
+
+  .intro-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: $margin-l;
+
+    p.intro-usp {
+      color: $primary-color-white-darkest;
+    }
+  }
+
+  .intro-visuals {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    height: 350px;
+    margin-top: $margin-xxl;
+
+    img {
+      position: absolute;
+      width: 50%;
+      box-shadow: 0 19px 38px rgba($primary-color-darkblue-lighter, 0.3),
+        0 15px 12px rgba($primary-color-darkblue-lighter, 0.22);
+    }
+
+    #image-1 {
+      top: auto;
+      left: -1%;
+      transform: rotate(-15deg);
+      transition: transform 300ms ease;
+
+      &:hover {
+        transform: rotate(-15deg) translateY(-10px);
+        z-index: 3;
+      }
+    }
+
+    #image-2 {
+      transition: transform 300ms ease;
+
+      &:hover {
+        transform: translateY(-10px);
+        z-index: 3;
+      }
+    }
+
+    #image-3 {
+      bottom: auto;
+      left: 50%;
+      transform: rotate(15deg);
+      transition: transform 300ms ease;
+
+      &:hover {
+        transform: rotate(15deg) translateY(-10px);
+        z-index: 3;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 576px) {
+  .home-container {
+    .intro-text {
+      margin-bottom: $margin-xxl;
+    }
+
+    .intro-visuals {
+      img {
+        width: 40%;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .home-container {
+    flex-direction: row;
+
+    button {
+      margin-top: $margin-xl;
+    }
+
+    .intro-text {
+      width: 55%;
+
+      h1 {
+        font-family: "proxima-nova", sans-serif;
+        font-weight: 800;
+        font-style: normal;
+        font-size: 4.209rem;
+        line-height: 0.9;
+      }
+
+      p {
+        width: 80%;
+      }
+    }
+
+    .intro-visuals {
+      width: 50%;
+
+      img {
+        width: 50%;
+      }
+
+      #image-1 {
+        top: 10%;
+      }
+
+      #image-2 {
+      }
+
+      #image-3 {
+        bottom: 5%;
+      }
+    }
+  }
+}

src/containers/Home/Home.test.js

@@ -4,8 +4,23 @@ import { shallow } from 'enzyme'
 
 // Need at least 1 test to pass Travis CI
 describe('<Home />', () => {
-  it('contains the text Home', () => {
-    const homeWrapper = shallow(<Home />)
-    expect(homeWrapper.text()).toEqual('Home')
+  let homeWrapper
+
+  beforeEach(() => {
+    homeWrapper = shallow(<Home />)
+  })
+
+  it("contains the headline 'Drive the change with music'", () => {
+    expect(homeWrapper.find('h1').text()).toEqual(
+      'Drive the change with music'
+    )
+  })
+
+  it('contains a call to action button', () => {
+    expect(homeWrapper.find('button').length).toEqual(1)
+  })
+
+  it('contains 3 mood images about artists', () => {
+    expect(homeWrapper.find('img').length).toEqual(3)
   })
 })

src/main.scss

@@ -13,6 +13,7 @@
 @import "components/Layout/Footer/footer.scss";
 @import "components/Layout/NavBar/navBar.scss";
 @import "components/Layout/Logo/Logo.scss";
+@import "containers/Home/Home.scss";
 @import "containers/Artist/artist.scss";
 @import "containers/About/About.scss";
 @import "containers/Contact/Contact.scss";

src/styles/_typography.scss

@@ -20,7 +20,7 @@ h1,
   font-weight: 800;
   font-style: normal;
   font-size: 4.209rem;
-  line-height: 1;
+  line-height: 0.9;
 }
 
 h2,
@@ -29,7 +29,7 @@ h2,
   font-weight: 800;
   font-style: normal;
   font-size: 3.157rem;
-  line-height: 1;
+  line-height: 0.9;
 }
 
 h3,