Added banner

3 files changed, 87 insertions, 1 deletions

diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
new file mode 100644
index 000000000..59fbf7fdc
--- /dev/null
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import {colors} from 'ts/style/colors';
+
+import {Button, ButtonWrap} from 'ts/@next/components/button';
+import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
+import {Paragraph, Heading} from 'ts/@next/components/text';
+import { ThemeInterface } from 'ts/@next/components/siteWrap';
+
+interface Props {
+    heading?: string;
+    subline?: string;
+    mainCta?: CTAButton;
+    secondaryCta?: CTAButton;
+    theme?: ThemeInterface;
+}
+
+interface CTAButton {
+    text: string;
+    href: string;
+}
+
+interface BorderProps {
+    isBottom?: boolean;
+}
+
+export const Banner: React.StatelessComponent<Props> = (props: Props) => {
+    const {
+        heading,
+        subline,
+        mainCta,
+        secondaryCta,
+    } = props;
+    return (
+        <Section bgColor={colors.brandDark} isRelative={true}>
+            <Border/>
+            <Wrap>
+                <CustomColumn colWidth="1/2" isPadLarge={true}>
+                    <WrapCentered>
+                        <Heading isNoMargin={true}>{heading}</Heading>
+                        {subline && <Paragraph isMuted={true} isNoMargin={true}>{subline}</Paragraph>}
+                    </WrapCentered>
+                </CustomColumn>
+                <CustomColumn colWidth="1/2" isPadLarge={true}>
+                    <WrapCentered>
+                        <ButtonWrap>
+                            {mainCta && <Button href={mainCta.href}>{mainCta.text}</Button>}
+                            {secondaryCta && <Button href={secondaryCta.href} isTransparent={true}>{secondaryCta.text}</Button>}
+                        </ButtonWrap>
+                    </WrapCentered>
+                </CustomColumn>
+            </Wrap>
+            <Border isBottom={true} />
+        </Section>
+    );
+};
+
+const CustomColumn = styled(Column)`
+    padding: 95px 30px;
+`;
+
+// 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>`
+    position: absolute;
+    background-image: url("data:image/svg+xml;utf8,<svg width='218' height='41' viewBox='0 0 218 41' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M109 39c59.094 0 107-47.906 107-107 0-59.095-47.906-107-107-107S2-127.095 2-68C2-8.907 49.906 39 109 39z' stroke='rgba(255, 255, 255, 0.1)' stroke-width='3' stroke-miterlimit='10'/><path d='M55 6.688L109-68l54 74.688-8.917 22.313H63.988L55 6.688zM109-68l22 97M109-68L87 29M164 6H55' stroke='rgba(255, 255, 255, 0.1)' stroke-width='3' stroke-miterlimit='10'/></svg>");
+    left: 0;
+    width: calc(100% + 214px);
+    height: 40px;
+    top: ${props => !props.isBottom && 0 };
+    bottom: ${props => props.isBottom && 0 };
+    transform: ${props => props.isBottom ? 'rotate(180deg) translate(112px)' : 'translate(-112px)' };
+`;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 48b8ec074..bd3b8a2e3 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -19,6 +19,7 @@ interface SectionProps {
     isNoMargin?: boolean;
     bgColor?: string;
     isFullWidth?: boolean;
+    isRelative?: boolean;
 }
 
 interface WrapProps extends PaddingInterface {
@@ -85,6 +86,8 @@ export const Section = styled.section<SectionProps>`
     margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`};
     margin-left: ${props => props.isFullWidth && `-${GUTTER}px`};
     background-color: ${props => props.bgColor};
+    position: ${props => props.isRelative && 'relative'};
+    overflow: ${props => props.isRelative && 'hidden'};
 
     @media (min-width: 1560px) {
         width: ${props => props.isFullWidth && '100vw'};
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 6b22c6fa4..cf05de6e3 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
+import { Banner } from 'ts/@next/components/banner';
 import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
 import { Link } from 'ts/@next/components/link';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
@@ -18,7 +19,7 @@ export const NextWhy = () => (
       <WrapCentered>
         <Column colWidth="2/3">
           <Heading size="medium" isCentered={true} style={{ '--desktopMaxWidth': '570px' }}>The exchange layer for the crypto economy</Heading>
-          <Paragraph size="medium" isCentered={true}>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>
+          <Paragraph size="medium" isMuted={true} isCentered={true}>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}>Build on 0x</Link>
         </Column>
       </WrapCentered>
@@ -95,6 +96,13 @@ export const NextWhy = () => (
         </Column>
       </Wrap>
     </Section>
+
+    <Banner
+      heading="Ready to get started?"
+      subline="Dive into our docs, or contact us if needed"
+      mainCta={{ text: 'Get Started', href: '/docs' }}
+      secondaryCta={{ text: 'Get in Touch', href: '/contact' }}
+    />
   </SiteWrap>
 );