feat(website): need more section for instant marketing page

3 files changed, 52 insertions, 2 deletions

diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
index 3f5d3d8d1..96256d337 100644
--- a/packages/website/ts/pages/instant/features.tsx
+++ b/packages/website/ts/pages/instant/features.tsx
@@ -11,7 +11,7 @@ export interface FeatureProps {
 }
 
 export const Features = (props: FeatureProps) => (
-    <Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column">
+    <Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3">
         <FeatureItem
             imgSrc="images/instant/snt_screenshot.png"
             title="Support ERC-20 and ERC-721 tokens"
@@ -75,7 +75,7 @@ interface FeatureItemProps {
 const FeatureItem = (props: FeatureItemProps) => {
     const { imgSrc, title, description, linkInfos, screenWidth } = props;
     const isLargeScreen = screenWidth === ScreenWidths.Lg;
-    const image = <Container backgroundColor={colors.instantPrimaryBackground} width="425px" height="225px" />;
+    const image = <Container backgroundColor={colors.instantPrimaryBackground} maxWidth="425px" maxHeight="225px" />;
     const info = (
         <Container maxWidth="500px">
             <Text fontSize="24px" lineHeight="34px" fontColor={colors.white} fontWeight={500}>
diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx
index eaaeb1689..56d54cd06 100644
--- a/packages/website/ts/pages/instant/instant.tsx
+++ b/packages/website/ts/pages/instant/instant.tsx
@@ -8,6 +8,7 @@ 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 { NeedMore } from 'ts/pages/instant/need_more';
 import { Screenshots } from 'ts/pages/instant/screenshots';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
@@ -55,6 +56,7 @@ export class Instant extends React.Component<InstantProps, InstantState> {
                 <Introducing0xInstant />
                 <Screenshots />
                 <Features screenWidth={this.props.screenWidth} />
+                <NeedMore screenWidth={this.props.screenWidth} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </Container>
         );
diff --git a/packages/website/ts/pages/instant/need_more.tsx b/packages/website/ts/pages/instant/need_more.tsx
new file mode 100644
index 000000000..27835982f
--- /dev/null
+++ b/packages/website/ts/pages/instant/need_more.tsx
@@ -0,0 +1,48 @@
+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';
+import { ScreenWidths } from 'ts/types';
+
+export interface NeedMoreProps {
+    screenWidth: ScreenWidths;
+}
+export const NeedMore = (props: NeedMoreProps) => {
+    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+    const className = isSmallScreen ? 'flex flex-column items-center' : 'flex';
+    const marginRight = isSmallScreen ? undefined : '200px';
+    return (
+        <Container
+            className="flex flex-column items-center py4 px3"
+            backgroundColor={colors.instantSecondaryBackground}
+        >
+            <Container className={className}>
+                <Container className="sm-center" marginRight={marginRight}>
+                    <Text fontColor={colors.white} fontSize="32px" lineHeight="45px">
+                        Need more flexibility?
+                    </Text>
+                    <Text fontColor={colors.grey500} fontSize="18px" lineHeight="27px">
+                        View our full documentation or reach out if you have any questions.
+                    </Text>
+                </Container>
+                <Container className="py3 flex">
+                    <Container marginRight="20px">
+                        <Button
+                            type="button"
+                            backgroundColor={colors.white}
+                            fontColor={colors.instantSecondaryBackground}
+                            fontSize="18px"
+                        >
+                            Get in Touch
+                        </Button>
+                    </Container>
+                    <Button type="button" backgroundColor={colors.mediumBlue} fontColor={colors.white} fontSize="18px">
+                        Explore the Docs
+                    </Button>
+                </Container>
+            </Container>
+        </Container>
+    );
+};