aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/@next/components/banner.tsx97
-rw-r--r--packages/website/ts/@next/components/button.tsx3
-rw-r--r--packages/website/ts/@next/components/newLayout.tsx12
3 files changed, 83 insertions, 29 deletions
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
index 9045a49f3..5b8c109fb 100644
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -3,11 +3,13 @@ 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 {Button, Link} from 'ts/@next/components/button';
+import {Wrap, WrapCentered } from 'ts/@next/components/layout';
import {Paragraph, Heading} from 'ts/@next/components/text';
import { ThemeInterface } from 'ts/@next/components/siteWrap';
+import {Column, Section} from 'ts/@next/components/newLayout';
+
interface Props {
heading?: string;
subline?: string;
@@ -33,37 +35,82 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
secondaryCta,
} = props;
return (
- <Section bgColor={colors.brandDark} isRelative={true}>
+ <CustomSection
+ bgColor="light"
+ isFlex={true}
+ flexBreakpoint="900px"
+ paddingMobile="120px 0"
+ >
<Border/>
- <Wrap>
- <CustomColumn colWidth="1/2" isPadLarge={true}>
- <WrapCentered padding={[30, 0]}>
- <CustomHeading isNoMargin={true}>{heading}</CustomHeading>
- {subline && <Paragraph isMuted={0.5} isNoMargin={true}>{subline}</Paragraph>}
- </WrapCentered>
- </CustomColumn>
- <CustomColumn colWidth="1/2" isPadLarge={true}>
- <WrapCentered padding={[30, 0]}>
- <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>
+
+ <Column colWidth="1/2" isPadLarge={true}>
+ <CustomHeading isNoMargin={true}>{heading}</CustomHeading>
+
+ {subline &&
+ <Paragraph isMuted={0.5} isNoMargin={true}>
+ {subline}
+ </Paragraph>
+ }
+ </Column>
+ <Column colWidth="1/2" isPadLarge={true}>
+ <ButtonWrap>
+ {mainCta &&
+ <Link href={mainCta.href}>{mainCta.text}</Link>
+ }
+
+ {secondaryCta &&
+ <Button href={secondaryCta.href} isTransparent={true}>{secondaryCta.text}</Button>
+ }
+ </ButtonWrap>
+ </Column>
+ </CustomSection>
);
};
-const CustomColumn = styled(Column)`
- padding: 95px 30px;
+const CustomSection = styled(Section)`
+ @media (max-width: 900px) {
+ text-align: center;
+
+ p {
+ margin-bottom: 30px;
+ }
+
+ div:last-child {
+ margin-bottom: 0;
+ }
+ }
`;
-const CustomHeading = styled(Heading)`
- --defaultHeading: 1.888888889rem;
+const CustomHeading = styled.h2`
+ font-size: 34px;
font-weight: 400;
- margin-bottom: 10px;
+ 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
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index db6c5d5c2..3f14b59bd 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -16,7 +16,6 @@ interface ButtonInterface {
isWithArrow?: boolean;
isAccentColor?: boolean;
hasIcon?: boolean | string;
- isInline?: boolean;
href?: string;
onClick?: () => any;
theme?: {
@@ -27,7 +26,7 @@ interface ButtonInterface {
export const Button = styled.button<ButtonInterface>`
appearance: none;
border: ${props => !props.isNoBorder && `1px solid transparent`};
- display: ${props => props.isInline && 'inline-block'};
+ display: inline-block;
background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'};
border-color: ${props => (props.isTransparent && !props.isWithArrow) && '#6a6a6a'};
color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index fc2bae46b..107d96006 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -24,6 +24,7 @@ interface SectionProps extends WrapProps {
isPadded?: boolean;
isFullWidth?: boolean;
isFlex?: boolean;
+ paddingMobile?: string;
flexBreakpoint?: string;
maxWidth?: string;
bgColor?: 'dark' | 'light' | string;
@@ -74,17 +75,24 @@ const SectionBase = styled.section<SectionProps>`
margin: 0 auto;
padding: ${props => props.isPadded && '120px 0'};
background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
+ position: relative;
+ overflow: hidden;
@media (max-width: 768px) {
- padding: ${props => props.isPadded && '40px 0'};
+ padding: ${props => props.isPadded && (props.paddingMobile || '40px 0')};
}
`;
const Wrap = styled(FlexWrap)<WrapProps>`
width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
- margin: 0 auto;
text-align: ${props => props.isTextCentered && 'center'};
+ margin: 0 auto;
+ overflow: hidden;
+
+ @media (max-width: 768px) {
+ width: calc(100% - 60px);
+ }
`;
export const WrapGrid = styled(Wrap)<WrapGridProps>`