refact: extract layout components to the layouts directory

src/layouts/Layout/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * Layout component that queries for data
+ * with Gatsby's useStaticQuery component
+ *
+ * See: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+
+import { RouteComponentProps } from "@reach/router"
+import React, { FC, Fragment } from "react"
+
+import { Container } from "../../components/Container"
+import { Footer } from "../../components/Footer"
+import { Header } from "../../components/Header"
+import { WavesBottom } from "../../components/Waves"
+import { GlobalStyles } from "../../globalStyles"
+import { ThemeProvider } from "../../ThemeProvider"
+import * as SC from "./styles"
+
+export const Layout: FC<RouteComponentProps> = ({ children, location }) => {
+  const isHome = location ? location.pathname === "/" : false
+
+  return (
+    <ThemeProvider>
+      <SC.LayoutWrapper>
+        <GlobalStyles />
+        <Header isHome={isHome} />
+        {!isHome && (
+          <Fragment>
+            <SC.MainContent>
+              <Container>{children}</Container>
+            </SC.MainContent>
+            <Footer />
+            <WavesBottom />
+            <SC.WavesSpacer />
+          </Fragment>
+        )}
+      </SC.LayoutWrapper>
+    </ThemeProvider>
+  )
+}

src/layouts/Layout/styles.tsx

@@ -0,0 +1,41 @@
+import styled from "styled-components"
+
+export const LayoutWrapper = styled.div`
+  background: #121240;
+  color: #fff;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+export const MainContent = styled.main`
+  margin-top: 64px;
+  display: flex;
+  justify-content: center;
+  width: 800px;
+  max-width: calc(100% - 64px);
+  padding: 0 32px;
+
+  .anchor svg path {
+    fill: #fff;
+  }
+
+  a:not(.anchor) {
+    color: #0090d8;
+    font-weight: 700;
+    border-bottom: 2px solid;
+    text-decoration: none;
+    transition: color 0.3s;
+
+    &:hover,
+    &:focus {
+      color: #5dbbea;
+      transition: none;
+    }
+  }
+`
+
+export const WavesSpacer = styled.div`
+  height: 50vw;
+`