diff options
Diffstat (limited to 'packages/website')
| -rw-r--r-- | packages/website/ts/@next/components/banner.tsx | 97 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/newLayout.tsx | 12 |
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>` |