From c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Wed, 12 Dec 2018 09:47:55 +0100
Subject: WIP

---
 .../ts/@next/components/sections/landing/hero.tsx  | 47 +++++++++-------------
 1 file changed, 19 insertions(+), 28 deletions(-)

(limited to 'packages/website/ts/@next/components/sections/landing/hero.tsx')

diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index 9e7ed7402..9c6ff7151 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -1,39 +1,30 @@
 import * as React from 'react';
 import {Button, ButtonWrap} from 'ts/@next/components/button';
+import {LandingAnimation} from 'ts/@next/components/heroImage';
 import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
+import {Hero} from 'ts/@next/components/hero';
+
 import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
 
 export const SectionLandingHero = () => (
-    <Section isPadLarge={true}>
-        <Wrap isReversed={true}>
-            <Column colWidth="1/2">
-                <WrapCentered>
-                    <LogoOutlined/>
-                </WrapCentered>
-            </Column>
-
-            <Column colWidth="1/2" isMobileCentered={true}>
-                <Heading size="large">
-                    Powering Decentralized Exchange
-                </Heading>
-
-                <Paragraph size="medium" isMuted={true}>
-                    0x is the best solution for adding<br />
-                    exchange functionality to your business.
-                </Paragraph>
+    <Hero
+        title="Powering Decentralized Exchange"
+        description="0x is the best solution for adding exchange functionality to your business."
+        figure={<LandingAnimation image={<LogoOutlined />} />}
+        actions={<Actions />}
+    />
+);
 
-                <ButtonWrap>
-                    <Button isInline={true}>
-                        Get Started
-                    </Button>
+const Actions = () => (
+    <>
+        <Button isInline={true}>
+            Get Started
+        </Button>
 
-                    <Button isTransparent={true} isInline={true}>
-                        Learn More
-                    </Button>
-                </ButtonWrap>
-            </Column>
-        </Wrap>
-    </Section>
+        <Button isTransparent={true} isInline={true}>
+            Learn More
+        </Button>
+    </>
 );
-- 
cgit v1.2.3