diff options
| -rw-r--r-- | packages/website/ts/@next/components/banner.tsx | 75 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 10 |
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> ); |