WIP

14 files changed, 446 insertions, 235 deletions

diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx
new file mode 100644
index 000000000..be3ded71f
--- /dev/null
+++ b/packages/website/ts/@next/components/blockIconLink.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import {Link} from 'ts/@next/components/button';
+import {Icon} from 'ts/@next/components/icon';
+
+interface Props {
+    icon: string;
+    title: string;
+    linkLabel: string;
+    linkUrl: string;
+}
+
+export const BlockIconLink = (props: Props) => (
+    <Wrap>
+        <div>
+            <Icon
+                name={props.icon}
+                size="large"
+                margin={[0, 0, 'default', 0]}
+            />
+        </div>
+    </Wrap>
+);
+
+const Wrap = styled.div`
+    padding: 40px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    background-color: ${props => props.theme.lightBgColor};
+`;
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
new file mode 100644
index 000000000..88ef6acdc
--- /dev/null
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -0,0 +1,106 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import {Link} from 'ts/@next/components/button';
+import { Icon } from 'ts/@next/components/icon';
+
+interface Action {
+    label: string;
+    url: string;
+}
+
+interface Props {
+    isInline?: boolean;
+    isInlineIcon?: boolean;
+    isCentered?: boolean;
+    isWithMargin?: boolean;
+    iconSize?: 'medium' | 'large' | number;
+    title: string;
+    description: React.Node;
+    actions?: Action[];
+}
+
+export const Definition = (props: Props) => (
+    <Wrap isWithMargin={props.isWithMargin} isInline={props.isInline} isInlineIcon={props.isInlineIcon}>
+        <Icon
+            name="ready-to-build"
+            size={props.iconSize || 'medium'}
+            margin={[0, 0, 'default', 0]}
+        />
+
+        <TextWrap>
+            <Title>
+                {props.title}
+            </Title>
+
+            <Paragraph>
+                {props.description}
+            </Paragraph>
+
+            {props.actions &&
+                <LinkWrap>
+                    {props.actions.map((item, index) => (
+                        <Link
+                            href={item.url}
+                            isWithArrow={true}
+                            isTransparent={true}
+                            isNoBorder={true}
+                            isAccentColor={true}
+                        >
+                            {item.label}
+                        </Link>
+                    ))}
+                </LinkWrap>
+            }
+        </TextWrap>
+    </Wrap>
+);
+
+const Wrap = styled.div`
+    max-width: ${props => props.isInline && '354px'};
+
+    & + & {
+        margin-top: ${props => (props.isWithMargin && !props.isInlineIcon) ? '60px' : '120px'};
+    }
+
+    @media (min-width: 768px) {
+        width: ${props => props.isInline ? 'calc(33.3333% - 30px)' : '100%'};
+        display: ${props => props.isInlineIcon && 'flex'};
+        justify-content: ${props => props.isInlineIcon && 'space-between'};
+        align-items: ${props => props.isInlineIcon && 'center'};
+        text-align: ${props => props.isInlineIcon && 'left'};
+    }
+
+    @media (max-width: 768px) {
+        margin: 0 auto;
+
+        & + & {
+            margin-top: ${props => props.isInline && '60px'};
+        }
+    }
+`;
+
+const TextWrap = styled.div`
+    width: 100%;
+    max-width: 560px;
+`;
+
+const Title = styled.h2`
+    font-size: 20px;
+    line-height: 1.3;
+    margin-bottom: 15px;
+`;
+
+const Paragraph = styled.p`
+    font-size: 17px;
+    opacity: 0.75;
+`;
+
+const LinkWrap = styled.div`
+    display: inline-flex;
+    margin-top: 60px;
+
+    a + a {
+        margin-left: 60px;
+    }
+`;
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx
new file mode 100644
index 000000000..d17856b8a
--- /dev/null
+++ b/packages/website/ts/@next/components/hero.tsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+interface Props {
+    title: string;
+    description: string;
+    figure?: React.Node;
+    actions?: React.Node;
+}
+
+export const Hero = (props: Props) => (
+    <Section>
+        <Wrap isCentered={!props.figure}>
+            {props.figure &&
+                <Content width="400px">
+                    {props.figure}
+                </Content>
+            }
+
+            <Content width={props.figure ? '546px' : '678px'}>
+                <Title isLarge={props.figure}>
+                    {props.title}
+                </Title>
+
+                <Description>
+                    {props.description}
+                </Description>
+
+                {props.actions &&
+                    <ButtonWrap>
+                        {props.actions}
+                    </ButtonWrap>
+                }
+            </Content>
+        </Wrap>
+    </Section>
+);
+
+const Section = styled.section`
+    padding: 120px 0;
+
+    @media (max-width: 768px) {
+        padding: 60px 0;
+    }
+`;
+
+const Wrap = styled.div`
+    width: calc(100% - 60px);
+    margin: 0 auto;
+
+    @media (min-width: 768px) {
+        max-width: 1136px;
+        flex-direction: row-reverse;
+        display: flex;
+        align-items: center;
+        text-align: ${props => props.isCentered && 'center'};
+        justify-content: ${props => props.isCentered ? 'center' : 'space-between'};
+    }
+
+    @media (max-width: 768px) {
+        text-align: center;
+    }
+`;
+
+const Title = styled.h1`
+    font-size: ${props => props.isLarge ? '80px' : '58px'};
+    font-weight: 300;
+    line-height: 1.1;
+    margin-bottom: 30px;
+
+    @media (max-width: 1024px) {
+        font-size: 60px;
+    }
+
+    @media (max-width: 768px) {
+        font-size: 46px;
+    }
+`;
+
+const Description = styled.p`
+    font-size: 22px;
+    line-height: 31px;
+    padding: 0;
+    margin-bottom: 30px;
+    opacity: 0.75;
+`;
+
+const Content = styled.div`
+    width: 100%;
+
+    @media (min-width: 768px) {
+        max-width: ${props => props.width};
+    }
+`;
+
+const ButtonWrap = styled.div`
+    display: inline-flex;
+    align-items: center;
+
+    * + * {
+        margin-left: 12px;
+    }
+`;
diff --git a/packages/website/ts/@next/components/heroImage.tsx b/packages/website/ts/@next/components/heroImage.tsx
new file mode 100644
index 000000000..51b35480b
--- /dev/null
+++ b/packages/website/ts/@next/components/heroImage.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
+
+interface Props {
+    image: React.Node;
+}
+
+export const LandingAnimation = (props: Props) => (
+    <Wrap>
+        {props.image}
+    </Wrap>
+);
+
+const Wrap = styled.figure`
+    border: 1px solid red;
+    display: inline-block;
+
+    svg {
+        width: 100%;
+        height: auto;
+    }
+
+    @media (min-width: 768px) {
+        width: 100%;
+        max-width: 400px;
+    }
+
+    @media (max-width: 768px) {
+        width: 180px;
+        margin-bottom: 40px;
+    }
+`;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index ce15bd2b3..32e92aa34 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -152,7 +152,7 @@ export const Column = styled.div<ColumnProps>`
     }
 
     @media (max-width: ${BREAKPOINTS.mobile}) {
-        padding: ${props => !props.isNoPadding && (props.isPadLarge ? '40px 30px' : '15px')};
+        padding: ${props => !props.isNoPadding && (props.isPadLarge ? '40px 30px' : 0)};
         margin-bottom: 20px;
         text-align: ${props => props.isMobileCentered && 'center'};
     }
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
new file mode 100644
index 000000000..8a3514bd9
--- /dev/null
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+interface Props {
+    isPadded: boolean;
+    bgColor?: 'dark' | 'light' | string;
+}
+
+export const Section = (props: Props) => (
+    <SectionBase bgColor={props.bgColor}>
+        <Wrap
+            isPadded={props.isPadded}
+        >
+            {props.children}
+        </Wrap>
+    </SectionBase>
+);
+
+Section.defaultProps = {
+    isPadded: true,
+};
+
+const SectionBase = styled.section`
+    width: calc(100% - 60px);
+    margin: 0 auto;
+    padding: 120px 0;
+    background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
+
+    @media (max-width: 768px) {
+        padding: 40px 0;
+    }
+`;
+
+const Wrap = styled.div`
+    width: calc(100% - 60px);
+    max-width: 895px;
+    margin: 0 auto;
+    text-align: center;
+`;
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index 0efa25215..4c246ec3e 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -1,105 +1,46 @@
 import * as React from 'react';
 import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
 import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
-import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 import {colors} from 'ts/style/colors';
 
-export const SectionLandingAbout = () => (
-    <Section bgColor={colors.backgroundDark} isPadLarge={true}>
-        <WrapCentered width="narrow">
-            <InlineIconWrap>
-                <Icon name="coin" size="small" />
-                <Icon name="coin" size="small" />
-                <Icon name="coin" size="small" />
-                <Icon name="coin" size="small" />
-            </InlineIconWrap>
-
-            <Paragraph
-                size="large"
-                isCentered={true}
-                padding={['large', 0, 'default', 0]}
-            >
-                0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based
-                tokens. Anyone in the world can use 0x to service a wide variety of markets
-                ranging from gaming items to financial instruments to assets that could have
-                near existed before.
-            </Paragraph>
-
-            <Link
-                href="#"
-                isTransparent={true}
-                isWithArrow={true}
-                isAccentColor={true}
-            >
-                Discover how developers use 0x
-            </Link>
-
-            <hr
-                style={{
-                    width: '340px',
-                    borderColor: '#3C4746',
-                    margin: '60px auto 0 auto',
-                }}
-            />
-        </WrapCentered>
-
-        {/* Note you can also pass in a string "large/default" or a number for custom margins */}
-        <Wrap padding={['large', 0, 0, 0]}>
-            {/* NOTE: this probably should be withComponent as part of a <dl> */}
-            <Column colWidth="1/3" isNoPadding={true}>
-                <Heading
-                    size="medium"
-                    isCentered={true}
-                    marginBottom="20px"
-                >
-                    873,435
-                </Heading>
+import {Section} from 'ts/@next/components/newLayout';
 
-                <Paragraph
-                    isMuted={0.4}
-                    isCentered={true}
-                    isNoMargin={true}
-                >
-                    Number of transactions
-                </Paragraph>
-            </Column>
-
-            <Column colWidth="1/3" isNoPadding={true}>
-                <Heading
-                    size="medium"
-                    isCentered={true}
-                    marginBottom="20px"
-                >
-                    $203M
-                </Heading>
-
-                <Paragraph
-                    isMuted={0.4}
-                    isCentered={true}
-                    marginBottom="20px"
-                >
-                    Total volume
-                </Paragraph>
-            </Column>
-
-            <Column colWidth="1/3" isNoPadding={true}>
-                <Heading
-                    size="medium"
-                    isCentered={true}
-                    isNoMargin={true}
-                >
-                    227,372
-                </Heading>
-
-                <Paragraph
-                    isMuted={0.4}
-                    isCentered={true}
-                    isNoMargin={true}
-                >
-                    Number of relayers
-                </Paragraph>
-            </Column>
-        </Wrap>
+export const SectionLandingAbout = () => (
+    <Section bgColor="dark">
+        <InlineIconWrap>
+            <Icon name="coin" size="small" />
+            <Icon name="coin" size="small" />
+            <Icon name="coin" size="small" />
+            <Icon name="coin" size="small" />
+        </InlineIconWrap>
+
+        <Paragraph
+            size="large"
+            isCentered={true}
+            padding={['large', 0, 'default', 0]}
+        >
+            0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based
+            tokens. Anyone in the world can use 0x to service a wide variety of markets
+            ranging from gaming items to financial instruments to assets that could have
+            near existed before.
+        </Paragraph>
+
+        <Link
+            href="#"
+            isTransparent={true}
+            isWithArrow={true}
+            isAccentColor={true}
+        >
+            Discover how developers use 0x
+        </Link>
+
+        <hr
+            style={{
+                width: '340px',
+                borderColor: '#3C4746',
+                margin: '60px auto 0 auto',
+            }}
+        />
     </Section>
 );
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx
index a858f0c34..302100ac9 100644
--- a/packages/website/ts/@next/components/sections/landing/clients.tsx
+++ b/packages/website/ts/@next/components/sections/landing/clients.tsx
@@ -1,9 +1,11 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
-import {BREAKPOINTS, Section, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
+import {BREAKPOINTS, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
+import {Section} from 'ts/@next/components/newLayout';
+
 interface ProjectLogo {
     name: string;
     imageUrl?: string;
@@ -59,7 +61,7 @@ const projects: ProjectLogo[] = [
 ];
 
 export const SectionLandingClients = () => (
-    <Section isPadLarge={true}>
+    <Section>
         <WrapCentered>
             <Heading size="small">
                 Join the growing number of projects developing on 0x
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
index 2f853f95b..ad78a1ab4 100644
--- a/packages/website/ts/@next/components/sections/landing/cta.tsx
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -19,7 +19,7 @@ export const SectionLandingCta = () => (
                         margin={[0, 0, 'default', 0]}
                     />
 
-                    <Paragraph size="medium" color="#00AE99">
+                    <Paragraph size="medium" color="#00AE99" marginBottom="15px">
                         Ready to build on 0x?
                     </Paragraph>
 
@@ -45,7 +45,7 @@ export const SectionLandingCta = () => (
                         margin={[0, 0, 'default', 0]}
                     />
 
-                    <Paragraph size="medium" color="#00AE99">
+                    <Paragraph size="medium" color="#00AE99" marginBottom="15px">
                         Want help from the 0x team?
                     </Paragraph>
 
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index 9e7ed7402..9c6ff7151 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -1,39 +1,30 @@
 import * as React from 'react';
 import {Button, ButtonWrap} from 'ts/@next/components/button';
+import {LandingAnimation} from 'ts/@next/components/heroImage';
 import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
+import {Hero} from 'ts/@next/components/hero';
+
 import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
 
 export const SectionLandingHero = () => (
-    <Section isPadLarge={true}>
-        <Wrap isReversed={true}>
-            <Column colWidth="1/2">
-                <WrapCentered>
-                    <LogoOutlined/>
-                </WrapCentered>
-            </Column>
-
-            <Column colWidth="1/2" isMobileCentered={true}>
-                <Heading size="large">
-                    Powering Decentralized Exchange
-                </Heading>
-
-                <Paragraph size="medium" isMuted={true}>
-                    0x is the best solution for adding<br />
-                    exchange functionality to your business.
-                </Paragraph>
+    <Hero
+        title="Powering Decentralized Exchange"
+        description="0x is the best solution for adding exchange functionality to your business."
+        figure={<LandingAnimation image={<LogoOutlined />} />}
+        actions={<Actions />}
+    />
+);
 
-                <ButtonWrap>
-                    <Button isInline={true}>
-                        Get Started
-                    </Button>
+const Actions = () => (
+    <>
+        <Button isInline={true}>
+            Get Started
+        </Button>
 
-                    <Button isTransparent={true} isInline={true}>
-                        Learn More
-                    </Button>
-                </ButtonWrap>
-            </Column>
-        </Wrap>
-    </Section>
+        <Button isTransparent={true} isInline={true}>
+            Learn More
+        </Button>
+    </>
 );
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 5071b8ef4..ae642f193 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -26,6 +26,8 @@ export interface ThemeInterface {
 const GLOBAL_THEMES: ThemeInterface = {
     dark: {
         bgColor: '#000000',
+        darkBgColor: '#111A19',
+        lightBgColor: '#003831',
         textColor: '#FFFFFF',
         linkColor: colors.brandLight,
         dropdownBg: '#111A19',
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 28d8e4b5e..86b9e16c5 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -70,10 +70,10 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
             --largeHeadingHeight: 1.108695652em; // TO DO
             --smallParagraph: 14px; // TO DO
             --defaultParagraph: 16px; // TO DO
-            --mediumParagraph: 16px; // TO DO
-            --largeParagraph: 18px; // TO DO
+            --mediumParagraph: 20px; // TO DO
+            --largeParagraph: 20px; // TO DO
             --smallIcon: 55px;
-            --mediumIcon: 55px;
+            --mediumIcon: 85px;
             --largeIcon: 115px;
         }
     }
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>