aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/banner.tsx75
-rw-r--r--packages/website/ts/@next/components/layout.tsx3
-rw-r--r--packages/website/ts/@next/pages/why.tsx10
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>
);