Skip to content

Commit

Permalink
Merge 23ac154 into 495013e
Browse files Browse the repository at this point in the history
  • Loading branch information
@javpet
javpet committed Nov 30, 2019
2 parents 495013e + 23ac154 commit 284442f
Show file tree
Hide file tree
Showing 7 changed files with 221 additions and 39 deletions.
Binary file added public/images/artist-registration-photo.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/charity-registration-photo.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/user-registration-photo.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
116 changes: 85 additions & 31 deletions src/containers/Home/Home.js
View file
Expand Up @@ -3,37 +3,91 @@ import React, { Component } from 'react'
class Home extends Component {
render() {
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>
<React.Fragment>
<section className="home-container__intro">
<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 body-small">
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>
</section>
<section className="home-container__registration">
<h2 className="heading">How to get started?</h2>
<p className="intro">Choose from the options available below</p>
<div className="registration-options">
<div className="registration-option-card">
<div className="registration-details">
<img
src="/images/user-registration-photo.jpg"
alt="A couple at the festival"
/>
<h4>I'm a fan, music lover</h4>
<p className="description">
I'm looking for the latest music, explore the new and happy to
support my favourite artists and helping the cause important
to them.
</p>
</div>
<button>Register as a music fan</button>
</div>
<div className="registration-option-card">
<div className="registration-details">
<img
src="/images/artist-registration-photo.jpg"
alt="Singer with a microphone representing a musician"
/>
<h4>I'm a musician</h4>
<p className="description">
I'm looking forward to make positive impact on the world, help
the charities to close to my mindset and engage with fans.
</p>
</div>
<button>Register as an artist</button>
</div>
<div className="registration-option-card">
<div className="registration-details">
<img
src="/images/charity-registration-photo.jpg"
alt="Woman smiling representing a charity"
/>
<h4>I'm running a charity</h4>
<p className="description">
I'm looking forward to establish good associations and share a
mission with an artist to help growing the tribe around the
cause we're supporting.
</p>
</div>
<button>Register as a charity</button>
</div>
</div>
</section>
</React.Fragment>
)
}
}
Expand Down
118 changes: 112 additions & 6 deletions src/containers/Home/Home.scss
View file
@@ -1,4 +1,4 @@
.home-container {
.home-container__intro {
display: flex;
justify-content: space-between;
flex-direction: column;
Expand Down Expand Up @@ -43,6 +43,8 @@
margin-bottom: $margin-l;

p.intro-usp {
margin-top: $margin-xs;
margin-bottom: $margin-xxl;
color: $primary-color-white-darkest;
}
}
Expand All @@ -54,12 +56,11 @@
align-items: center;
position: relative;
width: 100%;
height: 350px;
margin-top: $margin-xxl;

img {
position: absolute;
width: 50%;
width: 52%;
box-shadow: 0 19px 38px rgba($primary-color-darkblue-lighter, 0.3),
0 15px 12px rgba($primary-color-darkblue-lighter, 0.22);
}
Expand Down Expand Up @@ -99,8 +100,81 @@
}
}

.home-container__registration {
flex-direction: column;
grid-column: 1/-1;
margin-top: $margin-xxl;
margin-bottom: $margin-xxl;
padding-top: $padding-xl;

h2 {
color: $primary-color-white;
text-align: center;
margin-bottom: $margin-s;
}

p.intro {
color: $primary-color-white-darkest;
text-align: center;
}

.registration-options {
width: 100%;
padding-top: $padding-xl;
display: flex;
flex-direction: column;
justify-content: space-around;

.registration-option-card {
display: flex;
flex-direction: column;
width: 100%;
background-color: $primary-color-darkblue-lighter;
padding-bottom: $padding-s;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
border: 1px solid $primary-color-darkblue-lightest;
transition: border 300ms ease;
box-shadow: 0 19px 38px rgba($primary-color-darkblue-lighter, 0.3),
0 15px 12px rgba($primary-color-darkblue-lighter, 0.22);
margin-bottom: $margin-l;

&:last-of-type {
margin-bottom: 0;
}

img {
width: 100%;
}

h4 {
width: 100%;
color: $primary-color-white;
padding-top: $padding-s;
padding-left: $padding-s;
}

.description {
padding: $padding-s;
color: $primary-color-white;
}

button {
margin-left: $margin-s;
margin-right: $margin-s;
width: fit-content;
}

&:hover {
cursor: pointer;
border: 1px solid $primary-color-white-darkest;
}
}
}
}

@media only screen and (min-width: 576px) {
.home-container {
.home-container__intro {
.intro-text {
margin-bottom: $margin-xxl;
}
Expand All @@ -114,7 +188,7 @@
}

@media only screen and (min-width: 992px) {
.home-container {
.home-container__intro {
flex-direction: row;

button {
Expand All @@ -130,6 +204,7 @@
font-style: normal;
font-size: 4.209rem;
line-height: 0.9;
width: 95%;
}

p {
Expand All @@ -141,7 +216,7 @@
width: 50%;

img {
width: 50%;
width: 58%;
}

#image-1 {
Expand All @@ -156,4 +231,35 @@
}
}
}

.home-container__registration {
margin-top: $margin-s;
padding-top: 0;

.registration-options {
width: 100%;
padding-top: $padding-xl;
display: flex;
flex-direction: row;
justify-content: space-around;

.registration-option-card {
width: 28%;
margin-bottom: 0;
justify-content: space-between;

h4 {
width: 100%;
color: $primary-color-white;
padding-top: $padding-s;
padding-left: $padding-s;
}

.description {
padding: $padding-s;
color: $primary-color-white;
}
}
}
}
}
18 changes: 16 additions & 2 deletions src/containers/Home/Home.test.js
View file
Expand Up @@ -17,10 +17,24 @@ describe('<Home />', () => {
})

it('contains a call to action button', () => {
expect(homeWrapper.find('button').length).toEqual(1)
expect(homeWrapper.find('.home-container__intro button').length).toEqual(1)
})

it('contains 3 mood images about artists', () => {
expect(homeWrapper.find('img').length).toEqual(3)
expect(homeWrapper.find('.home-container__intro img').length).toEqual(3)
})

it('contains a section about how to register', () => {
expect(homeWrapper.find('.home-container__registration').length).toEqual(1)
})

it('contains 3 possible registration opportunities', () => {
expect(homeWrapper.find('.registration-option-card').length).toEqual(3)
})

it('each of the 3 cards has a button which leads to the registration accordingly', () => {
expect(homeWrapper.find('.registration-option-card button').length).toEqual(
3
)
})
})
8 changes: 8 additions & 0 deletions src/styles/_typography.scss
View file
Expand Up @@ -12,6 +12,14 @@ body {
line-height: 1.35;
}

.body-small {
font-family: "proxima-nova", sans-serif;
font-weight: 100;
font-style: normal;
font-size: 14px;
line-height: 1.35;
}

// HEADINGS -- PROXIMA NOVA EXTRABOLD

h1,
Expand Down

0 comments on commit 284442f

Please sign in to comment.