feat(heading): init

src/components/header-logo.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
+import { Heading, Text } from ".";
 import LogoArrows from "../icons/logo-arrows.svg";
 
 const Container = styled.div`
@@ -72,17 +73,6 @@ const Bottom = styled.div`
     `}
 `;
 
-const Heading = styled.h1`
-  margin: 0 var(--spacing-x-xs) var(--spacing-y-xs);
-  font-size: var(--font-size-xl);
-  text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
-`;
-
-const Slogan = styled.p`
-  margin: 0 var(--spacing-x-xs) var(--spacing-y-xs);
-  font-size: var(--font-size-lg);
-`;
-
 export default function HeaderLogo({ transition }) {
   const [visible, setVisible] = useState(!transition);
   useEffect(() => transition && setVisible(true), [transition]);
@@ -92,8 +82,10 @@ export default function HeaderLogo({ transition }) {
         <LogoArrows />
       </Top>
       <Middle visible={visible}>
-        <Heading>Abc Project Design Ltd</Heading>
-        <Slogan>Easy as ABC</Slogan>
+        <Heading withShadow noMargin>
+          Abc Project Design Ltd
+        </Heading>
+        <Text size="lg">Easy as ABC</Text>
       </Middle>
       <Bottom visible={visible}>
         <LogoArrows />

src/components/header.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Img from "gatsby-image";
 import styled from "@emotion/styled";
-
+import { css } from "@emotion/react";
 const Container = styled.header`
   position: relative;
   height: 60vh;
@@ -11,18 +11,48 @@ const Container = styled.header`
 
 const Content = styled.div`
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  ${props =>
+    props.posY !== "bottom" &&
+    css`
+      top: ${props.posY === "top" ? 0 : "50%"};
+    `}
+  ${props =>
+    props.posY === "bottom" &&
+    css`
+      bottom: 0;
+    `}
+  ${props =>
+    props.posX !== "right" &&
+    css`
+      left: ${props.posX === "left" ? 0 : "50%"};
+    `}
+  ${props =>
+    props.posX === "right" &&
+    css`
+      right: 0;
+    `}
+  transform: translate(
+    ${props => (props.posX === "middle" ? "-50%" : 0)},
+    ${props => (props.posY === "middle" ? "-50%" : 0)}
+  );
   max-width: var(--theme-max-width);
+  margin: var(--spacing-y-sm) var(--spacing-x-sm);
+  padding: var(--spacing-y-sm) var(--spacing-x-sm);
   text-align: center;
 `;
 
-export default function Header({ image, children }) {
+export default function Header({
+  image,
+  position = "middle middle",
+  children
+}) {
+  const [posY, posX] = position.split(" ");
   return (
     <Container>
       {image && <Img style={{ height: "100%" }} fluid={image} />}
-      <Content>{children}</Content>
+      <Content posX={posX} posY={posY}>
+        {children}
+      </Content>
     </Container>
   );
 }

src/components/heading.js

@@ -0,0 +1,31 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+
+const Styles = styled.h1`
+  margin: ${props => (props.noMargin ? 0 : `0 0 var(--spacing-y-sm)`)};
+  font-size: ${props => `var(--font-size-${props.size})`};
+  ${props =>
+    props.shadow &&
+    css`
+      text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
+    `};
+`;
+
+const sizes = {
+  h1: "xxl",
+  h2: "xl",
+  h3: "lg",
+  h4: "lg",
+  h5: "lg",
+  h6: "lg"
+};
+
+export default function Heading({ el = "h1", withShadow, noMargin, children }) {
+  const Container = Styles.withComponent(el);
+  return (
+    <Container size={sizes[el]} shadow={withShadow} noMargin={noMargin}>
+      {children}
+    </Container>
+  );
+}

src/components/index.js

@@ -5,6 +5,7 @@ export { default as CustomSlick } from "./custom-slick";
 export { default as Footer } from "./footer";
 export { default as HeaderLogo } from "./header-logo";
 export { default as Header } from "./header";
+export { default as Heading } from "./heading";
 export { default as Icon } from "./icon";
 export { default as IconWithContent } from "./icon-with-content";
 export { default as InputText } from "./input-text";

src/components/section.js

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
+import { Heading } from ".";
 
 const Container = styled.div`
   padding: var(--spacing-y-lg) var(--spacing-x-sm);
@@ -16,7 +17,9 @@ const Container = styled.div`
 const Content = styled.div`
   max-width: var(--theme-max-width);
   margin: 0 auto;
+`;
 
+const Body = styled.div`
   ${props =>
     props.grid > 0 &&
     css`
@@ -29,6 +32,8 @@ const Content = styled.div`
 `;
 
 export default function Section({
+  heading,
+  headingElement = "h2",
   children,
   variant,
   grid,
@@ -36,8 +41,11 @@ export default function Section({
 }) {
   return (
     <Container variant={variant}>
-      <Content grid={grid} breakpoint={breakpoint}>
+      <Content>
+        {heading && <Heading el={headingElement}>{heading}</Heading>}
+        <Body grid={grid} breakpoint={breakpoint}>
           {children}
+        </Body>
       </Content>
     </Container>
   );

src/layout.js

@@ -21,10 +21,11 @@ const GlobalStyles = css`
     --color-dark-grey: #333;
     --color-semi-transparent: rgba(255, 255, 255, 0.75);
     --base-font-size: 16px;
-    --font-size-sm: 14px;
-    --font-size-lg: 20px;
-    --font-size-xl: 24px;
-    --font-size-xxl: 32px;
+    --font-size-sm: 0.875rem; // 14px
+    --font-size-md: 1rem; // 16px
+    --font-size-lg: 1.125rem; // 18px
+    --font-size-xl: 1.375rem; // 22px
+    --font-size-xxl: 1.625rem; // 26px
     --icon-size-md: 16px;
     --icon-size-lg: 24px;
 
@@ -52,10 +53,6 @@ const GlobalStyles = css`
       --spacing-x-xl: 48px;
 
       --base-font-size: 18px;
-      --font-size-sm: 16px;
-      --font-size-lg: 24px;
-      --font-size-xl: 32px;
-      --font-size-xxl: 42px;
     }
   }
 

src/pages/about.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { graphql } from "gatsby";
+import Layout from "../layout";
+import { Header, Heading, Section, Text } from "../components";
+
+export default function Index({ data }) {
+  return (
+    <Layout>
+      <Header
+        image={data.headerImage.childImageSharp.fluid}
+        position="bottom right"
+      >
+        <Heading>
+          Slogan <em>or quote here</em>
+        </Heading>
+      </Header>
+      <Section heading="About ABC Project Design">
+        <Text>
+          ABC Project Design Ltd is a medium sized family run business with more
+          than 30 years experience in the building and construction industry. We
+          offer a fully certified and accredited bathroom refurbishment service.
+        </Text>
+        <Text>
+          We currently have 15 skilled tradesman within our workforce and
+          operate in Essex, Hertfordshire, Kent and London. Our team include
+          plumbers, carpenters, bathroom fitters, tilers, electricians,
+          plasterers, painters and decorators. All our staff are vetted and have
+          vast experience in there chosen fields.
+        </Text>
+        <Text>
+          We specialise in bathroom refurbishments and floor tiling. Our
+          stonemasons and tilers are specialists in ceramic, natural stone,
+          marble, quartz, porcelain and mosaic tiles.
+        </Text>
+        <Text>
+          Customer satisfaction is of paramount importance to us this and is
+          reflected in our many five star reviews on Checkatrade, Rated People
+          and Bark. We strive to maximise are relationship with our customers by
+          being honest and fair.
+        </Text>
+        <Text>
+          We are fully insured and all work undertaken is guaranteed. Pricing is
+          something we take extremely seriously and we aim to be ultra
+          competitive.
+        </Text>
+      </Section>
+    </Layout>
+  );
+}
+
+export const query = graphql`
+  query {
+    headerImage: file(relativePath: { eq: "bathroom.png" }) {
+      childImageSharp {
+        fluid(maxWidth: 1920, quality: 100) {
+          ...GatsbyImageSharpFluid_withWebp
+        }
+      }
+    }
+  }
+`;

src/pages/contact.js

@@ -50,7 +50,10 @@ export default function Index({ data }) {
   };
   return (
     <Layout>
-      <Header image={data.headerImage.childImageSharp.fluid}>
+      <Header
+        image={data.headerImage.childImageSharp.fluid}
+        position="bottom right"
+      >
         <h1>Get in touch</h1>
       </Header>
       <Section grid={2} breakpoint="40em">

src/pages/index.js

@@ -17,18 +17,7 @@ export default function Index({ data }) {
       <Header image={data.headerImage.childImageSharp.fluid}>
         <HeaderLogo transition={true} />
       </Header>
-      <Section>
-        <Text>
-          ABC Project Design Ltd is a medium sized family run business with more
-          than 30 years experience in the building and construction industry. We
-          offer a fully certified and accredited bathroom refurbishment service.
-        </Text>
-        <Text>
-          We currently have 15 skilled tradesman within our workforce and
-          operate in Essex, Hertfordshire, Kent and London.
-        </Text>
-      </Section>
-      <Section grid={2}>
+      <Section grid={2} heading="What we do">
         <Card
           to="/services/bathrooms"
           image={data.bathroomImage.childImageSharp.fixed}