Add link to open positions section

3 files changed, 20 insertions, 6 deletions

diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index c7c667da1..466926af0 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, utils as sharedUtils } from '@0xproject/react-shared';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 
@@ -23,6 +23,8 @@ export interface JobsProps {
 
 export interface JobsState {}
 
+const OPEN_POSITIONS_HASH = 'positions';
+
 export class Jobs extends React.Component<JobsProps, JobsState> {
     public componentDidMount(): void {
         window.scrollTo(0, 0);
@@ -37,15 +39,18 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                     style={{ backgroundColor: colors.white, position: 'relative' }}
                     translate={this.props.translate}
                 />
-                <Join0x />
+                <Join0x onCallToActionClick={this._onJoin0xCallToActionClick.bind(this)} />
                 <Mission />
                 <PhotoRail />
                 <Values />
                 <Benefits />
                 <Teams />
-                <OpenPositions />
+                <OpenPositions hash={OPEN_POSITIONS_HASH} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
         );
     }
+    private _onJoin0xCallToActionClick(): void {
+        sharedUtils.setUrlHash(OPEN_POSITIONS_HASH);
+    }
 }
diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx
index f4dbf31a3..fb811cbc4 100644
--- a/packages/website/ts/pages/jobs/join_0x.tsx
+++ b/packages/website/ts/pages/jobs/join_0x.tsx
@@ -3,7 +3,11 @@ import { colors } from '@0xproject/react-shared';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
 
-export const Join0x = () => (
+export interface Join0xProps {
+    onCallToActionClick: () => void;
+}
+
+export const Join0x = (props: Join0xProps) => (
     <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' }}>
@@ -28,6 +32,7 @@ export const Join0x = () => (
                         textTransform: 'lowercase',
                     }}
                     style={{ width: 280, height: 62, borderRadius: 5 }}
+                    onClick={props.onCallToActionClick}
                 />
             </div>
         </div>
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index e79bc920b..f9c37d36f 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -35,10 +35,14 @@ const POSITIONS = [
     },
 ];
 
-export const OpenPositions = () => {
+export interface OpenPositionsProps {
+    hash: string;
+}
+
+export const OpenPositions = (props: OpenPositionsProps) => {
     const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
     return (
-        <div className="py4" style={{ paddingLeft: 200, paddingRight: 200 }}>
+        <div id={props.hash} className="py4" style={{ paddingLeft: 200, paddingRight: 200 }}>
             <Table selectable={false}>
                 <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
                     <TableRow>