diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-12 16:47:55 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-12 20:32:20 +0800 |
commit | c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4 (patch) | |
tree | 0ec31d48290d5bb84d833cf70e51c0886b8dffdf /packages/website/ts/@next/components/hero.tsx | |
parent | 965b1ff32fac0eaf91731b9f6b3d0a9ce94e6bb9 (diff) | |
download | dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.gz dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.bz2 dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.lz dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.xz dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.zst dexon-0x-contracts-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.zip |
WIP
Diffstat (limited to 'packages/website/ts/@next/components/hero.tsx')
-rw-r--r-- | packages/website/ts/@next/components/hero.tsx | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx new file mode 100644 index 000000000..d17856b8a --- /dev/null +++ b/packages/website/ts/@next/components/hero.tsx @@ -0,0 +1,103 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +interface Props { + title: string; + description: string; + figure?: React.Node; + actions?: React.Node; +} + +export const Hero = (props: Props) => ( + <Section> + <Wrap isCentered={!props.figure}> + {props.figure && + <Content width="400px"> + {props.figure} + </Content> + } + + <Content width={props.figure ? '546px' : '678px'}> + <Title isLarge={props.figure}> + {props.title} + </Title> + + <Description> + {props.description} + </Description> + + {props.actions && + <ButtonWrap> + {props.actions} + </ButtonWrap> + } + </Content> + </Wrap> + </Section> +); + +const Section = styled.section` + padding: 120px 0; + + @media (max-width: 768px) { + padding: 60px 0; + } +`; + +const Wrap = styled.div` + width: calc(100% - 60px); + margin: 0 auto; + + @media (min-width: 768px) { + max-width: 1136px; + flex-direction: row-reverse; + display: flex; + align-items: center; + text-align: ${props => props.isCentered && 'center'}; + justify-content: ${props => props.isCentered ? 'center' : 'space-between'}; + } + + @media (max-width: 768px) { + text-align: center; + } +`; + +const Title = styled.h1` + font-size: ${props => props.isLarge ? '80px' : '58px'}; + font-weight: 300; + line-height: 1.1; + margin-bottom: 30px; + + @media (max-width: 1024px) { + font-size: 60px; + } + + @media (max-width: 768px) { + font-size: 46px; + } +`; + +const Description = styled.p` + font-size: 22px; + line-height: 31px; + padding: 0; + margin-bottom: 30px; + opacity: 0.75; +`; + +const Content = styled.div` + width: 100%; + + @media (min-width: 768px) { + max-width: ${props => props.width}; + } +`; + +const ButtonWrap = styled.div` + display: inline-flex; + align-items: center; + + * + * { + margin-left: 12px; + } +`; |