init

src/components/herosection/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { PageProps, Link } from 'gatsby'
+
+import styled from 'styled-components'
+
+import { Hero, HeroHeading, HeroDesc } from './style'
+import { BottomSectionArrow, OutlineButton } from '../shared/styledComponents'
+import { Container } from '../shared'
+
+import { pathPrefix } from '../../../gatsby-config.js'
+
+type DataProps = {
+  location: Location
+  heading: string
+  desc: string
+}
+
+const HeroSection: React.FC<PageProps<DataProps>> = ({
+  location,
+  heading,
+  desc
+}) => (
+  <Hero bg={location.pathname === pathPrefix + '/'}>
+    <Container>
+      <HeroHeading>{heading}</HeroHeading>
+      <HeroDesc>{desc}</HeroDesc>
+      {location.pathname === pathPrefix + '/' && (
+        <Link to="/contact/">
+          <OutlineButton>Try Data Controller</OutlineButton>
+        </Link>
+      )}
+    </Container>
+    <BottomSectionArrow />
+  </Hero>
+)
+
+export default HeroSection

src/components/herosection/style.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+import background from '../../images/home_hero_bg.png'
+
+export const Hero = styled.main`
+  position: relative;
+  padding: 50px 0;
+  color: white;
+  background-color: #314351;
+  background-repeat: no-repeat;
+  background-image: ${(props) => (props.bg ? `url(${background})` : 'none')};
+  background-attachment: scroll;
+  background-position: bottom right;
+`
+
+export const HeroHeading = styled.h1`
+  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+  text-transform: uppercase;
+`
+
+export const HeroDesc = styled.p`
+  opacity: 0.8;
+`