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 * 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 { ScreenWidths } from 'ts/types';
import { constants } from 'ts/utils/constants';
const BENEFITS = [
'Comprehensive insurance. Medical, dental, and vision coverage for you and your family.',
'Unlimited vacation. Three weeks per year minimum.',
'Flexible hours and liberal work-from-home-policy.',
'Relocation Assistance.',
'Whole team offsites and community / hackathon events (often international).',
'Monthly transportation and phone reimbursement.',
'Meals and snacks provided 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 sm-px3" backgroundColor={colors.white}>
{!isSmallScreen ? (
<Container className="flex" maxWidth="800px">
<BenefitsList />
<Container marginLeft="215px">
<ValuesList />
</Container>
</Container>
) : (
<Container className="flex-column">
<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 key={benefit} 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 ValuesList = () => {
return (
<Container maxWidth="360px">
<Header>Our Values</Header>
{_.map(VALUES, value => <ValueItem key={value.text} {...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>
);
};
|
