feat: style other pages to match home

src/components/Header/index.tsx

@@ -1,7 +1,12 @@
 import { Link } from "gatsby"
-import React, { PropsWithChildren } from "react"
+import React, { PropsWithChildren, useLayoutEffect, useState } from "react"
+import { WavesBottom, WavesTop } from "../Waves"
 import * as SC from "./styles"
 
+interface IHeaderProps {
+  isHome: boolean
+}
+
 function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
   return (
     <SC.MenuItem to={to} activeClassName="active">
@@ -11,12 +16,22 @@ function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
   )
 }
 
-export function Header() {
+export function Header({ isHome }: IHeaderProps) {
+  // Hack to force Particle.js to rerender
+  const [noop, setNoop] = useState(0)
+  useLayoutEffect(() => {
+    setNoop(prevState => prevState + 1)
+  }, [isHome])
+
   return (
-    <SC.HeaderWrapper>
+    <SC.HeaderWrapper isHome={isHome}>
-      <SC.StyledWavesTop />
+      <WavesTop />
-      <SC.StyledWavesBottom />
+      <SC.FadedBottomWave faded={!isHome}>
+        <WavesBottom />
+      </SC.FadedBottomWave>
+
       <SC.StyledParticles
+        noop={noop}
         params={{
           particles: {
             number: { value: 5, density: { enable: true, value_area: 500 } },

src/components/Header/styles.tsx

@@ -3,16 +3,14 @@ import Particles from "react-particles-js"
 import styled from "styled-components"
 import DiscordLogo from "../../images/discord-logo.svg"
 import TPHLogo from "../../images/tph-logo.svg"
-import WavesBottom from "../../images/waves-bot.svg"
-import WavesTop from "../../images/waves-top.svg"
 
-export const HeaderWrapper = styled.header`
+export const HeaderWrapper = styled.header<{ isHome: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   position: relative;
-  min-height: 100vh;
+  min-height: ${props => (props.isHome ? "100vh" : "auto")};
   background: #121240;
   overflow: hidden;
 `
@@ -35,21 +33,25 @@ export const Title = styled.h1`
   }
 `
 
-export const StyledWavesTop = styled(WavesTop)`
+export const FadedBottomWave = styled.div<{ faded: boolean }>`
-  width: 100vw;
-  max-width: 100%;
-  position: absolute;
-  top: 0;
-`
-
-export const StyledWavesBottom = styled(WavesBottom)`
-  width: 100vw;
-  max-width: 100%;
   position: absolute;
+  transform: translateY(${props => (props.faded ? "100%" : 0)});
   bottom: 0;
+  left: 0;
+  right: 0;
+  transition: opacity 0.5s, transform 0.5s;
+  opacity: ${props => (props.faded ? 0 : 1)};
+
+  ${props =>
+    props.faded &&
+    css`
+      svg {
+        position: static;
+      }
+    `}
 `
 
-export const StyledParticles = styled(Particles)`
+export const StyledParticles = styled(Particles)<{ noop: number }>`
   mask-image: -webkit-linear-gradient(
     top,
     rgba(0, 0, 0, 0) 5%,
@@ -93,7 +95,7 @@ export const StyledDiscordLogo = styled(DiscordLogo)`
 export const InnerWrapper = styled.div`
   width: 800px;
   max-width: calc(100% - 64px);
-  padding: 0 32px;
+  padding: 32px;
   position: relative;
   display: flex;
   align-items: flex-start;

src/components/Layout/index.tsx

@@ -6,12 +6,13 @@
  */
 
 import { graphql, useStaticQuery } from "gatsby"
-import React, { PropsWithChildren } from "react"
+import React, { Fragment, PropsWithChildren } from "react"
 
 import { GlobalStyles } from "../../globalStyles"
 import { Container } from "../Container"
 import { Footer } from "../Footer"
 import { Header } from "../Header"
+import { WavesBottom } from "../Waves"
 import * as SC from "./styles"
 
 export function Layout({
@@ -32,16 +33,17 @@ export function Layout({
   return (
     <SC.LayoutWrapper>
       <GlobalStyles />
-      <Header />
+      <Header isHome={isHome} />
       {!isHome && (
-        <SC.MainContent>
+        <Fragment>
-          <Container>
+          <SC.MainContent>
-            <h1>{data.site.siteMetadata.title}</h1>
+            <Container>{children}</Container>
-            {children}
+          </SC.MainContent>
-          </Container>
+          <Footer />
-        </SC.MainContent>
+          <WavesBottom />
+          <SC.WavesSpacer />
+        </Fragment>
       )}
-      {!isHome && <Footer />}
     </SC.LayoutWrapper>
   )
 }

src/components/Layout/styles.tsx

@@ -1,13 +1,23 @@
 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;
-  max-width: 800px;
+  width: 800px;
+  max-width: calc(100% - 64px);
+  padding: 0 32px;
+`
+
+export const WavesSpacer = styled.div`
+  height: 50vw;
 `

src/components/Waves/index.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+import * as SC from "./styles"
+
+export function WavesTop() {
+  return <SC.StyledWavesTop />
+}
+
+export function WavesBottom() {
+  return <SC.StyledWavesBottom />
+}

src/components/Waves/styles.tsx

@@ -0,0 +1,17 @@
+import styled from "styled-components"
+import WavesBottom from "../../images/waves-bot.svg"
+import WavesTop from "../../images/waves-top.svg"
+
+export const StyledWavesTop = styled(WavesTop)`
+  width: 100vw;
+  max-width: 100%;
+  position: absolute;
+  top: 0;
+`
+
+export const StyledWavesBottom = styled(WavesBottom)`
+  width: 100vw;
+  max-width: 100%;
+  position: absolute;
+  bottom: 0;
+`