feat(area-covered): init page

gatsby-config.js

@@ -34,10 +34,15 @@ module.exports = {
           }
         ]
       },
+      {
+        title: "Area covered",
+        to: "/area-covered"
+      },
       {
         title: "About",
         to: "/about"
       },
+
       {
         title: "Contact",
         to: "/contact"

src/components/header.js

@@ -5,8 +5,8 @@ import { css } from "@emotion/react";
 const Container = styled.header`
   position: relative;
   height: 50vh;
-  max-height: 1200px;
   color: white;
+  ${props => props.avoidNav && `margin-top: 40px;`}
 `;
 
 const Content = styled.div`
@@ -40,15 +40,20 @@ const Content = styled.div`
   text-align: center;
 `;
 
+const Map = styled.div``;
+
 export default function Header({
   image,
+  map,
   position = "middle middle",
+  avoidNav,
   children
 }) {
   const [posY, posX] = position.split(" ");
   return (
-    <Container>
+    <Container avoidNav={avoidNav}>
       {image && <Img style={{ height: "100%" }} fluid={image} />}
+      {map && <Map>{map}</Map>}
       <Content posX={posX} posY={posY}>
         {children}
       </Content>

src/pages/area-covered.js

@@ -0,0 +1,56 @@
+import React from "react";
+import Layout from "../layout";
+import { Header, Map, Section, Text } from "../components";
+import { Polyline } from "google-maps-react";
+
+const triangleCoords = [
+  { lat: 52.253, lng: 0.109 }, // Cambridge
+  { lat: 52.095, lng: 1.144 }, // Ipswich
+  { lat: 51.975, lng: 1.379 }, // Felixtowe
+  { lat: 51.782, lng: 1.151 }, // Clacton
+  { lat: 51.755, lng: 0.975 }, // Blackwater
+  { lat: 51.612, lng: 0.987 }, // Courtsend
+  { lat: 51.453, lng: 0.733 }, // Grain
+  { lat: 51.228, lng: 0.554 }, // Maidstone
+  { lat: 51.258, lng: -0.087 }, // Caterham
+  { lat: 51.436, lng: -0.361 }, // Twickenham
+  { lat: 51.611, lng: -0.45 }, // Northwood
+  { lat: 51.737, lng: -0.399 }, // St Albans
+  { lat: 51.992, lng: -0.281 }, // Letchworth
+  { lat: 52.253, lng: 0.109 } // Cambridge
+];
+
+export default function Index() {
+  return (
+    <Layout location="/area-covered">
+      <Header
+        map={
+          <Map
+            initialCenter={{
+              lat: 51.765,
+              lng: 0.022
+            }}
+            zoom={7}
+            mapTypeContol={false}
+            scaleControl={false}
+            streetViewControl={false}
+            rotateControl={false}
+            fullscreenControl={false}
+          >
+            <Polyline
+              path={triangleCoords}
+              strokeColor="var(--theme-color-primary)"
+              fillColor="#ff0000"
+              strokeOpacity={0.8}
+              strokeWeight={2}
+            />
+          </Map>
+        }
+        avoidNav
+      ></Header>
+      <Section heading="Area covered">
+        <Text>Info about area covered here</Text>
+      </Section>
+    </Layout>
+  );
+}