Divides landing into section components, cleanup

6 files changed, 290 insertions, 3 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>
+);