diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-06-11 11:45:18 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-06-13 01:41:08 +0800 |
commit | 3c073bc360f88129bd59e7e3d0d7fbcf69828da4 (patch) | |
tree | 9574a5331f176db9326fa05a875e9c340a4b2a37 /packages | |
parent | c52d5e108434f857f79926723732522ee38f6a91 (diff) | |
download | dexon-0x-contracts-3c073bc360f88129bd59e7e3d0d7fbcf69828da4.tar dexon-0x-contracts-3c073bc360f88129bd59e7e3d0d7fbcf69828da4.tar.gz dexon-0x-contracts-3c073bc360f88129bd59e7e3d0d7fbcf69828da4.tar.bz2 dexon-0x-contracts-3c073bc360f88129bd59e7e3d0d7fbcf69828da4.tar.lz dexon-0x-contracts-3c073bc360f88129bd59e7e3d0d7fbcf69828da4.tar.xz dexon-0x-contracts-3c073bc360f88129bd59e7e3d0d7fbcf69828da4.tar.zst dexon-0x-contracts-3c073bc360f88129bd59e7e3d0d7fbcf69828da4.zip |
Benefits section
Diffstat (limited to 'packages')
-rw-r--r-- | packages/website/ts/pages/jobs/benefits.tsx | 84 | ||||
-rw-r--r-- | packages/website/ts/pages/jobs/bulleted_item_list.tsx | 1 | ||||
-rw-r--r-- | packages/website/ts/pages/jobs/jobs.tsx | 2 |
3 files changed, 75 insertions, 12 deletions
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index fa4edb240..03a906a10 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,22 +1,84 @@ +import * as _ from 'lodash'; import * as React from 'react'; +import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; +import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list'; import { FilledImage } from 'ts/pages/jobs/filled_image'; +import { FloatingImage } from 'ts/pages/jobs/floating_image'; +import { colors } from 'ts/style/colors'; +import { ScreenWidths } from 'ts/types'; -export const Benefits = () => ( +const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png']; +const BULLETED_ITEMS: BulletedItemProps[] = [ + { + bulletColor: '#6FCF97', + title: 'Ethics/Doing the right thing', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + }, + { + bulletColor: '#56CCF2', + title: 'Consistently ship', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + }, + { + bulletColor: '#EB5757', + title: 'Focus on long term impact', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + }, + { + bulletColor: '#6FCF97', + title: 'Test test yo', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + }, + { + bulletColor: '#56CCF2', + title: 'Waddle Waddle', + description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + }, +]; + +export interface BenefitsProps { + screenWidth: ScreenWidths; +} + +export const Benefits = (props: BenefitsProps) => ( + <div style={{ backgroundColor: colors.jobsPageGrey }}> + {props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />} + </div> +); + +const LargeLayout = () => ( <div className="flex" style={{ height: 937 }}> <div style={{ width: '43%', height: '100%' }}> - <div className="flex" style={{ height: '67%' }}> - <FilledImage src="/images/jobs/location1.png" /> + <ImageGrid /> + </div> + <div style={{ paddingLeft: 205, width: '57%', height: '100%' }}> + <BenefitsList /> + </div> + </div> +); + +const SmallLayout = () => ( + <div> + <FloatingImage src={_.head(IMAGE_PATHS)} /> + <BenefitsList /> + </div> +); + +const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItems={BULLETED_ITEMS} />; + +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="clearfix" style={{ height: '33%' }}> - <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}> - <FilledImage src="/images/jobs/location2.png" /> - </div> - <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}> - <FilledImage src="/images/jobs/location3.png" /> - </div> + <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}> + <FilledImage src={IMAGE_PATHS[2]} /> </div> </div> - <div style={{ width: '57%', height: '100%' }} /> </div> ); diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx index 108f31e00..30dd126d1 100644 --- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx +++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx @@ -18,6 +18,7 @@ export const BulletedItemList = (props: BulletedItemListProps) => { {_.map(props.bulletedItems, bulletedItemProps => { return ( <BulletedItem + key={bulletedItemProps.title} bulletColor={bulletedItemProps.bulletColor} title={bulletedItemProps.title} description={bulletedItemProps.description} diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index 70a11c8a4..9cce594fc 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -61,7 +61,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> { <PhotoRail images={PHOTO_RAIL_IMAGES} /> )} <Values /> - <Benefits /> + <Benefits screenWidth={this.props.screenWidth} /> <Teams /> <OpenPositions hash={OPEN_POSITIONS_HASH} /> <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> |