aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components/Hero.tsx
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-10-25 17:50:09 +0800
committerGitHub <noreply@github.com>2018-10-25 17:50:09 +0800
commit1c8ea1336e9e0c018ceb38cba90943f1b50eb23a (patch)
treed7ff3a9279c207296baa0825aed7d7bcd782c251 /packages/dev-tools-pages/ts/components/Hero.tsx
parenta4de585feb0f8e5ec99f0eb4a7b9aca8a24144f5 (diff)
downloaddexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar
dexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.gz
dexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.bz2
dexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.lz
dexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.xz
dexon-sol-tools-1c8ea1336e9e0c018ceb38cba90943f1b50eb23a.tar.zst
dexon-sol-tools-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.tsx44
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);