aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/pages/jobs/benefits.tsx84
-rw-r--r--packages/website/ts/pages/jobs/bulleted_item_list.tsx1
-rw-r--r--packages/website/ts/pages/jobs/jobs.tsx2
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} />