Divides landing into section components, cleanup

8 files changed, 306 insertions, 274 deletions

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 14228083f..ea7f286b3 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -11,6 +11,7 @@ interface ButtonInterface {
     isNoBorder?: boolean;
     isNoPadding?: boolean;
     isWithArrow?: boolean;
+    isAccentColor?: boolean;
     hasIcon?: boolean | string;
     isInline?: boolean;
     href?: string;
@@ -26,7 +27,7 @@ export const Button = styled.button<ButtonInterface>`
     display: ${props => props.isInline && 'inline-block'};
     background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
     border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'};
-    color: ${props => props.color || props.theme.textColor};
+    color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
     padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
     text-align: center;
     font-size: ${props => props.isWithArrow ? '20px' : '18px'};
@@ -37,7 +38,7 @@ export const Button = styled.button<ButtonInterface>`
     }
 
     path {
-        fill: ${props => props.color || props.theme.textColor};
+        fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
     }
 `;
 
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index 61f8f8f6f..07a882246 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -10,7 +10,7 @@ interface IconProps extends PaddingInterface {
 
 export const Icon: React.FunctionComponent<Props> = (props: Props) => {
     const IconSVG = Loadable({
-        loader: () => import(`ts/@next/icons/illustrations/${props.name}.svg`),
+        loader: () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`),
         loading: () => 'Loading',
     });
 
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
new file mode 100644
index 000000000..42062a2e1
--- /dev/null
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -0,0 +1,106 @@
+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',
+                    margin: '0 auto',
+                    borderColor: '#3C4746',
+                    marginTop: '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}
+                    isNoMargin={true}
+                >
+                    873,435
+                </Heading>
+
+                <Paragraph
+                    isMuted={0.4}
+                    isCentered={true}
+                    isNoMargin={true}
+                >
+                    Number of transactions
+                </Paragraph>
+            </Column>
+
+            <Column colWidth="1/3" isNoPadding={true}>
+                <Heading
+                    size="medium"
+                    isCentered={true}
+                    isNoMargin={true}
+                >
+                    $203M
+                </Heading>
+
+                <Paragraph
+                    isMuted={0.4}
+                    isCentered={true}
+                    isNoMargin={true}
+                >
+                    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>
+    </Section>
+);
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx
new file mode 100644
index 000000000..c08a4ea48
--- /dev/null
+++ b/packages/website/ts/@next/components/sections/landing/clients.tsx
@@ -0,0 +1,78 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+import {Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
+import {Heading, Paragraph} from 'ts/@next/components/text';
+
+interface ProjectLogo {
+    name: string;
+    imageUrl?: string;
+}
+
+const projects: ProjectLogo[] = [
+    {
+        name: 'Radar Relay',
+        imageUrl: '/images/@next/relayer-logos/logo_1.png',
+    },
+    {
+        name: 'Paradex',
+        imageUrl: '/images/@next/relayer-logos/logo_5.png',
+    },
+    {
+        name: 'Amadeus',
+        imageUrl: '/images/@next/relayer-logos/logo_3.png',
+    },
+    {
+        name: 'The Ocean X',
+        imageUrl: '/images/@next/relayer-logos/logo_4.png',
+    },
+    {
+        name: 'Paradex',
+        imageUrl: '/images/@next/relayer-logos/logo_5.png',
+    },
+    {
+        name: 'Decent EX',
+        imageUrl: '/images/@next/relayer-logos/logo_2.1.png',
+    },
+    {
+        name: 'dEX',
+        imageUrl: '/images/@next/relayer-logos/logo_2.2.png',
+    },
+    {
+        name: 'OpenRelay',
+        imageUrl: '/images/@next/relayer-logos/logo_2.3.png',
+    },
+    {
+        name: 'DDEX',
+        imageUrl: '/images/@next/relayer-logos/logo_2.png',
+    },
+];
+
+export const SectionLandingClients = () => (
+    <Section isPadLarge={true}>
+        <WrapCentered>
+            <Heading size="small">You're in good company</Heading>
+        </WrapCentered>
+
+        <WrapGrid width="narrow" isWrapped={true}>
+            {_.map(projects, (item: ProjectLogo, index) => (
+                <StyledProject key={`client-${index}`}>
+                    <img src={item.imageUrl} alt={item.name} />
+                </StyledProject>
+            ))}
+        </WrapGrid>
+    </Section>
+);
+
+const StyledProject = styled.div`
+    width: 90px;
+    height: 90px;
+    flex-shrink: 0;
+    margin: 30px;
+
+    img {
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+    }
+`;
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
new file mode 100644
index 000000000..2f853f95b
--- /dev/null
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -0,0 +1,63 @@
+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';
+
+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">
+                        Ready to build on 0x?
+                    </Paragraph>
+
+                    <Link
+                        href="#"
+                        isTransparent={true}
+                        isWithArrow={true}
+                    >
+                        Get Started
+                    </Link>
+                </WrapCentered>
+            </Column>
+
+            <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">
+                        Want help from the 0x team?
+                    </Paragraph>
+
+                    <Link
+                        href="#"
+                        isTransparent={true}
+                        isWithArrow={true}
+                    >
+                        Get in Touch
+                    </Link>
+                </WrapCentered>
+            </Column>
+        </Wrap>
+    </Section>
+);
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
new file mode 100644
index 000000000..e43ac41f2
--- /dev/null
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import {Button, ButtonWrap} from 'ts/@next/components/button';
+import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
+import {Heading, Paragraph} from 'ts/@next/components/text';
+
+import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
+
+export const SectionLandingHero = () => (
+    <Section>
+        <Wrap>
+            <Column colWidth="1/2">
+                <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>
+
+                <ButtonWrap>
+                    <Button isInline={true}>
+                        Get Started
+                    </Button>
+
+                    <Button isTransparent={true} isInline={true}>
+                        Learn More
+                    </Button>
+                </ButtonWrap>
+            </Column>
+
+            <Column colWidth="1/2">
+                <WrapCentered>
+                    <LogoOutlined/>
+                </WrapCentered>
+            </Column>
+        </Wrap>
+    </Section>
+);
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 8ddf78922..7d5e59c6e 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -89,10 +89,6 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
         overflow: hidden;
     }
 
