Merge pull request #1253 from 0xProject/launchKitLanding

0x Launch kit landing page

2 files changed, 337 insertions, 0 deletions

diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx
index 017573304..ebe8cece4 100644
--- a/packages/website/ts/pages/documentation/docs_home.tsx
+++ b/packages/website/ts/pages/documentation/docs_home.tsx
@@ -67,6 +67,15 @@ 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:
                 '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/launch_kit/launch_kit.tsx b/packages/website/ts/pages/launch_kit/launch_kit.tsx
new file mode 100644
index 000000000..d73197019
--- /dev/null
+++ b/packages/website/ts/pages/launch_kit/launch_kit.tsx
@@ -0,0 +1,328 @@
+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.CapWords)}
+                    </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} 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" width="890px">
+                    <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 Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0) 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,
+            });
+        }
+    }
+}