committing changes

packages/website/ts/components/background_marquee.tsx

@@ -0,0 +1,129 @@
+import React from "react";
+import styled, { keyframes } from "styled-components";
+
+const scrollFactory = (height:number,imgRepeatCt:number) => keyframes`
+    0% { transform: translate3d(0, -${height}px, 0) }
+    100% { transform: translate3d(0, -${height*(imgRepeatCt-1)}px, 0) }
+`;
+
+const scrollMobileFactory = (height:number,imgRepeatCt:number) => keyframes`
+    0% { transform: translate3d(0, -${height}px, 0) }
+    100% { transform: translate3d(0, -${height*(imgRepeatCt-1)}px, 0) }
+`;
+
+interface MarqueeWrapProps {
+    height?: string;
+    imgHeightInPx: number;
+    imgRepeatCt: number;
+}
+
+const MarqueeWrap = styled.div<MarqueeWrapProps>`
+  width: 100%;
+  height: ${props => props.height || "100%"};
+  overflow: hidden;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: ${props => props.height || "100%"};
+    left: 0;
+    top: 0;
+    background: linear-gradient(180.18deg, #000000 11.09%, rgba(0, 0, 0, 0.8) 62.74%, rgba(0, 0, 0, 0) 103.8%);
+  }
+
+  @media (max-width: 768px) {
+    overflow: hidden;
+  }
+
+  > div {
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    will-change: transform;
+    transform: translate3d(0, -715px, 0);
+  }
+
+  @media (min-width: 768px) {
+    > div {
+      height: ${props => props.imgHeightInPx*props.imgRepeatCt}px;
+      animation: ${props => scrollFactory(props.imgHeightInPx,props.imgRepeatCt)} 140s linear infinite;
+    }
+  }
+
+  @media (max-width: 768px) {
+    > div {
+        height: ${props => props.imgHeightInPx*props.imgRepeatCt}px;
+        animation: ${props => scrollMobileFactory(props.imgHeightInPx,props.imgRepeatCt)} 140s linear infinite;
+    }
+  }
+`;
+
+interface CardProps {
+    imgHeight:number
+}
+
+const Card = styled.div<CardProps>`
+  opacity: 1;
+  will-change: opacity, transform;
+
+  & + & {
+    margin-top: -0px;
+  }
+
+  img {
+    height: auto;
+  }
+
+  @media (min-width: 768px) {
+    img {
+      width: 100%;
+      height: ${props => props.imgHeight};
+    }
+  }
+
+  @media (max-width: 768px) {
+    img {
+      width: 100%;
+      height: ${props => props.imgHeight};
+    }
+  }
+`;
+
+const MarqueeImg = styled.img`
+  object-fit: cover;
+  opacity: 0.4;
+`
+
+export interface BackgroundMarqueeProps {
+    height?: string;
+    imgHeightInPx: number;
+    imgSrcUrl: string;
+}
+
+export class BackgroundMarquee extends React.Component<BackgroundMarqueeProps> {
+    state={
+        imgRepeatCt:5
+    }
+
+    componentDidMount() {
+
+    }
+
+    onImageUpdate = () => {
+
+    }
+
+    public render(): React.ReactNode {
+        return <MarqueeWrap height={this.props.height} imgHeightInPx={this.props.imgHeightInPx} imgRepeatCt={this.state.imgRepeatCt}>
+            <div>
+                {[...Array(this.state.imgRepeatCt)].map((item, index) => (
+                    <Card imgHeight={this.props.imgHeightInPx} key={`card-${index}`}>
+                        <MarqueeImg src={this.props.imgSrcUrl} alt="" />
+                    </Card>
+                ))}
+            </div>
+        </MarqueeWrap>
+    }
+}

packages/website/ts/components/definition.tsx

