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 --- .../public/images/launch_kit/0x_cupboard.svg | 53 ++++ .../public/images/launch_kit/enable_trading.svg | 9 + packages/website/public/images/launch_kit/fork.svg | 4 + .../images/launch_kit/in_game_marketplace.svg | 11 + .../public/images/launch_kit/local_market.svg | 12 + .../public/images/launch_kit/secondary_market.svg | 6 + .../public/images/launch_kit/shared_liquidity.svg | 28 ++ packages/website/translations/chinese.json | 6 + packages/website/translations/english.json | 6 + packages/website/translations/korean.json | 6 + packages/website/translations/russian.json | 6 + packages/website/translations/spanish.json | 6 + packages/website/ts/components/footer.tsx | 6 +- packages/website/ts/components/ui/container.tsx | 2 + packages/website/ts/containers/launch_kit.ts | 27 ++ packages/website/ts/index.tsx | 2 + .../website/ts/pages/launch_kit/launch_kit.tsx | 297 +++++++++++++++++++++ packages/website/ts/types.ts | 7 + 18 files changed, 493 insertions(+), 1 deletion(-) create mode 100644 packages/website/public/images/launch_kit/0x_cupboard.svg create mode 100644 packages/website/public/images/launch_kit/enable_trading.svg create mode 100644 packages/website/public/images/launch_kit/fork.svg create mode 100644 packages/website/public/images/launch_kit/in_game_marketplace.svg create mode 100644 packages/website/public/images/launch_kit/local_market.svg create mode 100644 packages/website/public/images/launch_kit/secondary_market.svg create mode 100644 packages/website/public/images/launch_kit/shared_liquidity.svg create mode 100644 packages/website/ts/containers/launch_kit.ts create mode 100644 packages/website/ts/pages/launch_kit/launch_kit.tsx (limited to 'packages/website') diff --git a/packages/website/public/images/launch_kit/0x_cupboard.svg b/packages/website/public/images/launch_kit/0x_cupboard.svg new file mode 100644 index 000000000..4c4e6ba1b --- /dev/null +++ b/packages/website/public/images/launch_kit/0x_cupboard.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/public/images/launch_kit/enable_trading.svg b/packages/website/public/images/launch_kit/enable_trading.svg new file mode 100644 index 000000000..84a081629 --- /dev/null +++ b/packages/website/public/images/launch_kit/enable_trading.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/website/public/images/launch_kit/fork.svg b/packages/website/public/images/launch_kit/fork.svg new file mode 100644 index 000000000..83d2f6d65 --- /dev/null +++ b/packages/website/public/images/launch_kit/fork.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/website/public/images/launch_kit/in_game_marketplace.svg b/packages/website/public/images/launch_kit/in_game_marketplace.svg new file mode 100644 index 000000000..853efe7ca --- /dev/null +++ b/packages/website/public/images/launch_kit/in_game_marketplace.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/website/public/images/launch_kit/local_market.svg b/packages/website/public/images/launch_kit/local_market.svg new file mode 100644 index 000000000..05f7fd993 --- /dev/null +++ b/packages/website/public/images/launch_kit/local_market.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/website/public/images/launch_kit/secondary_market.svg b/packages/website/public/images/launch_kit/secondary_market.svg new file mode 100644 index 000000000..bc7d94f65 --- /dev/null +++ b/packages/website/public/images/launch_kit/secondary_market.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/website/public/images/launch_kit/shared_liquidity.svg b/packages/website/public/images/launch_kit/shared_liquidity.svg new file mode 100644 index 000000000..0647ecf0d --- /dev/null +++ b/packages/website/public/images/launch_kit/shared_liquidity.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 95b9bda62..489b6b5ae 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -95,6 +95,12 @@ "LIBRARIES_AND_TOOLS_DESCRIPTION": "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", "MORE": "more", + "LAUNCH_KIT": "0x launch kit", + "LAUNCH_KIT_PITCH": "Launch an exchange in under a minute.", + "GET_STARTED": "get started", + "GET_IN_TOUCH": "get in touch", + "EXPLORE_THE_DOCS": "explore the docs", + "LEARN_MORE": "learn more", "START_BUILDING_ON_0X": "Start building on 0x", "START_BUILDING_ON_0X_DESCRIPTION": "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 465bd49b4..02c7f2e8a 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -99,6 +99,12 @@ "LIBRARIES_AND_TOOLS_DESCRIPTION": "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", "MORE": "more", + "LAUNCH_KIT": "0x launch kit", + "LAUNCH_KIT_PITCH": "Launch an exchange in under a minute.", + "GET_STARTED": "get started", + "GET_IN_TOUCH": "get in touch", + "EXPLORE_THE_DOCS": "explore the docs", + "LEARN_MORE": "learn more", "OUR_MISSION_AND_VALUES": "our mission & values", "GAMING_AND_COLLECTABLES": "gaming & collectables", "GAMING_AND_COLLECTABLES_DESCRIPTION": diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 5485e5583..aa2a24c5b 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -95,6 +95,12 @@ "LIBRARIES_AND_TOOLS_DESCRIPTION": "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", "MORE": "more", + "LAUNCH_KIT": "0x launch kit", + "LAUNCH_KIT_PITCH": "Launch an exchange in under a minute.", + "GET_STARTED": "get started", + "GET_IN_TOUCH": "get in touch", + "EXPLORE_THE_DOCS": "explore the docs", + "LEARN_MORE": "learn more", "START_BUILDING_ON_0X": "Start building on 0x", "START_BUILDING_ON_0X_DESCRIPTION": "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index a2e2a8cef..6d35452ca 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -95,6 +95,12 @@ "LIBRARIES_AND_TOOLS_DESCRIPTION": "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", "MORE": "more", + "LAUNCH_KIT": "0x launch kit", + "LAUNCH_KIT_PITCH": "Launch an exchange in under a minute.", + "GET_STARTED": "get started", + "GET_IN_TOUCH": "get in touch", + "EXPLORE_THE_DOCS": "explore the docs", + "LEARN_MORE": "learn more", "START_BUILDING_ON_0X": "Start building on 0x", "START_BUILDING_ON_0X_DESCRIPTION": "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index acbc59c3d..31b9e1a7a 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -96,6 +96,12 @@ "LIBRARIES_AND_TOOLS_DESCRIPTION": "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", "MORE": "more", + "LAUNCH_KIT": "0x launch kit", + "LAUNCH_KIT_PITCH": "Launch an exchange in under a minute.", + "GET_STARTED": "get started", + "GET_IN_TOUCH": "get in touch", + "EXPLORE_THE_DOCS": "explore the docs", + "LEARN_MORE": "learn more", "START_BUILDING_ON_0X": "Start building on 0x", "START_BUILDING_ON_0X_DESCRIPTION": "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." 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 { + public static defaultProps = { + backgroundColor: colors.darkerGrey, + }; constructor(props: FooterProps) { super(props); this.state = { @@ -112,7 +116,7 @@ export class Footer extends React.Component { return ; }); return ( -
+
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): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const LaunchKit: React.ComponentClass = 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( + 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, + }); + } + } +} diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index ce4b50a58..7065097d9 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,12 @@ 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', + GetInTouch = 'GET_IN_TOUCH', + LearnMore = 'LEARN_MORE', + GetStarted = 'GET_STARTED', } export enum SmartContractDocSections { -- cgit v1.2.3