-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.js
More file actions
134 lines (115 loc) · 2.92 KB
/
index.js
File metadata and controls
134 lines (115 loc) · 2.92 KB
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import React from 'react'
import styled from 'styled-components'
import {
TABLET_LARGE_SIZE,
TABLET_SMALL_SIZE,
MOBILE_SIZE,
} from 'styles/constants'
const StyledSection = styled.section`
display: flex;
flex-direction: column;
align-items: center;
margin: 4.5rem auto 16rem;
padding: 0 20px;
@media only screen and (max-width: ${TABLET_LARGE_SIZE}) {
margin: 3.5rem 0 8rem;
}
@media only screen and (max-width: ${TABLET_SMALL_SIZE}) {
margin: 2.5rem 0 9rem;
}
@media only screen and (max-width: ${MOBILE_SIZE}) {
margin: 3rem 16px 9rem;
}
`
const Container = styled.div`
display: flex;
flex-direction: row;
max-width: 75rem;
font-family: Lato;
> * {
flex-basis: 50%;
padding: 0 2rem;
}
@media only screen and (max-width: ${TABLET_LARGE_SIZE}) {
> * {
padding: 0 1rem;
}
}
@media only screen and (max-width: ${TABLET_SMALL_SIZE}) {
flex-direction: column;
> * {
padding: 0;
}
> *:nth-child(n + 2) {
margin-top: 3rem;
}
}
`
const VideoWrapper = styled.div`
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
`
const Iframe = styled.iframe`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
`
const IsCommitRight = styled.p`
font-weight: 700;
line-height: 1.5rem;
margin-bottom: 1.5em;
`
const ReasonsToJoin = styled.ul`
list-style-type: none;
font-weight: 400;
line-height: 1.4rem;
> * {
margin-top: 1.1rem;
}
`
const WhyCommitSection = () => (
<StyledSection>
<Container>
<div>
<VideoWrapper>
<Iframe
data-src="https://www.youtube.com/embed/pIbkW6wMqrw"
className="lazyload"
title="Why joining Commit?"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</VideoWrapper>
</div>
<div>
<IsCommitRight>
Is Commit right for you? Today, we’re hyper-focused on solving
challenges for Senior Startup Engineers. We’re the right partner for
you if you resonate with the following:
</IsCommitRight>
<ReasonsToJoin>
<li>
Obsessed with building impactful products that customers love to use
</li>
<li>Strong believer in using MVP to validate ideas</li>
<li>
Can build products rapidly without significant sacrifice on quality
</li>
<li>
Love the autonomy and ambiguity of working at early stage startups
</li>
<li>
Have a tech stack that’s suitable for joining or starting early
technical teams{' '}
</li>
<li>Have a learner’s mentality and open to collaboration</li>
</ReasonsToJoin>
</div>
</Container>
</StyledSection>
)
export default WhyCommitSection