WIP

4 files changed, 62 insertions, 128 deletions

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>
+    </>
 );