diff --git a/src/components/index.js b/src/components/index.js
index db482c7..7208d14 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -19,3 +19,4 @@ export { default as Nav } from "./nav";
export { default as ReviewSummary } from "./review-summary";
export { default as Section } from "./section";
export { default as Text } from "./text";
+export { default as Tile } from "./tile";
diff --git a/src/components/tile.js b/src/components/tile.js
new file mode 100644
index 0000000..2014272
--- /dev/null
+++ b/src/components/tile.js
@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: var(--color-mid-grey);
+`;
+
+const Media = styled.div`
+ width: 32px;
+ height: 32px;
+ margin-bottom: var(--spacing-y-sm);
+
+ svg {
+ max-width: 100%;
+ max-height: 100%;
+ }
+`;
+
+const Body = styled.div`
+ text-align: center;
+
+ > :not(p) {
+ min-height: calc(var(--line-height) * 2em);
+ }
+`;
+export default function Tile({ icon, children }) {
+ return (
+
+ {icon && {icon}}
+ {children}
+
+ );
+}
diff --git a/src/icons/calendar.svg b/src/icons/calendar.svg
index fe37d8e..ec3c993 100644
--- a/src/icons/calendar.svg
+++ b/src/icons/calendar.svg
@@ -1,3 +1,3 @@
diff --git a/src/icons/hammer.svg b/src/icons/hammer.svg
new file mode 100644
index 0000000..6ca1801
--- /dev/null
+++ b/src/icons/hammer.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/icons/pound.svg b/src/icons/pound.svg
new file mode 100644
index 0000000..93d1aad
--- /dev/null
+++ b/src/icons/pound.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/icons/smile.svg b/src/icons/smile.svg
new file mode 100644
index 0000000..41b2714
--- /dev/null
+++ b/src/icons/smile.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/icons/spy.svg b/src/icons/spy.svg
new file mode 100644
index 0000000..54db150
--- /dev/null
+++ b/src/icons/spy.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/pages/index.js b/src/pages/index.js
index 1aba46a..b0e7254 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -4,13 +4,21 @@ import Layout from "../layout";
import {
Card,
CustomSlick,
+ Grid,
Header,
HeaderLogo,
Heading,
ReviewSummary,
Section,
- Text
+ Text,
+ Tile
} from "../components";
+import Calendar from "../icons/calendar.svg";
+import CheckCircle from "../icons/check-circle.svg";
+import Hammer from "../icons/hammer.svg";
+import Pound from "../icons/pound.svg";
+import Smile from "../icons/smile.svg";
+import Spy from "../icons/spy.svg";
export default function Index({ data }) {
return (
@@ -18,37 +26,89 @@ export default function Index({ data }) {
-
- Bathrooms}
- >
- Fully accredited bathroom refurbishment service
-
- Tiling}
- >
- Our tiling is primo!
-
- Electrics}
- >
- Bring some light to your next project
-
- Carpentry}
- >
- Our woodworking is sharp!
-
+
+
+ Bathrooms}
+ >
+ Fully accredited bathroom refurbishment service
+
+ Tiling}
+ >
+ Our tiling is primo!
+
+ Electrics}
+ >
+ Bring some light to your next project
+
+ Carpentry}
+ >
+ Our woodworking is sharp!
+
+
-
+
+
+ If you are looking for a one-stop shop for your new bathroom, look no
+ further. We can take care of all jobs required to complete your new
+ bathroom, including plumbing, tiling and electrical works.
+
+
+ }>
+ 100% Guaranteed
+
+ We guarantee all of our work. If you have any issues, we will fix
+ it at no additional cost.
+
+
+ }>
+ Competitive Fees
+
+ We have affordable pricing and we strive to be as competitive as
+ possible.
+
+
+ }>
+ No hidden charges
+
+ All costs will be clearly stated up front in the contact.
+
+
+ }>
+ High Quality Craftmanship
+
+ Our skilled tradesmen have many years of experience in their craft
+ and will ensure full compliance with industry standards and
+ guidelines.
+
+
+ }>
+ Transparent Deadlines
+
+ We will provide you with a start and finish date with your
+ contract.
+
+
+ }>
+ Friendly Team
+
+ We will be friendly, respectful and curtious from start to finish.
+
+
+
+
+
{data.site.siteMetadata.reviews.map((review, i) => (