From 3d76d83a39ca61641f3efd7ed5cc6f7a214835ca Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 1 May 2018 10:17:27 -0700 Subject: Skeleton for jobs page and initial implementation --- packages/website/ts/pages/jobs/benefits.tsx | 22 +++++++ packages/website/ts/pages/jobs/bulleted_item.tsx | 22 +++++++ packages/website/ts/pages/jobs/filled_image.tsx | 18 ++++++ packages/website/ts/pages/jobs/jobs.tsx | 44 +++++++++++++ packages/website/ts/pages/jobs/join_0x.tsx | 35 ++++++++++ packages/website/ts/pages/jobs/mission.tsx | 43 +++++++++++++ packages/website/ts/pages/jobs/open_positions.tsx | 76 ++++++++++++++++++++++ packages/website/ts/pages/jobs/photo_rail.tsx | 19 ++++++ packages/website/ts/pages/jobs/teams.tsx | 69 ++++++++++++++++++++ packages/website/ts/pages/jobs/values.tsx | 78 +++++++++++++++++++++++ 10 files changed, 426 insertions(+) create mode 100644 packages/website/ts/pages/jobs/benefits.tsx create mode 100644 packages/website/ts/pages/jobs/bulleted_item.tsx create mode 100644 packages/website/ts/pages/jobs/filled_image.tsx create mode 100644 packages/website/ts/pages/jobs/jobs.tsx create mode 100644 packages/website/ts/pages/jobs/join_0x.tsx create mode 100644 packages/website/ts/pages/jobs/mission.tsx create mode 100644 packages/website/ts/pages/jobs/open_positions.tsx create mode 100644 packages/website/ts/pages/jobs/photo_rail.tsx create mode 100644 packages/website/ts/pages/jobs/teams.tsx create mode 100644 packages/website/ts/pages/jobs/values.tsx (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx new file mode 100644 index 000000000..fa4edb240 --- /dev/null +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; + +import { FilledImage } from 'ts/pages/jobs/filled_image'; + +export const Benefits = () => ( +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+); diff --git a/packages/website/ts/pages/jobs/bulleted_item.tsx b/packages/website/ts/pages/jobs/bulleted_item.tsx new file mode 100644 index 000000000..ae7385b90 --- /dev/null +++ b/packages/website/ts/pages/jobs/bulleted_item.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; + +export interface BulletedItemProps { + bulletColor: string; + title: string; + description: string; + height?: number; +} +export const BulletedItem = (props: BulletedItemProps) => { + const height = props.height || 150; + return ( +
+ + + +
+
{props.title}
+
{props.description}
+
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/filled_image.tsx b/packages/website/ts/pages/jobs/filled_image.tsx new file mode 100644 index 000000000..7f58ee5b9 --- /dev/null +++ b/packages/website/ts/pages/jobs/filled_image.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +export interface FilledImageProps { + src: string; +} +export const FilledImage = (props: FilledImageProps) => ( +
+); diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx new file mode 100644 index 000000000..e49b40a2f --- /dev/null +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -0,0 +1,44 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import * as DocumentTitle from 'react-document-title'; + +import { Footer } from 'ts/components/footer'; +import { TopBar } from 'ts/components/top_bar/top_bar'; +import { Benefits } from 'ts/pages/jobs/benefits'; +import { Join0x } from 'ts/pages/jobs/join_0x'; +import { Mission } from 'ts/pages/jobs/mission'; +import { OpenPositions } from 'ts/pages/jobs/open_positions'; +import { PhotoRail } from 'ts/pages/jobs/photo_rail'; +import { Teams } from 'ts/pages/jobs/teams'; +import { Values } from 'ts/pages/jobs/values'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +export interface JobsProps { + location: Location; + translate: Translate; + dispatcher: Dispatcher; +} + +export const Jobs: React.StatelessComponent = props => { + return ( +
+ + + + + + + + + +
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx new file mode 100644 index 000000000..f4dbf31a3 --- /dev/null +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -0,0 +1,35 @@ +import { colors } from '@0xproject/react-shared'; + +import FlatButton from 'material-ui/FlatButton'; +import * as React from 'react'; + +export const Join0x = () => ( +
+
+
+ Join 0x +
+
+ 0x is transforming the way that value is exchanged on a global scale. Come join us in San Francisco or + work remotely anywhere in the world to help create the infrastructure of a new tokenized economy. +
+
+ +
+
+
+); diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx new file mode 100644 index 000000000..a1d0dc927 --- /dev/null +++ b/packages/website/ts/pages/jobs/mission.tsx @@ -0,0 +1,43 @@ +import { colors } from '@0xproject/react-shared'; + +import * as React from 'react'; + +export const Mission = () => { + const isSmallScreen = false; + return ( +
+
+ {!isSmallScreen && } +
+
+
+ Our Mission +
+
+ We believe a system can exist in which all world value is accessible to anyone, anywhere, + regardless of where you happen to be born. +
+
+
+
+
+ ); +}; + +const WorldImage = () => { + const isSmallScreen = false; + return ( +
+ +
+ ); +}; diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx new file mode 100644 index 000000000..e79bc920b --- /dev/null +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -0,0 +1,76 @@ +import * as _ from 'lodash'; +import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; +import * as React from 'react'; + +const POSITIONS = [ + { + name: 'Community Director', + department: 'Marketing', + office: 'Remote / San Francisco', + }, + { + name: 'Data Scientist / Data Engineer', + department: 'Engineering', + office: 'Remote / San Francisco', + }, + { + name: 'Executive Assitant / Office Manager', + department: 'Operations', + office: 'Remote / San Francisco', + }, + { + name: 'Research Fellow - Economics / Governance', + department: 'Engineering', + office: 'Remote / San Francisco', + }, + { + name: 'Software Engineer - Blockchain', + department: 'Engineer', + office: 'Remote / San Francisco', + }, + { + name: 'Software Engineer - Full-stack', + department: 'Marketing', + office: 'Remote / San Francisco', + }, +]; + +export const OpenPositions = () => { + const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; + return ( +
+ + + + + Position + + + Department + + + Office + + + + + {_.map(POSITIONS, position => { + return ( + + + {position.name} + + + {position.department} + + + {position.office} + + + ); + })} + +
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx new file mode 100644 index 000000000..a5ccfb25f --- /dev/null +++ b/packages/website/ts/pages/jobs/photo_rail.tsx @@ -0,0 +1,19 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { FilledImage } from 'ts/pages/jobs/filled_image'; + +export const PhotoRail = () => { + const images = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png']; + return ( +
+ {_.map(images, (image: string) => { + return ( +
+ +
+ ); + })} +
+ ); +}; diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx new file mode 100644 index 000000000..b00170877 --- /dev/null +++ b/packages/website/ts/pages/jobs/teams.tsx @@ -0,0 +1,69 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; + +const ITEMS_COLUMN1: BulletedItemProps[] = [ + { + bulletColor: '#EB5757', + title: 'User Growth', + 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: '#EB5757', + title: 'Governance', + 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 ITEMS_COLUMN2: BulletedItemProps[] = [ + { + bulletColor: '#EB5757', + title: 'Developer Tools', + 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: '#EB5757', + title: 'Marketing', + 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', + }, +]; + +export const Teams = () => { + const isSmallScreen = false; + const teamHeight = 220; + return ( +
+
+
+ {_.map(ITEMS_COLUMN1, bulletedItemProps => { + return ( + + ); + })} +
+
+ {_.map(ITEMS_COLUMN2, bulletedItemProps => { + return ( + + ); + })} +
+
+
+ ); +}; diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx new file mode 100644 index 000000000..805400583 --- /dev/null +++ b/packages/website/ts/pages/jobs/values.tsx @@ -0,0 +1,78 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item'; + +const ITEMS_COLUMN1: BulletedItemProps[] = [ + { + bulletColor: '#6FCF97', + title: 'Ethics/Doing the right thing', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, + { + bulletColor: '#56CCF2', + title: 'Clear communication', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, + { + bulletColor: '#EB5757', + title: 'Grow the whole pie', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, +]; +const ITEMS_COLUMN2: BulletedItemProps[] = [ + { + bulletColor: '#F2994A', + title: 'Crypto-Economic Technology', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, + { + bulletColor: '#E0E0E0', + title: 'Transparency', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, + { + bulletColor: '#F2C94C', + title: 'Positive Energy', + description: + 'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.', + }, +]; + +export const Values = () => { + const isSmallScreen = false; + return ( +
+
+
+ {_.map(ITEMS_COLUMN1, bulletedItemProps => { + return ( + + ); + })} +
+
+ {_.map(ITEMS_COLUMN2, bulletedItemProps => { + return ( + + ); + })} +
+
+
+ ); +}; -- cgit v1.2.3