feat(website): instant features section

6 files changed, 55 insertions, 31 deletions

diff --git a/packages/website/ts/containers/instant.ts b/packages/website/ts/containers/instant.ts
index 9bcfb903b..12ae7454e 100644
--- a/packages/website/ts/containers/instant.ts
+++ b/packages/website/ts/containers/instant.ts
@@ -4,10 +4,12 @@ import { Dispatch } from 'redux';
 import { Instant as InstantComponent, InstantProps } from 'ts/pages/instant/instant';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { State } from 'ts/redux/reducer';
+import { ScreenWidths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
 
 interface ConnectedState {
     translate: Translate;
+    screenWidth: ScreenWidths;
 }
 
 interface ConnectedDispatch {
@@ -16,6 +18,7 @@ interface ConnectedDispatch {
 
 const mapStateToProps = (state: State, _ownProps: InstantProps): ConnectedState => ({
     translate: state.translate,
+    screenWidth: state.screenWidth,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
index 205982044..b460796c1 100644
--- a/packages/website/ts/pages/instant/features.tsx
+++ b/packages/website/ts/pages/instant/features.tsx
@@ -6,14 +6,33 @@ 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" />
+export interface FeatureProps {
+    screenWidth: ScreenWidths;
+}
+
+export const Features = (props: FeatureProps) => (
+    <Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column">
+        <FeatureItem
+            imgSrc="images/instant/snt_screenshot.png"
+            title="Support ERC-20 and ERC-721 tokens"
+            description="Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins."
+            linkInfos={[]}
+            screenWidth={props.screenWidth}
+        />
+        <FeatureItem
+            imgSrc="images/instant/snt_screenshot.png"
+            title="Generate revenue for your business"
+            description="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."
+            linkInfos={[]}
+            screenWidth={props.screenWidth}
+        />
+        <FeatureItem
+            imgSrc="images/instant/snt_screenshot.png"
+            title="Easy and Flexible Integration"
+            description="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."
+            linkInfos={[]}
+            screenWidth={props.screenWidth}
+        />
     </Container>
 );
 
@@ -32,34 +51,35 @@ interface FeatureItemProps {
 
 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">
+    const isLargeScreen = screenWidth === ScreenWidths.Lg;
+    const image = <Container backgroundColor={colors.instantPrimaryBackground} width="425px" height="225px" />;
+    const info = (
+        <Container maxWidth="500px">
+            <Text fontSize="24px" lineHeight="34px" fontColor={colors.white} fontWeight={500}>
                 {title}
             </Text>
-            <Container marginTop="32px">
-                <Text fontSize="14px" lineHeight="2em">
+            <Container marginTop="28px">
+                <Text fontFamily="Roboto Mono" fontSize="14px" lineHeight="2em" fontColor={colors.grey500}>
                     {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">
+        <Container className="flex flex-column items-center py4 px3">
+            {isLargeScreen ? (
+                <Container className="flex">
                     {image}
-                    <Container marginLeft="115px">{missionStatement}</Container>
+                    <Container marginLeft="115px">{info}</Container>
                 </Container>
             ) : (
-                <Container className="flex flex-column items-center">{missionStatement}</Container>
+                <Container className="flex flex-column items-center">
+                    {image}
+                    <Container className="center" marginTop="32px">
+                        {info}
+                    </Container>
+                </Container>
             )}
-        </div>
+        </Container>
     );
 };
diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx
index 87d6a64d4..eaaeb1689 100644
--- a/packages/website/ts/pages/instant/instant.tsx
+++ b/packages/website/ts/pages/instant/instant.tsx
@@ -47,14 +47,14 @@ export class Instant extends React.Component<InstantProps, InstantState> {
                 <TopBar
                     blockchainIsLoaded={false}
                     location={this.props.location}
-                    style={{ backgroundColor: colors.instantBackground, position: 'relative' }}
+                    style={{ backgroundColor: colors.instantPrimaryBackground, position: 'relative' }}
                     translate={this.props.translate}
                     isNightVersion={true}
                 />
-                <Container backgroundColor={colors.instantBackground} />
+                <Container backgroundColor={colors.instantPrimaryBackground} />
                 <Introducing0xInstant />
                 <Screenshots />
-                <Features />
+                <Features screenWidth={this.props.screenWidth} />
                 <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 183e4570c..173fd98a6 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-pt4 md-pt4" style={{ backgroundColor: colors.instantBackground }}>
+    <div className="clearfix center lg-pt4 md-pt4" style={{ backgroundColor: colors.instantPrimaryBackground }}>
         <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
index 672cdef59..4c87f1a19 100644
--- a/packages/website/ts/pages/instant/screenshots.tsx
+++ b/packages/website/ts/pages/instant/screenshots.tsx
@@ -4,7 +4,7 @@ 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">
+    <Container backgroundColor={colors.instantPrimaryBackground} 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" />
diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts
index 119d22df7..522132f03 100644
--- a/packages/website/ts/style/colors.ts
+++ b/packages/website/ts/style/colors.ts
@@ -13,7 +13,8 @@ const appColors = {
     jobsPageOpenPositionRow: sharedColors.grey100,
     metaMaskOrange: '#f68c24',
     metaMaskTransparentOrange: 'rgba(255, 248, 242, 0.8)',
-    instantBackground: '#222222',
+    instantPrimaryBackground: '#222222',
+    instantSecondaryBackground: '#333333',
 };
 
 export const colors = {