Merge pull request #1449 from 0xProject/feature/website/0x-org-steve-links

[website] 0x.org Launch Kit and Ecosystem links

6 files changed, 144 insertions, 148 deletions

diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
index 2620b92ef..982e764af 100644
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -3,11 +3,11 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import {Button} from 'ts/@next/components/button';
-import {ThemeInterface} from 'ts/@next/components/siteWrap';
-import {Paragraph} from 'ts/@next/components/text';
+import { Button } from 'ts/@next/components/button';
+import { ThemeInterface } from 'ts/@next/components/siteWrap';
+import { Paragraph } from 'ts/@next/components/text';
 
-import {Column, Section} from 'ts/@next/components/newLayout';
+import { Column, Section } from 'ts/@next/components/newLayout';
 
 interface Props {
     heading?: string;
@@ -21,6 +21,7 @@ interface CTAButton {
     text: string;
     href?: string;
     onClick?: () => void;
+    shouldOpenInNewTab?: boolean;
 }
 
 interface BorderProps {
@@ -28,44 +29,35 @@ interface BorderProps {
 }
 
 export const Banner: React.StatelessComponent<Props> = (props: Props) => {
-    const {
-        heading,
-        subline,
-        mainCta,
-        secondaryCta,
-    } = props;
+    const { heading, subline, mainCta, secondaryCta } = props;
     return (
-        <CustomSection
-            bgColor="light"
-            isFlex={true}
-            flexBreakpoint="900px"
-            paddingMobile="120px 0"
-        >
-            <Border/>
+        <CustomSection bgColor="light" isFlex={true} flexBreakpoint="900px" paddingMobile="120px 0">
+            <Border />
             <Border isBottom={true} />
 
             <Column>
                 <CustomHeading>{heading}</CustomHeading>
 
-                {subline &&
+                {subline && (
                     <Paragraph color={colors.white} isMuted={0.5} isNoMargin={true}>
                         {subline}
                     </Paragraph>
-                }
+                )}
             </Column>
             <Column>
                 <ButtonWrap>
-                    {mainCta &&
+                    {mainCta && (
                         <Button
                             color={colors.white}
                             isTransparent={false}
                             href={mainCta.href}
+                            target={mainCta.shouldOpenInNewTab ? '_blank' : ''}
                         >
                             {mainCta.text}
                         </Button>
-                    }
+                    )}
 
-                    {secondaryCta &&
+                    {secondaryCta && (
                         <Button
                             color={colors.white}
                             href={secondaryCta.href}
@@ -74,7 +66,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
                         >
                             {secondaryCta.text}
                         </Button>
-                    }
+                    )}
                 </ButtonWrap>
             </Column>
         </CustomSection>
@@ -101,9 +93,7 @@ const CustomSection = styled(Section)`
 const CustomHeading = styled.h2`
     font-size: 34px;
     font-weight: 400;
-    margin-bottom: 10px
-
-    @media (max-width: 768px) {
+    margin-bottom: 10px @media (max-width: 768px) {
         font-size: 30px;
     }
 `;
@@ -118,7 +108,8 @@ const ButtonWrap = styled.div`
     }
 
     @media (max-width: 768px) {
-        a, button {
+        a,
+        button {
             display: block;
             width: 220px;
         }
@@ -132,15 +123,19 @@ const ButtonWrap = styled.div`
 // Note let's refactor this
 // is it absolutely necessary to have a stateless component
 // to pass props down into the styled icon?
-const Border = styled.div<BorderProps>`
+const Border =
+    styled.div <
+    BorderProps >
+    `
     position: absolute;
-    background-image: ${props => props.isBottom ? 'url(/images/@next/banner/bottomofcta.png);' : 'url(/images/@next/banner/topofcta.png);' };
-    background-position: ${props => props.isBottom ? 'left top' : 'left bottom' };
+    background-image: ${props =>
+        props.isBottom ? 'url(/images/@next/banner/bottomofcta.png);' : 'url(/images/@next/banner/topofcta.png);'};
+    background-position: ${props => (props.isBottom ? 'left top' : 'left bottom')};
     left: 0;
     width: calc(100% + 214px);
     height: 40px;
-    top: ${props => !props.isBottom && 0 };
-    bottom: ${props => props.isBottom && 0 };
+    top: ${props => !props.isBottom && 0};
+    bottom: ${props => props.isBottom && 0};
     transform: translate(-112px);
 
     @media (max-width: 768px) {
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
index 1677d3c08..886cee44a 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
@@ -1,22 +1,22 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import {Heading, Paragraph} from 'ts/@next/components/text';
+import { Heading, Paragraph } from 'ts/@next/components/text';
 import { WebsitePaths } from 'ts/types';
 
 const navData = [
-        {
-            title: '0x Instant',
-            description: 'Simple crypto purchasing',
-            url: WebsitePaths.Instant,
-        },
-        {
-            title: '0x Launch kit',
-            description: 'Build on the 0x protocol',
-            url: WebsitePaths.LaunchKit,
-        },
+    {
+        title: '0x Instant',
+        description: 'Simple crypto purchasing',
+        url: WebsitePaths.Instant,
+    },
+    {
+        title: '0x Launch Kit',
+        description: 'Build on the 0x protocol',
+        url: WebsitePaths.LaunchKit,
+    },
 ];
 
 export const DropdownProducts: React.FunctionComponent<{}> = () => (
@@ -24,25 +24,15 @@ export const DropdownProducts: React.FunctionComponent<{}> = () => (
         {_.map(navData, (item, index) => (
             <li key={`productLink-${index}`}>
                 <Link to={item.url}>
-                    <Heading
-                        asElement="h3"
-                        color="inherit"
-                        isNoMargin={true}
-                        size="small"
-                    >
+                    <Heading asElement="h3" color="inherit" isNoMargin={true} size="small">
                         {item.title}
                     </Heading>
 
-                    {item.description &&
-                        <Paragraph
-                            color="inherit"
-                            isNoMargin={true}
-                            size="small"
-                            isMuted={0.5}
-                        >
+                    {item.description && (
+                        <Paragraph color="inherit" isNoMargin={true} size="small" isMuted={0.5}>
                             {item.description}
                         </Paragraph>
-                    }
+                    )}
                 </Link>
             </li>
         ))}
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index 9c2c29446..e7346a797 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -5,6 +5,7 @@ import { Button } from 'ts/@next/components/button';
 import { Icon, InlineIconWrap } from 'ts/@next/components/icon';
 import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
 import { Paragraph } from 'ts/@next/components/text';
+import { WebsitePaths } from 'ts/types';
 
 interface FigureProps {
     value: string;
@@ -25,7 +26,7 @@ export const SectionLandingAbout = () => (
             instruments to assets that could have never existed before.
         </Paragraph>
 
-        <Button href="#" isWithArrow={true} isAccentColor={true}>
+        <Button href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}>
             Discover how developers use 0x
         </Button>
 
diff --git a/packages/website/ts/@next/pages/ecosystem.tsx b/packages/website/ts/@next/pages/ecosystem.tsx
index 2f996d3e4..ab73cc52f 100644
--- a/packages/website/ts/@next/pages/ecosystem.tsx
+++ b/packages/website/ts/@next/pages/ecosystem.tsx
@@ -4,11 +4,12 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import {Button} from 'ts/@next/components/button';
+import { Button } from 'ts/@next/components/button';
 import { Icon } from 'ts/@next/components/icon';
 import { Column, Section, WrapGrid } from 'ts/@next/components/newLayout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
+import { constants } from 'ts/utils/constants';
 
 interface BenefitProps {
     title: string;
@@ -20,7 +21,8 @@ const benefits: BenefitProps[] = [
     {
         icon: 'milestoneGrants',
         title: 'Milestone Grants',
-        description: 'Receive non-dilutive capital ranging from $10,000 to $100,000, with grant sizes awarded based on the quality of your team, vision, execution, and community involvement.',
+        description:
+            'Receive non-dilutive capital ranging from $10,000 to $100,000, with grant sizes awarded based on the quality of your team, vision, execution, and community involvement.',
     },
     {
         icon: 'vcIntroductions',
@@ -40,7 +42,8 @@ const benefits: BenefitProps[] = [
     {
         icon: 'eficientDesign',
         title: 'Marketing and Design Help',
-        description: 'Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business.',
+        description:
+            'Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business.',
     },
     {
         icon: 'legalResources',
@@ -50,56 +53,67 @@ const benefits: BenefitProps[] = [
 ];
 
 export const NextEcosystem = () => (
-  <SiteWrap theme="light">
-    <Section isTextCentered={true}>
-        <Column>
-            <Heading size="medium" isCentered={true}>
-                Jumpstart your Business on 0x
-            </Heading>
-            <Paragraph size="medium" isCentered={true} isMuted={true} marginBottom="0">
-                The Ecosystem Acceleration Program gives teams access to a variety of services including funding, personalized technical support, and recruiting assistance. We created the Ecosystem Acceleration Program to bolster the expansion of both infrastructure projects and relayers building on 0x.
-            </Paragraph>
-            <LinkWrap>
-                <Button
-                    to="#"
-                    isWithArrow={true}
-                    isAccentColor={true}
-                >
-                    Apply now
-                </Button>
-                <Button
-                    to="#"
-                    isWithArrow={true}
-                    isAccentColor={true}
-                >
-                    Learn More
-                </Button>
-            </LinkWrap>
-        </Column>
-    </Section>
+    <SiteWrap theme="light">
+        <Section isTextCentered={true}>
+            <Column>
+                <Heading size="medium" isCentered={true}>
+                    Jumpstart your Business on 0x
+                </Heading>
+                <Paragraph size="medium" isCentered={true} isMuted={true} marginBottom="0">
+                    The Ecosystem Acceleration Program gives teams access to a variety of services including funding,
+                    dedicated technical support, and recruiting assistance. We created the Ecosystem Acceleration
+                    Program to bolster the expansion of both infrastructure projects and relayers building on 0x.
+                </Paragraph>
+                <LinkWrap>
+                    <Button
+                        href={constants.URL_ECOSYSTEM_APPLY}
+                        isWithArrow={true}
+                        isAccentColor={true}
+                        useAnchorTag={true}
+                    >
+                        Apply now
+                    </Button>
+                    <Button
+                        href={constants.URL_ECOSYSTEM_BLOG_POST}
+                        isWithArrow={true}
+                        isAccentColor={true}
+                        useAnchorTag={true}
+                        target="_blank"
+                    >
+                        Learn More
+                    </Button>
+                </LinkWrap>
+            </Column>
+        </Section>
 
-    <Section bgColor={colors.backgroundLight} isFullWidth={true}>
-        <Column>
-            <Heading size={34} fontWeight="400" asElement="h2" isCentered={true} maxWidth="507px" marginBottom="70px">
-                Join a vibrant ecosystem of projects in the 0x Network.
-            </Heading>
-        </Column>
-        <WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={true}>
-            {_.map(benefits, (benefit: BenefitProps, index) => (
-                <Column key={`benefit-${index}`} width="33%" padding="0 45px 30px">
-                    <Icon name={benefit.icon} size="medium" margin={[0, 0, 'small', 0]} />
-                    <Heading color={colors.textDarkPrimary} size="small" marginBottom="10px" isCentered={true}>
-                        {benefit.title}
-                    </Heading>
-                    <Paragraph isMuted={true} isCentered={true}>
-                        {benefit.description}
-                    </Paragraph>
-                </Column>
-            ))}
-        </WrapGrid>
-    </Section>
-
-  </SiteWrap>
+        <Section bgColor={colors.backgroundLight} isFullWidth={true}>
+            <Column>
+                <Heading
+                    size={34}
+                    fontWeight="400"
+                    asElement="h2"
+                    isCentered={true}
+                    maxWidth="507px"
+                    marginBottom="70px"
+                >
+                    Join a vibrant ecosystem of projects in the 0x Network.
+                </Heading>
+            </Column>
+            <WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={true}>
+                {_.map(benefits, (benefit: BenefitProps, index) => (
+                    <Column key={`benefit-${index}`} width="33%" padding="0 45px 30px">
+                        <Icon name={benefit.icon} size="medium" margin={[0, 0, 'small', 0]} />
+                        <Heading color={colors.textDarkPrimary} size="small" marginBottom="10px" isCentered={true}>
+                            {benefit.title}
+                        </Heading>
+                        <Paragraph isMuted={true} isCentered={true}>
+                            {benefit.description}
+                        </Paragraph>
+                    </Column>
+                ))}
+            </WrapGrid>
+        </Section>
+    </SiteWrap>
 );
 
 const LinkWrap = styled.div`
diff --git a/packages/website/ts/@next/pages/launch_kit.tsx b/packages/website/ts/@next/pages/launch_kit.tsx
index bef5d2164..7ae54293b 100644
--- a/packages/website/ts/@next/pages/launch_kit.tsx
+++ b/packages/website/ts/@next/pages/launch_kit.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import {Hero} from 'ts/@next/components/hero';
+import { Hero } from 'ts/@next/components/hero';
 
 import { Banner } from 'ts/@next/components/banner';
 import { Button } from 'ts/@next/components/button';
@@ -9,10 +9,10 @@ import { Definition } from 'ts/@next/components/definition';
 import { Icon } from 'ts/@next/components/icon';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 
-import {Section} from 'ts/@next/components/newLayout';
-import { ModalContact } from '../components/modals/modal_contact';
+import { Section } from 'ts/@next/components/newLayout';
+import { constants } from 'ts/utils/constants';
 
-import { WebsitePaths } from 'ts/types';
+import { ModalContact } from '../components/modals/modal_contact';
 
 const offersData = [
     {
@@ -20,15 +20,9 @@ const offersData = [
         title: 'Perfect for developers who need a simple drop-in marketplace',
         description: (
             <ul>
-                <li>
-                    Quickly launch a market for your project’s token
-                </li>
-                <li>
-                    Seamlessly create an in-game marketplace for digital items and collectables
-                </li>
-                <li>
-                    Easily build a 0x relayer for your local market
-                </li>
+                <li>Quickly launch a market for your project’s token</li>
+                <li>Seamlessly create an in-game marketplace for digital items and collectables</li>
+                <li>Easily build a 0x relayer for your local market</li>
             </ul>
         ),
     },
@@ -47,14 +41,10 @@ export class NextLaunchKit extends React.Component {
                     title="0x Launch Kit"
                     description="Launch a relayer in under a minute"
                     figure={<Icon name="launchKit" size="hero" margin={['small', 0, 'small', 0]} />}
-                    actions={<HeroActions/>}
+                    actions={<HeroActions />}
                 />
 
-                <Section
-                    bgColor="dark"
-                    isFlex={true}
-                    maxWidth="1170px"
-                >
+                <Section bgColor="dark" isFlex={true} maxWidth="1170px">
                     <Definition
                         title="Networked Liquidity Pool"
                         titleSize="small"
@@ -84,22 +74,26 @@ export class NextLaunchKit extends React.Component {
                 </Section>
 
                 <Section>
-                {_.map(offersData, (item, index) => (
-                    <Definition
-                        key={`offers-${index}`}
-                        icon={item.icon}
-                        title={item.title}
-                        description={item.description}
-                        isInlineIcon={true}
-                        iconSize={240}
-                    />
-                ))}
+                    {_.map(offersData, (item, index) => (
+                        <Definition
+                            key={`offers-${index}`}
+                            icon={item.icon}
+                            title={item.title}
+                            description={item.description}
+                            isInlineIcon={true}
+                            iconSize={240}
+                        />
+                    ))}
                 </Section>
 
                 <Banner
                     heading="Need more flexibility?"
                     subline="Dive into our docs, or contact us if needed"
-                    mainCta={{ text: 'Get Started', href: '/docs' }}
+                    mainCta={{
+                        text: 'Get Started',
+                        href: `${constants.URL_LAUNCH_KIT}/#table-of-contents`,
+                        shouldOpenInNewTab: true,
+                    }}
                     secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
                 />
                 <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
@@ -109,21 +103,21 @@ export class NextLaunchKit extends React.Component {
 
     public _onOpenContactModal = (): void => {
         this.setState({ isContactModalOpen: true });
-    }
+    };
 
     public _onDismissContactModal = (): void => {
         this.setState({ isContactModalOpen: false });
-    }
+    };
 }
 
 const HeroActions = () => (
-    <>
-        <Button href="https://github.com/0xProject/0x-launch-kit" isInline={true}>
+    <React.Fragment>
+        <Button href={constants.URL_LAUNCH_KIT} isInline={true} target="_blank">
             Get Started
         </Button>
 
-        <Button to={WebsitePaths.Why} isTransparent={true} isInline={true}>
-            Learn More
+        <Button href={constants.URL_LAUNCH_KIT_BLOG_POST} isTransparent={true} isInline={true} target="_blank">
+            Learn More!
         </Button>
-    </>
+    </React.Fragment>
 );
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index c8c8099c9..ada8de549 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -76,6 +76,8 @@ export const constants = {
     URL_BITLY_API: 'https://api-ssl.bitly.com',
     URL_BLOG: 'https://blog.0xproject.com/latest',
     URL_DISCOURSE_FORUM: 'https://forum.0x.org',
+    URL_ECOSYSTEM_APPLY: 'https://0x.smapply.io/',
+    URL_ECOSYSTEM_BLOG_POST: 'https://blog.0xproject.com/announcing-the-0x-ecosystem-acceleration-program-89d1cb89d565',
     URL_FIREFOX_U2F_ADDON: 'https://addons.mozilla.org/en-US/firefox/addon/u2f-support-add-on/',
     URL_TESTNET_FAUCET: 'https://faucet.0x.org',
     URL_GITHUB_ORG: 'https://github.com/0xProject',