diff --git a/src/components/header-logo.js b/src/components/header-logo.js
index f5ea93d..34fa624 100644
--- a/src/components/header-logo.js
+++ b/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 }) {
- Abc Project Design Ltd
- Easy as ABC
+
+ Abc Project Design Ltd
+
+ Easy as ABC
diff --git a/src/components/header.js b/src/components/header.js
index 40dd5cd..6b2851c 100644
--- a/src/components/header.js
+++ b/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 (
{image && ![]()
}
- {children}
+
+ {children}
+
);
}
diff --git a/src/components/heading.js b/src/components/heading.js
new file mode 100644
index 0000000..c452c30
--- /dev/null
+++ b/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 (
+
+ {children}
+
+ );
+}
diff --git a/src/components/index.js b/src/components/index.js
index b8b941b..508cd42 100644
--- a/src/components/index.js
+++ b/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";
diff --git a/src/components/section.js b/src/components/section.js
index b435bc0..9b3812c 100644
--- a/src/components/section.js
+++ b/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 (
-
- {children}
+
+ {heading && {heading}}
+
+ {children}
+
);
diff --git a/src/layout.js b/src/layout.js
index 82d0087..27a7e18 100644
--- a/src/layout.js
+++ b/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;
}
}
diff --git a/src/pages/about.js b/src/pages/about.js
new file mode 100644
index 0000000..be3b9e1
--- /dev/null
+++ b/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 (
+
+
+
+ Slogan or quote here
+
+
+
+
+ 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.
+
+
+ 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.
+
+
+ We specialise in bathroom refurbishments and floor tiling. Our
+ stonemasons and tilers are specialists in ceramic, natural stone,
+ marble, quartz, porcelain and mosaic tiles.
+
+
+ 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.
+
+
+ We are fully insured and all work undertaken is guaranteed. Pricing is
+ something we take extremely seriously and we aim to be ultra
+ competitive.
+
+
+
+ );
+}
+
+export const query = graphql`
+ query {
+ headerImage: file(relativePath: { eq: "bathroom.png" }) {
+ childImageSharp {
+ fluid(maxWidth: 1920, quality: 100) {
+ ...GatsbyImageSharpFluid_withWebp
+ }
+ }
+ }
+ }
+`;
diff --git a/src/pages/contact.js b/src/pages/contact.js
index 0caaa57..bb983c6 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -50,7 +50,10 @@ export default function Index({ data }) {
};
return (
-
+
diff --git a/src/pages/index.js b/src/pages/index.js
index 3275bdb..9cea33c 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -17,18 +17,7 @@ export default function Index({ data }) {
-
-
- 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.
-
-
- We currently have 15 skilled tradesman within our workforce and
- operate in Essex, Hertfordshire, Kent and London.
-
-
-