WIP landing and button changes

packages/website/ts/@next/components/button.tsx

@@ -5,15 +5,20 @@ import { colors } from 'ts/style/colors';
 
 export interface ButtonInterface {
     text: string;
+    transparent?: any;
 }
 
-const StyledButton = styled.button`
+const StyledButton = styled.button<ButtonInterface>`
     appearance: none;
     border: 0;
     background-color: ${colors.brandLight};
     color: ${colors.white};
     text-align: center;
     padding: 13px 22px 14px;
+
+    ${props => props.transparent && `
+        border: 1px solid #6A6A6A;
+    `}
 `;
 
 const Text = styled.span`
@@ -22,8 +27,12 @@ const Text = styled.span`
     line-height: 1.375rem;
 `;
 
-export const Button: React.StatelessComponent<ButtonInterface> = ({ text }) => (
-    <StyledButton>
+export const Button: React.StatelessComponent<ButtonInterface> = ({ text, transparent }) => (
+    <StyledButton transparent>
         <Text>{text}</Text>
     </StyledButton>
 );
+
+Button.defaultProps = {
+    transparent: false,
+};

packages/website/ts/@next/pages/landing.tsx

@@ -1,10 +1,35 @@
 import * as React from 'react';
-import { SiteWrap } from 'ts/@next/components/siteWrap';
-import { Section, Wrap, Column } from 'ts/@next/components/layout';
+import styled from 'styled-components'
 
+import { Button } from 'ts/@next/components/button';
+import { Column, Section, Wrap } from 'ts/@next/components/layout';
+import { SiteWrap } from 'ts/@next/components/siteWrap';
+import { Heading, Intro } from 'ts/@next/components/text';
+
+import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
+
+const Icon = styled.div`
+    flex-shrink: 0;
+`;
 
 export const NextLanding = () => (
   <SiteWrap>
+    <Section>
+      <Wrap>
+        <Column colWidth="2/3">
+          <Heading>Powering Decentralized Exchange</Heading>
+          <Intro>0x is the best solution for adding exchange functionality to your business.</Intro>
+          <Icon>
+            <Button text="Get Started" />
+            <Button text="Learn More" transparent />
+          </Icon>
+        </Column>
+
+        <Column colWidth="1/3">
+          <Icon as={logoOutlined as 'svg'} />
+        </Column>
+      </Wrap>
+    </Section>
     <Section>
       <Wrap>
         <Column colWidth="2/3">