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/public/images/jobs/location1.png | Bin 0 -> 659608 bytes packages/website/public/images/jobs/location2.png | Bin 0 -> 223872 bytes packages/website/public/images/jobs/location3.png | Bin 0 -> 288733 bytes packages/website/public/images/jobs/map.png | Bin 0 -> 271102 bytes packages/website/public/images/jobs/office1.png | Bin 0 -> 482657 bytes packages/website/public/images/jobs/office2.png | Bin 0 -> 479918 bytes packages/website/public/images/jobs/office3.png | Bin 0 -> 480055 bytes packages/website/ts/components/redirecter.tsx | 9 --- packages/website/ts/containers/jobs.ts | 26 ++++++++ packages/website/ts/index.tsx | 6 +- 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 ++++++++++++++++++++++ 20 files changed, 455 insertions(+), 12 deletions(-) create mode 100644 packages/website/public/images/jobs/location1.png create mode 100644 packages/website/public/images/jobs/location2.png create mode 100644 packages/website/public/images/jobs/location3.png create mode 100644 packages/website/public/images/jobs/map.png create mode 100644 packages/website/public/images/jobs/office1.png create mode 100644 packages/website/public/images/jobs/office2.png create mode 100644 packages/website/public/images/jobs/office3.png delete mode 100644 packages/website/ts/components/redirecter.tsx create mode 100644 packages/website/ts/containers/jobs.ts 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') diff --git a/packages/website/public/images/jobs/location1.png b/packages/website/public/images/jobs/location1.png new file mode 100644 index 000000000..bfda47576 Binary files /dev/null and b/packages/website/public/images/jobs/location1.png differ diff --git a/packages/website/public/images/jobs/location2.png b/packages/website/public/images/jobs/location2.png new file mode 100644 index 000000000..c05f9403f Binary files /dev/null and b/packages/website/public/images/jobs/location2.png differ diff --git a/packages/website/public/images/jobs/location3.png b/packages/website/public/images/jobs/location3.png new file mode 100644 index 000000000..34b2e5380 Binary files /dev/null and b/packages/website/public/images/jobs/location3.png differ diff --git a/packages/website/public/images/jobs/map.png b/packages/website/public/images/jobs/map.png new file mode 100644 index 000000000..7b85ff66e Binary files /dev/null and b/packages/website/public/images/jobs/map.png differ diff --git a/packages/website/public/images/jobs/office1.png b/packages/website/public/images/jobs/office1.png new file mode 100644 index 000000000..f6e6d9163 Binary files /dev/null and b/packages/website/public/images/jobs/office1.png differ diff --git a/packages/website/public/images/jobs/office2.png b/packages/website/public/images/jobs/office2.png new file mode 100644 index 000000000..65f97dcad Binary files /dev/null and b/packages/website/public/images/jobs/office2.png differ diff --git a/packages/website/public/images/jobs/office3.png b/packages/website/public/images/jobs/office3.png new file mode 100644 index 000000000..1dfcb9c58 Binary files /dev/null and b/packages/website/public/images/jobs/office3.png differ diff --git a/packages/website/ts/components/redirecter.tsx b/packages/website/ts/components/redirecter.tsx deleted file mode 100644 index 477aecb77..000000000 --- a/packages/website/ts/components/redirecter.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { constants } from 'ts/utils/constants'; - -interface RedirecterProps { - location: string; -} - -export function Redirecter(_props: RedirecterProps): void { - window.location.href = constants.URL_ANGELLIST; -} diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts new file mode 100644 index 000000000..0f57c431d --- /dev/null +++ b/packages/website/ts/containers/jobs.ts @@ -0,0 +1,26 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { Jobs as JobsComponent, JobsProps } from 'ts/pages/jobs/jobs'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { Translate } from 'ts/utils/translate'; + +interface ConnectedState { + translate: Translate; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, ownProps: JobsProps): ConnectedState => ({ + translate: state.translate, +}); + +const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Jobs: React.ComponentClass = connect(mapStateToProps, mapDispatchToProps)(JobsComponent); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 719604c02..a8749d8bf 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -4,9 +4,10 @@ import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; import * as injectTapEventPlugin from 'react-tap-event-plugin'; -import { Redirecter } from 'ts/components/redirecter'; +import { createStore, Store as ReduxStore } from 'redux'; import { About } from 'ts/containers/about'; import { FAQ } from 'ts/containers/faq'; +import { Jobs } from 'ts/containers/jobs'; import { Landing } from 'ts/containers/landing'; import { NotFound } from 'ts/containers/not_found'; import { Wiki } from 'ts/containers/wiki'; @@ -86,8 +87,7 @@ render( - - + 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