diff options
Diffstat (limited to 'packages/website/ts/pages/jobs/benefits.tsx')
| -rw-r--r-- | packages/website/ts/pages/jobs/benefits.tsx | 205 |
1 files changed, 127 insertions, 78 deletions
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index 006facc83..563b72e63 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,109 +1,158 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { FilledImage } from 'ts/components/ui/filled_image'; -import { HeaderItem } from 'ts/pages/jobs/list/header_item'; -import { ListItem } from 'ts/pages/jobs/list/list_item'; +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 { styled } from 'ts/style/theme'; import { ScreenWidths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; -const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png']; -const BENEFIT_ITEM_PROPS_LIST: BenefitItemProps[] = [ - { - bulletColor: '#6FCF97', - description: - 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', - }, - { - bulletColor: '#56CCF2', - description: - 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', - }, +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[] = [ { - bulletColor: '#EB5757', - description: - 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', + iconSrc: 'images/jobs/heart-icon.svg', + text: 'Do the right thing', }, { - bulletColor: '#6FCF97', - description: - 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', + iconSrc: 'images/jobs/ship-icon.svg', + text: 'Consistently ship', }, { - bulletColor: '#56CCF2', - description: - 'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci', + iconSrc: 'images/jobs/calendar-icon.svg', + text: 'Focus on long term impact', }, ]; -const LARGE_LAYOUT_HEIGHT = 937; -const LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT = 205; -const HEADER_TEXT = 'Benefits'; -const BENEFIT_ITEM_MIN_HEIGHT = 150; export interface BenefitsProps { screenWidth: ScreenWidths; } -export const Benefits = (props: BenefitsProps) => ( - <div style={{ backgroundColor: colors.jobsPageBackground }}> - {props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />} - </div> -); - -const LargeLayout = () => ( - <div className="flex" style={{ height: LARGE_LAYOUT_HEIGHT }}> - <div style={{ width: '43%', height: '100%' }}> - <ImageGrid /> - </div> - <div - className="pr4" - style={{ paddingLeft: LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT, width: '57%', height: '100%' }} - > - <BenefitsList /> - </div> - </div> -); +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 SmallLayout = () => ( - <div> - <FilledImage src={_.head(IMAGE_PATHS)} /> - <BenefitsList /> - </div> +const Header: React.StatelessComponent = ({ children }) => ( + <Container marginBottom="30px"> + <Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}> + {children} + </Text> + </Container> ); -export const BenefitsList = () => { +interface BenefitsListProps { + className?: string; +} +const PlainBenefitsList: React.StatelessComponent<BenefitsListProps> = ({ className }) => { return ( - <div> - <HeaderItem headerText={HEADER_TEXT} /> - {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => <BenefitItem {...valueItemProps} />)} - </div> + <Container className={className}> + <Header>Benefits</Header> + {_.map(BENEFITS, benefit => <BenefitItem key={benefit} description={benefit} />)} + </Container> ); }; +const BenefitsList = styled(PlainBenefitsList)` + transform: translateY(30px); +`; + interface BenefitItemProps { - bulletColor: string; description: string; } -const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ bulletColor, description }) => ( - <div style={{ minHeight: BENEFIT_ITEM_MIN_HEIGHT }}> - <ListItem bulletColor={bulletColor}> - <div style={{ fontSize: 16, lineHeight: 1.5 }}>{description}</div> - </ListItem> - </div> -); - -const ImageGrid = () => ( - <div style={{ width: '100%', height: '100%' }}> - <div className="flex" style={{ height: '67%' }}> - <FilledImage src={IMAGE_PATHS[0]} /> - </div> - <div className="clearfix" style={{ height: '33%' }}> - <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}> - <FilledImage src={IMAGE_PATHS[1]} /> - </div> - <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}> - <FilledImage src={IMAGE_PATHS[2]} /> +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> - </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> + ); +}; |