From a208cba4e84d04171dd88db15fb63ff9d614cea8 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Mon, 10 Dec 2018 17:47:26 +0100
Subject: Add lazyloading + banner

---
 packages/website/package.json               |  3 +++
 packages/website/ts/@next/pages/instant.tsx | 31 ++++++++++-------------------
 2 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/packages/website/package.json b/packages/website/package.json
index 7bb850bb5..e6dc603fa 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -32,6 +32,8 @@
         "@0x/typescript-typings": "^3.0.4",
         "@0x/utils": "^2.0.6",
         "@0x/web3-wrapper": "^3.1.6",
+        "@types/react-lazyload": "^2.3.1",
+        "@types/react-syntax-highlighter": "^0.0.8",
         "@types/styled-components": "^4.1.1",
         "accounting": "^0.4.1",
         "basscss": "^8.0.3",
@@ -56,6 +58,7 @@
         "react-document-title": "^2.0.3",
         "react-dom": "^16.4.2",
         "react-helmet": "^5.2.0",
+        "react-lazyload": "^2.3.0",
         "react-loadable": "^5.5.0",
         "react-popper": "^1.0.0-beta.6",
         "react-redux": "^5.0.3",
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index c179630d7..d3ed96bc8 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -1,16 +1,18 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
+import LazyLoad from 'react-lazyload';
 
 import {colors} from 'ts/style/colors';
 
+import {Banner} from 'ts/@next/components/banner';
 import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
 import {Icon} from 'ts/@next/components/Icon';
 import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
 import {SiteWrap} from 'ts/@next/components/siteWrap';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
-import { Configurator } from 'ts/pages/instant/configurator';
+// import { Configurator } from 'ts/pages/instant/configurator';
 
 import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
 import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
@@ -121,29 +123,16 @@ export const Next0xInstant = () => (
 
         <Section bgColor={colors.backgroundDark}>
             <Wrap>
-                <Configurator hash={CONFIGURATOR_HASH} />
+                {/* <Configurator hash={CONFIGURATOR_HASH} /> */}
             </Wrap>
         </Section>
 
-        <Section bgColor={colors.brandDark}>
-            <Wrap>
-                <Column colWidth="1/2" isPadLarge={true}>
-                    <WrapCentered>
-                        <Heading>Need more flexibility?</Heading>
-                        <Paragraph>Dive into our docs, or contact us if needed</Paragraph>
-                    </WrapCentered>
-                </Column>
-
-                <Column colWidth="1/2" isPadLarge={true}>
-                    <WrapCentered>
-                        <div>
-                            <Button href="#">Explore the Docs</Button>
-                            <Button href="#" isTransparent={true}>Get in Touch</Button>
-                        </div>
-                    </WrapCentered>
-                </Column>
-            </Wrap>
-        </Section>
+        <Banner
+            heading="Need more flexibility?"
+            subline="Dive into our docs, or contact us if needed"
+            mainCta={{ text: 'Explore the Docs', href: '/docs' }}
+            secondaryCta={{ text: 'Get in Touch', href: '/contact' }}
+        />
 
         <Section>
             <Wrap width="full">
-- 
cgit