WIP

2 files changed, 64 insertions, 103 deletions

diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index 73aed59b2..cf316cfe6 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -5,6 +5,8 @@ import LazyLoad from 'react-lazyload';
 
 import {colors} from 'ts/style/colors';
 
+import {Hero} from 'ts/@next/components/hero';
+
 import {Banner} from 'ts/@next/components/banner';
 import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
 import {Icon} from 'ts/@next/components/Icon';
@@ -12,6 +14,9 @@ import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
 import {SiteWrap} from 'ts/@next/components/siteWrap';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
+import {Definition} from 'ts/@next/components/Definition';
+
+import {Section as NewSection} from 'ts/@next/components/newLayout';
 // import { Configurator } from 'ts/pages/instant/configurator';
 
 import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
@@ -66,16 +71,11 @@ const featuresData = [
 
 export const Next0xInstant = () => (
     <SiteWrap>
-        <Section isPadLarge={true}>
-            <WrapCentered>
-                <Heading size="medium" isCentered={true}>Introducing 0x Instant</Heading>
-                <Paragraph size="medium" isCentered={true}>
-                    A free and flexible way to offer simple<br />
-                    crypto purchasing in any app or website
-                </Paragraph>
-                <Button href="#">Get Started</Button>
-            </WrapCentered>
-        </Section>
+        <Hero
+            title="Introducing 0x Instant"
+            description="A free and flexible way to offer simple crypto purchasing in any app or website"
+            actions={<Button href="#">Get Started</Button>}
+        />
 
         <Section isFullWidth={true} isNoPadding={true}>
             <Wrap width="full">
@@ -89,40 +89,17 @@ export const Next0xInstant = () => (
             </Wrap>
         </Section>
 
-        <Section>
-            <Wrap width="narrow">
-                {_.map(featuresData, (item, index) => (
-                    <Wrap padding={['large', 0, 'large', 0]}>
-                        <Column colWidth="1/3">
-                            <Icon name={item.icon} size={240} />
-                        </Column>
-
-                        <Column colWidth="2/3">
-                            <Heading>
-                                {item.title}
-                            </Heading>
-                            <Paragraph size="medium" isMuted={true}>
-                                {item.description}
-                            </Paragraph>
-
-                            <ButtonWrap>
-                                {_.map(item.links, (link, i) => (
-                                    <Link
-                                        href={link.url}
-                                        key={`link-${i}`}
-                                        isTransparent={true}
-                                        isAccentColor={true}
-                                        isWithArrow={true}
-                                    >
-                                        {link.label}
-                                    </Link>
-                                ))}
-                            </ButtonWrap>
-                        </Column>
-                    </Wrap>
-                ))}
-            </Wrap>
-        </Section>
+        <NewSection>
+            {_.map(featuresData, (item, index) => (
+                <Definition
+                    title={item.title}
+                    description={item.description}
+                    isInlineIcon={true}
+                    iconSize={240}
+                    actions={item.links}
+                />
+            ))}
+        </NewSection>
 
         <Section bgColor={colors.backgroundDark}>
             <Wrap>
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>