diff options
Diffstat (limited to 'packages/website/ts/pages/jobs/benefits.tsx')
-rw-r--r-- | packages/website/ts/pages/jobs/benefits.tsx | 59 |
1 files changed, 42 insertions, 17 deletions
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index 87412ed22..863423285 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -6,17 +6,21 @@ 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 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.', + '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 { @@ -45,11 +49,11 @@ export interface BenefitsProps { 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}> + <Container className="flex flex-column items-center py4 px3" backgroundColor={colors.white}> {!isSmallScreen ? ( - <Container className="flex" maxWidth="800px"> + <Container className="flex" maxWidth="1200px"> <BenefitsList /> - <Container marginLeft="215px"> + <Container marginLeft="120px"> <ValuesList /> </Container> </Container> @@ -73,14 +77,21 @@ const Header: React.StatelessComponent = ({ children }) => ( </Container> ); -const BenefitsList = () => { +interface BenefitsListProps { + className?: string; +} +const PlainBenefitsList: React.StatelessComponent<BenefitsListProps> = ({ className }) => { return ( - <Container maxWidth="360px"> + <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; } @@ -98,25 +109,39 @@ const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ description } </Container> ); -const ValuesList = () => { +interface ValuesListProps { + className?: string; +} +const PlainValuesList: React.StatelessComponent<ValuesListProps> = ({ className }) => { return ( - <Container maxWidth="360px"> + <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 mission and encourage you to{' '} + We care deeply about our culture and values, and encourage you to{' '} <a - style={{ color: colors.mediumBlue }} + style={{ color: colors.mediumBlue, textDecoration: 'none' }} target="_blank" href={constants.URL_MISSION_AND_VALUES_BLOG_POST} > - read more here + 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 ( |