aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-11-27 16:49:49 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-11-29 02:59:54 +0800
commit6c43fa8f7253083bb5e50a3f8940f35d105c8bf1 (patch)
treea37599f231af9533e773c1419c91bfac8fe8debb
parent8a4e5dfb68852f11275eea7dd24cc442740a2332 (diff)
downloaddexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.tar
dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.tar.gz
dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.tar.bz2
dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.tar.lz
dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.tar.xz
dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.tar.zst
dexon-sol-tools-6c43fa8f7253083bb5e50a3f8940f35d105c8bf1.zip
feat(website): add screenshots to instant page
-rw-r--r--packages/website/public/images/instant/bat_screenshot.pngbin0 -> 42666 bytes
-rw-r--r--packages/website/public/images/instant/kitty_screenshot.pngbin0 -> 76525 bytes
-rw-r--r--packages/website/public/images/instant/leroy_screenshot.pngbin0 -> 54666 bytes
-rw-r--r--packages/website/public/images/instant/mkr_screenshot.pngbin0 -> 21904 bytes
-rw-r--r--packages/website/public/images/instant/omg_screenshot.pngbin0 -> 43351 bytes
-rw-r--r--packages/website/public/images/instant/snt_screenshot.pngbin0 -> 41895 bytes
-rw-r--r--packages/website/ts/pages/instant/features.tsx65
-rw-r--r--packages/website/ts/pages/instant/instant.tsx4
-rw-r--r--packages/website/ts/pages/instant/introducing_0x_instant.tsx2
-rw-r--r--packages/website/ts/pages/instant/screenshots.tsx15
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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>
+);