diff options
Diffstat (limited to 'packages/website')
20 files changed, 455 insertions, 12 deletions
diff --git a/packages/website/public/images/jobs/location1.png b/packages/website/public/images/jobs/location1.png Binary files differnew file mode 100644 index 000000000..bfda47576 --- /dev/null +++ b/packages/website/public/images/jobs/location1.png diff --git a/packages/website/public/images/jobs/location2.png b/packages/website/public/images/jobs/location2.png Binary files differnew file mode 100644 index 000000000..c05f9403f --- /dev/null +++ b/packages/website/public/images/jobs/location2.png diff --git a/packages/website/public/images/jobs/location3.png b/packages/website/public/images/jobs/location3.png Binary files differnew file mode 100644 index 000000000..34b2e5380 --- /dev/null +++ b/packages/website/public/images/jobs/location3.png diff --git a/packages/website/public/images/jobs/map.png b/packages/website/public/images/jobs/map.png Binary files differnew file mode 100644 index 000000000..7b85ff66e --- /dev/null +++ b/packages/website/public/images/jobs/map.png diff --git a/packages/website/public/images/jobs/office1.png b/packages/website/public/images/jobs/office1.png Binary files differnew file mode 100644 index 000000000..f6e6d9163 --- /dev/null +++ b/packages/website/public/images/jobs/office1.png diff --git a/packages/website/public/images/jobs/office2.png b/packages/website/public/images/jobs/office2.png Binary files differnew file mode 100644 index 000000000..65f97dcad --- /dev/null +++ b/packages/website/public/images/jobs/office2.png diff --git a/packages/website/public/images/jobs/office3.png b/packages/website/public/images/jobs/office3.png Binary files differnew file mode 100644 index 000000000..1dfcb9c58 --- /dev/null +++ b/packages/website/public/images/jobs/office3.png 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<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Jobs: React.ComponentClass<JobsProps> = 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( <Switch> <Route exact={true} path="/" component={Landing as any} /> <Redirect from="/otc" to={`${WebsitePaths.Portal}`} /> - - <Route path={WebsitePaths.Jobs} component={Redirecter as any} /> + <Route path={WebsitePaths.Jobs} component={Jobs as any} /> <Route path={WebsitePaths.Portal} component={LazyPortal} /> <Route path={WebsitePaths.FAQ} component={FAQ as any} /> <Route path={WebsitePaths.About} component={About as any} /> 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 = () => ( + <div className="flex" style={{ height: 937 }}> + <div style={{ width: '43%', height: '100%' }}> + <div className="flex" style={{ height: '67%' }}> + <FilledImage src="/images/jobs/location1.png" /> + </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> + </div> + <div style={{ width: '57%', height: '100%' }} /> + </div> +); 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 ( + <div className="flex" style={{ height }}> + <svg className="flex-none px2" height="26" width="26"> + <circle cx="13" cy="13" r="13" fill={props.bulletColor} /> + </svg> + <div className="flex-auto px2"> + <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div> + <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div> + </div> + </div> + ); +}; 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) => ( + <div + style={{ + width: '100%', + height: '100%', + objectFit: 'cover', + backgroundImage: `url(${props.src})`, + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + backgroundSize: 'cover', + }} + /> +); 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<JobsProps> = props => { + return ( + <div> + <DocumentTitle title="Jobs" /> + <TopBar + blockchainIsLoaded={false} + location={props.location} + style={{ backgroundColor: colors.white, position: 'relative' }} + translate={props.translate} + /> + <Join0x /> + <Mission /> + <PhotoRail /> + <Values /> + <Benefits /> + <Teams /> + <OpenPositions /> + <Footer translate={props.translate} dispatcher={props.dispatcher} /> + </div> + ); +}; 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 = () => ( + <div className="clearfix center py4" style={{ backgroundColor: colors.white, color: colors.black }}> + <div className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center' }}> + <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}> + Join 0x + </div> + <div + className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h4 sm-center" + style={{ fontFamily: 'Roboto', lineHeight: 2, maxWidth: 537 }} + > + 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. + </div> + <div className="py3"> + <FlatButton + label={'view open positions'} + backgroundColor={colors.black} + labelStyle={{ + fontSize: 18, + fontFamily: 'Roboto Mono', + fontWeight: 'lighter', + color: colors.white, + textTransform: 'lowercase', + }} + style={{ width: 280, height: 62, borderRadius: 5 }} + /> + </div> + </div> + </div> +); 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 ( + <div className="container lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.grey100 }}> + <div className="mx-auto clearfix"> + {!isSmallScreen && <WorldImage />} + <div + className="col lg-col-6 md-col-6 col-12 center" + style={{ color: colors.darkestGrey, height: 364, lineHeight: '364px' }} + > + <div + className="mx-auto inline-block lg-align-middle md-align-middle sm-align-top" + style={{ maxWidth: 385, lineHeight: '44px', textAlign: 'center' }} + > + <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}> + Our Mission + </div> + <div + className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h4 sm-center" + style={{ fontFamily: 'Roboto', lineHeight: 2, maxWidth: 537 }} + > + We believe a system can exist in which all world value is accessible to anyone, anywhere, + regardless of where you happen to be born. + </div> + </div> + </div> + </div> + </div> + ); +}; + +const WorldImage = () => { + const isSmallScreen = false; + return ( + <div className="col lg-col-6 md-col-6 col-12 center"> + <img src="/images/jobs/map.png" height={isSmallScreen ? 280 : 364.5} /> + </div> + ); +}; 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 ( + <div className="py4" style={{ paddingLeft: 200, paddingRight: 200 }}> + <Table selectable={false}> + <TableHeader displaySelectAll={false} adjustForCheckbox={false}> + <TableRow> + <TableHeaderColumn colSpan={6} style={labelStyle}> + Position + </TableHeaderColumn> + <TableHeaderColumn colSpan={3} style={labelStyle}> + Department + </TableHeaderColumn> + <TableHeaderColumn colSpan={3} style={labelStyle}> + Office + </TableHeaderColumn> + </TableRow> + </TableHeader> + <TableBody displayRowCheckbox={false} showRowHover={true}> + {_.map(POSITIONS, position => { + return ( + <TableRow hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}> + <TableRowColumn colSpan={6} style={labelStyle}> + {position.name} + </TableRowColumn> + <TableRowColumn colSpan={3} style={labelStyle}> + {position.department} + </TableRowColumn> + <TableRowColumn colSpan={3} style={labelStyle}> + {position.office} + </TableRowColumn> + </TableRow> + ); + })} + </TableBody> + </Table> + </div> + ); +}; 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 ( + <div className="clearfix" style={{ height: 491 }}> + {_.map(images, (image: string) => { + return ( + <div key={image} className="col lg-col-4 md-col-4 col-12 center" style={{ height: '100%' }}> + <FilledImage src={image} /> + </div> + ); + })} + </div> + ); +}; 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 ( + <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.white }}> + <div className="mx-auto max-width-4 clearfix"> + <div className="col lg-col-6 md-col-6 col-12 p2"> + {_.map(ITEMS_COLUMN1, bulletedItemProps => { + return ( + <BulletedItem + bulletColor={bulletedItemProps.bulletColor} + title={bulletedItemProps.title} + description={bulletedItemProps.description} + height={teamHeight} + /> + ); + })} + </div> + <div className="col lg-col-6 md-col-6 col-12 p2"> + {_.map(ITEMS_COLUMN2, bulletedItemProps => { + return ( + <BulletedItem + bulletColor={bulletedItemProps.bulletColor} + title={bulletedItemProps.title} + description={bulletedItemProps.description} + height={teamHeight} + /> + ); + })} + </div> + </div> + </div> + ); +}; 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 ( + <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.white }}> + <div className="mx-auto max-width-4 clearfix"> + <div className="col lg-col-6 md-col-6 col-12 p2"> + {_.map(ITEMS_COLUMN1, bulletedItemProps => { + return ( + <BulletedItem + bulletColor={bulletedItemProps.bulletColor} + title={bulletedItemProps.title} + description={bulletedItemProps.description} + /> + ); + })} + </div> + <div className="col lg-col-6 md-col-6 col-12 p2"> + {_.map(ITEMS_COLUMN2, bulletedItemProps => { + return ( + <BulletedItem + bulletColor={bulletedItemProps.bulletColor} + title={bulletedItemProps.title} + description={bulletedItemProps.description} + /> + ); + })} + </div> + </div> + </div> + ); +}; |
