diff --git a/packages/typescript-typings/types/react-typist/index.d.ts b/packages/typescript-typings/types/react-typist/index.d.ts new file mode 100644 index 0000000000..692c596a57 --- /dev/null +++ b/packages/typescript-typings/types/react-typist/index.d.ts @@ -0,0 +1 @@ +declare module 'react-typist'; diff --git a/packages/website/package.json b/packages/website/package.json index 3b6754fb38..a7da19c9ec 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -52,6 +52,7 @@ "react-router-dom": "^4.1.1", "react-scroll": "0xproject/react-scroll#similar-to-pr-330", "react-tooltip": "^3.2.7", + "react-typist": "^2.0.4", "redux": "^3.6.0", "redux-devtools-extension": "^2.13.2", "semver-sort": "0.0.4", diff --git a/packages/website/public/images/landing/0x_homepage.svg b/packages/website/public/images/landing/0x_homepage.svg new file mode 100644 index 0000000000..061ac8939f --- /dev/null +++ b/packages/website/public/images/landing/0x_homepage.svg @@ -0,0 +1,386 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/public/images/landing/exchange_everywhere.png b/packages/website/public/images/landing/exchange_everywhere.png new file mode 100644 index 0000000000..e630939299 Binary files /dev/null and b/packages/website/public/images/landing/exchange_everywhere.png differ diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 541c29997b..6864462c5b 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -9,7 +9,7 @@ "FULL_LIST_LINK": "full list", "TOKENIZED_SECTION_HEADER": "the world's value is becoming tokenized", "TOKENIZED_SECTION_DESCRIPTION": - "the Ethereum blockchain is an open, borderless financial system that represents a wide variety of assets as cryptographic tokens. In the future, most digital assets and goods will be tokenized.", + "0x is the critical infrastructure layer in the emerging financial stack built on a foundation of Ethereum token standards. Developers needing exchange functionality for ERC 20 tokens, ERC 721 tokens, or any new asset type can easily integrate the 0x protocol into their application.", "CURRENCY": "currency", "TRADITIONAL_ASSETS": "traditional assets", "DIGITAL_GOODS": "digital goods", @@ -19,15 +19,16 @@ "in 0x protocol, orders are transported off-chain, massively reducing gas costs and eliminating blockchain bloat. Relayers help broadcast orders and collect a fee each time they facilitate a trade. Anyone can build a relayer.", "RELAYERS_HEADER": "relayers building on 0x", "BENEFITS_HEADER": "benefits of 0x", - "BENEFIT_ONE_TITLE": "trustless exchange", + "USE_CASES_HEADER": "uses of 0x", + "BENEFIT_ONE_TITLE": "many assets", "BENEFIT_ONE_DESCRIPTION": - "built on Ethereum's distributed network with no centralized point of failure and no down time, each trade is settled atomically and without counterparty risk.", - "BENEFIT_TWO_TITLE": "shared liquidity", + "the 0x protocol facilitates the exchange of a growing number of Ethereum-based tokens including currencies, game items, and many more digital assets.", + "BENEFIT_TWO_TITLE": "networked liquidity", "BENEFIT_TWO_DESCRIPTION": "by sharing a standard API, relayers can easily aggregate liquidity pools, creating network effects around liquidity that compound as more relayers come online.", - "BENEFIT_THREE_TITLE": "open source", + "BENEFIT_THREE_TITLE": "exchange everywhere", "BENEFIT_THREE_DESCRIPTION": - "0x is open source, permissionless and free to use. Trade directly with a known counterparty for free or pay a relayer some ZRX tokens to access their liquidity pool.", + "0x allows trade functionality to fade into the background, enabling developers to focus on building while 0x handles the exchange.", "BUILDING_BLOCK_SECTION_HEADER": "a building block for dApps", "BUILDING_BLOCK_SECTION_DESCRIPTION": "0x protocol is a pluggable building block for dApps that require exchange functionality. Join the many developers that are already using 0x in their web applications and smart contracts.", @@ -43,10 +44,10 @@ "decentralized prediction market platforms generate sets of tokens that represent a financial stake in the outcomes of real-world events. 0x allows these tokens to be instantly tradable.", "STABLE_TOKENS": "stable tokens", "STABLE_TOKENS_DESCRIPTION": - "Novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.", + "novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.", "DECENTRALIZED_LOANS": "decentralized loans", "DECENTRALIZED_LOANS_DESCRIPTION": - "Efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.", + "efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.", "FUND_MANAGEMENT": "fund management", "FUND_MANAGEMENT_DESCRIPTION": "Decentralized fund management limits fund managers to investing in pre-agreed upon asset classes. Embedding 0x into fund management smart contracts enables them to enforce these security constraints.", @@ -80,5 +81,12 @@ "DEVELOPERS": "developers", "HOME": "home", "ROCKETCHAT": "rocket.chat", - "TRADE_CALL_TO_ACTION": "trade on 0x" + "TRADE_CALL_TO_ACTION": "trade on 0x", + "OUR_MISSION_AND_VALUES": "our mission & values", + "GAMING_AND_COLLECTABLES": "gaming & collectables", + "GAMING_AND_COLLECTABLES_DESCRIPTION": + "artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality to give access and the ability to build marketplaces for NFT trading.", + "ORDER_BOOKS": "order books", + "ORDER_BOOKS_DESCRIPTION": + "there are thousands of decentralized apps that have native utility tokens. 0x provides market makers and professional exchanges an ability to host order books to facilitate the exchange of these assets." } diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 8580c3a6ee..1841d890b4 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -238,7 +238,7 @@ export class TopBar extends React.Component { const fullWidthClasses = isExpandedDisplayType ? 'pr4' : ''; const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png'; const menuClasses = `col col-${ - isExpandedDisplayType ? '4' : '5' + isExpandedDisplayType ? '4' : '6' } ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`; const menuIconStyle = { fontSize: 25, @@ -301,6 +301,13 @@ export class TopBar extends React.Component { isNightVersion={isNightVersion} isExternal={false} /> + { {this.props.translate.get(Key.About, Deco.Cap)} + + {this.props.translate.get(Key.Careers, Deco.Cap)} + {this.props.translate.get(Key.Blog, Deco.Cap)} diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 2952c8859f..75ba7bcff4 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -96,4 +96,5 @@ export const CallToAction: React.StatelessComponent = ({ CallToAction.defaultProps = { type: 'dark', fontSize: '14px', + padding: '0.9em 1.6em', }; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 7344835642..cd8f290e3e 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -20,6 +20,7 @@ export interface TextProps { onClick?: (event: React.MouseEvent) => void; hoverColor?: string; noWrap?: boolean; + display?: string; } const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( @@ -41,6 +42,7 @@ export const Text = styled(PlainText)` ${props => (props.onClick ? 'cursor: pointer' : '')}; transition: color 0.5s ease; ${props => (props.noWrap ? 'white-space: nowrap' : '')}; + ${props => (props.display ? `display: ${props.display}` : '')}; &:hover { ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')}; } diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx new file mode 100644 index 0000000000..2bb2d40b01 --- /dev/null +++ b/packages/website/ts/components/ui/typed_text.tsx @@ -0,0 +1,76 @@ +import * as _ from 'lodash'; +import { darken } from 'polished'; +import * as React from 'react'; +import Typist from 'react-typist'; + +import { Text, TextProps } from 'ts/components/ui/text'; + +import 'react-typist/dist/Typist.css'; + +export interface TypedTextProps extends TextProps { + textList: string[]; + shouldRepeat?: boolean; + wordDelayMs?: number; + avgKeystrokeDelayMs?: number; + stdKeystrokeDelay?: number; +} + +export interface TypedTextState { + cycleCount: number; +} + +export class TypedText extends React.Component { + public static defaultProps = { + shouldRepeat: false, + avgKeystrokeDelayMs: 90, + wordDelayMs: 1000, + }; + public state = { + cycleCount: 0, + }; + public render(): React.ReactNode { + const { + textList, + shouldRepeat, + wordDelayMs, + avgKeystrokeDelayMs, + stdKeystrokeDelay, + // tslint:disable-next-line + ...textProps + } = this.props; + const { cycleCount } = this.state; + if (_.isEmpty(textList)) { + return null; + } + const typistChildren: React.ReactNode[] = []; + _.forEach(textList, text => { + typistChildren.push( + + {text} + , + ); + if (wordDelayMs) { + typistChildren.push(); + } + typistChildren.push(); + }); + return ( + + {typistChildren} + + ); + } + private _onTypingDone(): void { + if (this.props.shouldRepeat) { + this.setState({ + cycleCount: this.state.cycleCount + 1, + }); + } + } +} diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 78f5fc3c17..34f124d8ce 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -8,6 +8,9 @@ import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } 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 { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -31,7 +34,6 @@ interface UseCase { description: string; classNames: string; style?: React.CSSProperties; - projectIconUrls: string[]; } interface Project { logoFileName: string; @@ -41,72 +43,22 @@ interface Project { const THROTTLE_TIMEOUT = 100; const WHATS_NEW_TITLE = '18 ideas for 0x relayers in 2018'; const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f'; - -const relayersAndDappProjects: Project[] = [ - { - logoFileName: 'ercdex.png', - projectUrl: constants.PROJECT_URL_ERC_DEX, - }, - { - logoFileName: 'radar_relay.png', - projectUrl: constants.PROJECT_URL_RADAR_RELAY, - }, - { - logoFileName: 'paradex.png', - projectUrl: constants.PROJECT_URL_PARADEX, - }, - { - logoFileName: 'the_ocean.png', - projectUrl: constants.PROJECT_URL_0CEAN, - }, - { - logoFileName: 'dydx.png', - projectUrl: constants.PROJECT_URL_DYDX, - }, - { - logoFileName: 'ethfinex.png', - projectUrl: constants.PROJECT_URL_ETHFINEX, - }, - { - logoFileName: 'melonport.png', - projectUrl: constants.PROJECT_URL_MELONPORT, - }, - { - logoFileName: 'maker.png', - projectUrl: constants.PROJECT_URL_MAKER, - }, - { - logoFileName: 'dharma.png', - projectUrl: constants.PROJECT_URL_DHARMA, - }, - { - logoFileName: 'lendroid.png', - projectUrl: constants.PROJECT_URL_LENDROID, - }, - { - logoFileName: 'district0x.png', - projectUrl: constants.PROJECT_URL_DISTRICT_0X, - }, - { - logoFileName: 'aragon.png', - projectUrl: constants.PROJECT_URL_ARAGON, - }, - { - logoFileName: 'blocknet.png', - projectUrl: constants.PROJECT_URL_BLOCKNET, - }, - { - logoFileName: 'imtoken.png', - projectUrl: constants.PROJECT_URL_IMTOKEN, - }, - { - logoFileName: 'augur.png', - projectUrl: constants.PROJECT_URL_AUGUR, - }, - { - logoFileName: 'anx.png', - projectUrl: constants.PROJECT_URL_OPEN_ANX, - }, +const TITLE_STYLE: React.CSSProperties = { + fontFamily: 'Roboto Mono', + color: colors.grey, + fontWeight: 300, + letterSpacing: 3, +}; +const ROTATING_LIST = [ + 'tokens', + 'game items', + 'digital art', + 'outcomes', + 'stocks', + 'derivatives', + 'loans', + 'cats', + 'everything', ]; const relayerProjects: Project[] = [ @@ -198,22 +150,14 @@ export class Landing extends React.Component { translate={this.props.translate} /> {this._renderHero()} - {this._renderProjects( - relayersAndDappProjects, - this.props.translate.get(Key.ProjectsHeader, Deco.Upper), - colors.projectsGrey, - false, - )} - {this._renderTokenizationSection()} - {this._renderProtocolSection()} {this._renderProjects( relayerProjects, this.props.translate.get(Key.RelayersHeader, Deco.Upper), - colors.heroGrey, + colors.projectsGrey, true, )} {this._renderInfoBoxes()} - {this._renderBuildingBlocksSection()} + {this._renderTokenizationSection()} {this._renderUseCases()} {this._renderCallToAction()}