1 files changed, 37 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
new file mode 100644
index 000000000..60f859a55
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+import Button from './Button';
+import { Beta } from './Typography';
+
+function Hero(props: Props) {
+    const { subtitle, tagline } = props;
+    return (
+        <StyledHero>
+            <Subtitle>{subtitle}</Subtitle>
+            <Tagline as="p">{tagline}</Tagline>
+            <Button as="a" href="#" large>
+                Read the Docs
+            </Button>
+        </StyledHero>
+    );
+}
+
+const StyledHero = styled.section`
+    margin: 0 auto;
+    text-align: center;
+    max-width: 590px;
+`;
+
+const Subtitle = styled.h2`
+    font-size: 3.75rem;
+    line-height: 1.16;
+    margin-bottom: 1.5rem;
+`;
+
+const Tagline = styled(Beta)`
+    margin-bottom: 2rem;
+`;
+
+export default withContext(Hero);