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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
import * as _ from 'lodash';
import * as React from 'react';
import { Circle } from 'ts/components/ui/circle';
import { Container } from 'ts/components/ui/container';
import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text';
import { colors } from 'ts/style/colors';
import { media } from 'ts/style/media';
import { styled } from 'ts/style/theme';
import { ScreenWidths } from 'ts/types';
import { constants } from 'ts/utils/constants';
const BENEFITS = [
'Comprehensive insurance (medical, dental, and vision)',
'Unlimited vacation (three weeks per year minimum)',
'Meals and snacks provided in-office daily',
'Flexible hours and liberal work-from-home-policy',
'Supportive remote working environment',
'Transportation, phone, and wellness expense',
'Relocation assistance',
'Optional team excursions (fully paid, often international)',
'Competitive salary and cryptocurrency-based compensation',
];
interface Value {
iconSrc: string;
text: string;
}
const VALUES: Value[] = [
{
iconSrc: 'images/jobs/heart-icon.svg',
text: 'Do the right thing',
},
{
iconSrc: 'images/jobs/ship-icon.svg',
text: 'Consistently ship',
},
{
iconSrc: 'images/jobs/calendar-icon.svg',
text: 'Focus on long term impact',
},
];
export interface BenefitsProps {
screenWidth: ScreenWidths;
}
export const Benefits = (props: BenefitsProps) => {
const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
return (
<Container className="flex flex-column items-center py4 px3" backgroundColor={colors.white}>
{!isSmallScreen ? (
<Container className="flex" maxWidth="1200px">
<BenefitsList />
<Container marginLeft="120px">
<ValuesList />
</Container>
</Container>
) : (
<Container className="flex-column">
<BenefitsList />
<Container marginTop="50px">
<ValuesList />
</Container>
</Container>
)}
</Container>
);
};
const Header: React.StatelessComponent = ({ children }) => (
<Container marginBottom="30px">
<Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}>
{children}
</Text>
</Container>
);
interface BenefitsListProps {
className?: string;
}
const PlainBenefitsList: React.StatelessComponent<BenefitsListProps> = ({ className }) => {
return (
<Container className={className}>
<Header>Benefits</Header>
{_.map(BENEFITS, benefit => <BenefitItem key={benefit} description={benefit} />)}
</Container>
);
};
const BenefitsList = styled(PlainBenefitsList)`
transform: translateY(30px);
`;
interface BenefitItemProps {
description: string;
}
const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ description }) => (
<Container marginBottom="15px">
<div className="flex">
<Circle className="flex-none pr2 pt1" diameter={8} fillColor={colors.black} />
<div className="flex-auto">
<Text fontSize="14px" lineHeight="24px">
{description}
</Text>
</div>
</div>
</Container>
);
interface ValuesListProps {
className?: string;
}
const PlainValuesList: React.StatelessComponent<ValuesListProps> = ({ className }) => {
return (
<Container className={className} maxWidth="270px">
<Header>Our Values</Header>
{_.map(VALUES, value => <ValueItem key={value.text} {...value} />)}
<Text fontSize="14px" lineHeight="26px">
We care deeply about our culture and values, and encourage you to{' '}
<a
style={{ color: colors.mediumBlue, textDecoration: 'none' }}
target="_blank"
href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
>
read more on our blog
</a>.
</Text>
</Container>
);
};
const ValuesList = styled(PlainValuesList)`
border-color: ${colors.beigeWhite};
border-radius: 7px;
border-width: 1px;
border-style: solid;
padding-left: 38px;
padding-right: 38px;
padding-top: 28px;
padding-bottom: 28px;
`;
type ValueItemProps = Value;
const ValueItem: React.StatelessComponent<ValueItemProps> = ({ iconSrc, text }) => {
return (
<Container marginBottom="25px">
<div className="flex items-center">
<Image className="flex-none pr2" width="20px" src={iconSrc} />
<div className="flex-auto">
<Text fontSize="14px" lineHeight="24px" fontWeight="bold">
{text}
</Text>
</div>
</div>
</Container>
);
};
|
