diff options
Diffstat (limited to 'packages/website/ts/@next/pages/why.tsx')
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 102 |
1 files changed, 43 insertions, 59 deletions
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 43d78f99a..fc24fd665 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -5,6 +5,8 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; +import {Hero} from 'ts/@next/components/hero'; + import { Banner } from 'ts/@next/components/banner'; import { Link } from 'ts/@next/components/button'; import { Icon } from 'ts/@next/components/icon'; @@ -13,6 +15,8 @@ import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Slide, Slider } from 'ts/@next/components/slider/slider'; import { Heading, Paragraph } from 'ts/@next/components/text'; +import {Definition} from 'ts/@next/components/definition'; + const offersData = [ { icon: 'robustSmartContracts', @@ -76,57 +80,43 @@ export class NextWhy extends React.PureComponent { public render(): React.ReactNode { return ( <SiteWrap theme="dark"> - <Section isPadLarge={true}> - <WrapCentered> - <Column colWidth="2/3" isNoMargin={true}> - <Heading - maxWidth="600px" - size="medium" - isCentered={true} - > - The exchange layer for the crypto economy - </Heading> - - <Paragraph - size="medium" - isMuted={true} - isCentered={true} - marginBottom="60px" - > - 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. - </Paragraph> - - <Link - href="/docs" - isCentered={true} - isWithArrow={true} - isAccentColor={true} - > - Build on 0x - </Link> - </Column> - </WrapCentered> - </Section> + <Hero + title="The exchange layer for the crypto economy" + description="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." + actions={ + <Link + href="/docs" + isCentered={true} + isWithArrow={true} + isAccentColor={true} + > + Build on 0x + </Link> + } + /> <Section bgColor={colors.backgroundDark} isPadLarge={true}> <Wrap> - <Column colWidth="1/3"> - <Icon name="supportForAllEthereumStandards" size="large" margin={[0, 0, 32, 0]} /> - <Heading size="small" marginBottom="15px">Support for all Ethereum Standards</Heading> - <Paragraph isMuted={true}>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...</Paragraph> - </Column> - - <Column colWidth="1/3"> - <Icon name="networkedLiquidity" size="large" margin={[0, 0, 32, 0]} /> - <Heading size="small" marginBottom="15px">Shared Networked Liquidity</Heading> - <Paragraph isMuted={true}>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.</Paragraph> - </Column> - - <Column colWidth="1/3"> - <Icon name="flexibleIntegration" size="large" margin={[0, 0, 32, 0]} /> - <Heading size="small" marginBottom="15px">Customize the User Experience</Heading> - <Paragraph isMuted={true}>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.</Paragraph> - </Column> + <Definition + title="Support for all Ethereum Standards" + description="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..." + iconSize="large" + isInline={true} + /> + + <Definition + title="Shared Networked Liquidity" + description="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." + iconSize="large" + isInline={true} + /> + + <Definition + title="Support for all Ethereum Standards" + description="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." + iconSize="large" + isInline={true} + /> </Wrap> </Section> @@ -145,17 +135,11 @@ export class NextWhy extends React.PureComponent { <Heading size="medium">What 0x offers</Heading> {_.map(offersData, (item, index) => ( - <ChapterItemWrap key={`benefits-${index}`}> - <Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} /> - - <Heading marginBottom="15px"> - {item.title} - </Heading> - - <Paragraph isMuted={true} isNoMargin={true}> - {item.description} - </Paragraph> - </ChapterItemWrap> + <Definition + title={item.title} + description={item.description} + isWithMargin={true} + /> ))} </SectionWrap> |