Some cleanup, reindent

2 files changed, 23 insertions, 12 deletions

diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 1eecf0a55..9bf063040 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -15,6 +15,7 @@ interface ColumnWidths {
 
 interface SectionProps {
     noPadding?: any;
+    padLarge?: any;
     noMargin?: any;
     bgColor?: string;
     fullWidth?: any;
@@ -28,6 +29,7 @@ interface WrapProps {
 interface ColumnProps {
     colWidth?: '1/4' | '1/3' | '1/2' | '2/3';
     noPadding?: any;
+    padLarge?: any;
     bgColor?: string;
 }
 
@@ -72,7 +74,7 @@ export const Main = styled.main`
 
 export const Section = styled.section<SectionProps>`
     width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
-    padding: ${props => !props.noPadding && '30px'};
+    padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')};
     margin-bottom: ${props => !props.noMargin && `${GUTTER}px`};
     margin-left: ${props => props.fullWidth && `-${GUTTER}px`};
     background-color: ${props => props.bgColor};
@@ -105,7 +107,7 @@ export const WrapCentered = styled(WrapBase)`
 `;
 
 export const Column = styled.div<ColumnProps>`
-    padding: ${props => !props.noPadding && '30px'};
+    padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')};
     border: 1px dotted rgba(255, 0, 0, 0.3);
     background-color: ${props => props.bgColor};
 
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index ee9dd188e..ab0a3bc55 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import {colors} from 'ts/style/colors';
 
@@ -10,6 +10,8 @@ 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 IconReadyToBuild from 'ts/@next/icons/illustrations/ready-to-build.svg';
+
 
 const Icon = styled.div `
     flex-shrink: 0;
@@ -97,12 +99,18 @@ export const NextLanding = () => (
 
         <Section>
             <Wrap>
-                <Column bgColor="#003831" colWidth="1/2">
-                    This is a 2 COLUMN section
+                <Column bgColor="#003831" colWidth="1/2" padLarge>
+                    <WrapCentered>
+                        <Icon as={IconReadyToBuild as 'svg'} />
+                        Ready to build on 0x?
+                    </WrapCentered>
                 </Column>
 
-                <Column bgColor="#003831" colWidth="1/2">
-                    Again a 2 column section
+                <Column bgColor="#003831" colWidth="1/2" padLarge>
+                    <WrapCentered>
+                        <Icon as={IconReadyToBuild as 'svg'} />
+                        Ready to build on 0x?
+                    </WrapCentered>
                 </Column>
             </Wrap>
         </Section>
@@ -120,7 +128,10 @@ export const NextLanding = () => (
             </Wrap>
         </Section>
 
-        <Section bgColor="#ff0000" fullWidth noPadding>
+        <Section
+            bgColor="#ff0000"
+            fullWidth
+            noPadding>
             <Wrap width="full">
                 <Column colWidth="2/3">
                     SAMPLE FLUSHED width
@@ -134,9 +145,7 @@ export const NextLanding = () => (
 
         <Section bgColor="#003831">
             <Wrap width="narrow">
-                0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based
-                tokens. Anyone can utilize 0x to service a wide variety of markets ranging from
-                gaming items to traditional financial assets.
+                0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone can utilize 0x to service a wide variety of markets ranging from gaming items to traditional financial assets.
             </Wrap>
 
             <Wrap>
@@ -149,7 +158,7 @@ export const NextLanding = () => (
                 </Column>
 
                 <Column colWidth="1/3">
-                    three-column module
+                     three-column module
                 </Column>
             </Wrap>
         </Section>