-
Notifications
You must be signed in to change notification settings - Fork 20
/
Home.js
95 lines (93 loc) · 3.61 KB
/
Home.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { Component } from 'react'
class Home extends Component {
render() {
return (
<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>
)
}
}
export default Home