feat(website): add screenshots to instant page

10 files changed, 85 insertions, 1 deletions

diff --git a/packages/website/public/images/instant/bat_screenshot.png b/packages/website/public/images/instant/bat_screenshot.png
new file mode 100644
index 000000000..71066a30d
--- /dev/null
+++ b/packages/website/public/images/instant/bat_screenshot.png
diff --git a/packages/website/public/images/instant/kitty_screenshot.png b/packages/website/public/images/instant/kitty_screenshot.png
new file mode 100644
index 000000000..c3342bf26
--- /dev/null
+++ b/packages/website/public/images/instant/kitty_screenshot.png
diff --git a/packages/website/public/images/instant/leroy_screenshot.png b/packages/website/public/images/instant/leroy_screenshot.png
new file mode 100644
index 000000000..af8270c3e
--- /dev/null
+++ b/packages/website/public/images/instant/leroy_screenshot.png
diff --git a/packages/website/public/images/instant/mkr_screenshot.png b/packages/website/public/images/instant/mkr_screenshot.png
new file mode 100644
index 000000000..344fbbc8d
--- /dev/null
+++ b/packages/website/public/images/instant/mkr_screenshot.png
diff --git a/packages/website/public/images/instant/omg_screenshot.png b/packages/website/public/images/instant/omg_screenshot.png
new file mode 100644
index 000000000..52742a597
--- /dev/null
+++ b/packages/website/public/images/instant/omg_screenshot.png
diff --git a/packages/website/public/images/instant/snt_screenshot.png b/packages/website/public/images/instant/snt_screenshot.png
new file mode 100644
index 000000000..aed69dc07
--- /dev/null
+++ b/packages/website/public/images/instant/snt_screenshot.png
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
new file mode 100644
index 000000000..205982044
--- /dev/null
+++ b/packages/website/ts/pages/instant/features.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
+import { ScreenWidths } from 'ts/types';
+
+export const Features = () => (
+    <Container backgroundColor={colors.instantBackground} className="py3 flex justify-center">
+        <img className="px1" width="300px" height="420px" src="images/instant/snt_screenshot.png" />
+        <img className="px1" width="300px" height="420px" src="images/instant/omg_screenshot.png" />
+        <img className="px1" width="300px" height="420px" src="images/instant/kitty_screenshot.png" />
+        <img className="px1" width="300px" height="420px" src="images/instant/bat_screenshot.png" />
+        <img className="px1" width="300px" height="420px" src="images/instant/leroy_screenshot.png" />
+        <img className="px1" width="300px" height="420px" src="images/instant/mkr_screenshot.png" />
+    </Container>
+);
+
+interface LinkInfo {
+    linkSrc: string;
+    displayText: string;
+}
+
+interface FeatureItemProps {
+    imgSrc: string;
+    title: string;
+    description: string;
+    linkInfos: LinkInfo[];
+    screenWidth: ScreenWidths;
+}
+
+const FeatureItem = (props: FeatureItemProps) => {
+    const { imgSrc, title, description, linkInfos, screenWidth } = props;
+    const shouldShowImage = screenWidth === ScreenWidths.Lg;
+    const image = <Image src={imgSrc} maxWidth="500px" maxHeight="280px" />;
+    const missionStatementClassName = !shouldShowImage ? 'center' : undefined;
+    const missionStatement = (
+        <Container className={missionStatementClassName} maxWidth="388px">
+            <Text fontFamily="Roboto Mono" fontSize="22px" lineHeight="31px">
+                {title}
+            </Text>
+            <Container marginTop="32px">
+                <Text fontSize="14px" lineHeight="2em">
+                    {description}
+                </Text>
+            </Container>
+        </Container>
+    );
+    return (
+        <div
+            className="flex flex-column items-center py4 px3"
+            style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }}
+        >
+            {shouldShowImage ? (
+                <Container className="flex items-center" maxWidth="1200px">
+                    {image}
+                    <Container marginLeft="115px">{missionStatement}</Container>
+                </Container>
+            ) : (
+                <Container className="flex flex-column items-center">{missionStatement}</Container>
+            )}
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx
index 5abfaf4b2..87d6a64d4 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 { Features } from 'ts/pages/instant/features';
 import { Introducing0xInstant } from 'ts/pages/instant/introducing_0x_instant';
+import { Screenshots } from 'ts/pages/instant/screenshots';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
 import { ScreenWidths } from 'ts/types';
@@ -51,6 +53,8 @@ export class Instant extends React.Component<InstantProps, InstantState> {
                 />
                 <Container backgroundColor={colors.instantBackground} />
                 <Introducing0xInstant />
+                <Screenshots />
+                <Features />
                 <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
index da457521f..183e4570c 100644
--- a/packages/website/ts/pages/instant/introducing_0x_instant.tsx
+++ b/packages/website/ts/pages/instant/introducing_0x_instant.tsx
@@ -6,7 +6,7 @@ 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="clearfix center lg-pt4 md-pt4" 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
diff --git a/packages/website/ts/pages/instant/screenshots.tsx b/packages/website/ts/pages/instant/screenshots.tsx
new file mode 100644
index 000000000..672cdef59
--- /dev/null
+++ b/packages/website/ts/pages/instant/screenshots.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { Container } from 'ts/components/ui/container';
+import { colors } from 'ts/style/colors';
+
+export const Screenshots = () => (
+    <Container backgroundColor={colors.instantBackground} className="py3 flex justify-center">
+        <img className="px1" width="300px" height="420px" src="images/instant/snt_screenshot.png" />
+        <img className="px1" width="300px" height="420px" src="images/instant/omg_screenshot.png" />
+        <img className="px1" width="300px" height="420px" src="images/instant/kitty_screenshot.png" />
+        <img className="px1" width="300px" height="420px" src="images/instant/bat_screenshot.png" />
+        <img className="px1" width="300px" height="420px" src="images/instant/leroy_screenshot.png" />
+        <img className="px1" width="300px" height="420px" src="images/instant/mkr_screenshot.png" />
+    </Container>
+);