More layout changes

4 files changed, 83 insertions, 75 deletions

diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index 4c246ec3e..22abe6c26 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -1,13 +1,18 @@
 import * as React from 'react';
-import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
+import styled from 'styled-components';
+
+import {Link} from 'ts/@next/components/button';
 import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
+import {Column, FlexWrap, Section} from 'ts/@next/components/newLayout';
 import {Heading, Paragraph} from 'ts/@next/components/text';
-import {colors} from 'ts/style/colors';
 
-import {Section} from 'ts/@next/components/newLayout';
+interface FigureProps {
+    value: string;
+    description: string;
+}
 
 export const SectionLandingAbout = () => (
-    <Section bgColor="dark">
+    <Section bgColor="dark" isTextCentered={true}>
         <InlineIconWrap>
             <Icon name="coin" size="small" />
             <Icon name="coin" size="small" />
@@ -39,8 +44,48 @@ export const SectionLandingAbout = () => (
             style={{
                 width: '340px',
                 borderColor: '#3C4746',
-                margin: '60px auto 0 auto',
+                margin: '60px auto',
             }}
         />
+
+        <FlexWrap as="dl">
+            <Figure
+                value="873,435"
+                description="Number of Transactions"
+            />
+
+            <Figure
+                value="$203M"
+                description="Total Volume"
+            />
+
+            <Figure
+                value="227,372"
+                description="Number of Relayers"
+            />
+        </FlexWrap>
     </Section>
 );
+
+const Figure = (props: FigureProps) => (
+    <Column padding="0 30px">
+        <FigureValue>
+            {props.value}
+        </FigureValue>
+        <FigureDescription>
+            {props.description}
+        </FigureDescription>
+    </Column>
+);
+
+const FigureValue = styled.dt`
+    font-size: 50px;
+    font-size: 40px;
+    font-weight: 300;
+    margin-bottom: 15px;
+`;
+
+const FigureDescription = styled.dd`
+    font-size: 18px;
+    color: #999999;
+`;
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx
index 302100ac9..8f6429328 100644
--- a/packages/website/ts/@next/components/sections/landing/clients.tsx
+++ b/packages/website/ts/@next/components/sections/landing/clients.tsx
@@ -1,10 +1,9 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
-import {BREAKPOINTS, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
-import {Section} from 'ts/@next/components/newLayout';
+import {Section, WrapGrid} from 'ts/@next/components/newLayout';
 
 interface ProjectLogo {
     name: string;
@@ -61,12 +60,10 @@ const projects: ProjectLogo[] = [
 ];
 
 export const SectionLandingClients = () => (
-    <Section>
-        <WrapCentered>
-            <Heading size="small">
-                Join the growing number of projects developing on 0x
-            </Heading>
-        </WrapCentered>
+    <Section isTextCentered={true}>
+        <Heading size="small">
+            Join the growing number of projects developing on 0x
+        </Heading>
 
         <WrapGrid width="narrow" isWrapped={true}>
             {_.map(projects, (item: ProjectLogo, index) => (
@@ -90,13 +87,13 @@ const StyledProject = styled.div<StyledProjectInterface>`
         height: 100%;
     }
 
-    @media (min-width: ${BREAKPOINTS.mobile}) {
+    @media (min-width: 768px) {
         width: 120px;
         height: 120px;
         margin: 30px;
     }
 
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 768px) {
         width: 100px;
         height: 100px;
         margin: 15px;
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
index ad78a1ab4..4c06982e4 100644
--- a/packages/website/ts/@next/components/sections/landing/cta.tsx
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -1,63 +1,31 @@
 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 {Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
-export const SectionLandingCta = () => (
-    <Section>
-        <Wrap>
-            <Column
-                bgColor="#003831"
-                colWidth="1/2"
-                isPadLarge={true}
-            >
-                <WrapCentered>
-                    <Icon
-                        name="ready-to-build"
-                        size="large"
-                        margin={[0, 0, 'default', 0]}
-                    />
-
-                    <Paragraph size="medium" color="#00AE99" marginBottom="15px">
-                        Ready to build on 0x?
-                    </Paragraph>
-
-                    <Link
-                        href="#"
-                        isTransparent={true}
-                        isWithArrow={true}
-                    >
-                        Get Started
-                    </Link>
-                </WrapCentered>
-            </Column>
+import {Column, Section} from 'ts/@next/components/newLayout';
 
-            <Column
-                bgColor="#003831"
-                colWidth="1/2"
-                isPadLarge={true}
-            >
-                <WrapCentered>
-                    <Icon
-                        name="ready-to-build"
-                        size="large"
-                        margin={[0, 0, 'default', 0]}
-                    />
+import {BlockIconLink} from 'ts/@next/components/blockIconLink';
 
-                    <Paragraph size="medium" color="#00AE99" marginBottom="15px">
-                        Want help from the 0x team?
-                    </Paragraph>
-
-                    <Link
-                        href="#"
-                        isTransparent={true}
-                        isWithArrow={true}
-                    >
-                        Get in Touch
-                    </Link>
-                </WrapCentered>
-            </Column>
-        </Wrap>
+export const SectionLandingCta = () => (
+    <Section
+        isPadded={false}
+        isFullWidth={true}
+        isFlex={true}
+        flexBreakpoint="900px"
+    >
+        <BlockIconLink
+            icon=""
+            title="Ready to build on 0x?"
+            linkLabel="Get Started"
+            linkUrl="#"
+        />
+        <BlockIconLink
+            icon="coin"
+            title="Wat help from the 0x team?"
+            linkLabel="Get in Touch"
+            linkUrl="#"
+        />
     </Section>
 );
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index 9c6ff7151..930b80e89 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -1,10 +1,8 @@
 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 {Button} from 'ts/@next/components/button';
 import {Hero} from 'ts/@next/components/hero';
+import {LandingAnimation} from 'ts/@next/components/heroImage';
 
 import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
 
@@ -13,11 +11,11 @@ export const SectionLandingHero = () => (
         title="Powering Decentralized Exchange"
         description="0x is the best solution for adding exchange functionality to your business."
         figure={<LandingAnimation image={<LogoOutlined />} />}
-        actions={<Actions />}
+        actions={<HeroActions />}
     />
 );
 
-const Actions = () => (
+const HeroActions = () => (
     <>
         <Button isInline={true}>
             Get Started