Begin implementing doc home page

13 files changed, 231 insertions, 5 deletions

diff --git a/packages/website/public/images/docs_logo.svg b/packages/website/public/images/docs_logo.svg
new file mode 100644
index 000000000..e3c4b628b
--- /dev/null
+++ b/packages/website/public/images/docs_logo.svg
@@ -0,0 +1,24 @@
+<svg width="278" height="72" viewBox="0 0 278 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="139" height="35.9999" fill="black" fill-opacity="0" transform="scale(2)"/>
+<rect width="74.0872" height="35.9999" fill="black" fill-opacity="0" transform="scale(2)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M115.234 33.6875L105.219 40.5522C105.477 44.3244 107.146 46.2101 110.226 46.2101C113.565 46.2101 115.234 43.9618 115.234 39.4642V33.6875ZM105.176 36.8338L115.191 29.9691C115.076 28.0041 114.607 26.5499 113.783 25.6069C112.959 24.6642 111.759 24.1924 110.183 24.1924C108.507 24.1924 107.253 24.7398 106.422 25.8345C105.591 26.9293 105.176 28.6109 105.176 30.8789V36.8338ZM120.394 38.6336C120.394 40.4934 120.16 42.1322 119.695 43.5498C119.229 44.9677 118.559 46.1546 117.686 47.1106C116.812 48.067 115.744 48.7892 114.483 49.277C113.222 49.7647 111.804 50.0089 110.228 50.0089C108.666 50.0089 107.255 49.7647 105.994 49.277C104.733 48.7892 103.662 48.067 102.781 47.1106C101.9 46.1546 101.22 44.9677 100.74 43.5498C100.259 42.1322 100.02 40.4934 100.02 38.6336V31.7491C100.02 29.8895 100.256 28.2511 100.729 26.8332C101.202 25.4156 101.879 24.2285 102.76 23.2721C103.641 22.3161 104.708 21.5941 105.962 21.1059C107.215 20.6182 108.623 20.374 110.185 20.374C111.761 20.374 113.179 20.6182 114.44 21.1059C115.701 21.5941 116.772 22.3161 117.653 23.2721C118.535 24.2285 119.212 25.4156 119.684 26.8332C120.157 28.2511 120.394 29.8895 120.394 31.7491V38.6336Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M137.01 35.3006L142.385 27.7822H147.925L139.968 38.7311L148.175 50.0084H142.655L137.073 42.2232L131.511 50.0084H125.949L134.156 38.7311L126.199 27.7822H131.719L137.01 35.3006Z" fill="black"/>
+<rect width="36" height="35.9999" fill="black" fill-opacity="0" transform="scale(2)"/>
+<rect width="22.5701" height="11.8348" fill="black" fill-opacity="0" transform="translate(18.0508 48.3301) scale(2)"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="18" y="48" width="46" height="24">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0508 71.9997H63.191V48.3301H18.0508V71.9997Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0508 67.1184C22.6601 69.8386 27.9385 71.5522 33.6161 71.9239C41.4577 72.4369 48.8759 70.3221 55.038 66.3361C58.1021 64.354 60.8534 61.9089 63.191 59.0905C61.2524 56.3622 59.1896 53.547 57.0111 50.6788L55.2311 48.3301C52.8884 52.0707 49.5201 55.0686 45.5555 56.9441L39.4742 50.9207L18.0508 67.1184Z" fill="black"/>
+</g>
+<rect width="11.6916" height="22.7346" fill="black" fill-opacity="0" transform="translate(0 18.6299) scale(2)"/>
+<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="18" width="24" height="47">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 18.6299V64.099H23.3833V18.6299L0 18.6299Z" fill="white"/>
+</mask>
+<g mask="url(#mask1)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.72039 18.6299C2.09283 23.2496 0.437543 28.5247 0.0749777 34.193C-0.432648 42.134 1.66198 49.6455 5.60982 55.8826C7.56303 58.9691 9.97065 61.7416 12.7445 64.099C15.4422 62.1375 18.2268 60.0505 21.0641 57.847L23.3833 56.0501C19.6922 53.6805 16.7332 50.2769 14.8817 46.271L20.8743 40.0586L4.72039 18.6299Z" fill="black"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54.0006 4.9803C49.4018 2.20541 44.1346 0.455949 38.4679 0.0772542C30.6434 -0.445638 23.2417 1.71125 17.096 5.77624C14.0546 7.78768 11.3231 10.2669 9 13.123C10.9328 15.9011 12.9892 18.7682 15.1602 21.69L16.9306 24.0783C19.2665 20.2759 22.622 17.2279 26.5714 15.3216L26.5759 15.3196L32.2882 21.07L54.0006 4.9803Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.3574 53.7131C69.9376 49.2175 71.5681 44.0992 71.9269 38.5992C72.4342 30.8203 70.3437 23.4613 66.4027 17.3486C64.4432 14.3092 62.0259 11.58 59.2397 9.26074C56.5427 11.1839 53.7595 13.2301 50.9238 15.3915L48.6016 17.1569C52.3061 19.4848 55.2749 22.8335 57.1283 26.7755L57.1639 26.8575L51.3951 32.7948L67.3574 53.7131Z" fill="black"/>
+<path d="M164.041 38.1836C164.041 34.6172 164.886 31.7526 166.576 29.5898C168.266 27.4128 170.479 26.3242 173.215 26.3242C175.936 26.3242 178.092 27.2552 179.682 29.1172V17H183.656V50H180.004L179.811 47.5078C178.221 49.4557 176.008 50.4297 173.172 50.4297C170.479 50.4297 168.281 49.3268 166.576 47.1211C164.886 44.9154 164.041 42.0365 164.041 38.4844V38.1836ZM168.016 38.6348C168.016 41.2702 168.56 43.3327 169.648 44.8223C170.737 46.3118 172.241 47.0566 174.16 47.0566C176.681 47.0566 178.521 45.9251 179.682 43.6621V32.9844C178.493 30.793 176.667 29.6973 174.203 29.6973C172.255 29.6973 170.737 30.4492 169.648 31.9531C168.56 33.457 168.016 35.6842 168.016 38.6348ZM188.791 38.1621C188.791 35.8848 189.235 33.8366 190.123 32.0176C191.025 30.1986 192.271 28.7949 193.861 27.8066C195.465 26.8184 197.292 26.3242 199.34 26.3242C202.505 26.3242 205.062 27.4199 207.01 29.6113C208.972 31.8027 209.953 34.7174 209.953 38.3555V38.6348C209.953 40.8978 209.516 42.9316 208.643 44.7363C207.783 46.5267 206.544 47.9232 204.926 48.9258C203.322 49.9284 201.474 50.4297 199.383 50.4297C196.232 50.4297 193.675 49.334 191.713 47.1426C189.765 44.9512 188.791 42.0508 188.791 38.4414V38.1621ZM192.787 38.6348C192.787 41.2129 193.382 43.2826 194.57 44.8438C195.773 46.4049 197.378 47.1855 199.383 47.1855C201.402 47.1855 203.007 46.3978 204.195 44.8223C205.384 43.2324 205.979 41.0124 205.979 38.1621C205.979 35.6126 205.37 33.5501 204.152 31.9746C202.949 30.3848 201.345 29.5898 199.34 29.5898C197.378 29.5898 195.795 30.3704 194.592 31.9316C193.389 33.4928 192.787 35.7272 192.787 38.6348ZM224.262 47.1855C225.68 47.1855 226.919 46.7559 227.979 45.8965C229.038 45.0371 229.626 43.9629 229.74 42.6738H233.5C233.428 44.0059 232.97 45.2734 232.125 46.4766C231.28 47.6797 230.148 48.6393 228.73 49.3555C227.327 50.0716 225.837 50.4297 224.262 50.4297C221.096 50.4297 218.576 49.377 216.699 47.2715C214.837 45.1517 213.906 42.2585 213.906 38.5918V37.9258C213.906 35.6628 214.322 33.6504 215.152 31.8887C215.983 30.127 217.172 28.7591 218.719 27.7852C220.28 26.8112 222.12 26.3242 224.24 26.3242C226.847 26.3242 229.01 27.1048 230.729 28.666C232.462 30.2272 233.385 32.2539 233.5 34.7461H229.74C229.626 33.2422 229.053 32.0104 228.021 31.0508C227.005 30.0768 225.744 29.5898 224.24 29.5898C222.221 29.5898 220.652 30.3203 219.535 31.7812C218.432 33.2279 217.881 35.3262 217.881 38.0762V38.8281C217.881 41.5065 218.432 43.569 219.535 45.0156C220.638 46.4622 222.214 47.1855 224.262 47.1855ZM251.504 43.834C251.504 42.7598 251.096 41.929 250.279 41.3418C249.477 40.7402 248.066 40.2246 246.047 39.7949C244.042 39.3652 242.445 38.8496 241.256 38.248C240.081 37.6465 239.208 36.9303 238.635 36.0996C238.076 35.2689 237.797 34.2806 237.797 33.1348C237.797 31.2298 238.599 29.6185 240.203 28.3008C241.822 26.9831 243.884 26.3242 246.391 26.3242C249.026 26.3242 251.16 27.0046 252.793 28.3652C254.44 29.7259 255.264 31.4661 255.264 33.5859H251.268C251.268 32.4974 250.802 31.5592 249.871 30.7715C248.954 29.9837 247.794 29.5898 246.391 29.5898C244.944 29.5898 243.812 29.9049 242.996 30.5352C242.18 31.1654 241.771 31.9889 241.771 33.0059C241.771 33.9655 242.151 34.6888 242.91 35.1758C243.669 35.6628 245.037 36.1283 247.014 36.5723C249.005 37.0163 250.616 37.5462 251.848 38.1621C253.079 38.778 253.989 39.5228 254.576 40.3965C255.178 41.2559 255.479 42.3086 255.479 43.5547C255.479 45.6315 254.648 47.3001 252.986 48.5605C251.325 49.8066 249.169 50.4297 246.52 50.4297C244.658 50.4297 243.01 50.1003 241.578 49.4414C240.146 48.7826 239.021 47.8659 238.205 46.6914C237.403 45.5026 237.002 44.2207 237.002 42.8457H240.977C241.048 44.1777 241.578 45.2376 242.566 46.0254C243.569 46.7988 244.887 47.1855 246.52 47.1855C248.023 47.1855 249.227 46.8848 250.129 46.2832C251.046 45.6673 251.504 44.8509 251.504 43.834Z" fill="#666666"/>
+</svg>
diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json
index 93e740a14..7c3872cee 100644
--- a/packages/website/translations/chinese.json
+++ b/packages/website/translations/chinese.json
@@ -85,5 +85,6 @@
     "TRADING_TUTORIAL": "trading tutorial",
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
-    "GITHUB": "github"
+    "GITHUB": "github",
+    "LIVE_CHAT": "live chat"
 }
diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json
index a75b73501..52e4eeb50 100644
--- a/packages/website/translations/english.json
+++ b/packages/website/translations/english.json
@@ -87,5 +87,6 @@
     "TRADING_TUTORIAL": "trading tutorial",
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
-    "GITHUB": "github"
+    "GITHUB": "github",
+    "LIVE_CHAT": "live chat"
 }
diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json
index e6fbcb4cc..81fbea6e3 100644
--- a/packages/website/translations/korean.json
+++ b/packages/website/translations/korean.json
@@ -85,5 +85,6 @@
     "TRADING_TUTORIAL": "trading tutorial",
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
-    "GITHUB": "github"
+    "GITHUB": "github",
+    "LIVE_CHAT": "live chat"
 }
diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json
index 779bc8173..4cc7aab91 100644
--- a/packages/website/translations/russian.json
+++ b/packages/website/translations/russian.json
@@ -85,5 +85,6 @@
     "TRADING_TUTORIAL": "trading tutorial",
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
-    "GITHUB": "github"
+    "GITHUB": "github",
+    "LIVE_CHAT": "live chat"
 }
diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json
index 54a463f98..f906de984 100644
--- a/packages/website/translations/spanish.json
+++ b/packages/website/translations/spanish.json
@@ -86,5 +86,6 @@
     "TRADING_TUTORIAL": "trading tutorial",
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
-    "GITHUB": "github"
+    "GITHUB": "github",
+    "LIVE_CHAT": "live chat"
 }
diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
new file mode 100644
index 000000000..c9bdca61b
--- /dev/null
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -0,0 +1,110 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import Drawer from 'material-ui/Drawer';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
+import { Container } from 'ts/components/ui/container';
+import { Deco, Key, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+export interface DocsContentTopBarProps {
+    location: Location;
+    translate: Translate;
+}
+
+interface DocsContentTopBarState {
+    isDrawerOpen: boolean;
+}
+
+const styles: Styles = {
+    menuItem: {
+        fontSize: 14,
+        color: colors.darkestGrey,
+        paddingTop: 6,
+        paddingBottom: 6,
+        cursor: 'pointer',
+        fontWeight: 400,
+    },
+};
+
+export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, DocsContentTopBarState> {
+    constructor(props: DocsContentTopBarProps) {
+        super(props);
+        this.state = {
+            isDrawerOpen: false,
+        };
+    }
+    public componentWillReceiveProps(nextProps: DocsContentTopBarProps): void {
+        if (nextProps.location.pathname !== this.props.location.pathname) {
+            this.setState({
+                isDrawerOpen: false,
+            });
+        }
+    }
+    public render(): React.ReactNode {
+        const menuIconStyle = {
+            fontSize: 25,
+            color: 'black',
+            cursor: 'pointer',
+        };
+        return (
+            <div style={{ height: 75, color: colors.linkSectionGrey }} className="pb1 flex items-center">
+                <Container className="flex items-center" width="100%">
+                    <div className="col col-2">
+                        <i className="zmdi zmdi-chevron-left" /> 0xproject.com
+                    </div>
+                    <div className="col col-10">
+                        <div className="flex items-center justify-between right" style={{ width: 300 }}>
+                            <TopBarMenuItem
+                                title={this.props.translate.get(Key.Github, Deco.Cap)}
+                                path={constants.URL_GITHUB_ORG}
+                                style={styles.menuItem}
+                                isNightVersion={false}
+                                isExternal={true}
+                            />
+                            <TopBarMenuItem
+                                title={this.props.translate.get(Key.Forum, Deco.Cap)}
+                                path={constants.URL_FORUM}
+                                style={styles.menuItem}
+                                isNightVersion={false}
+                                isExternal={true}
+                            />
+                            <TopBarMenuItem
+                                title={this.props.translate.get(Key.LiveChat, Deco.Cap)}
+                                path={constants.URL_ZEROEX_CHAT}
+                                style={styles.menuItem}
+                                isNightVersion={false}
+                                isExternal={true}
+                            />
+                        </div>
+                    </div>
+                    <div className={'md-hide lg-hide'}>
+                        <div style={menuIconStyle}>
+                            <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} />
+                        </div>
+                    </div>
+                </Container>
+                {this._renderDrawer()}
+            </div>
+        );
+    }
+    private _renderDrawer(): React.ReactNode {
+        return (
+            <Drawer
+                open={this.state.isDrawerOpen}
+                docked={false}
+                openSecondary={true}
+                onRequestChange={this._onMenuButtonClick.bind(this)}
+            >
+                <div className="clearfix">TODO</div>
+            </Drawer>
+        );
+    }
+    private _onMenuButtonClick(): void {
+        this.setState({
+            isDrawerOpen: !this.state.isDrawerOpen,
+        });
+    }
+}
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
new file mode 100644
index 000000000..b65a27fd9
--- /dev/null
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { WebsitePaths } from 'ts/types';
+
+export const DocsLogo = () => {
+    return (
+        <div style={{ paddingTop: 28 }}>
+            <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
+                <img src="/images/docs_logo.svg" height="30px" />
+            </Link>
+        </div>
+    );
+};
diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts
new file mode 100644
index 000000000..79bf68618
--- /dev/null
+++ b/packages/website/ts/containers/docs_home.ts
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Home as HomeComponent, HomeProps } from 'ts/pages/documentation/home';
+import { State } from 'ts/redux/reducer';
+import { Translate } from 'ts/utils/translate';
+
+interface ConnectedState {
+    translate: Translate;
+}
+
+const mapStateToProps = (state: State, _ownProps: HomeProps): ConnectedState => ({
+    translate: state.translate,
+});
+
+export const DocsHome: React.ComponentClass<HomeProps> = connect(mapStateToProps, undefined)(HomeComponent);
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 981c6f2cb..8ed40e69a 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -6,6 +6,7 @@ import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-d
 import * as injectTapEventPlugin from 'react-tap-event-plugin';
 import { MetaTags } from 'ts/components/meta_tags';
 import { About } from 'ts/containers/about';
