From 871ec6cfbc778d3090f108fc349d4cda77a81cf6 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 4 Dec 2018 16:41:01 +0100
Subject: Adds sa bit of polish to landing page

---
 .../website/ts/@next/constants/globalStyle.tsx     |  5 ++
 packages/website/ts/@next/constants/utilities.tsx  |  1 +
 packages/website/ts/@next/pages/landing.tsx        | 62 +++++++++++++++++-----
 3 files changed, 55 insertions(+), 13 deletions(-)

(limited to 'packages/website')

diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index fd9e67cb4..b22a5c6db 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -61,6 +61,11 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
         color: inherit;
         text-decoration: none;
     }
+
+    svg + p,
+    img + p {
+        padding-top: 30px;
+    }
 `);
 
 export { GlobalStyles };
diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx
index 7d9313583..35956c47b 100644
--- a/packages/website/ts/@next/constants/utilities.tsx
+++ b/packages/website/ts/@next/constants/utilities.tsx
@@ -9,6 +9,7 @@ interface PaddingSizes {
 const PADDING_SIZES: PaddingSizes = {
     'default': '30px',
     'large': '60px',
+    'small': '15px',
 };
 
 export const getCSSPadding = (value: number | Array<string | number>): string => {
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 2feb4a302..fd6b5345b 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -119,27 +119,45 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
                         873,435
                     </Heading>
 
-                    <Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}>
+                    <Paragraph
+                        isMuted={0.4}
+                        isCentered={true}
+                        isNoMargin={true}
+                    >
                         Number of transactions
                     </Paragraph>
                 </Column>
 
                 <Column colWidth="1/3" isNoPadding={true}>
-                    <Heading size="medium" isCentered={true}>
+                    <Heading
+                        size="medium"
+                        isCentered={true}
+                    >
                         $203M
                     </Heading>
 
-                    <Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}>
+                    <Paragraph
+                        isMuted={0.4}
+                        isCentered={true}
+                        isNoMargin={true}
+                    >
                         Total volume
                     </Paragraph>
                 </Column>
 
                 <Column colWidth="1/3" isNoPadding={true}>
-                    <Heading size="medium" isCentered={true}>
+                    <Heading
+                        size="medium"
+                        isCentered={true}
+                    >
                         227,372
                     </Heading>
 
-                    <Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}>
+                    <Paragraph
+                        isMuted={0.4}
+                        isCentered={true}
+                        isNoMargin={true}
+                    >
                         Number of relayers
                     </Paragraph>
                 </Column>
@@ -151,9 +169,13 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
                 <Heading size="small">You're in good company</Heading>
             </WrapCentered>
 
-            <WrapGrid width="narrow">
+            <WrapGrid width="narrow" isWrapped={true}>
                 {_.map(projects, (item: ProjectLogo, index) => (
-                    <Project key={index} name={item.name} imageUrl={item.imageUrl} />
+                    <Project
+                        key={index}
+                        name={item.name}
+                        imageUrl={item.imageUrl}
+                    />
                 ))}
             </WrapGrid>
         </Section>
@@ -167,7 +189,14 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
                 >
                     <WrapCentered>
                         <ReadyToBuildIcon width="150" />
-                        Ready to build on 0x?
+
+                        <Paragraph>
+                            Ready to build on 0x?
+                        </Paragraph>
+
+                        <Button isTransparent={true}>
+                            Get Started
+                        </Button>
                     </WrapCentered>
                 </Column>
 
@@ -178,7 +207,14 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
                 >
                     <WrapCentered>
                         <SupportIcon width="150" />
-                        Want help from the 0x team?
+
+                        <Paragraph>
+                            Want help from the 0x team?
+                        </Paragraph>
+
+                        <Button isTransparent={true}>
+                            Get in Touch
+                        </Button>
                     </WrapCentered>
                 </Column>
             </Wrap>
@@ -193,10 +229,10 @@ const Project = ({ name, imageUrl }: ProjectLogo) => (
 );
 
 const StyledProject = styled.div`
-    width: 80px;
-    height: 116px;
-    border: 1px solid blue;
-    margin: 30px 60px;
+    width: 90px;
+    height: 90px;
+    flex-shrink: 0;
+    margin: 30px;
 
     img {
         object-fit: contain;
-- 
cgit v1.2.3