feat(tile): init component

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";

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 (
+    <Container>
+      {icon && <Media>{icon}</Media>}
+      <Body>{children}</Body>
+    </Container>
+  );
+}

src/icons/calendar.svg

@@ -1,3 +1,3 @@
 <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-  <path fill="currentColor" d="M400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V160h352v298c0 3.3-2.7 6-6 6z"></path>
+  <path fill="currentColor" d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path>
 </svg>

src/icons/hammer.svg

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+  <path fill="currentColor" d="M571.31 193.94l-22.63-22.63c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31-28.9-28.9c5.63-21.31.36-44.9-16.35-61.61l-45.25-45.25c-62.48-62.48-163.79-62.48-226.28 0l90.51 45.25v18.75c0 16.97 6.74 33.25 18.75 45.25l49.14 49.14c16.71 16.71 40.3 21.98 61.61 16.35l28.9 28.9-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63l22.63 22.63c6.25 6.25 16.38 6.25 22.63 0l90.51-90.51c6.23-6.24 6.23-16.37-.02-22.62zm-286.72-15.2c-3.7-3.7-6.84-7.79-9.85-11.95L19.64 404.96c-25.57 23.88-26.26 64.19-1.53 88.93s65.05 24.05 88.93-1.53l238.13-255.07c-3.96-2.91-7.9-5.87-11.44-9.41l-49.14-49.14z"></path>
+</svg>

src/icons/pound.svg

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+  <path fill="currentColor" d="M308 352h-45.495c-6.627 0-12 5.373-12 12v50.848H128V288h84c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-84v-63.556c0-32.266 24.562-57.086 61.792-57.086 23.658 0 45.878 11.505 57.652 18.849 5.151 3.213 11.888 2.051 15.688-2.685l28.493-35.513c4.233-5.276 3.279-13.005-2.119-17.081C273.124 54.56 236.576 32 187.931 32 106.026 32 48 84.742 48 157.961V224H20c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h28v128H12c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h296c6.627 0 12-5.373 12-12V364c0-6.627-5.373-12-12-12z"></path>
+</svg>

src/icons/smile.svg

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+  <path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z"></path>
+</svg>

