diff options
author | August Skare <post@augustskare.no> | 2018-11-20 00:27:00 +0800 |
---|---|---|
committer | August Skare <post@augustskare.no> | 2018-11-20 00:27:00 +0800 |
commit | 31d07fdac80a2a546646b1eb232fa7dd6319ce83 (patch) | |
tree | cd2bbb781ea499f599c6b06d54270067c437c020 /packages/dev-tools-pages/ts/components/hero.tsx | |
parent | 881655bb57e93fa1cf344585cda1653c995f1411 (diff) | |
download | dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.gz dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.bz2 dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.lz dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.xz dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.zst dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.zip |
rename all files and directories to lowercase
Diffstat (limited to 'packages/dev-tools-pages/ts/components/hero.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/hero.tsx | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/hero.tsx b/packages/dev-tools-pages/ts/components/hero.tsx new file mode 100644 index 000000000..8b6d6ade3 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/hero.tsx @@ -0,0 +1,63 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { ContextInterface, ThemeContext } from 'ts/context'; +import { media } from 'ts/variables'; + +import { Button } from './Button'; +import { Beta } from './Typography'; + +const Hero: React.StatelessComponent<ContextInterface> = ({ children }) => ( + <ThemeContext.Consumer> + {({ subtitle, tagline }: ContextInterface) => ( + <StyledHero> + <HeroContainer> + <Subtitle>{subtitle}</Subtitle> + <Tagline as="p">{tagline}</Tagline> + <Button as="a" href="#" large={true}> + Read the Docs + </Button> + </HeroContainer> + {navigator.userAgent !== 'ReactSnap' ? children : null} + </StyledHero> + )} + </ThemeContext.Consumer> +); + +const StyledHero = styled.section` + text-align: center; + padding-top: 9.375rem; + padding-bottom: 2rem; + padding-left: 2.5rem; + padding-right: 2.5rem; + min-height: min-content; + max-height: 37.5rem; + height: 80vh; + position: relative; +`; + +const HeroContainer = styled.div` + margin: 0 auto; + max-width: 590px; +`; + +const Subtitle = styled.h2` + font-size: 3.75rem; + line-height: 1.16; + margin-bottom: 1.5rem; + + ${media.small` + font-size: 2.25rem; + line-height: 1.1; + margin-bottom: 1.375rem; + `}; +`; + +const Tagline = styled(Beta)` + margin-bottom: 2rem; + ${media.small` + margin-bottom: 1.25rem; + `}; +`; + +export { Hero }; |