ui: update header/nav style to match layout

src/components/Header/index.tsx

@@ -0,0 +1,33 @@
+import React, { PropsWithChildren } from "react"
+import { Container } from "../Container"
+import logo from "../../images/tph-logo.png"
+import * as SC from "./styles"
+
+function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
+  return (
+    <SC.MenuItem to={to} activeClassName="active">
+      {children}
+    </SC.MenuItem>
+  )
+}
+
+export function Header() {
+  return (
+    <SC.HeaderWrapper>
+      <Container>
+        <SC.InnerWrapper>
+          <SC.Logo src={logo} />
+
+          <SC.Menu>
+            <MenuItem to="/">about</MenuItem>
+            <MenuItem to="/">rules</MenuItem>
+            <MenuItem to="/">faq</MenuItem>
+            <MenuItem to="/">hotbot</MenuItem>
+            <MenuItem to="/docs">documentation</MenuItem>
+            <MenuItem to="/">tech spotlight</MenuItem>
+          </SC.Menu>
+        </SC.InnerWrapper>
+      </Container>
+    </SC.HeaderWrapper>
+  )
+}

src/components/Header/styles.tsx

@@ -0,0 +1,83 @@
+import { Link } from "gatsby"
+import styled from "styled-components"
+
+export const HeaderWrapper = styled.header``
+
+export const InnerWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 122px;
+`
+
+export const Logo = styled.img`
+  position: absolute;
+  margin-right: 50px;
+  left: calc(-122px - 50px);
+  width: 122px;
+  height: 122px;
+`
+
+export const Menu = styled.nav`
+  margin-top: 16px;
+  display: flex;
+  align-items: flex-start;
+`
+
+export const MenuItem = styled(Link)`
+  display: flex;
+  align-items: center;
+  font-size: 22px;
+  text-decoration: none;
+  color: #555;
+  position: relative;
+  transition: color 0.3s;
+
+  /* underline bar, getting animated through hover */
+  &::after {
+    z-index: -1;
+    position: absolute;
+    content: "";
+    height: 2px;
+    width: 100%;
+    margin-top: -3px;
+    bottom: 0;
+    background: #555;
+    transition: all 0.3s;
+  }
+
+  &:hover {
+    color: #fff;
+  }
+
+  &:hover::after {
+    padding: 8px;
+    height: 100%;
+    background: #000;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 11px rgba(0, 0, 0, 0.25);
+    margin-left: -8px;
+    margin-bottom: -8px;
+    border-radius: 3px;
+  }
+
+  &.active {
+    font-weight: 700;
+    color: #d33636;
+
+    &::after {
+      background: #d33636;
+    }
+
+    &:hover {
+      color: #fff;
+    }
+
+    &:hover::after {
+      background: #d33636;
+    }
+  }
+
+  & + & {
+    margin-left: 48px;
+  }
+`