From 23987c0fa141c04f4c078342a2bafd0f1a3bd9c9 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 10 Dec 2018 15:29:59 +0100 Subject: Adds initial scrollto methods in why page, adds stickywrap --- packages/website/ts/@next/components/layout.tsx | 6 + packages/website/ts/@next/pages/why.tsx | 247 ++++++++++++++---------- 2 files changed, 153 insertions(+), 100 deletions(-) (limited to 'packages/website/ts/@next') diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index a8734aec8..03bd55027 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -120,6 +120,12 @@ export const WrapCentered = styled(WrapBase)` flex-direction: column; justify-content: center; align-items: center; + text-align: center; +`; + +export const WrapSticky = styled.div` + position: sticky; + top: ${props => props.offsetTop || '60px'}; `; export const WrapGrid = styled(WrapBase)` diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 6e7273106..1b6a61c4f 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import styled from 'styled-components'; +import zenscroll from 'zenscroll'; import { colors } from 'ts/style/colors'; import { Banner } from 'ts/@next/components/banner'; import { Icon } from 'ts/@next/components/icon'; -import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; +import { Column, Section, Wrap, WrapCentered, WrapSticky } from 'ts/@next/components/layout'; import { Link } from 'ts/@next/components/link'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; @@ -14,109 +15,155 @@ import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; import CustomizeIcon from 'ts/@next/icons/illustrations/customize.svg'; import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; -export const NextWhy = () => ( - -
- - - The exchange layer for the crypto economy - The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. - Build on 0x - - -
- -
- - - - Support for all Ethereum Standards - 0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol... - - - - - Shared Networked Liquidity - 0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system. - - - - - Customize the User Experience - Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces. - - -
- -
- - - Benefits - Use Cases - Features - - - - What 0x offers - - - A Standard for Exchange - 0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721. - - - Robust Smart Contracts - 0x Protocol's smart contracts have been put through two rounds of rigorous security audits. - - - Extensible Architecture - 0x's modular pipeline enables you to plug in your own smart contracts through an extensible API. - - - Efficient Design - 0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat. - - Use Cases - slider - - Exchange Functionality - - - Secure Non-custodial Trading - Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals. - - - Flexible Order Types - Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids. - - - Build a Business - Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem. - - - Networked Liquidity - Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book. - - -
- - - -); +export class NextWhy extends React.PureComponent { + public scrollToSection = (sectionName: 'benefits' | 'cases' | 'features') => { + zenscroll.to(this[sectionName]); + } + + public scrollToBenefits = () => { + // was going to onClick={() => this.scrollToSection('name')} but ts/linting + // doesnt like it, lets do this for now + this.scrollToSection('benefits'); + } + + public scrollToCases = () => { + this.scrollToSection('cases'); + } + + public scrollToFunctionality = () => { + this.scrollToSection('functionality'); + } + + public render(): React.ReactNode { + return ( + +
+ + + + The exchange layer for the crypto economy + + + + The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. + + + + Build on 0x + + + +
+ +
+ + + + Support for all Ethereum Standards + 0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol... + + + + + Shared Networked Liquidity + 0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system. + + + + + Customize the User Experience + Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces. + + +
+ +
+ + + + Benefits + Use Cases + Features + + + + +
this.benefits = elem}> + What 0x offers + + + A Standard for Exchange + 0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721. + + + Robust Smart Contracts + 0x Protocol's smart contracts have been put through two rounds of rigorous security audits. + + + Extensible Architecture + 0x's modular pipeline enables you to plug in your own smart contracts through an extensible API. + + + Efficient Design + 0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat. +
+ +
this.cases = elem}> + Use Cases + slider +
+ +
this.functionality = elem}> + Exchange Functionality + + + Secure Non-custodial Trading + Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals. + + + Flexible Order Types + Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids. + + + Build a Business + Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem. + + + Networked Liquidity + Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book. +
+ + +
+ + + + ); + } +} + +const StickyColumn = styled(Column)` + position: sticky; +`; const ChapterLink = styled.a` - font-size: 1.222222222rem; + color: ${props => props.theme.textColor}; + font-size: 22px; + margin-bottom: 15px; display: block; opacity: 0.8; - margin-bottom: 1.666666667rem; - - &:first-child { - opacity: 1; - } &:hover { opacity: 1; -- cgit v1.2.3