Added 0x instant skeleton

4 files changed, 126 insertions, 0 deletions

diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 6c45cc211..a25936d8e 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -42,6 +42,7 @@ const HEADING_SIZES: HeadingSizes = {
 
 const PARAGRAPH_SIZES: ParagraphSizes = {
     default: '18px',
+    small: '14px',
     medium: '22px',
     large: '28px',
 };
diff --git a/packages/website/ts/@next/icons/illustrations/tokens.svg b/packages/website/ts/@next/icons/illustrations/tokens.svg
new file mode 100644
index 000000000..053e421a4
--- /dev/null
+++ b/packages/website/ts/@next/icons/illustrations/tokens.svg
@@ -0,0 +1 @@
+<svg width="249" height="251" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M192 112c30.376 0 55-24.624 55-55S222.376 2 192 2s-55 24.624-55 55 24.624 55 55 55z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M206.4 15.3v13.6H220" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M220 28.9v42h-37.3V15.3h23.7L220 28.9zM177.6 98.7V85.1H164" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M164 85.1v-42h37.3v55.6h-23.7L164 85.1zM57 113.6c30.376 0 55-24.624 55-55s-24.624-55-55-55-55 24.624-55 55 24.624 55 55 55z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M57 102.6c24.3 0 44-19.7 44-44s-19.7-44-44-44-44 19.7-44 44 19.7 44 44 44z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M45.4 76.2v1.5h26.7v-9.9h-7.8V36.3h-9.461l-.381.259-8.4 5.7-.658.446V54.63l2.342-1.589 6.058-4.11V67.8h-8.4V76.2z" stroke="#00AE99" stroke-width="3"/><path d="M13 58.3c9.1-1.5 16.1-9.3 16.1-18.9 0-4.3-1.4-8.2-3.8-11.4-7.5 7.9-12.2 18.6-12.3 30.3zM13 58.9c.1 11.8 4.8 22.4 12.3 30.3 2.4-3.2 3.8-7.1 3.8-11.4 0-9.6-7-17.5-16.1-18.9zM101 58.3c-9.1-1.5-16.1-9.3-16.1-18.9 0-4.3 1.4-8.2 3.8-11.4 7.5 7.9 12.2 18.6 12.3 30.3zM101 58.9c-.1 11.8-4.8 22.4-12.3 30.3-2.4-3.2-3.8-7.1-3.8-11.4 0-9.6 7-17.5 16.1-18.9zM57 248.6c30.376 0 55-24.624 55-55s-24.624-55-55-55-55 24.624-55 55 24.624 55 55 55z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M57 248.6c30.376 0 55-24.624 55-55s-24.624-55-55-55-55 24.624-55 55 24.624 55 55 55z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M62.6 190.8v-32.3h4.6v-9.1H46.8v9.1h4.6v32.3c-10.5 2.5-18.3 12-18.3 23.2 0 13.2 10.7 23.9 23.9 23.9s23.9-10.7 23.9-23.9c0-11.3-7.8-20.7-18.3-23.2z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M67.2 149.3H46.8v9.1h20.4v-9.1zM37.1 200.6h39.7M192 248.6c30.376 0 55-24.624 55-55s-24.624-55-55-55-55 24.624-55 55 24.624 55 55 55z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M192 149.6l-36.4 52.9H192l.1 35.1 36.3-53H192v-35z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
new file mode 100644
index 000000000..4c8fa5a30
--- /dev/null
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -0,0 +1,122 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import {colors} from 'ts/style/colors';
+
+import {Button} from 'ts/@next/components/button';
+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 TokensIcon from 'ts/@next/icons/illustrations/tokens.svg';
+import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
+import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
+
+export const Next0xInstant = () => (
+    <SiteWrap>
+        <Section>
+            <WrapCentered>
+                <Column colWidth="2/3">
+                    <Heading size="medium" center>Introducing 0x Instant</Heading>
+                    <Paragraph size="medium" center>A free and flexible way to offer simple crypto purchasing in any app or website</Paragraph>
+                    <Button href="#">Get Started</Button>
+                </Column>
+            </WrapCentered>
+        </Section>
+
+        <Section fullWidth noPadding>
+            <Wrap width="full">
+                <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
+            </Wrap>
+        </Section>
+
+        <Section>
+            <Wrap>
+                <Column colWidth="1/3">
+                    <TokensIcon width="248"/>
+                </Column>
+
+                <Column colWidth="2/3">
+                    <Heading>Support ERC-20 and ERC-721 tokens</Heading>
+                    <Paragraph muted>Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins.</Paragraph>
+                    <div>
+                        <a href="#">Get Started</a><a href="#">Explore the Docs</a>
+                    </div>
+                </Column>
+            </Wrap>
+        </Section>
+        <Section>
+            <Wrap>
+                <Column colWidth="1/3">
+                    <ProtocolIcon width="248"/>
+                </Column>
+
+                <Column colWidth="2/3">
+                    <Heading>Generate revenue for your business</Heading>
+                    <Paragraph muted>With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp.</Paragraph>
+                    <div>
+                        <a href="#">Learn more about affiliate fees</a>
+                    </div>
+                </Column>
+            </Wrap>
+        </Section>
+        <Section>
+            <Wrap>
+                <Column colWidth="1/3">
+                    <LogoOutlined width="248"/>
+                </Column>
+
+                <Column colWidth="2/3">
+                    <Heading>Easy and flexible integration</Heading>
+                    <Paragraph muted>Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool.</Paragraph>
+                    <div>
+                        <a href="#">Explore AssetBuyer</a>
+                        <a href="#">Learn about liquidity</a>
+                    </div>
+                </Column>
+            </Wrap>
+        </Section>
+
+        <Section bgColor={colors.backgroundDark}>
+            <Wrap>
+                <Column colWidth="1/2">
+                    <Heading>0x Instant Configurator</Heading>
+                    <Paragraph>Liquidity Source</Paragraph>
+                    <Paragraph>What tokens can users buy? (select all)</Paragraph>
+                    <Paragraph>Transaction fee ETH address</Paragraph>
+                    <Paragraph>Fee Percentage</Paragraph>
+                </Column>
+
+                <Column colWidth="1/2">
+                    <Paragraph>Code Snippet</Paragraph>
+                    <a href="#">Explore the Docs</a>
+                    <Paragraph>&lt;code snippet&gt;</Paragraph>
+                </Column>
+            </Wrap>
+        </Section>
+
+        <Section>
+            <Wrap width="full">
+                <Column>
+                    <Paragraph size="small" muted="0.5">Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations.</Paragraph>
+                    <Paragraph size="small" muted="0.5">See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.</Paragraph>
+                </Column>
+            </Wrap>
+        </Section>
+    </SiteWrap>
+);
+
+const ChapterLink = styled.a `
+    font-size: 1.222222222rem;
+    display: block;
+    opacity: 0.8;
+    margin-bottom: 1.666666667rem;
+
+    &:first-child {
+        opacity: 1;
+    }
+
+    &:hover {
+        opacity: 1;
+    }
+`;
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 39e8da177..82e7e1206 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -20,6 +20,7 @@ import { WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
 import { muiTheme } from 'ts/utils/mui_theme';
 
 // Next (new website) routes. We should rename them later
+import { Next0xInstant } from 'ts/@next/pages/instant';
 import { NextLanding } from 'ts/@next/pages/landing';
 import { NextWhy } from 'ts/@next/pages/why';
 
@@ -110,6 +111,7 @@ render(
                                 {/* Next (new site) routes */}
                                 <Route exact path="/next" component={NextLanding as any} />
                                 <Route exact path="/next/why" component={NextWhy as any} />
+                                <Route exact path="/next/0x-instant" component={Next0xInstant as any} />
 
                                 <Route
                                     path={`${WebsitePaths.ZeroExJs}/:version?`}