refact: extract layout page logic

src/layouts/HomeLayout/index.tsx

@@ -0,0 +1,34 @@
+import { RouteComponentProps } from "@reach/router"
+import React, { FC, useEffect } from "react"
+
+import { HomeHeader } from "../../components/HomeHeader"
+import { SEO } from "../../components/SEO"
+import { GlobalStyles } from "../../globalStyles"
+import useLocation from "../../hooks/useLocation"
+import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
+import { ThemeProvider } from "../../ThemeProvider"
+import * as SC from "./styles"
+
+export const HomeLayout: FC<RouteComponentProps> = () => {
+  const { isHome } = useLocation()
+  const { locked, unlock } = useLockBodyScroll()
+
+  useEffect(() => {
+    if (locked) {
+      unlock()
+    }
+  }, [locked])
+
+  return (
+    <ThemeProvider>
+      <SC.LayoutWrapper>
+        <GlobalStyles />
+        <SEO
+          title="Home"
+          description="The Programmer's Hangout (TPH) is a discord community geared towards programming."
+        />
+        <HomeHeader isHome={isHome} />
+      </SC.LayoutWrapper>
+    </ThemeProvider>
+  )
+}

src/layouts/HomeLayout/styles.tsx

@@ -0,0 +1,41 @@
+import styled from "styled-components"
+
+export const LayoutWrapper = styled.div`
+  background: #1f2a34;
+  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;
+`