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
|
import * as _ from 'lodash';
import * as React from 'react';
import { Circle } from 'ts/components/ui/circle';
import { Container } from 'ts/components/ui/container';
import { FilledImage } from 'ts/components/ui/filled_image';
import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/Text';
import { colors } from 'ts/style/colors';
import { ScreenWidths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
const BENEFITS = [
'Comprehensive insurance. Medical, dental, and vision coverage for you and your family.',
'Unlimited vacation. Three weeks per year minimum.',
'Flexible hours and libteral work-from-home-policy.',
'Relocation Assistance.',
'Whole team offsites and community / hackathon events (often international).',
'Monthly transportation and phone reimbursement.',
'Meals and snacks prvided in-office daily',
];
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" backgroundColor={colors.white}>
{!isSmallScreen ? (
<Container className="flex" maxWidth="800px">
<BenefitsList />
<Container marginLeft="200px">
<ValuesList />
</Container>
</Container>
) : (
<Container className="flex-column pl3">
<BenefitsList />
<Container marginTop="50px">
<ValuesList />
</Container>
</Container>
)}
</Container>
);
};
const Header: React.StatelessComponent = ({ children }) => (
<Container marginBottom="51px">
<Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}>
{children}
</Text>
</Container>
);
const BenefitsList = () => {
return (
<Container maxWidth="360px">
<Header>Benefits</Header>
{_.map(BENEFITS, benefit => <BenefitItem description={benefit} />)}
</Container>
);
};
interface BenefitItemProps {
description: string;
}
const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ description }) => (
<Container marginBottom="30px">
<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>
);
const openMissionAndValuesBlogPost = () => {
utils.openUrl(constants.URL_MISSION_AND_VALUES_BLOG_POST);
};
const ValuesList = () => {
return (
<Container maxWidth="360px">
<Header>Our Values</Header>
{_.map(VALUES, value => <ValueItem {...value} />)}
<Text fontSize="14px" lineHeight="26px">
We care deeply about our mission and encourage you to{' '}
<a
style={{ color: colors.mediumBlue }}
target="_blank"
href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
>
read more here
</a>.
</Text>
</Container>
);
};
type ValueItemProps = Value;
const ValueItem: React.StatelessComponent<ValueItemProps> = ({ iconSrc, text }) => {
return (
<Container marginBottom="45px">
<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>
);
};
|
