Divides landing into section components, cleanup

1 files changed, 39 insertions, 0 deletions

diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
new file mode 100644
index 000000000..e43ac41f2
--- /dev/null
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import {Button, ButtonWrap} from 'ts/@next/components/button';
+import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
+import {Heading, Paragraph} from 'ts/@next/components/text';
+
+import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
+
+export const SectionLandingHero = () => (
+    <Section>
+        <Wrap>
+            <Column colWidth="1/2">
+                <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>
+
+                <ButtonWrap>
+                    <Button isInline={true}>
+                        Get Started
+                    </Button>
+
+                    <Button isTransparent={true} isInline={true}>
+                        Learn More
+                    </Button>
+                </ButtonWrap>
+            </Column>
+
+            <Column colWidth="1/2">
+                <WrapCentered>
+                    <LogoOutlined/>
+                </WrapCentered>
+            </Column>
+        </Wrap>
+    </Section>
+);