@@ -17,7 +17,7 @@ interface Props {
     isInlineIcon?: boolean;
     isCentered?: boolean;
     isWithMargin?: boolean;
-    icon: string;
+    icon?: string;
     iconSize?: 'medium' | 'large' | number;
     fontSize?: 'default' | 'medium' | number;
     title: string;
@@ -28,7 +28,7 @@ interface Props {
 
 export const Definition = (props: Props) => (
     <Wrap {...props}>
-        <Icon name={props.icon} size={props.iconSize || 'medium'} margin={[0, 0, 'default', 0]} />
+        {!!props.icon && <Icon name={props.icon} size={props.iconSize || 'medium'} margin={[0, 0, 'default', 0]} />}
 
         <TextWrap {...props}>
             <Heading

packages/website/ts/components/hero.tsx

@@ -14,6 +14,7 @@ interface Props {
     description: string;
     figure?: React.ReactNode;
     actions?: React.ReactNode;
+    background?: React.ReactNode;
     announcement?: AnnouncementProps;
 }
 
@@ -23,7 +24,7 @@ interface SectionProps {
 
 const Section = styled.section<SectionProps>`
     padding: ${props => (props.isAnnouncement ? '50px 0 120px 0' : '120px 0')};
-
+    position: relative;
     @media (max-width: 768px) {
         padding: 60px 0;
     }
@@ -126,8 +127,17 @@ const ButtonWrap = styled.div`
     }
 `;
 
+const BackgroundWrap = styled.div`
+    position: absolute;
+    bottom:0;
+    left:0;
+    right:0;
+    top:0;
+`
+
 export const Hero: React.StatelessComponent<Props> = (props: Props) => (
     <Section isAnnouncement={!!props.announcement}>
+        {!!props.background && <BackgroundWrap>{props.background}</BackgroundWrap>}
         <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth} isCenteredMobile={props.isCenteredMobile}>
             {props.figure && <Content width="400px">{props.figure}</Content>}
 

packages/website/ts/components/showcase_section.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Button } from 'ts/components/button';
+import { Heading, Paragraph } from 'ts/components/text';
+import { Section } from 'ts/components/newLayout';
+
+interface Props {
+    children?: React.ReactNode;
+    showcaseImgSrc: string;
+    maxWidth?: string;
+    sectionPadding?: string;
+}
+
+const ShowcaseImg = styled.img`
+    position: absolute; 
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto 0 auto 0;
+    max-width: 40%;
+    height: 100%;
+`;
+
+interface WrapProps {
+    sectionPadding?: string;
+}
+
+const Wrap = styled.div<WrapProps>`
+    position: relative;
+    padding: ${props => props.sectionPadding ||  "0 0"};
+`;
+
+export const ShowcaseSection = (props: Props) => <Wrap>
+        <Section maxWidth={props.maxWidth} padding={"80px 0"}>
+            {props.children}
+        </Section>
+        <ShowcaseImg src={props.showcaseImgSrc}/>
+    </Wrap>

packages/website/ts/pages/launch_kit.tsx

@@ -7,26 +7,49 @@ import { DocumentTitle } from 'ts/components/document_title';
 import { Hero } from 'ts/components/hero';
 import { Icon } from 'ts/components/icon';
 import { Section } from 'ts/components/newLayout';
+import { ShowcaseSection } from 'ts/components/showcase_section';
 import { SiteWrap } from 'ts/components/siteWrap';
 import { constants } from 'ts/utils/constants';
 import { documentConstants } from 'ts/utils/document_meta_constants';
+import { Heading } from 'ts/components/text';
 
 import { ModalContact } from '../components/modals/modal_contact';
+import { BackgroundMarquee } from '../components/background_marquee';
 
 const offersData = [
     {
-        icon: 'supportForAllEthereumStandards',
+        title: 'Accelerate Your Development',
-        title: 'Perfect for developers who need a simple drop-in marketplace',
+        description: "Let Launch Kit take care of the complexities of building a relayer. The codebase allows you to connect to wallets, wrap ETH, make and take orders, and get notified of order state changes so you can spend more time on making your relayer your own.",
-        description: (
+        showcaseUrl: "images/launch_kit/relayer_screenshot.png",
-            <ul>
+        links:[
-                <li>Quickly launch a market for your project’s token</li>
+            {
-                <li>Seamlessly create an in-game marketplace for digital items and collectables</li>
+                label: 'Get Started',
-                <li>Easily build a 0x relayer for your local market</li>
+                url: ``,
-            </ul>
+            },
-        ),
+            {
+                label: 'Live Demo',
+                url: ``,
+            },
+        ]
+    },
+    {
+        title: 'A Universe of Tokens',
+        description: "Launch Kit supports all ERC-20 and ERC-721 tokens out of the box. Trade commodities with the ERC-20 exchange interface, or bid on crypto collectibles with the ERC-721 marketplace interface.",
+        showcaseUrl: "images/launch_kit/NFT_screenshot.png",
+        links:[
+            {
+                label: 'Get Started',
+                url: ``,
+            },
+            {
+                label: 'Live Demo',
+                url: ``,
+            },
+        ]
     },
 ];
 
+
 export class NextLaunchKit extends React.Component {
     public state = {
         isContactModalOpen: false,
@@ -37,9 +60,10 @@ export class NextLaunchKit extends React.Component {
                 <DocumentTitle {...documentConstants.LAUNCH_KIT} />
                 <Hero
                     isLargeTitle={true}
-                    isFullWidth={false}
+                    isFullWidth={true}
                     title="0x Launch Kit"
                     description="Launch a relayer in under a minute"
+                    background={<BackgroundMarquee imgHeightInPx={2114} imgSrcUrl="images/launch_kit/background_marquee.png" />}
                     actions={<HeroActions />}
                 />
 
@@ -72,19 +96,34 @@ export class NextLaunchKit extends React.Component {
                     />
                 </Section>
 
-                <Section>
+                {_.map(offersData, (item, index) => (
-                    {_.map(offersData, (item, index) => (
+                    <ShowcaseSection maxWidth="1170px" showcaseImgSrc={item.showcaseUrl}>
                         <Definition
                             key={`offers-${index}`}
-                            icon={item.icon}
                             title={item.title}
                             description={item.description}
-                            isInlineIcon={true}
+                            actions={item.links}
-                            iconSize={240}
                         />
-                    ))}
+                    </ShowcaseSection>
-                </Section>
+                ))}
 
+                <Section maxWidth="1170px" isFlex={true}>
+                    <Heading size={42}>Features</Heading>
+                    <ul>
+                        <li>Hello</li>
+                        <li>Hello</li>
+                        <li>Hello</li>
+                        <li>Hello</li>
+                        <li>Hello</li>
+                    </ul>
+                    <ul>
+                        <li>Hello</li>
+                        <li>Hello</li>
+                        <li>Hello</li>
+                        <li>Hello</li>
+                        <li>Hello</li>
+                    </ul>
+                </Section>
                 <Banner
                     heading="Need more flexibility?"
                     subline="Dive into our docs, or contact us if needed"