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

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

3 files changed, 45 insertions, 59 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>