Skeleton for jobs page and initial implementation

22 files changed, 457 insertions, 12 deletions

diff --git a/packages/order-utils/order-utils b/packages/order-utils/order-utils
new file mode 120000
index 000000000..f27c264ed
--- /dev/null
+++ b/packages/order-utils/order-utils
@@ -0,0 +1 @@
+/Users/bmillman/workspace/0x-monorepo/packages/order-utils
\ No newline at end of file
diff --git a/packages/types/types b/packages/types/types
new file mode 120000
index 000000000..69f5a8cce
--- /dev/null
+++ b/packages/types/types
@@ -0,0 +1 @@
+/Users/bmillman/workspace/0x-monorepo/packages/types
\ No newline at end of file
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
--- /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
new 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
new 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
new 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
new 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
new 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
new 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>
+    );
+};