-    a {
-        color: ${props => props.theme.linkColor};
-    }
-
     img, svg {
         max-width: 100%;
         object-fit: contain;
@@ -103,11 +99,6 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
         line-height: 1.444444444em; // 26px
     }
 
-    :root a {
-        color: inherit;
-        text-decoration: none;
-    }
-
     svg + p,
     img + p {
         padding-top: 30px;
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 2ee7ede2e..66c4138a1 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -1,270 +1,24 @@
-import * as _ from 'lodash';
 import * as React from 'react';
-import styled from 'styled-components';
-
-import {colors} from 'ts/style/colors';
-
-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 {SiteWrap} from 'ts/@next/components/siteWrap';
-import {Heading, Paragraph} from 'ts/@next/components/text';
 
-import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
-import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
-import ReadyToBuildIcon from 'ts/@next/icons/illustrations/ready-to-build.svg';
-import SupportIcon from 'ts/@next/icons/illustrations/support.svg';
-
-interface ProjectLogo {
-    name: string;
-    imageUrl?: string;
+import {SectionLandingAbout} from 'ts/@next/components/sections/landing/about';
+import {SectionLandingClients} from 'ts/@next/components/sections/landing/clients';
+import {SectionLandingCta} from 'ts/@next/components/sections/landing/cta';
+import {SectionLandingHero} from 'ts/@next/components/sections/landing/hero';
+
+interface Props {
+    theme: {
+        bgColor: string;
+        textColor: string;
+        linkColor: string;
+    };
 }
 
-const projects: ProjectLogo[] = [
-    {
-        name: 'Radar Relay',
-        imageUrl: '/images/@next/relayer-logos/logo_1.png',
-    },
-    {
-        name: 'Paradex',
-        imageUrl: '/images/@next/relayer-logos/logo_5.png',
-    },
-    {
-        name: 'Amadeus',
-        imageUrl: '/images/@next/relayer-logos/logo_3.png',
-    },
-    {
-        name: 'The Ocean X',
-        imageUrl: '/images/@next/relayer-logos/logo_4.png',
-    },
-    {
-        name: 'Paradex',
-        imageUrl: '/images/@next/relayer-logos/logo_5.png',
-    },
-    {
-        name: 'Decent EX',
-        imageUrl: '/images/@next/relayer-logos/logo_2.1.png',
-    },
-    {
-        name: 'dEX',
-        imageUrl: '/images/@next/relayer-logos/logo_2.2.png',
-    },
-    {
-        name: 'OpenRelay',
-        imageUrl: '/images/@next/relayer-logos/logo_2.3.png',
-    },
-    {
-        name: 'DDEX',
-        imageUrl: '/images/@next/relayer-logos/logo_2.png',
-    },
-];
-
-export const NextLanding: React.StatelessComponent<{}> = () => (
+export const NextLanding: React.StatelessComponent<{}> = (props: Props) => (
     <SiteWrap theme="dark">
-        <Section>
-            <Wrap>
-                <Column colWidth="1/2">
-                    <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>
-
-                    <ButtonWrap>
-                        <Button isInline={true}>
-                            Get Started
-                        </Button>
-
-                        <Button isTransparent={true} isInline={true}>
-                            Learn More
-                        </Button>
-                    </ButtonWrap>
-                </Column>
-
-                <Column colWidth="1/2">
-                    <WrapCentered>
-                        <LogoOutlined/>
-                    </WrapCentered>
-                </Column>
-            </Wrap>
-        </Section>
-
-        <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>
-
-                <Button href="#" isTransparent={true}>
-                    Discover how developers use 0x
-                </Button>
-            </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}
-                        isNoMargin={true}
-                    >
-                        873,435
-                    </Heading>
-
-                    <Paragraph
-                        isMuted={0.4}
-                        isCentered={true}
-                        isNoMargin={true}
-                    >
-                        Number of transactions
-                    </Paragraph>
-                </Column>
-
-                <Column colWidth="1/3" isNoPadding={true}>
-                    <Heading
-                        size="medium"
-                        isCentered={true}
-                        isNoMargin={true}
-                    >
-                        $203M
-                    </Heading>
-
-                    <Paragraph
-                        isMuted={0.4}
-                        isCentered={true}
-                        isNoMargin={true}
-                    >
-                        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>
-        </Section>
-
-        <Section isPadLarge={true}>
-            <WrapCentered>
-                <Heading size="small">You're in good company</Heading>
-            </WrapCentered>
-
-            <WrapGrid width="narrow" isWrapped={true}>
-                {_.map(projects, (item: ProjectLogo, index) => (
-                    <Project
-                        key={index}
-                        name={item.name}
-                        imageUrl={item.imageUrl}
-                    />
-                ))}
-            </WrapGrid>
-        </Section>
-
-        <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">
-                            Ready to build on 0x?
-                        </Paragraph>
-
-                        <Link
-                            href="#"
-                            isTransparent={true}
-                            isWithArrow={true}
-                        >
-                            Get Started
-                        </Link>
-                    </WrapCentered>
-                </Column>
-
-                <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">
-                            Want help from the 0x team?
-                        </Paragraph>
-
-                        <Link
-                            href="#"
-                            isTransparent={true}
-                            isWithArrow={true}
-                        >
-                            Get in Touch
-                        </Link>
-                    </WrapCentered>
-                </Column>
-            </Wrap>
-        </Section>
+        <SectionLandingHero />
+        <SectionLandingAbout />
+        <SectionLandingClients />
+        <SectionLandingCta />
     </SiteWrap>
 );
-
-const Project = ({ name, imageUrl }: ProjectLogo) => (
-    <StyledProject>
-        <img src={imageUrl} alt={name} />
-    </StyledProject>
-);
-
-const StyledProject = styled.div`
-    width: 90px;
-    height: 90px;
-    flex-shrink: 0;
-    margin: 30px;
-
-    img {
-        object-fit: contain;
-        width: 100%;
-        height: 100%;
-    }
-`;