+import { DocsHome } from 'ts/containers/docs_home';
 import { FAQ } from 'ts/containers/faq';
 import { Jobs } from 'ts/containers/jobs';
 import { Landing } from 'ts/containers/landing';
@@ -91,6 +92,7 @@ render(
                                 <Route path={WebsitePaths.FAQ} component={FAQ as any} />
                                 <Route path={WebsitePaths.About} component={About as any} />
                                 <Route path={WebsitePaths.Wiki} component={Wiki as any} />
+                                <Route path={WebsitePaths.Docs} component={DocsHome as any} />
                                 <Route
                                     path={`${WebsitePaths.ZeroExJs}/:version?`}
                                     component={LazyZeroExJSDocumentation}
diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx
new file mode 100644
index 000000000..eabad4def
--- /dev/null
+++ b/packages/website/ts/pages/documentation/home.tsx
@@ -0,0 +1,55 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import DocumentTitle = require('react-document-title');
+import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar';
+import { DocsLogo } from 'ts/components/documentation/docs_logo';
+import { Translate } from 'ts/utils/translate';
+
+export interface HomeProps {
+    location: Location;
+    translate: Translate;
+}
+
+export interface HomeState {}
+
+export class Home extends React.Component<HomeProps, HomeState> {
+    public render(): React.ReactNode {
+        return (
+            <div
+                className="flex items-center"
+                style={{
+                    width: '100%',
+                    background: 'linear-gradient(to right, #f5f5f5 0%, #f5f5f5 50%, #ffffff 50%, #ffffff 100%)',
+                }}
+            >
+                <DocumentTitle title="0x Docs Home" />
+                <div className="flex mx-auto">
+                    <div
+                        style={{
+                            width: 234,
+                            paddingLeft: 22,
+                            paddingRight: 22,
+                            backgroundColor: '#f5f5f5',
+                            height: '100vh',
+                            border: '1px black dotted',
+                        }}
+                    >
+                        <DocsLogo />
+                    </div>
+                    <div
+                        style={{
+                            width: 716,
+                            paddingLeft: 50,
+                            paddingRight: 50,
+                            backgroundColor: '#ffffff',
+                            height: '100vh',
+                            border: '1px black dotted',
+                        }}
+                    >
+                        <DocsContentTopBar location={this.props.location} translate={this.props.translate} />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 2c94fe910..c208ce90f 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -475,6 +475,7 @@ export enum Key {
     ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION',
     Sandbox = 'SANDBOX',
     Github = 'GITHUB',
+    LiveChat = 'LIVE_CHAT',
 }
 
 export enum SmartContractDocSections {
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 2b4aa5209..24d4101f4 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -73,6 +73,7 @@ export const constants = {
     URL_TESTNET_FAUCET: 'https://faucet.0xproject.com',
     URL_GITHUB_ORG: 'https://github.com/0xProject',
     URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki',
+    URL_FORUM: 'https://forum.0xproject.com',
     URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
     URL_METAMASK_FIREFOX_STORE: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/',
     URL_TOSHI_IOS_APP_STORE: 'https://itunes.apple.com/us/app/toshi-ethereum-wallet/id1278383455?mt=8',