More layout changes

8 files changed, 199 insertions, 98 deletions

diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx
index be3ded71f..cc3e88280 100644
--- a/packages/website/ts/@next/components/blockIconLink.tsx
+++ b/packages/website/ts/@next/components/blockIconLink.tsx
@@ -19,14 +19,41 @@ export const BlockIconLink = (props: Props) => (
                 size="large"
                 margin={[0, 0, 'default', 0]}
             />
+
+            <Title>
+                {props.title}
+            </Title>
+
+            <Link
+                isWithArrow={true}
+                isTransparent={true}
+                isNoBorder={true}
+                href={props.linkUrl}
+            >
+                {props.linkLabel}
+            </Link>
         </div>
     </Wrap>
 );
 
 const Wrap = styled.div`
+    width: calc(50% - 15px);
+    height: 400px;
     padding: 40px;
     display: flex;
+    justify-content: center;
     align-items: center;
     text-align: center;
     background-color: ${props => props.theme.lightBgColor};
+
+    @media (max-width: 900px) {
+        width: 100%;
+        margin-top: 30px;
+    }
+`;
+
+const Title = styled.h2`
+    font-size: 20px;
+    margin-bottom: 30px;
+    color: ${props => props.theme.linkColor};
 `;
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index 88ef6acdc..da72fe805 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export const Definition = (props: Props) => (
-    <Wrap isWithMargin={props.isWithMargin} isInline={props.isInline} isInlineIcon={props.isInlineIcon}>
+    <Wrap {...props}>
         <Icon
             name="ready-to-build"
             size={props.iconSize || 'medium'}
@@ -60,7 +60,8 @@ const Wrap = styled.div`
     max-width: ${props => props.isInline && '354px'};
 
     & + & {
-        margin-top: ${props => (props.isWithMargin && !props.isInlineIcon) ? '60px' : '120px'};
+        margin-top: ${props => props.isInlineIcon && '120px'};
+        margin-top: ${props => props.isWithMargin && '60px'};
     }
 
     @media (min-width: 768px) {
@@ -68,7 +69,7 @@ const Wrap = styled.div`
         display: ${props => props.isInlineIcon && 'flex'};
         justify-content: ${props => props.isInlineIcon && 'space-between'};
         align-items: ${props => props.isInlineIcon && 'center'};
-        text-align: ${props => props.isInlineIcon && 'left'};
+        text-align: ${props => (props.isInlineIcon || !props.isCentered) && 'left'};
     }
 
     @media (max-width: 768px) {
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 9c2ed1ea8..d6f11b653 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -108,7 +108,12 @@ const LinkList = (props: LinkListProps) => (
   </List>
 );
 
-const FooterSection = Section.withComponent('footer');
+const FooterSection = styled.section`
+    padding: 30px;
+    margin-top: 30px;
+    background-color: #181818;
+`;
+
 const FooterWrap = styled(FooterSection)`
     color: ${colors.white};
 
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index 8a3514bd9..8598b8f12 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -1,39 +1,99 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-interface Props {
-    isPadded: boolean;
+interface WrapProps {
+    isFullWidth?: boolean;
+    isTextCentered?: boolean;
+}
+
+interface SectionProps {
+    isPadded?: boolean;
+    isFullWidth?: boolean;
+    isFlex?: boolean;
+    flexBreakpoint?: string;
+    maxWidth?: string;
     bgColor?: 'dark' | 'light' | string;
 }
 
-export const Section = (props: Props) => (
-    <SectionBase bgColor={props.bgColor}>
-        <Wrap
-            isPadded={props.isPadded}
-        >
-            {props.children}
-        </Wrap>
-    </SectionBase>
-);
+interface FlexProps {
+    padding?: string;
+    isFlex?: boolean;
+}
 
-Section.defaultProps = {
-    isPadded: true,
+interface ColumnProps {
+    padding?: string;
+}
+
+export const Section = (props: SectionProps) => {
+    return (
+        <SectionBase {...props}>
+            <Wrap {...props}>
+                {props.children}
+            </Wrap>
+        </SectionBase>
+    );
 };
 
+export const Column = styled.div`
+    width: ${props => props.width};
+    max-width: ${props => props.maxWidth};
+    padding: ${props => props.padding};
+
+    @media (max-width: 768px) {
+        width: 100%;
+        margin-bottom: 60px;
+    }
+`;
+
+export const FlexWrap = styled.div`
+    padding: ${props => props.padding};
+
+    @media (min-width: ${props => props.flexBreakpoint || '768px'}) {
+        display: ${props => props.isFlex && 'flex'};
+        justify-content: ${props => props.isFlex && 'space-between'};
+    }
+`;
+
+export const WrapSticky = styled.div`
+    position: sticky;
+    top: ${props => props.offsetTop || '60px'};
+`;
+
 const SectionBase = styled.section`
-    width: calc(100% - 60px);
     margin: 0 auto;
-    padding: 120px 0;
+    padding: ${props => props.isPadded && '120px 0'};
     background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
 
     @media (max-width: 768px) {
-        padding: 40px 0;
+        padding: ${props => props.isPadded && '40px 0'};
     }
 `;
 
-const Wrap = styled.div`
+const Wrap = styled(FlexWrap)`
     width: calc(100% - 60px);
-    max-width: 895px;
+    max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
     margin: 0 auto;
-    text-align: center;
+    text-align: ${props => props.isTextCentered && 'center'};
+`;
+
+export const WrapGrid = styled(Wrap)`
+    display: flex;
+    flex-wrap: ${props => props.isWrapped && `wrap`};
+    justify-content: ${props => props.isCentered ? `center` : 'space-between'};
 `;
+
+Section.defaultProps = {
+    isPadded: true,
+};
+
+FlexWrap.defaultProps = {
+    isFlex: true,
+};
+
+WrapGrid.defaultProps = {
+    isCentered: true,
+};
+
+Wrap.defaultProps = {
+    isFlex: false,
+};
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