Skip to content

Commit c8c1872

Browse files
marcoaciernomarcoacierno
committed
WIP Hero, contact form
1 parent dc48820 commit c8c1872

27 files changed

+220
-109
lines changed

‎src/components/contact-us/index.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.ContactUs {
2+
margin-top: 10rem;
3+
margin-bottom: 10rem;
4+
5+
p {
6+
margin-bottom: 2rem;
7+
}
8+
}

‎src/components/contact-us/index.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,24 @@ import React from 'react';
33
import Container from '../container';
44
import Form from '../form';
55

6+
import './index.css';
7+
68
export default props => {
79
return (
8-
<Container size="medium">
10+
<Container className="ContactUs" size="medium">
911
<h1>Contact us</h1>
10-
<p>If you would like to organize a Python Pizza, get in touch!</p>
1112
<Container size="small">
13+
<p>
14+
If you like{' '}
15+
<span role="img" aria-label="pizza">
16+
🍕
17+
</span>{' '}
18+
and{' '}
19+
<span role="img" aria-label="python">
20+
🐍
21+
</span>
22+
, get in touch! We are always looking for new places!
23+
</p>
1224
<Form />
1325
</Container>
1426
</Container>

‎src/components/events-slider/index.css‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,42 @@
11
.EventsSlider {
2-
&--wrapper {
3-
width: 100%;
4-
margin: auto;
5-
z-index: 10;
6-
}
7-
8-
display: flex;
9-
overflow: hidden;
2+
width: 100%;
3+
margin: auto;
4+
z-index: 1;
105

116
&--item {
12-
flex: 0 0 33.3333%;
13-
147
text-align: center;
15-
font-family: var(--font-name--heading);
16-
font-weight: bold;
8+
font-family: var(--font-name--marana);
179
color: var(--white);
18-
opacity: 0.3;
10+
opacity: 1;
11+
font-size: 9.4rem;
12+
letter-spacing: -0.079em;
1913
cursor: pointer;
20-
21-
&.active {
22-
opacity: 1;
23-
}
2414
}
2515

2616
&--description {
27-
margin-top: 5rem;
17+
margin-top: 2rem;
2818
text-align: center;
2919

20+
transform: translateZ(0);
21+
3022
li,
3123
a {
3224
color: var(--white);
3325
}
26+
27+
li {
28+
overflow: hidden;
29+
30+
span {
31+
display: inline-block;
32+
transition: transform 0.25s;
33+
}
34+
}
35+
36+
&.out {
37+
li span {
38+
transform: translateY(-100%) translateZ(0);
39+
}
40+
}
3441
}
3542
}

‎src/components/events-slider/index.js‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,35 +13,38 @@ export default props => {
1313
node {
1414
city
1515
where
16+
site
17+
date(formatString: "D MMMM YYYY")
18+
image
1619
}
1720
}
1821
}
1922
}
2023
`);
21-
console.log('allFutureEventsYaml:', events);
24+
25+
const event = events[0].node;
26+
2227
return (
23-
<div className="EventsSlider--wrapper">
24-
<ul className="EventsSlider">
25-
{events.map(({ node: event }, i) => {
26-
return (
27-
<li key={i} className="EventsSlider--item">
28-
{event.city}
29-
</li>
30-
);
31-
})}
32-
</ul>
28+
<div className="EventsSlider">
29+
<div className="EventsSlider--item">{event.city}</div>
3330
<div className="EventsSlider--description">
3431
<ul>
3532
<li>
36-
<strong>Where?</strong>
37-
SinnerSchrader
33+
<span>
34+
<strong>Where?</strong>
35+
{event.where}
36+
</span>
3837
</li>
3938
<li>
40-
<strong>When?</strong>
41-
20 December 2018
39+
<span>
40+
<strong>When?</strong>
41+
{event.date}
42+
</span>
4243
</li>
4344
<li>
44-
<a href="/">Find out more here!</a>
45+
<span>
46+
<a href={event.site}>Find out more here!</a>
47+
</span>
4548
</li>
4649
</ul>
4750
</div>

‎src/components/form/index.css‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,50 @@
11
.Form {
22
label {
33
display: block;
4-
text-align: center;
5-
64
margin-top: 1rem;
5+
font-family: var(--font-name--paragraph);
6+
7+
&:after {
8+
content: '';
9+
10+
display: block;
11+
12+
width: 100%;
13+
height: 1px;
14+
background: #ccc;
15+
}
16+
}
17+
18+
input:focus,
19+
textarea:focus {
20+
~ span {
21+
transform: translateY(0);
22+
}
23+
}
24+
25+
label.has-input {
26+
span {
27+
transform: translateY(0);
28+
}
29+
}
30+
31+
span {
32+
display: block;
33+
34+
text-transform: uppercase;
35+
font-weight: bold;
36+
font-size: 1.2rem;
37+
38+
transform: translateY(-1rem);
39+
transition: transform 0.3s;
740
}
841

942
input,
1043
textarea {
1144
display: block;
1245
width: 100%;
1346
margin-top: 0.2rem;
47+
border: 0;
1448
}
1549

1650
textarea {
@@ -20,12 +54,12 @@
2054

2155
&--submit-container {
2256
text-align: center;
23-
margin-top: 1rem;
57+
margin-top: 3rem;
2458

2559
button {
2660
max-width: 30rem;
2761
width: 100%;
28-
height: 3rem;
62+
height: 6rem;
2963

3064
font-family: var(--font-name--heading);
3165
font-size: 1.6rem;
@@ -37,6 +71,11 @@
3771
border: 0;
3872

3973
appearance: none;
74+
transition: opacity 0.3s;
75+
76+
&:hover {
77+
opacity: 0.7;
78+
}
4079
}
4180
}
4281
}

‎src/components/form/index.js‎

Lines changed: 62 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState, useCallback } from 'react';
2+
import classnames from 'classnames';
23

34
import './index.css';
45

@@ -45,48 +46,70 @@ export default props => {
4546

4647
return (
4748
<form onSubmit={onSubmit} className="Form" name="contact">
48-
<label>
49-
<span>Your name</span>
50-
<input
51-
required
52-
onChange={onChangeName}
53-
value={name}
54-
type="text"
55-
name="name"
56-
/>
57-
</label>
58-
<label>
59-
<span>Your Email</span>
60-
<input
61-
required
62-
onChange={onChangeEmail}
63-
value={email}
64-
type="email"
65-
name="email"
66-
/>
67-
</label>
68-
<label>
69-
<span>City</span>
70-
<input
71-
required
72-
onChange={onChangeCity}
73-
value={city}
74-
type="text"
75-
name="city"
76-
/>
77-
</label>
78-
<label>
79-
<span>Your message</span>
80-
<textarea
81-
required
82-
onChange={onChangeMessage}
83-
value={message}
84-
name="email"
85-
/>
86-
</label>
49+
<Input
50+
component="input"
51+
type="name"
52+
value={name}
53+
onChange={onChangeName}
54+
required
55+
label="Name"
56+
/>
57+
58+
<Input
59+
component="input"
60+
type="email"
61+
value={email}
62+
onChange={onChangeEmail}
63+
required
64+
label="Email"
65+
/>
66+
67+
<Input
68+
component="input"
69+
type="text"
70+
value={city}
71+
onChange={onChangeCity}
72+
required
73+
label="City"
74+
/>
75+
76+
<Input
77+
component="textarea"
78+
value={message}
79+
onChange={onChangeMessage}
80+
label="Messge"
81+
/>
82+
8783
<div className="Form--submit-container">
8884
<button type="submit">Send</button>
8985
</div>
9086
</form>
9187
);
9288
};
89+
90+
const Input = props => {
91+
const { component, label, className, ...others } = props;
92+
let input;
93+
94+
switch (component) {
95+
case 'input':
96+
input = <input {...others} />;
97+
break;
98+
case 'textarea':
99+
input = <textarea {...others} />;
100+
break;
101+
default:
102+
throw new Error('Ops');
103+
}
104+
105+
const classes = classnames(className, {
106+
'has-input': props.value.length > 0,
107+
});
108+
109+
return (
110+
<label className={classes}>
111+
{input}
112+
<span>{label}</span>
113+
</label>
114+
);
115+
};

‎src/components/hero/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
min-height: 48rem;
99
padding-top: 32.9rem;
1010
position: relative;
11-
background: url(../../images/events/naples-2018.jpg) center / cover;
11+
background: url(../../images/events/hamburg-2019.jpg) center / cover;
1212

1313
@media (--mobile) {
1414
padding-top: 16.9rem;

‎src/components/layout/fonts.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@font-face {
2+
font-family: 'Marana';
3+
src: url('../../fonts/Marana Black.woff2') format('woff2'),
4+
url('../../fonts/Marana Black.woff') format('woff'),
5+
url('../../fonts/Marana Black.otf') format('opentype');
6+
font-style: normal;
7+
font-weight: bold;
8+
}
9+
10+
@font-face {
11+
font-family: 'Marana';
12+
src: url('../../fonts/Marana Regular.woff2') format('woff2'),
13+
url('../../fonts/Marana Regular.woff') format('woff'),
14+
url('../../fonts/Marana Regular.otf') format('opentype');
15+
font-style: normal;
16+
font-weight: 400;
17+
}

‎src/components/layout/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Footer from '../footer';
55

66
import './reset.css';
77
import './theme.css';
8+
import './fonts.css';
89
import './typography.css';
910

1011
const Layout = ({ children }) => (

‎src/components/layout/reset.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,3 +210,8 @@ ul {
210210
#app {
211211
overflow: hidden;
212212
}
213+
214+
* {
215+
-webkit-font-smoothing: antialiased;
216+
-moz-osx-font-smoothing: grayscale;
217+
}

0 commit comments

Comments
 (0)