diff options
author | August Skare <post@augustskare.no> | 2018-10-25 17:50:09 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-25 17:50:09 +0800 |
commit | 1c8ea1336e9e0c018ceb38cba90943f1b50eb23a (patch) | |
tree | d7ff3a9279c207296baa0825aed7d7bcd782c251 /packages/dev-tools-pages/ts/components/Hero.tsx | |
parent | a4de585feb0f8e5ec99f0eb4a7b9aca8a24144f5 (diff) | |
download | dexon-0x-contracts-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar dexon-0x-contracts-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.gz dexon-0x-contracts-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.bz2 dexon-0x-contracts-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.lz dexon-0x-contracts-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.xz dexon-0x-contracts-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.zst dexon-0x-contracts-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.zip |
Feature/animations (#6)
* test animation
* test two part video
* new video test
* replace videos with gifs
* rename videos folder to images
* sol-cov gifs
* renames variables
* compiler gif
* change in hero srcset
* better positioning of hero image
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Hero.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Hero.tsx | 44 |
1 files changed, 36 insertions, 8 deletions
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx index f52ce5bc9..e045a7ad4 100644 --- a/packages/dev-tools-pages/ts/components/Hero.tsx +++ b/packages/dev-tools-pages/ts/components/Hero.tsx @@ -6,16 +6,26 @@ import { withContext, Props } from './withContext'; import Button from './Button'; import { Beta } from './Typography'; +const IMAGE_WIDTH = 2560; +const IMAGE_HEIGHT = 800; + function Hero(props: Props) { - const { subtitle, tagline } = props; + const { subtitle, tagline, title } = props; + return ( - <StyledHero> - <Subtitle>{subtitle}</Subtitle> - <Tagline as="p">{tagline}</Tagline> - <Button as="a" href="#" large> - Read the Docs - </Button> - </StyledHero> + <React.Fragment> + <StyledHero> + <Subtitle>{subtitle}</Subtitle> + <Tagline as="p">{tagline}</Tagline> + <Button as="a" href="#" large> + Read the Docs + </Button> + </StyledHero> + + <ImageContainer> + <Image src={`/images/${title}@1x.gif`} srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`} /> + </ImageContainer> + </React.Fragment> ); } @@ -51,4 +61,22 @@ const Tagline = styled(Beta)` `}; `; +const ImageContainer = styled.div` + width: 100%; + height: ${IMAGE_HEIGHT}px; + position: absolute; + top: 6.875rem; + left: 0; + overflow: hidden; + z-index: -1; +`; + +const Image = styled.img` + width: ${IMAGE_WIDTH}px; + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%); +`; + export default withContext(Hero); |