From 4a444591c11933a4dc2ee74b8eca1b4d7172362d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 13 Nov 2018 17:14:13 +0100 Subject: Implement 0x launch kit landing page --- .../website/ts/pages/launch_kit/launch_kit.tsx | 297 +++++++++++++++++++++ 1 file changed, 297 insertions(+) create mode 100644 packages/website/ts/pages/launch_kit/launch_kit.tsx (limited to 'packages/website/ts/pages') 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..7c3cc1c99 --- /dev/null +++ b/packages/website/ts/pages/launch_kit/launch_kit.tsx @@ -0,0 +1,297 @@ +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, WebsitePaths } 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'; + +interface Benefit { + icon: string; + description: string; +} +const BENEFITS_1: Benefit[] = [ + { + icon: '/images/launch_kit/shared_liquidity.svg', + description: 'Tap into and share liquidity with other relayers', + }, + { + icon: '/images/launch_kit/fork.svg', + description: 'Fork and extend to support new modes of exchange', + }, + { + icon: '/images/launch_kit/enable_trading.svg', + description: 'Enable trading for any ERC-20 or ERC-721 asset', + }, +]; +const BENEFITS_2: Benefit[] = [ + { + icon: '/images/launch_kit/secondary_market.svg', + description: 'Quickly form a secondary market for your own token', + }, + { + icon: '/images/launch_kit/in_game_marketplace.svg', + description: 'Seamlessly create an in-game marketplace for digital items and collectables', + }, + { + icon: '/images/launch_kit/local_market.svg', + description: 'Easily build a 0x relayer for your local market', + }, +]; + +export class LaunchKit extends React.Component { + 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 ( +
+ + + {this._renderHero()} + {this._renderSection()} + {this._renderCallToAction()} +
+
+ ); + } + private _renderHero(): React.ReactNode { + 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 ( +
+
+
+
+
+ + {this.props.translate.get(Key.LaunchKit, Deco.CapWords)} + + + + {this.props.translate.get(Key.LaunchKitPitch, Deco.Cap)} + + + + + + + + +
+ + + +
+ +
+
+ + + +
+
; + {this._renderBenefits(BENEFITS_1)} +
+ ); + } + private _renderSection(): React.ReactNode { + return ( +
+ + + Perfect for developers who need simple exchange functionality + + + {this._renderBenefits(BENEFITS_2)} +
+ ); + } + private _renderCallToAction(): React.ReactNode { + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; + const smallButtonPadding = '8px 14px 8px 14px'; + const largeButtonPadding = '8px 14px 8px 14px'; + return ( + + + + + View our comprehensive documentation to start building today. + + + + + + + + +
+ + + +
+ + + + ); + } + private _renderBenefits(benefits: Benefit[]): React.ReactNode { + return ( + + {_.map(benefits, benefit => { + return ( + + + + + + + {benefit.description} + + + + ); + })} + + ); + } + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + if (newScreenWidth !== this.state.screenWidth) { + this.setState({ + screenWidth: newScreenWidth, + }); + } + } +} -- cgit v1.2.3 From 9b1ec5baaa6011d8d0034cb823aebd7ddfc80eb3 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 13 Nov 2018 21:00:37 +0100 Subject: Move benefits to language files and fix copy --- .../website/ts/pages/launch_kit/launch_kit.tsx | 60 +++++++++++----------- 1 file changed, 31 insertions(+), 29 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/launch_kit/launch_kit.tsx b/packages/website/ts/pages/launch_kit/launch_kit.tsx index 7c3cc1c99..208e84b12 100644 --- a/packages/website/ts/pages/launch_kit/launch_kit.tsx +++ b/packages/website/ts/pages/launch_kit/launch_kit.tsx @@ -32,34 +32,6 @@ interface Benefit { icon: string; description: string; } -const BENEFITS_1: Benefit[] = [ - { - icon: '/images/launch_kit/shared_liquidity.svg', - description: 'Tap into and share liquidity with other relayers', - }, - { - icon: '/images/launch_kit/fork.svg', - description: 'Fork and extend to support new modes of exchange', - }, - { - icon: '/images/launch_kit/enable_trading.svg', - description: 'Enable trading for any ERC-20 or ERC-721 asset', - }, -]; -const BENEFITS_2: Benefit[] = [ - { - icon: '/images/launch_kit/secondary_market.svg', - description: 'Quickly form a secondary market for your own token', - }, - { - icon: '/images/launch_kit/in_game_marketplace.svg', - description: 'Seamlessly create an in-game marketplace for digital items and collectables', - }, - { - icon: '/images/launch_kit/local_market.svg', - description: 'Easily build a 0x relayer for your local market', - }, -]; export class LaunchKit extends React.Component { private readonly _throttledScreenWidthUpdate: () => void; @@ -100,6 +72,20 @@ export class LaunchKit extends React.Component { ); } 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'; @@ -190,6 +176,20 @@ export class LaunchKit extends React.Component { ); } 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 (
{ paddingTop="89px" paddingBottom="89px" maxWidth="421px" + paddingLeft="10px" + paddingRight="10px" > - Perfect for developers who need simple exchange functionality + {this.props.translate.get(Key.PerfectForDevelopers, Deco.CapWords)} {this._renderBenefits(BENEFITS_2)} -- cgit v1.2.3 From fd4a782bdd5e3e87e731d5288eb1bafa402295bc Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 15 Nov 2018 20:47:11 +0000 Subject: Update call-to-action links --- packages/website/ts/pages/launch_kit/launch_kit.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/launch_kit/launch_kit.tsx b/packages/website/ts/pages/launch_kit/launch_kit.tsx index 208e84b12..1e798f093 100644 --- a/packages/website/ts/pages/launch_kit/launch_kit.tsx +++ b/packages/website/ts/pages/launch_kit/launch_kit.tsx @@ -127,7 +127,7 @@ export class LaunchKit extends React.Component { className={`flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} > - +