Merge branch 'development' into feature/instant/tell-amount-available

1 files changed, 31 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..cf67ad66d
--- /dev/null
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import { Button } from 'ts/@next/components/button';
+import { Hero } from 'ts/@next/components/hero';
+import { LandingAnimation } from 'ts/@next/components/heroImage';
+
+import { HeroAnimation } from 'ts/@next/components/heroAnimation';
+import { WebsitePaths } from 'ts/types';
+
+export const SectionLandingHero = () => (
+    <Hero
+        title="Powering Decentralized Exchange"
+        isLargeTitle={true}
+        isFullWidth={true}
+        description="0x is an open protocol that enables the peer-to-peer exchange of assets on the Ethereum blockchain."
+        figure={<LandingAnimation image={<HeroAnimation />} />}
+        actions={<HeroActions />}
+    />
+);
+
+const HeroActions = () => (
+    <>
+        <Button href="https://0x.org/docs" isInline={true}>
+            Get Started
+        </Button>
+
+        <Button to={WebsitePaths.Why} isTransparent={true} isInline={true}>
+            Learn More
+        </Button>
+    </>
+);