Merge branch 'development' into feature/instant/icons

* development: (37 commits)
  Add 0x-order-utils.py library to developers home
  Fixes to CONTRIBUTING.md
  Improve our CONTRIBUTING.md instructions
  fix(order_utils.py): publish docs to S3, not RTD (#1264)
  fix: make instant package private
  feat: refer to map file in postpublish configs
  feat: add new bundle name to bundle watch
  fix: tslint ignore rule in wrong place
  Update blog post feature
  Fix disclaimer on mobile
  Add smart contract docs to Developer Home
  Add Apache license link
  Fix capitalization in title
  Remove excess semi-colon
  Point directly to README for docs link
  Update icons
  Update LICENSE
  Fix disclaimer
  Add blogpost URL
  Add disclaimer
  ...

9 files changed, 416 insertions, 3 deletions

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index dfedcba55..e10005a0a 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -23,6 +23,7 @@ const languageToMenuTitle = {
 export interface FooterProps {
     translate: Translate;
     dispatcher: Dispatcher;
+    backgroundColor?: string;
 }
 
 interface FooterState {
@@ -30,6 +31,9 @@ interface FooterState {
 }
 
 export class Footer extends React.Component<FooterProps, FooterState> {
+    public static defaultProps = {
+        backgroundColor: colors.darkerGrey,
+    };
     constructor(props: FooterProps) {
         super(props);
         this.state = {
@@ -112,7 +116,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
             return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
         });
         return (
-            <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
+            <div className="relative pb4 pt2" style={{ backgroundColor: this.props.backgroundColor }}>
                 <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
                     <div className="col lg-col-4 md-col-4 col-12 left">
                         <div className="sm-mx-auto" style={{ width: 148 }}>
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index ece077563..7eab2a50f 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -1,3 +1,4 @@
+import { TextAlignProperty } from 'csstype';
 import * as React from 'react';
 
 type StringOrNum = string | number;
@@ -26,6 +27,7 @@ export interface ContainerProps {
     height?: StringOrNum;
     minWidth?: StringOrNum;
     minHeight?: StringOrNum;
+    textAlign?: TextAlignProperty;
     isHidden?: boolean;
     className?: string;
     position?: 'absolute' | 'fixed' | 'relative' | 'unset';
diff --git a/packages/website/ts/containers/launch_kit.ts b/packages/website/ts/containers/launch_kit.ts
new file mode 100644
index 000000000..2557f38a5
--- /dev/null
+++ b/packages/website/ts/containers/launch_kit.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { LaunchKit as LaunchKitComponent, LaunchKitProps } from 'ts/pages/launch_kit/launch_kit';
+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: LaunchKitProps): ConnectedState => ({
+    translate: state.translate,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
+
+export const LaunchKit: React.ComponentClass<LaunchKitProps> = connect(mapStateToProps, mapDispatchToProps)(
+    LaunchKitComponent,
+);
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 21157e427..96e7184f8 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -9,6 +9,7 @@ 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';
+import { LaunchKit } from 'ts/containers/launch_kit';
 import { NotFound } from 'ts/containers/not_found';
 import { Wiki } from 'ts/containers/wiki';
 import { createLazyComponent } from 'ts/lazy_component';
@@ -87,6 +88,7 @@ render(
                             <Switch>
                                 <Route exact={true} path="/" component={Landing as any} />
                                 <Redirect from="/otc" to={`${WebsitePaths.Portal}`} />
+                                <Route path={WebsitePaths.LaunchKit} component={LaunchKit as any} />
                                 <Route path={WebsitePaths.Careers} component={Jobs as any} />
                                 <Route path={WebsitePaths.Portal} component={LazyPortal} />
                                 <Route path={WebsitePaths.FAQ} component={FAQ as any} />
diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx
index 017573304..e3328f3fa 100644
--- a/packages/website/ts/pages/documentation/docs_home.tsx
+++ b/packages/website/ts/pages/documentation/docs_home.tsx
@@ -67,6 +67,32 @@ const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = {
         },
         {
             description:
+                'Launch a 0x relayer in under a minute with Launch Kit. `0x-launch-kit` is an open-source, free-to-use 0x relayer template that you can use as a starting point for your own project.',
+            link: {
+                title: '0x launch kit',
+                to: 'https://github.com/0xProject/0x-launch-kit',
+                shouldOpenInNewTab: true,
+            },
+        },
+        {
+            description:
+                'Reference documentation for the 0x smart contracts. Helpful for dApp developer wanting to integrate 0x at the smart contract level.',
+            link: {
+                title: '0x smart contracts',
+                to: WebsitePaths.SmartContracts,
+            },
+        },
+        {
+            description:
+                "A Python library for interacting with 0x orders. Generate an orderHash, sign an order, validate it's signature and more.",
+            link: {
+                title: '0x-order-utils.py',
+                to: 'http://0x-order-utils-py.s3-website-us-east-1.amazonaws.com/',
+                shouldOpenInNewTab: true,
+            },
+        },
+        {
+            description:
                 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)',
             link: {
                 title: '@0x/connect',
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index e2af40c8d..bb76efe21 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -36,8 +36,8 @@ interface Project {
 }
 
 const THROTTLE_TIMEOUT = 100;
-const WHATS_NEW_TITLE = '0x Protocol v2 is Live!';
-const WHATS_NEW_URL = 'https://blog.0xproject.com/0x-protocol-v2-0-is-live-183aac180149';
+const WHATS_NEW_TITLE = 'Introducing the 0x Launch Kit';
+const WHATS_NEW_URL = 'https://blog.0xproject.com/introducing-the-0x-launch-kit-4acdc3453585';
 const TITLE_STYLE: React.CSSProperties = {
     fontFamily: 'Roboto Mono',
     color: colors.grey,
diff --git a/packages/website/ts/pages/launch_kit/launch_kit.tsx b/packages/website/ts/pages/launch_kit/launch_kit.tsx
new file mode 100644
index 000000000..4ea56dbd4
--- /dev/null
+++ b/packages/website/ts/pages/launch_kit/launch_kit.tsx
@@ -0,0 +1,335 @@
+import { colors, Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import DocumentTitle from 'react-document-title';
+import { Footer } from 'ts/components/footer';
+import { TopBar } from 'ts/components/top_bar/top_bar';
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
+import { Text } from 'ts/components/ui/text';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { Deco, Key, ScreenWidths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+import { utils } from 'ts/utils/utils';
+
+export interface LaunchKitProps {
+    location: Location;
+    translate: Translate;
+    dispatcher: Dispatcher;
+}
+
+interface LaunchKitState {
+    screenWidth: ScreenWidths;
+}
+
+const THROTTLE_TIMEOUT = 100;
+const lighterBackgroundColor = '#222222';
+const darkerBackgroundColor = '#1B1B1B';
+const grayText = '#999999';
+
+interface Benefit {
+    icon: string;
+    description: string;
+}
+
+export class LaunchKit extends React.Component<LaunchKitProps, LaunchKitState> {
+    private readonly _throttledScreenWidthUpdate: () => void;
+    constructor(props: LaunchKitProps) {
+        super(props);
+        this.state = {
+            screenWidth: utils.getScreenWidth(),
+        };
+        this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
+    }
+    public componentDidMount(): void {
+        window.addEventListener('resize', this._throttledScreenWidthUpdate);
+        window.scrollTo(0, 0);
+    }
+    public componentWillUnmount(): void {
+        window.removeEventListener('resize', this._throttledScreenWidthUpdate);
+    }
+    public render(): React.ReactNode {
+        return (
+            <div id="launchKit" className="clearfix" style={{ color: colors.grey500 }}>
+                <DocumentTitle title="0x Launch Kit" />
+                <TopBar
+                    blockchainIsLoaded={false}
+                    location={this.props.location}
+                    isNightVersion={true}
+                    style={{ backgroundColor: lighterBackgroundColor, position: 'relative' }}
+                    translate={this.props.translate}
+                />
+                {this._renderHero()}
+                {this._renderSection()}
+                {this._renderCallToAction()}
+                {this._renderDisclaimer()}
+                <Footer
+                    backgroundColor={darkerBackgroundColor}
+                    translate={this.props.translate}
+                    dispatcher={this.props.dispatcher}
+                />
+            </div>
+        );
+    }
+    private _renderHero(): React.ReactNode {
+        const BENEFITS_1: Benefit[] = [
+            {
+                icon: '/images/launch_kit/shared_liquidity.svg',
+                description: this.props.translate.get(Key.TapIntoAndShare, Deco.Cap),
+            },
+            {
+                icon: '/images/launch_kit/fork.svg',
+                description: this.props.translate.get(Key.ForkAndExtend, Deco.Cap),
+            },
+            {
+                icon: '/images/launch_kit/enable_trading.svg',
+                description: this.props.translate.get(Key.EnableTrading, Deco.Cap),
+            },
+        ];
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+        const smallButtonPadding = '12px 30px 12px 30px';
+        const largeButtonPadding = '14px 60px 14px 60px';
+        const left = 'col lg-col-6 md-col-6 col-12 lg-pl2 md-pl2 sm-pl0 sm-px3 sm-center';
+        const flexClassName = isSmallScreen
+            ? 'flex items-center flex-column justify-center'
+            : 'flex items-center justify-center';
+        return (
+            <div className="clearfix pt4" style={{ backgroundColor: lighterBackgroundColor }}>
+                <div className="mx-auto max-width-4 clearfix">
+                    <div className={`${flexClassName} lg-pb4 md-pb4 sm-mb4`}>
+                        <div className={left} style={{ color: colors.white }}>
+                            <div
+                                className="inline-block lg-align-middle md-align-middle sm-align-top"
+                                style={{
+                                    paddingLeft: isSmallScreen ? 0 : 12,
+                                    lineHeight: '36px',
+                                }}
+                            >
+                                <Text
+                                    className="sm-pb2"
+                                    fontFamily="Roboto"
+                                    display="inline-block"
+                                    fontColor={colors.white}
+                                    fontWeight="bold"
+                                    lineHeight="1.3em"
+                                    letterSpacing="1px"
+                                    fontSize={isSmallScreen ? '38px' : '46px'}
+                                >
+                                    {this.props.translate.get(Key.LaunchKit, Deco.CapWords)}
+                                </Text>
+                                <Container paddingTop="18px">
+                                    <Text fontColor={colors.linkSectionGrey} fontSize="18px">
+                                        {this.props.translate.get(Key.LaunchKitPitch, Deco.Cap)}
+                                    </Text>
+                                </Container>
+                                <Container
+                                    paddingTop="54px"
+                                    className={`flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`}
+                                >
+                                    <Container paddingRight="20px">
+                                        <Link to={constants.URL_LAUNCH_KIT} shouldOpenInNewTab={true}>
+                                            <Button
+                                                padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
+                                                borderRadius="4px"
+                                                borderColor={colors.white}
+                                            >
+                                                <Text fontSize="16px" fontWeight="bold">
+                                                    {this.props.translate.get(Key.GetStarted, Deco.Cap)}
+                                                </Text>
+                                            </Button>
+                                        </Link>
+                                    </Container>
+                                    <div>
+                                        <Link to={constants.URL_LAUNCH_KIT_BLOG_POST} shouldOpenInNewTab={true}>
+                                            <Button
+                                                backgroundColor={lighterBackgroundColor}
+                                                borderColor={colors.white}
+                                                fontColor={colors.white}
+                                                padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
+                                                borderRadius="4px"
+                                            >
+                                                <Text fontSize="16px" fontWeight="bold" fontColor={colors.white}>
+                                                    {this.props.translate.get(Key.LearnMore, Deco.Cap)}
+                                                </Text>
+                                            </Button>
+                                        </Link>
+                                    </div>
+                                </Container>
+                            </div>
+                        </div>
+                        <Container
+                            marginTop={isSmallScreen ? '60px' : '30px'}
+                            marginBottom="30px"
+                            marginLeft="15px"
+                            marginRight="15px"
+                        >
+                            <Image
+                                src="/images/launch_kit/0x_cupboard.svg"
+                                maxWidth={isSmallScreen ? '75%' : '100%'}
+                                height="auto"
+                            />
+                        </Container>
+                    </div>
+                </div>
+                {this._renderBenefits(BENEFITS_1)}
+            </div>
+        );
+    }
+    private _renderSection(): React.ReactNode {
+        const BENEFITS_2: Benefit[] = [
+            {
+                icon: '/images/launch_kit/secondary_market.svg',
+                description: this.props.translate.get(Key.QuicklyLaunch, Deco.Cap),
+            },
+            {
+                icon: '/images/launch_kit/in_game_marketplace.svg',
+                description: this.props.translate.get(Key.SeemlesslyCreate, Deco.Cap),
+            },
+            {
+                icon: '/images/launch_kit/local_market.svg',
+                description: this.props.translate.get(Key.LocalMarket, Deco.Cap),
+            },
+        ];
+        return (
+            <div className="clearfix pb4" style={{ backgroundColor: darkerBackgroundColor }}>
+                <Container
+                    className="mx-auto"
+                    textAlign="center"
+                    paddingTop="89px"
+                    paddingBottom="89px"
+                    maxWidth="421px"
+                    paddingLeft="10px"
+                    paddingRight="10px"
+                >
+                    <Text fontSize="26px" lineHeight="37px" fontWeight="medium" fontColor={colors.white}>
+                        {this.props.translate.get(Key.PerfectForDevelopers, Deco.Cap)}
+                    </Text>
+                </Container>
+                {this._renderBenefits(BENEFITS_2)}
+            </div>
+        );
+    }
+    private _renderCallToAction(): React.ReactNode {
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+        const smallButtonPadding = '8px 14px 8px 14px';
+        const largeButtonPadding = '8px 14px 8px 14px';
+        return (
+            <Container
+                className="clearfix"
+                backgroundColor={lighterBackgroundColor}
+                paddingTop="90px"
+                paddingBottom="90px"
+            >
+                <Container className="clearfix mx-auto" maxWidth="850px">
+                    <Container className="lg-left md-left sm-mx-auto sm-pb3" width="348px">
+                        <Text fontColor={colors.white} fontSize="18px">
+                            View our comprehensive documentation to start building today.
+                        </Text>
+                    </Container>
+                    <Container
+                        className={`lg-right md-right flex clearfix sm-mx-auto ${
+                            isSmallScreen ? 'justify-center' : ''
+                        }`}
+                        paddingTop="5px"
+                    >
+                        <Container paddingRight="20px">
+                            <Link to={`${constants.URL_LAUNCH_KIT}/#table-of-contents`} shouldOpenInNewTab={true}>
+                                <Button
+                                    padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
+                                    borderRadius="4px"
+                                    backgroundColor={lighterBackgroundColor}
+                                    borderColor={colors.white}
+                                >
+                                    <Text fontSize="16px" fontWeight="bold" fontColor={colors.white}>
+                                        {this.props.translate.get(Key.ExploreTheDocs, Deco.Cap)}
+                                    </Text>
+                                </Button>
+                            </Link>
+                        </Container>
+                        <div>
+                            <Link to={constants.URL_ZEROEX_CHAT} shouldOpenInNewTab={true}>
+                                <Button
+                                    padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
+                                    borderRadius="4px"
+                                >
+                                    <Text fontSize="16px" fontWeight="bold">
+                                        {this.props.translate.get(Key.GetInTouch, Deco.Cap)}
+                                    </Text>
+                                </Button>
+                            </Link>
+                        </div>
+                    </Container>
+                </Container>
+            </Container>
+        );
+    }
+    private _renderBenefits(benefits: Benefit[]): React.ReactNode {
+        return (
+            <Container className="lg-flex md-flex justify-between mx-auto pb4" maxWidth="890px">
+                {_.map(benefits, benefit => {
+                    return (
+                        <Container className="mx-auto sm-pb4" width="240px">
+                            <Container textAlign="center">
+                                <img src={benefit.icon} />
+                            </Container>
+                            <Container paddingTop="26px">
+                                <Text
+                                    fontSize="18px"
+                                    lineHeight="28px"
+                                    textAlign="center"
+                                    fontColor={colors.linkSectionGrey}
+                                >
+                                    {benefit.description}
+                                </Text>
+                            </Container>
+                        </Container>
+                    );
+                })}
+            </Container>
+        );
+    }
+    private _renderDisclaimer(): React.ReactNode {
+        return (
+            <Container
+                className="clearfix"
+                backgroundColor={darkerBackgroundColor}
+                paddingTop="70px"
+                paddingBottom="70px"
+            >
+                <Container className="mx-auto" maxWidth="850px" paddingLeft="20px" paddingRight="20px">
+                    <Text fontColor={grayText} fontSize="10px">
+                        <b>Disclaimer:</b> The laws and regulations applicable to the use and exchange of digital assets
+                        and blockchain-native tokens, including through any software developed using the licensed work
+                        created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License,
+                        Version 2.0 applicable to the Work, developers are “solely responsible for determining the
+                        appropriateness of using or redistributing the Work,” which includes responsibility for ensuring
+                        compliance with any such applicable laws and regulations.
+                    </Text>
+                    <Container paddingTop="15px">
+                        <Text fontColor={grayText} fontSize="10px">
+                            See the{' '}
+                            <Link
+                                to={constants.URL_APACHE_LICENSE}
+                                shouldOpenInNewTab={true}
+                                textDecoration="underline"
+                            >
+                                Apache License, Version 2.0
+                            </Link>{' '}
+                            for the specific language governing all applicable permissions and limitations.
+                        </Text>
+                    </Container>
+                </Container>
+            </Container>
+        );
+    }
+    private _updateScreenWidth(): void {
+        const newScreenWidth = utils.getScreenWidth();
+        if (newScreenWidth !== this.state.screenWidth) {
+            this.setState({
+                screenWidth: newScreenWidth,
+            });
+        }
+    }
+}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index ce4b50a58..444a8348d 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -352,6 +352,7 @@ export enum WebsitePaths {
     Home = '/',
     FAQ = '/faq',
     About = '/about',
+    LaunchKit = '/launch-kit',
     Whitepaper = '/pdfs/0x_white_paper.pdf',
     SmartContracts = '/docs/contracts',
     Connect = '/docs/connect',
@@ -479,6 +480,19 @@ export enum Key {
     More = 'MORE',
     StartBuildOn0x = 'START_BUILDING_ON_0X',
     StartBuildOn0xDescription = 'START_BUILDING_ON_0X_DESCRIPTION',
+    LaunchKit = 'LAUNCH_KIT',
+    LaunchKitPitch = 'LAUNCH_KIT_PITCH',
+    ExploreTheDocs = 'EXPLORE_THE_DOCS',
+    EnableTrading = 'ENABLE_TRADING',
+    ForkAndExtend = 'FORK_AND_EXTEND',
+    LocalMarket = 'LOCAL_MARKET',
+    SeemlesslyCreate = 'SEEMLESSLY_CREATE',
+    QuicklyLaunch = 'QUICKLY_LAUNCH',
+    TapIntoAndShare = 'TAP_INTO_AND_SHARE',
+    PerfectForDevelopers = 'PERFECT_FOR_DEVELOPERS',
+    GetInTouch = 'GET_IN_TOUCH',
+    LearnMore = 'LEARN_MORE',
+    GetStarted = 'GET_STARTED',
 }
 
 export enum SmartContractDocSections {
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 379f28022..e9afc8763 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -72,6 +72,7 @@ export const constants = {
     PROJECT_URL_OPEN_ANX: 'https://www.openanx.org',
     PROJECT_URL_IDT: 'https://kinalpha.com',
     URL_ANGELLIST: 'https://angel.co/0xproject/jobs',
+    URL_APACHE_LICENSE: 'http://www.apache.org/licenses/LICENSE-2.0',
     URL_BITLY_API: 'https://api-ssl.bitly.com',
     URL_BLOG: 'https://blog.0xproject.com/latest',
     URL_DISCOURSE_FORUM: 'https://forum.0xproject.com',
@@ -95,6 +96,8 @@ export const constants = {
     URL_TWITTER: 'https://twitter.com/0xproject',
     URL_WETH_IO: 'https://weth.io/',
     URL_ZEROEX_CHAT,
+    URL_LAUNCH_KIT: 'https://github.com/0xProject/0x-launch-kit',
+    URL_LAUNCH_KIT_BLOG_POST: 'https://blog.0xproject.com/introducing-the-0x-launch-kit-4acdc3453585',
     URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API',
     URL_WEB3_DECODED_LOG_ENTRY_EVENT:
         'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123',