More layout changes

10 files changed, 259 insertions, 153 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
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 66c4138a1..fab5e62b6 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styled from 'styled-components';
 import {SiteWrap} from 'ts/@next/components/siteWrap';
 
 import {SectionLandingAbout} from 'ts/@next/components/sections/landing/about';
@@ -6,6 +7,12 @@ import {SectionLandingClients} from 'ts/@next/components/sections/landing/client
 import {SectionLandingCta} from 'ts/@next/components/sections/landing/cta';
 import {SectionLandingHero} from 'ts/@next/components/sections/landing/hero';
 
+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';
+
 interface Props {
     theme: {
         bgColor: string;
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index fc24fd665..d0d909949 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -10,12 +10,12 @@ 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';
-import { BREAKPOINTS, Column, Section, Wrap, WrapCentered, WrapSticky } from 'ts/@next/components/layout';
 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';
+import {Column, Section, WrapSticky} from 'ts/@next/components/newLayout';
 
 const offersData = [
     {
@@ -95,8 +95,11 @@ export class NextWhy extends React.PureComponent {
                     }
                 />
 
-              <Section bgColor={colors.backgroundDark} isPadLarge={true}>
-                <Wrap>
+                <Section
+                    bgColor="dark"
+                    isFlex={true}
+                    maxWidth="1170px"
+                >
                     <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..."
@@ -117,12 +120,10 @@ export class NextWhy extends React.PureComponent {
                         iconSize="large"
                         isInline={true}
                     />
-                </Wrap>
-              </Section>
+                </Section>
 
-              <Section>
-                <Wrap>
-                  <Column colWidth="1/3">
+              <Section maxWidth="1170px" isFlex={true}>
+                  <Column>
                       <NavStickyWrap offsetTop="130px">
                           <ChapterLink offset="60" href="#benefits">Benefits</ChapterLink>
                           <ChapterLink offset="60" href="#cases">Use Cases</ChapterLink>
@@ -130,52 +131,49 @@ export class NextWhy extends React.PureComponent {
                       </NavStickyWrap>
                   </Column>
 
-                  <Column colWidth="2/3">
-                        <SectionWrap id="benefits">
-                            <Heading size="medium">What 0x offers</Heading>
-
-                            {_.map(offersData, (item, index) => (
-                                <Definition
-                                    title={item.title}
-                                    description={item.description}
-                                    isWithMargin={true}
-                                />
-                            ))}
-                        </SectionWrap>
-
-                        <SectionWrap id="cases">
-                            <Heading size="medium">Use Cases</Heading>
-                            <Slider>
-                                {_.map(useCaseSlides, (item, index) => (
-                                    <Slide
-                                        key={`useCaseSlide-${index}`}
-                                        heading={item.title}
-                                        text={item.description}
-                                        icon={item.icon}
+                    <Column width="55%" maxWidth="826px">
+                        <Column width="100%" maxWidth="560px">
+                            <SectionWrap id="benefits">
+                                <Heading size="medium">What 0x offers</Heading>
+
+                                {_.map(offersData, (item, index) => (
+                                    <Definition
+                                        key={`offers-${index}`}
+                                        title={item.title}
+                                        description={item.description}
+                                        isWithMargin={true}
                                     />
                                 ))}
-                            </Slider>
-                        </SectionWrap>
-
-                        <SectionWrap id="functionality">
-                            <Heading size="medium">Exchange Functionality</Heading>
-
-                            {_.map(functionalityData, (item, index) => (
-                                <ChapterItemWrap key={`functionality-${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>
-                            ))}
-                        </SectionWrap>
-                  </Column>
-                </Wrap>
+                            </SectionWrap>
+
+                            <SectionWrap id="cases">
+                                <Heading size="medium">Use Cases</Heading>
+                                <Slider>
+                                    {_.map(useCaseSlides, (item, index) => (
+                                        <Slide
+                                            key={`useCaseSlide-${index}`}
+                                            heading={item.title}
+                                            text={item.description}
+                                            icon={item.icon}
+                                        />
+                                    ))}
+                                </Slider>
+                            </SectionWrap>
+
+                            <SectionWrap id="functionality">
+                                <Heading size="medium">Exchange Functionality</Heading>
+
+                                {_.map(functionalityData, (item, index) => (
+                                    <Definition
+                                        key={`functionality-${index}`}
+                                        title={item.title}
+                                        description={item.description}
+                                        isWithMargin={true}
+                                    />
+                                ))}
+                            </SectionWrap>
+                        </Column>
+                    </Column>
               </Section>
 
               <Banner
@@ -206,13 +204,13 @@ const SectionWrap = styled.div`
         background-color: #3d3d3d;
     }
 
-    @media (min-width: ${BREAKPOINTS.mobile}) {
+    @media (min-width: 768px) {
         & + &:before {
             width: 100vw;
         }
     }
 
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 768px) {
         text-align: left;
 
         & + &:before {
@@ -222,7 +220,7 @@ const SectionWrap = styled.div`
 `;
 
 const NavStickyWrap = styled(WrapSticky)`
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 768px) {
         display: none;
     }
 `;