WIP

11 files changed, 379 insertions, 129 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',