1 files changed, 35 insertions, 0 deletions
diff --git a/packages/website/ts/pages/instant/screenshots.tsx b/packages/website/ts/pages/instant/screenshots.tsx
new file mode 100644
index 000000000..7dcf17fd1
--- /dev/null
+++ b/packages/website/ts/pages/instant/screenshots.tsx
@@ -0,0 +1,35 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Container } from 'ts/components/ui/container';
+import { colors } from 'ts/style/colors';
+import { ScreenWidths } from 'ts/types';
+
+export interface ScreenshotsProps {
+    screenWidth: ScreenWidths;
+}
+
+export const Screenshots = (props: ScreenshotsProps) => {
+    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+    const images = isSmallScreen
+        ? [
+              'images/instant/rep_screenshot.png',
+              'images/instant/dai_screenshot.png',
+              'images/instant/gods_screenshot.png',
+          ]
+        : [
+              'images/instant/nmr_screenshot.png',
+              'images/instant/kitty_screenshot.png',
+              'images/instant/rep_screenshot.png',
+              'images/instant/dai_screenshot.png',
+              'images/instant/gods_screenshot.png',
+              'images/instant/gnt_screenshot.png',
+          ];
+    return (
+        <Container backgroundColor={colors.instantPrimaryBackground} className="py3 flex justify-center">
+            {_.map(images, image => {
+                return <img className="px1 flex-none" width="300px" height="420px" src={image} key={image} />;
+            })}
+        </Container>
+    );
+};