diff options
Diffstat (limited to 'packages/website/ts')
| -rw-r--r-- | packages/website/ts/@next/components/icon.tsx | 1 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 156 |
3 files changed, 115 insertions, 45 deletions
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx index bc0f6f47e..7e16c2aa2 100644 --- a/packages/website/ts/@next/components/icon.tsx +++ b/packages/website/ts/@next/components/icon.tsx @@ -44,6 +44,7 @@ const StyledIcon = styled.figure<IconProps>` width: ${props => _getSize(props.size)}; height: ${props => _getSize(props.size)}; margin: ${props => getCSSPadding(props.margin)}; + display: inline-block; flex-shrink: 0; svg { diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index d6eabb0d5..d300031dc 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -11,6 +11,7 @@ interface HeadingProps extends BaseTextInterface { asElement?: 'h1'| 'h2'| 'h3'| 'h4'; isCentered?: boolean; isNoMargin?: boolean; + marginBottom?: string; color?: string; } @@ -24,7 +25,7 @@ const StyledHeading = styled.h1<HeadingProps>` font-size: ${props => `var(--${props.size || 'default'}Heading)`}; padding: ${props => props.padding && getCSSPadding(props.padding)}; line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`}; - margin-bottom: ${props => !props.isNoMargin && '30px'}; + margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')}; text-align: ${props => props.isCentered && 'center'}; font-weight: 300; margin-left: ${props => props.isCentered && 'auto'}; diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 1b6a61c4f..956cbbc57 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; import zenscroll from 'zenscroll'; @@ -15,6 +16,52 @@ 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'; +const offersData = [ + { + icon: 'coin', + title: 'A standard for Exchange', + description: '0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721.', + }, + { + icon: 'coin', + title: 'Robust Smart Contracts', + description: `0x Protocol's smart contracts have been put through two rounds of rigorous security audits.`, + }, + { + icon: 'coin', + title: 'Extensible Architecture', + description: `0x's modular pipeline enables you to plug in your own smart contracts through an extensible API.`, + }, + { + icon: 'coin', + title: 'Efficient Design', + description: `0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat.`, + }, +]; + +const functionalityData = [ + { + icon: 'coin', + title: 'Secure Non-custodial Trading', + description: 'Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals.', + }, + { + icon: 'coin', + title: 'Flexible Order Types', + description: 'Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids.', + }, + { + icon: 'coin', + title: 'Build a Business', + description: 'Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.', + }, + { + icon: 'coin', + title: 'Networked Liquidity', + description: '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]); @@ -39,7 +86,7 @@ export class NextWhy extends React.PureComponent { <SiteWrap theme="dark"> <Section isPadLarge={true}> <WrapCentered> - <Column colWidth="2/3"> + <Column colWidth="2/3" isNoMargin={true}> <Heading size="medium" isCentered={true} @@ -95,50 +142,52 @@ export class NextWhy extends React.PureComponent { </Column> <Column colWidth="2/3"> - <div ref={elem => this.benefits = elem}> + <SectionWrap ref={elem => this.benefits = elem}> <Heading size="medium">What 0x offers</Heading> - <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} /> - <Heading size="small">A Standard for Exchange</Heading> - <Paragraph isMuted={true}>0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721.</Paragraph> - - <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} /> - <Heading size="small">Robust Smart Contracts</Heading> - <Paragraph isMuted={true}>0x Protocol's smart contracts have been put through two rounds of rigorous security audits.</Paragraph> - - <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} /> - <Heading size="small">Extensible Architecture</Heading> - <Paragraph isMuted={true}>0x's modular pipeline enables you to plug in your own smart contracts through an extensible API.</Paragraph> - - <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} /> - <Heading size="small">Efficient Design</Heading> - <Paragraph isMuted={true}>0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat.</Paragraph> - </div> - - <div ref={elem => this.cases = elem}> - <Heading size="small">Use Cases</Heading> + {_.map(offersData, (item, index) => ( + <ChapterItemWrap> + <Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} /> + + <Heading + marginBottom="15px" + isNoPadding={true} + > + {item.title} + </Heading> + + <Paragraph isMuted={true}> + {item.description} + </Paragraph> + </ChapterItemWrap> + ))} + </SectionWrap> + + <SectionWrap ref={elem => this.cases = elem}> + <Heading size="medium">Use Cases</Heading> <Paragraph isMuted={true}>slider</Paragraph> - </div> - - <div ref={elem => this.functionality = elem}> - <Heading size="small">Exchange Functionality</Heading> - - <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} /> - <Heading size="small">Secure Non-custodial Trading</Heading> - <Paragraph isMuted={true}>Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals.</Paragraph> - - <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} /> - <Heading size="small">Flexible Order Types</Heading> - <Paragraph isMuted={true}>Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids.</Paragraph> - - <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} /> - <Heading size="small">Build a Business</Heading> - <Paragraph isMuted={true}>Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.</Paragraph> - - <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} /> - <Heading size="small">Networked Liquidity</Heading> - <Paragraph isMuted={true}>Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book.</Paragraph> - </div> + </SectionWrap> + + <SectionWrap ref={elem => this.functionality = elem}> + <Heading size="medium">Exchange Functionality</Heading> + + {_.map(functionalityData, (item, index) => ( + <ChapterItemWrap> + <Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} /> + + <Heading + marginBottom="15px" + isNoPadding={true} + > + {item.title} + </Heading> + + <Paragraph isMuted={true}> + {item.description} + </Paragraph> + </ChapterItemWrap> + ))} + </SectionWrap> </Column> </Wrap> </Section> @@ -154,8 +203,22 @@ export class NextWhy extends React.PureComponent { } } -const StickyColumn = styled(Column)` - position: sticky; +const SectionWrap = styled.div` + position: relative; + + & + & { + padding-top: 60px; + } + + & + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 1px; + background-color: #3d3d3d; + } `; const ChapterLink = styled.a` @@ -169,3 +232,8 @@ const ChapterLink = styled.a` opacity: 1; } `; + +const ChapterItemWrap = styled.div` + max-width: 560px; + margin-top: 60px; +`; |