WIP

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>