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

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);