src/icons/spy.svg

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+  <path fill="currentColor" d="M383.9 308.3l23.9-62.6c4-10.5-3.7-21.7-15-21.7h-58.5c11-18.9 17.8-40.6 17.8-64v-.3c39.2-7.8 64-19.1 64-31.7 0-13.3-27.3-25.1-70.1-33-9.2-32.8-27-65.8-40.6-82.8-9.5-11.9-25.9-15.6-39.5-8.8l-27.6 13.8c-9 4.5-19.6 4.5-28.6 0L182.1 3.4c-13.6-6.8-30-3.1-39.5 8.8-13.5 17-31.4 50-40.6 82.8-42.7 7.9-70 19.7-70 33 0 12.6 24.8 23.9 64 31.7v.3c0 23.4 6.8 45.1 17.8 64H56.3c-11.5 0-19.2 11.7-14.7 22.3l25.8 60.2C27.3 329.8 0 372.7 0 422.4v44.8C0 491.9 20.1 512 44.8 512h358.4c24.7 0 44.8-20.1 44.8-44.8v-44.8c0-48.4-25.8-90.4-64.1-114.1zM176 480l-41.6-192 49.6 32 24 40-32 120zm96 0l-32-120 24-40 49.6-32L272 480zm41.7-298.5c-3.9 11.9-7 24.6-16.5 33.4-10.1 9.3-48 22.4-64-25-2.8-8.4-15.4-8.4-18.3 0-17 50.2-56 32.4-64 25-9.5-8.8-12.7-21.5-16.5-33.4-.8-2.5-6.3-5.7-6.3-5.8v-10.8c28.3 3.6 61 5.8 96 5.8s67.7-2.1 96-5.8v10.8c-.1.1-5.6 3.2-6.4 5.8z"></path>
+</svg>

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 }) {
       <Header image={data.headerImage.childImageSharp.fluid}>
         <HeaderLogo transition={true} />
       </Header>
-      <Section grid={2} heading="What we do">
+      <Section heading="What we do">
-        <Card
+        <Grid columns={[1, 2]}>
-          to="/services/bathrooms"
+          <Card
-          image={data.bathroomImage.childImageSharp.fluid}
+            to="/services/bathrooms"
-          heading={<Heading el="h3">Bathrooms</Heading>}
+            image={data.bathroomImage.childImageSharp.fluid}
-        >
+            heading={<Heading el="h3">Bathrooms</Heading>}
-          Fully accredited bathroom refurbishment service
+          >
-        </Card>
+            Fully accredited bathroom refurbishment service
-        <Card
+          </Card>
-          to="/services/tiling"
+          <Card
-          image={data.tilingImage.childImageSharp.fluid}
+            to="/services/tiling"
-          heading={<Heading el="h3">Tiling</Heading>}
+            image={data.tilingImage.childImageSharp.fluid}
-        >
+            heading={<Heading el="h3">Tiling</Heading>}
-          Our tiling is primo!
+          >
-        </Card>
+            Our tiling is primo!
-        <Card
+          </Card>
-          to="/services/electrics"
+          <Card
-          image={data.electricsImage.childImageSharp.fluid}
+            to="/services/electrics"
-          heading={<Heading el="h3">Electrics</Heading>}
+            image={data.electricsImage.childImageSharp.fluid}
-        >
+            heading={<Heading el="h3">Electrics</Heading>}
-          Bring some light to your next project
+          >
-        </Card>
+            Bring some light to your next project
-        <Card
+          </Card>
-          to="/services/carpentry"
+          <Card
-          image={data.carpentryImage.childImageSharp.fluid}
+            to="/services/carpentry"
-          heading={<Heading el="h3">Carpentry</Heading>}
+            image={data.carpentryImage.childImageSharp.fluid}
-        >
+            heading={<Heading el="h3">Carpentry</Heading>}
-          Our woodworking is sharp!
+          >
-        </Card>
+            Our woodworking is sharp!
+          </Card>
+        </Grid>
       </Section>
-      <Section variant="primary">
+      <Section variant="secondary" heading="All of our work is guaranteed!">
+        <Text align="center">
+          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.
+        </Text>
+        <Grid columns={[2, 3, 6]} breakpoints={["30em", "60em"]}>
+          <Tile icon={<CheckCircle />}>
+            <Heading el="h3">100% Guaranteed</Heading>
+            <Text size="sm">
+              We guarantee all of our work. If you have any issues, we will fix
+              it at no additional cost.
+            </Text>
+          </Tile>
+          <Tile icon={<Pound />}>
+            <Heading el="h3">Competitive Fees</Heading>
+            <Text size="sm">
+              We have affordable pricing and we strive to be as competitive as
+              possible.
+            </Text>
+          </Tile>
+          <Tile icon={<Spy />}>
+            <Heading el="h3">No hidden charges</Heading>
+            <Text size="sm">
+              All costs will be clearly stated up front in the contact.
+            </Text>
+          </Tile>
+          <Tile icon={<Hammer />}>
+            <Heading el="h3">High Quality Craftmanship</Heading>
+            <Text size="sm">
+              Our skilled tradesmen have many years of experience in their craft
+              and will ensure full compliance with industry standards and
+              guidelines.
+            </Text>
+          </Tile>
+          <Tile icon={<Calendar />}>
+            <Heading el="h3">Transparent Deadlines</Heading>
+            <Text size="sm">
+              We will provide you with a start and finish date with your
+              contract.
+            </Text>
+          </Tile>
+          <Tile icon={<Smile />}>
+            <Heading el="h3">Friendly Team</Heading>
+            <Text size="sm">
+              We will be friendly, respectful and curtious from start to finish.
+            </Text>
+          </Tile>
+        </Grid>
+      </Section>
+      <Section variant="primary" heading="What our clients think of us">
         <CustomSlick>
           {data.site.siteMetadata.reviews.map((review, i) => (
             <ReviewSummary key={i} review={review} />