feat(website): implement introducing 0x instant header

3 files changed, 48 insertions, 1 deletions

diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx
index ae91d7094..5abfaf4b2 100644
--- a/packages/website/ts/pages/instant/instant.tsx
+++ b/packages/website/ts/pages/instant/instant.tsx
@@ -6,7 +6,9 @@ import { Footer } from 'ts/components/footer';
 import { MetaTags } from 'ts/components/meta_tags';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Container } from 'ts/components/ui/container';
+import { Introducing0xInstant } from 'ts/pages/instant/introducing_0x_instant';
 import { Dispatcher } from 'ts/redux/dispatcher';
+import { colors } from 'ts/style/colors';
 import { ScreenWidths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
@@ -43,9 +45,12 @@ export class Instant extends React.Component<InstantProps, InstantState> {
                 <TopBar
                     blockchainIsLoaded={false}
                     location={this.props.location}
-                    style={{ position: 'relative' }}
+                    style={{ backgroundColor: colors.instantBackground, position: 'relative' }}
                     translate={this.props.translate}
+                    isNightVersion={true}
                 />
+                <Container backgroundColor={colors.instantBackground} />
+                <Introducing0xInstant />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </Container>
         );
diff --git a/packages/website/ts/pages/instant/introducing_0x_instant.tsx b/packages/website/ts/pages/instant/introducing_0x_instant.tsx
new file mode 100644
index 000000000..da457521f
--- /dev/null
+++ b/packages/website/ts/pages/instant/introducing_0x_instant.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
+
+export const Introducing0xInstant = () => (
+    <div className="clearfix center lg-py4 md-py4" style={{ backgroundColor: colors.instantBackground }}>
+        <div className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center' }}>
+            <Container className="sm-center sm-pt3">
+                <Text
+                    fontColor={colors.white}
+                    fontSize="42px"
+                    lineHeight="52px"
+                    fontFamily="Roboto Mono"
+                    fontWeight="600"
+                >
+                    Introducing 0x Instant
+                </Text>
+            </Container>
+            <Container className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 sm-center" maxWidth="600px">
+                <Text fontColor={colors.grey500} fontSize="20px" lineHeight="32px" fontFamily="Roboto Mono">
+                    A free and flexible way to offer simple crypto
+                    <br /> purchasing in any app or website.
+                </Text>
+            </Container>
+            <div className="py3">
+                <Button
+                    type="button"
+                    backgroundColor={colors.mediumBlue}
+                    fontColor={colors.white}
+                    fontSize="18px"
+                    fontFamily="Roboto Mono"
+                >
+                    Get Started
+                </Button>
+            </div>
+        </div>
+    </div>
+);
diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts
index 0620bae0f..119d22df7 100644
--- a/packages/website/ts/style/colors.ts
+++ b/packages/website/ts/style/colors.ts
@@ -13,6 +13,7 @@ const appColors = {
     jobsPageOpenPositionRow: sharedColors.grey100,
     metaMaskOrange: '#f68c24',
     metaMaskTransparentOrange: 'rgba(255, 248, 242, 0.8)',
+    instantBackground: '#222222',
 };
 
 export const colors = {