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

10 files changed, 41 insertions, 9 deletions

diff --git a/packages/dev-tools-pages/assets/images/sol-compiler@1x.gif b/packages/dev-tools-pages/assets/images/sol-compiler@1x.gif
new file mode 100644
index 000000000..5d70994f4
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-compiler@1x.gif
diff --git a/packages/dev-tools-pages/assets/images/sol-compiler@2x.gif b/packages/dev-tools-pages/assets/images/sol-compiler@2x.gif
new file mode 100644
index 000000000..e13e7399f
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-compiler@2x.gif
diff --git a/packages/dev-tools-pages/assets/images/sol-cov@1x.gif b/packages/dev-tools-pages/assets/images/sol-cov@1x.gif
new file mode 100644
index 000000000..88b5ea55c
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-cov@1x.gif
diff --git a/packages/dev-tools-pages/assets/images/sol-cov@2x.gif b/packages/dev-tools-pages/assets/images/sol-cov@2x.gif
new file mode 100644
index 000000000..1e0eb60d3
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-cov@2x.gif
diff --git a/packages/dev-tools-pages/assets/images/sol-profiler@1x.gif b/packages/dev-tools-pages/assets/images/sol-profiler@1x.gif
new file mode 100644
index 000000000..f394cb59d
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-profiler@1x.gif
diff --git a/packages/dev-tools-pages/assets/images/sol-profiler@2x.gif b/packages/dev-tools-pages/assets/images/sol-profiler@2x.gif
new file mode 100644
index 000000000..b9640ff17
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-profiler@2x.gif
diff --git a/packages/dev-tools-pages/assets/images/sol-trace@1x.gif b/packages/dev-tools-pages/assets/images/sol-trace@1x.gif
new file mode 100644
index 000000000..a2b39b8e2
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-trace@1x.gif
diff --git a/packages/dev-tools-pages/assets/images/sol-trace@2x.gif b/packages/dev-tools-pages/assets/images/sol-trace@2x.gif
new file mode 100644
index 000000000..d21a7d896
--- /dev/null
+++ b/packages/dev-tools-pages/assets/images/sol-trace@2x.gif
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);
diff --git a/packages/dev-tools-pages/webpack.config.js b/packages/dev-tools-pages/webpack.config.js
index d025737f7..33ad11498 100644
--- a/packages/dev-tools-pages/webpack.config.js
+++ b/packages/dev-tools-pages/webpack.config.js
@@ -84,7 +84,11 @@ module.exports = (_env, argv) => {
     let plugins = [
         new CleanWebpackPlugin('public'),
         ...pages.map(p => new HtmlWebpackPlugin(p)),
-        new CopyWebpackPlugin([{ from: 'assets/crawl.html', to: 'index.html' }, { from: 'assets/fonts', to: 'fonts' }]),
+        new CopyWebpackPlugin([
+            { from: 'assets/crawl.html', to: 'index.html' },
+            { from: 'assets/fonts', to: 'fonts' },
+            { from: 'assets/images', to: 'images' },
+        ]),
     ];
     if (argv.mode === 'development') {
         config.mode = 'development';