feat: init card and nav

src/pages/index.js

@@ -4,6 +4,7 @@ import Layout from "../layout";
 import Header from "../components/header";
 import HeaderLogo from "../components/header-logo";
 import Section from "../components/section";
+import Card from "../components/card";
 import ReviewSummary from "../components/review-summary";
 import CustomSlick from "../components/custom-slick";
 import Text from "../components/text";
@@ -12,7 +13,7 @@ export default function Index({ data }) {
   return (
     <Layout>
       <Header image={data.headerImage.childImageSharp.fluid}>
-        <HeaderLogo />
+        <HeaderLogo transition={true} />
       </Header>
       <Section>
         <Text>
@@ -25,6 +26,32 @@ export default function Index({ data }) {
           operate in Essex, Hertfordshire, Kent and London.
         </Text>
       </Section>
+      <Section grid={2}>
+        <Card
+          to="/services/bathrooms"
+          image={data.bathroomImage.childImageSharp.fixed}
+        >
+          Bathrooms
+        </Card>
+        <Card
+          to="/services/tiling"
+          image={data.tilingImage.childImageSharp.fixed}
+        >
+          Tiling
+        </Card>
+        <Card
+          to="/services/electrics"
+          image={data.electricsImage.childImageSharp.fixed}
+        >
+          Electrics
+        </Card>
+        <Card
+          to="/services/carpentry"
+          image={data.carpentryImage.childImageSharp.fixed}
+        >
+          Carpentry
+        </Card>
+      </Section>
       <Section variant="primary">
         <CustomSlick>
           {data.site.siteMetadata.reviews.map((review, i) => (
@@ -45,6 +72,34 @@ export const query = graphql`
         }
       }
     }
+    bathroomImage: file(relativePath: { eq: "service_bathroom.png" }) {
+      childImageSharp {
+        fixed(width: 96, height: 54, quality: 100) {
+          ...GatsbyImageSharpFixed_withWebp
+        }
+      }
+    }
+    tilingImage: file(relativePath: { eq: "service_tiling.png" }) {
+      childImageSharp {
+        fixed(width: 96, height: 54, quality: 100) {
+          ...GatsbyImageSharpFixed_withWebp
+        }
+      }
+    }
+    electricsImage: file(relativePath: { eq: "service_electrics.png" }) {
+      childImageSharp {
+        fixed(width: 96, height: 54, quality: 100) {
+          ...GatsbyImageSharpFixed_withWebp
+        }
+      }
+    }
+    carpentryImage: file(relativePath: { eq: "service_carpentry.png" }) {
+      childImageSharp {
+        fixed(width: 96, height: 54, quality: 100) {
+          ...GatsbyImageSharpFixed_withWebp
+        }
+      }
+    }
     site {
       siteMetadata {
         reviews {