WIP Adds infinite scroll image on instant page

3 files changed, 61 insertions, 40 deletions

diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 07d0ebce2..df3977444 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -9,6 +9,7 @@ interface BaseTextInterface extends PaddingInterface {
 
 interface HeadingProps extends BaseTextInterface {
     asElement?: 'h1'| 'h2'| 'h3'| 'h4';
+    maxWidth?: string;
     isCentered?: boolean;
     isNoMargin?: boolean;
     isMuted?: boolean | number;
@@ -23,6 +24,7 @@ interface ParagraphProps extends BaseTextInterface {
 }
 
 const StyledHeading = styled.h1<HeadingProps>`
+    max-width: ${props => props.maxWidth};
     color: ${props => props.color || props.theme.textColor};
     font-size: ${props => isNaN(props.size) ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`};
     line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`};
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index 686c48533..91a07594e 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import LazyLoad from 'react-lazyload';
 
 import {colors} from 'ts/style/colors';
@@ -67,7 +67,7 @@ const featuresData = [
 
 export const Next0xInstant = () => (
     <SiteWrap>
-        <Section>
+        <Section isPadLarge={true}>
             <WrapCentered>
                 <Heading size="medium" isCentered={true}>Introducing 0x Instant</Heading>
                 <Paragraph size="medium" isCentered={true}>
@@ -80,10 +80,13 @@ export const Next0xInstant = () => (
 
         <Section isFullWidth={true} isNoPadding={true}>
             <Wrap width="full">
-                {/* Note: This should be another component, this is just for mocking */}
-                <ImageLoop>
-                    <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
-                </ImageLoop>
+                <MarqueeWrap>
+                    <div>
+                        <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
+                        <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
+                        <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
+                    </div>
+                </MarqueeWrap>
             </Wrap>
         </Section>
 
@@ -146,8 +149,24 @@ export const Next0xInstant = () => (
     </SiteWrap>
 );
 
-const ImageCarousel = styled.div`
+const scroll = keyframes`
+    0% { transform: translate3d(0, 0, 0) }
+    100% { transform: translate3d(-1715.18px, 0, 0) }
+`;
+const MarqueeWrap = styled.div`
     width: 100vw;
     height: 380px;
-    margin: 90px 0;
+    padding-bottom: 60px;
+
+    > div {
+        width: 5145.54px;
+        height: 380px;
+        display: flex;
+        animation: ${scroll} 20s linear infinite;
+
+        img {
+            width: auto;
+            height: 380px;
+        }
+    }
 `;
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 0872ade7d..e293d99fb 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -86,37 +86,37 @@ export class NextWhy extends React.PureComponent {
     public render(): React.ReactNode {
         return (
             <SiteWrap theme="dark">
-              <Section isPadLarge={true}>
-                <WrapCentered>
-                  <Column colWidth="2/3" isNoMargin={true}>
-                      <Heading
-                          size="medium"
-                          isCentered={true}
-                      >
-                          The exchange layer for<br />
-                          the crypto economy
-                      </Heading>
-
-                      <Paragraph
-                          size="medium"
-                          isMuted={true}
-                          isCentered={true}
-                          marginBottom="60px"
-                      >
-                          The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens.
-                      </Paragraph>
-
-                        <Link
-                            href="/docs"
-                            isCentered={true}
-                            isWithArrow={true}
-                            isAccentColor={true}
-                        >
-                          Build on 0x
-                        </Link>
-                  </Column>
-                </WrapCentered>
-              </Section>
+                <Section isPadLarge={true}>
+                    <WrapCentered>
+                        <Column colWidth="2/3" isNoMargin={true}>
+                            <Heading
+                                maxWidth="600px"
+                                size="medium"
+                                isCentered={true}
+                            >
+                              The exchange layer for the crypto economy
+                            </Heading>
+
+                            <Paragraph
+                                size="medium"
+                                isMuted={true}
+                                isCentered={true}
+                                marginBottom="60px"
+                            >
+                              The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens.
+                            </Paragraph>
+
+                            <Link
+                                href="/docs"
+                                isCentered={true}
+                                isWithArrow={true}
+                                isAccentColor={true}
+                            >
+                              Build on 0x
+                            </Link>
+                        </Column>
+                    </WrapCentered>
+                </Section>
 
               <Section bgColor={colors.backgroundDark} isPadLarge={true}>
                 <Wrap>
@@ -173,7 +173,7 @@ export class NextWhy extends React.PureComponent {
                             <Heading size="medium">Use Cases</Heading>
                             <Slider>
                                 {_.map(useCaseSlides, (item, index) => (
-                                    <Slide 
+                                    <Slide
                                         key={`useCaseSlide-${index}`}
                                         heading={item.title}
                                         text={item.description}