Migrate to Next

pages/services/tiling.js

@@ -0,0 +1,56 @@
+import React from "react";
+import {
+  Card,
+  Grid,
+  Header,
+  Heading,
+  Layout,
+  Section,
+  Text,
+} from "@components/index";
+import { getAllCaseStudyIds } from "../../lib/case-study";
+import tilingImg from "../../images/tiling.jpg";
+
+export default function Tiling({ caseStudies }) {
+  return (
+    <Layout title="Tiling">
+      <Header title="Tiling" image={tilingImg} light />
+      <Section title="We specialise in floor tiling">
+        <Text>
+          We can install both floor and wall tiles, including ceramic, natural
+          stone, marble, quartz, porcelain and mosaic tiles.
+        </Text>
+        <Text>
+          Our elite team of 3 stonemasons and 3 tilers has a combined total of
+          112 years of experience within the industry.
+        </Text>
+      </Section>
+      <Section variant="secondary" title="Case studies">
+        <Grid sm={2} md={3}>
+          {caseStudies.map((study) => (
+            <Card
+              heading={
+                <Heading el="h3" size="md">
+                  {study.params.title}
+                </Heading>
+              }
+              image={`/case-studies/${study.params.id}/thumbs/${study.params.image}.jpg`}
+              href={`/services/tiling/${study.params.slug}`}
+              key={study.params.id}
+            >
+              {study.params.location}
+            </Card>
+          ))}
+        </Grid>
+      </Section>
+    </Layout>
+  );
+}
+
+export const getStaticProps = async () => {
+  const caseStudies = getAllCaseStudyIds({ service: "tiling" });
+
+  return {
+    props: { caseStudies },
+  };
+};