Add text and illustrations for home

5 files changed, 38 insertions, 3 deletions

diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 624ab760d..5b1ee9d92 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -4,7 +4,8 @@ import styled from 'styled-components';
 import { colors } from 'ts/style/colors';
 
 export interface Props {
-    size?: string;
+    size?: 'normal' | 'medium' | 'large';
+    center?: boolean;
 }
 
 const StyledHeading = styled.h1`
@@ -20,6 +21,18 @@ const StyledIntro = styled.p`
     line-height: 1.823529412em;
 `;
 
+const StyledText = styled.p<Props>`
+    color: ${colors.white};
+    font-size: 1rem;
+    ${(props: Props) => props.size === 'medium' && `
+        font-size: 1.555555556rem;
+        line-height: 1.357142857em;
+    `}
+    ${(props: Props) => props.center && `
+        text-align: center
+    `}
+`;
+
 export const Heading: React.StatelessComponent<Props> = ({ children }) => (
     <StyledHeading>{children}</StyledHeading>
 );
@@ -27,3 +40,12 @@ export const Heading: React.StatelessComponent<Props> = ({ children }) => (
 export const Intro: React.StatelessComponent<Props> = ({ children }) => (
     <StyledIntro>{children}</StyledIntro>
 );
+
+export const Text: React.StatelessComponent<Props> = ({ children, ...props }) => (
+    <StyledText {...props}>{children}</StyledText>
+);
+
+Text.defaultProps = {
+    size: 'normal',
+    center: false,
+};
diff --git a/packages/website/ts/@next/icons/illustrations/protocol.svg b/packages/website/ts/@next/icons/illustrations/protocol.svg
new file mode 100644
index 000000000..71453194a
--- /dev/null
+++ b/packages/website/ts/@next/icons/illustrations/protocol.svg
@@ -0,0 +1 @@
+<svg width="144" height="144" fill="none" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode:screen" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"><path d="M72 132.722c33.536 0 60.722-27.186 60.722-60.722S105.536 11.278 72 11.278 11.278 38.464 11.278 72 38.464 132.722 72 132.722z"/><path d="M72 20.557A9.278 9.278 0 1 0 72 2a9.278 9.278 0 0 0 0 18.557zM114.942 38.336a9.278 9.278 0 1 0-9.278-9.278 9.278 9.278 0 0 0 9.278 9.278zM132.722 81.278A9.278 9.278 0 0 0 142 72a9.278 9.278 0 0 0-9.278-9.278 9.278 9.278 0 1 0 0 18.556zM114.942 124.221a9.279 9.279 0 1 0 0-18.557 9.279 9.279 0 0 0 0 18.557zM72 142a9.278 9.278 0 0 0 9.278-9.278 9.278 9.278 0 1 0-18.556 0A9.278 9.278 0 0 0 72 142zM29.058 124.221a9.278 9.278 0 0 0 9.278-9.279 9.278 9.278 0 0 0-9.278-9.278 9.278 9.278 0 0 0-9.279 9.278 9.278 9.278 0 0 0 9.279 9.279zM11.278 81.278a9.278 9.278 0 1 0 0-18.556 9.278 9.278 0 0 0 0 18.556zM29.058 38.336a9.278 9.278 0 1 0 0-18.557 9.278 9.278 0 0 0 0 18.557zM68.114 75.886c-2.138-2.137-2.138-5.635 0-7.82 2.137-2.138 5.635-2.138 7.82 0 2.138 2.137 2.138 5.634 0 7.82-2.185 2.138-5.683 2.138-7.82 0zM49.363 75.886c-2.137-2.137-2.137-5.635 0-7.82 2.137-2.138 5.635-2.138 7.821 0 2.137 2.137 2.137 5.634 0 7.82a5.571 5.571 0 0 1-7.821 0zM30.66 75.886c-2.137-2.137-2.137-5.635 0-7.82 2.138-2.138 5.636-2.138 7.822 0 2.137 2.137 2.137 5.634 0 7.82-2.186 2.138-5.684 2.138-7.821 0zM86.816 75.886c-2.137-2.137-2.137-5.635 0-7.82 2.138-2.138 5.635-2.138 7.821 0 2.138 2.137 2.138 5.634 0 7.82-2.186 2.138-5.683 2.138-7.82 0zM105.518 75.886c-2.137-2.137-2.137-5.635 0-7.82 2.138-2.138 5.635-2.138 7.821 0 2.138 2.137 2.138 5.634 0 7.82-2.186 2.138-5.683 2.138-7.821 0zM53.25 58.738c0-3.06 2.477-5.489 5.489-5.489 3.06 0 5.489 2.477 5.489 5.49 0 3.06-2.478 5.489-5.49 5.489-3.011.048-5.489-2.43-5.489-5.49zM40.036 45.525c0-3.06 2.478-5.489 5.49-5.489 3.06 0 5.489 2.477 5.489 5.49 0 3.06-2.478 5.489-5.49 5.489a5.453 5.453 0 0 1-5.489-5.49zM79.724 85.213c0-3.06 2.477-5.49 5.49-5.49 3.06 0 5.488 2.478 5.488 5.49 0 3.06-2.477 5.49-5.489 5.49-3.06.048-5.49-2.43-5.49-5.49zM92.937 98.475c0-3.06 2.477-5.49 5.49-5.49a5.483 5.483 0 0 1 5.488 5.49c0 3.06-2.477 5.489-5.489 5.489s-5.49-2.478-5.49-5.49zM85.213 53.25c3.06 0 5.49 2.477 5.49 5.488 0 3.06-2.478 5.49-5.49 5.49a5.483 5.483 0 0 1-5.49-5.49 5.483 5.483 0 0 1 5.49-5.489zM98.475 40.036c3.06 0 5.489 2.477 5.489 5.49 0 3.06-2.477 5.489-5.49 5.489a5.484 5.484 0 0 1-5.489-5.49c-.048-3.06 2.43-5.489 5.49-5.489zM58.739 79.724c3.06 0 5.489 2.477 5.489 5.489 0 3.06-2.478 5.49-5.49 5.49a5.483 5.483 0 0 1-5.489-5.49c0-3.06 2.478-5.49 5.49-5.49zM45.525 92.937c3.06 0 5.49 2.477 5.49 5.49a5.483 5.483 0 0 1-5.49 5.488 5.483 5.483 0 0 1-5.489-5.489 5.484 5.484 0 0 1 5.49-5.49zM68.114 49.363c2.137-2.138 5.635-2.138 7.82 0 2.138 2.137 2.138 5.635 0 7.82-2.137 2.138-5.634 2.138-7.82 0a5.483 5.483 0 0 1 0-7.82zM68.114 30.66c2.137-2.137 5.635-2.137 7.82 0 2.138 2.138 2.138 5.636 0 7.822-2.137 2.137-5.634 2.137-7.82 0-2.186-2.186-2.186-5.684 0-7.821zM68.114 86.816c2.137-2.137 5.635-2.137 7.82 0 2.138 2.138 2.138 5.635 0 7.821-2.137 2.137-5.634 2.137-7.82 0-2.186-2.186-2.186-5.683 0-7.82zM68.114 105.518c2.137-2.137 5.635-2.137 7.82 0 2.138 2.138 2.138 5.635 0 7.821-2.137 2.138-5.634 2.138-7.82 0-2.186-2.186-2.186-5.683 0-7.821z"/></g></svg>
\ No newline at end of file
diff --git a/packages/website/ts/@next/icons/illustrations/ready-to-build.svg b/packages/website/ts/@next/icons/illustrations/ready-to-build.svg
new file mode 100644
index 000000000..f3e44d53a
--- /dev/null
+++ b/packages/website/ts/@next/icons/illustrations/ready-to-build.svg
@@ -0,0 +1 @@
+<svg width="152" height="152" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M76 151c41.421 0 75-33.579 75-75S117.421 1 76 1 1 34.579 1 76s33.579 75 75 75z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M76 1.502l-30.852 44.8H76L76.05 76l30.803-44.9H76.001V1.502zM76 75.997l-30.853 44.799H76l.05 29.699 30.803-44.899H76V75.997z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"/><path d="M1.502 75.998l44.8 30.852V75.998L76 75.948 31.1 45.144v30.853H1.503zM76 76l45.101 31.522V76L151 75.95l-45.202-31.47V76H76z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/packages/website/ts/@next/icons/illustrations/support.svg b/packages/website/ts/@next/icons/illustrations/support.svg
new file mode 100644
index 000000000..d3f2294cc
--- /dev/null
+++ b/packages/website/ts/@next/icons/illustrations/support.svg
@@ -0,0 +1 @@
+<svg width="152" height="152" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M76 151c41.421 0 75-33.579 75-75S117.421 1 76 1 1 34.579 1 76s33.579 75 75 75z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M114.869 14.138H38.226v124.818h76.643V14.138z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M101.73 26.189H51.365v100.73h50.365V26.189z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M76.547 76.554c13.908 0 25.183-11.275 25.183-25.183 0-13.907-11.275-25.182-25.183-25.182-13.907 0-25.182 11.275-25.182 25.182 0 13.908 11.275 25.183 25.182 25.183zM76.547 126.919c13.908 0 25.183-11.274 25.183-25.182S90.455 76.554 76.547 76.554c-13.907 0-25.182 11.275-25.182 25.183s11.275 25.182 25.182 25.182z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/></svg>
\ No newline at end of file
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 463d53d44..849437c26 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -5,12 +5,15 @@ import { colors } from 'ts/style/colors'
 import { Button, ButtonTransparent } 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 { Heading, Intro, Text } from 'ts/@next/components/text';
 
 import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
+import protocol from 'ts/@next/icons/illustrations/protocol.svg';
 
 const Icon = styled.div`
     flex-shrink: 0;
+
+    ${props => props.center && `text-align: center`}
 `;
 
 export const NextLanding = () => (
@@ -22,7 +25,7 @@ export const NextLanding = () => (
           <Intro>0x is the best solution for adding exchange functionality to your business.</Intro>
           <div>
             <Button text="Get Started" inline={true} />
-            <Button text="Learn More" transparent={true} inline={true} />
+            <ButtonTransparent text="Learn More" inline={true} />
           </div>
         </Column>
 
@@ -31,6 +34,13 @@ export const NextLanding = () => (
         </Column>
       </Wrap>
     </Section>
+
+    <Section bgColor={colors.backgroundDark} noPadding>
+      <Icon as={protocol as 'svg'} />
+      <Text size="medium" center={true}>0x is the best solution for adding exchange functionality to your business.</Text>
+      <Text size="medium" center={true}>Discover how developers use 0x (need arrow + line under)</Text>
+    </Section>
+
     <Section>
       <Wrap>
         <Column colWidth="2/3">