aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/banner.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/banner.tsx')
-rw-r--r--packages/website/ts/components/banner.tsx147
1 files changed, 147 insertions, 0 deletions
diff --git a/packages/website/ts/components/banner.tsx b/packages/website/ts/components/banner.tsx
new file mode 100644
index 000000000..76fc1d09e
--- /dev/null
+++ b/packages/website/ts/components/banner.tsx
@@ -0,0 +1,147 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+import { Button } from 'ts/components/button';
+import { ThemeInterface } from 'ts/components/siteWrap';
+import { Paragraph } from 'ts/components/text';
+
+import { Column, Section } from 'ts/components/newLayout';
+
+interface Props {
+ heading?: string;
+ subline?: string;
+ mainCta?: CTAButton;
+ secondaryCta?: CTAButton;
+ theme?: ThemeInterface;
+}
+
+interface CTAButton {
+ text: string;
+ href?: string;
+ onClick?: () => void;
+ shouldOpenInNewTab?: boolean;
+}
+
+interface BorderProps {
+ isBottom?: boolean;
+}
+
+export const Banner: React.StatelessComponent<Props> = (props: Props) => {
+ const { heading, subline, mainCta, secondaryCta } = props;
+ return (
+ <CustomSection bgColor={colors.brandDark} isFlex={true} flexBreakpoint="900px" paddingMobile="120px 0">
+ <Border />
+ <Border isBottom={true} />
+
+ <Column>
+ <CustomHeading>{heading}</CustomHeading>
+
+ {subline && (
+ <Paragraph color={colors.white} isMuted={0.5} isNoMargin={true}>
+ {subline}
+ </Paragraph>
+ )}
+ </Column>
+ <Column>
+ <ButtonWrap>
+ {mainCta && (
+ <Button
+ color={colors.white}
+ isTransparent={false}
+ href={mainCta.href}
+ target={mainCta.shouldOpenInNewTab ? '_blank' : ''}
+ >
+ {mainCta.text}
+ </Button>
+ )}
+
+ {secondaryCta && (
+ <Button
+ color={colors.white}
+ href={secondaryCta.href}
+ onClick={secondaryCta.onClick}
+ isTransparent={true}
+ >
+ {secondaryCta.text}
+ </Button>
+ )}
+ </ButtonWrap>
+ </Column>
+ </CustomSection>
+ );
+};
+
+const CustomSection = styled(Section)`
+ color: ${colors.white};
+ margin-top: 30px;
+
+ @media (max-width: 900px) {
+ text-align: center;
+
+ p {
+ margin-bottom: 30px;
+ }
+
+ div:last-child {
+ margin-bottom: 0;
+ }
+ }
+`;
+
+const CustomHeading = styled.h2`
+ font-size: 34px;
+ font-weight: 400;
+ margin-bottom: 10px @media (max-width: 768px) {
+ font-size: 30px;
+ }
+`;
+
+const ButtonWrap = styled.div`
+ display: inline-block;
+
+ @media (min-width: 768px) {
+ * + * {
+ margin-left: 15px;
+ }
+ }
+
+ @media (max-width: 768px) {
+ a,
+ button {
+ display: block;
+ width: 220px;
+ }
+
+ * + * {
+ margin-top: 15px;
+ }
+ }
+`;
+
+// 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: ${props =>
+ props.isBottom ? 'url(/images/banner/bottomofcta.png);' : 'url(/images/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};
+ transform: translate(-112px);
+
+ @media (max-width: 768px) {
+ width: calc(100% + 82px);
+ height: 40px;
+ transform: translate(-41px);
+ background-size: auto 80px;
+ }
+`;