diff options
Diffstat (limited to 'packages/dev-tools-pages/ts')
| -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); |