diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 07:17:26 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 07:17:26 +0800 |
commit | 65af195054e1f6de41d36a2d30d8342bef9752c0 (patch) | |
tree | 8559d71d6dd4269139afa5334b317f6efe90acd3 /packages/website/ts/pages/launch_kit.tsx | |
parent | 9f47f90c6e80ba9a61bcb6065fed1e2c6be8c5b7 (diff) | |
parent | 1ddf1087dd327b2ef35165518ee91eb457b84174 (diff) | |
download | dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.gz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.bz2 dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.lz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.xz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.zst dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.zip |
Merge branch 'development' into feature/monorepo/release-notes
Diffstat (limited to 'packages/website/ts/pages/launch_kit.tsx')
-rw-r--r-- | packages/website/ts/pages/launch_kit.tsx | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/packages/website/ts/pages/launch_kit.tsx b/packages/website/ts/pages/launch_kit.tsx new file mode 100644 index 000000000..dd4de4d99 --- /dev/null +++ b/packages/website/ts/pages/launch_kit.tsx @@ -0,0 +1,125 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; + +import { Hero } from 'ts/components/hero'; + +import { Banner } from 'ts/components/banner'; +import { Button } from 'ts/components/button'; +import { Definition } from 'ts/components/definition'; +import { Icon } from 'ts/components/icon'; +import { SiteWrap } from 'ts/components/siteWrap'; + +import { Section } from 'ts/components/newLayout'; +import { constants } from 'ts/utils/constants'; + +import { ModalContact } from '../components/modals/modal_contact'; + +const offersData = [ + { + icon: 'supportForAllEthereumStandards', + title: 'Perfect for developers who need a simple drop-in marketplace', + description: ( + <ul> + <li>Quickly launch a market for your project’s token</li> + <li>Seamlessly create an in-game marketplace for digital items and collectables</li> + <li>Easily build a 0x relayer for your local market</li> + </ul> + ), + }, +]; + +export class NextLaunchKit extends React.Component { + public state = { + isContactModalOpen: false, + }; + public render(): React.ReactNode { + return ( + <SiteWrap theme="dark"> + <DocumentTitle title="0x Launch Kit: Launch a relayer in under a minute" /> + <Hero + isLargeTitle={false} + isFullWidth={false} + title="0x Launch Kit" + description="Launch a relayer in under a minute" + figure={<Icon name="launchKit" size="hero" margin={['small', 0, 'small', 0]} />} + actions={<HeroActions />} + /> + + <Section bgColor="dark" isFlex={true} maxWidth="1170px"> + <Definition + title="Networked Liquidity Pool" + titleSize="small" + description="Tap into and share liquidity with other relayers" + icon="networkedLiquidity" + iconSize="medium" + isInline={true} + /> + + <Definition + title="Extensible Code Repo" + titleSize="small" + description="Fork and extend to support modes of exchange" + icon="code-repo" + iconSize="medium" + isInline={true} + /> + + <Definition + title="Exchange Ethereum based Tokens" + titleSize="small" + description="Enable trading for any ERC-20 or ERC-721 asset" + icon="eth-based-tokens" + iconSize="medium" + isInline={true} + /> + </Section> + + <Section> + {_.map(offersData, (item, index) => ( + <Definition + key={`offers-${index}`} + icon={item.icon} + title={item.title} + description={item.description} + isInlineIcon={true} + iconSize={240} + /> + ))} + </Section> + + <Banner + heading="Need more flexibility?" + subline="Dive into our docs, or contact us if needed" + mainCta={{ + text: 'Get Started', + href: `${constants.URL_LAUNCH_KIT}/#table-of-contents`, + shouldOpenInNewTab: true, + }} + secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }} + /> + <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} /> + </SiteWrap> + ); + } + + public _onOpenContactModal = (): void => { + this.setState({ isContactModalOpen: true }); + }; + + public _onDismissContactModal = (): void => { + this.setState({ isContactModalOpen: false }); + }; +} + +const HeroActions = () => ( + <React.Fragment> + <Button href={constants.URL_LAUNCH_KIT} isInline={true} target="_blank"> + Get Started + </Button> + + <Button href={constants.URL_LAUNCH_KIT_BLOG_POST} isTransparent={true} isInline={true} target="_blank"> + Learn More! + </Button> + </React.Fragment> +); |