Text and landing

1 files changed, 66 insertions, 22 deletions

diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 9be2ee4da..d207bd9ff 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -5,7 +5,7 @@ import { colors } from 'ts/style/colors'
 import { Button, ButtonWrap } from 'ts/@next/components/button';
 import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
-import { Heading, Intro, Text } from 'ts/@next/components/text';
+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';
@@ -18,9 +18,14 @@ 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>
+        <Column colWidth="1/2">
+          <Heading size="large">
+            Powering Decentralized Exchange
+          </Heading>
+
+          <Paragraph size="medium">
+            0x is the best solution for adding exchange functionality to your business.
+          </Paragraph>
 
           <ButtonWrap>
             <Button inline>
@@ -33,18 +38,69 @@ export const NextLanding = () => (
           </ButtonWrap>
         </Column>
 
-        <Column colWidth="1/3">
-          <ProtocolIcon />
+        <Column colWidth="1/2">
+          <Icon as={logoOutlined as 'svg'} />
         </Column>
       </Wrap>
     </Section>
 
     <Section bgColor={colors.backgroundDark}>
-      <WrapCentered>
-        <Icon><LogoOutlined /></Icon>
-        <Text size="medium">0x is the best solution for adding exchange functionality to your business.</Text>
-        <Text size="medium">Discover how developers use 0x (need arrow + line under)</Text>
+      <WrapCentered width="narrow">
+        <Icon as={protocol as 'svg'} />
+
+        <Paragraph size="large" center>
+            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>
+
+        <Button href="#" transparent>
+            Discover how developers use 0x
+        </Button>
       </WrapCentered>
+
+      <Wrap>
+        {/* NOTE: this probably should be withComponent as part of a <dl> */}
+        <Column colWidth="1/3">
+            <Heading size="medium" center>
+                873,435
+            </Heading>
+
+            <Paragraph muted={0.4} center noMargin>
+                Number of transactions
+            </Paragraph>
+        </Column>
+
+        <Column colWidth="1/3">
+            <Heading size="medium" center>
+                $203M
+            </Heading>
+
+            <Paragraph muted={0.4} center noMargin>
+                Total volume
+            </Paragraph>
+        </Column>
+
+        <Column colWidth="1/3">
+            <Heading size="medium" center>
+                227,372
+            </Heading>
+
+            <Paragraph muted={0.4} center noMargin>
+                Number of relayers
+            </Paragraph>
+        </Column>
+      </Wrap>
+    </Section>
+
+    <Section>
+      <Wrap>
+        <Column bgColor="#003831" colWidth="1/2">
+          This is a 2 COLUMN section
+        </Column>
+
+        <Column bgColor="#003831" colWidth="1/2">
+          Again a 2 column section
+        </Column>
+      </Wrap>
     </Section>
 
     <Section>
@@ -95,17 +151,5 @@ export const NextLanding = () => (
         </Column>
       </Wrap>
     </Section>
-
-    <Section>
-      <Wrap>
-        <Column colWidth="1/2">
-          This is a 2 COLUMN section
-        </Column>
-
-        <Column colWidth="1/2">
-          Again a 2 column section
-        </Column>
-      </Wrap>
-    </Section>
   </SiteWrap>
 );