add new services pages

components/HeaderLogo.module.css

@@ -29,6 +29,7 @@
 .middle {
   opacity: var(--header-logo-opacity);
   transition: opacity 0.5s ease-in 0.75s;
+  min-width: max-content;
 }
 
 .bottom {

components/Nav.js

@@ -59,6 +59,21 @@ export default function Nav() {
                 <a className={styles.link}>Services</a>
               </Link>
               <ul className={styles.sublist}>
+                <li className={styles.listitem}>
+                  <Link href="/services/extensions" passHref>
+                    <a className={styles.link}>Extensions</a>
+                  </Link>
+                </li>
+                <li className={styles.listitem}>
+                  <Link href="/services/loft-conversions" passHref>
+                    <a className={styles.link}>Loft conversions</a>
+                  </Link>
+                </li>
+                <li className={styles.listitem}>
+                  <Link href="/services/garage-conversions" passHref>
+                    <a className={styles.link}>Garage conversions</a>
+                  </Link>
+                </li>
                 <li className={styles.listitem}>
                   <Link href="/services/bathrooms" passHref>
                     <a className={styles.link}>Bathrooms</a>

components/Nav.module.css

@@ -115,6 +115,7 @@
   margin: 0 0 0 var(--spacing-sm);
   padding: 0;
   list-style: none;
+  min-width: max-content;
 }
 
 .link {

pages/contact.js

@@ -48,15 +48,9 @@ export default function About({ apikey }) {
       </Header>
       <Section>
         <Text size="xl">
-          Are you planning a new bathroom? Are you looking for inspiration? Our
+          Are you planning some work on your house? Are you looking for
-          team are ready to help you through every step of the journey.
+          inspiration? Our team are ready to help you through every step of the
-        </Text>
+          journey.
-        <Text>
-          A typical bathroom refurbishment starts from £3,500, increasing up to
-          £20,000. Our quotes include stripping out the old bathroom, disposal
-          of rubbish, fitting the new bathroom, labour and building materials
-          for tiling, plastering, painting and decorating. It does not include
-          bathroom suites or tiles.
         </Text>
         <Grid md={2}>
           <div style={{ position: "relative" }}>

pages/index.js

@@ -25,6 +25,9 @@ import {
 import bannerImg from "../images/banner_bathroom.jpg";
 import bathroomImg from "../images/bathroom.jpg";
 import tilingImg from "../images/tiling.jpg";
+import extensionImg from "../images/extension.jpg";
+import officeImg from "../images/office.jpg";
+import loftImg from "../images/loft_conversion.jpg";
 import victorianImg from "../images/victorian_plumbing_logo.png";
 
 export default function Home() {
@@ -34,7 +37,40 @@ export default function Home() {
         <HeaderLogo transition />
       </Header>
       <Section title="What we do">
-        <Grid sm={2}>
+        <Grid sm={2} md={3}>
+          <Card
+            heading={
+              <Heading el="h3" size="md">
+                Extensions
+              </Heading>
+            }
+            image={extensionImg}
+            href="/services/extensions"
+          >
+            Build a house extension
+          </Card>
+          <Card
+            heading={
+              <Heading el="h3" size="md">
+                Loft conversions
+              </Heading>
+            }
+            image={loftImg}
+            href="/services/loft-conversions"
+          >
+            Add an extra bedroom
+          </Card>
+          <Card
+            heading={
+              <Heading el="h3" size="md">
+                Garage conversions
+              </Heading>
+            }
+            image={officeImg}
+            href="/services/garage-conversions"
+          >
+            Repurpose your unused garage
+          </Card>
           <Card
             heading={
               <Heading el="h3" size="md">

pages/services/bathrooms.js

@@ -23,6 +23,13 @@ export default function Bathrooms({ caseStudies }) {
           are vetted and handpicked based on their skills within their chosen
           fields.
         </Text>
+        <Text>
+          A typical bathroom refurbishment starts from £3,500, increasing up to
+          £20,000. Our quotes include stripping out the old bathroom, disposal
+          of rubbish, fitting the new bathroom, labour and building materials
+          for tiling, plastering, painting and decorating. It does not include
+          bathroom suites or tiles.
+        </Text>
         <Text>
           With over 30 years experience in bathroom installation we will help
           you choose the perfect bathroom for your home. We can complete your

pages/services/extensions.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Header, Layout, Link, Section, Text } from "@components/index";
+import extensionImg from "../../images/extension.jpg";
+
+export default function Extensions() {
+  return (
+    <Layout title="Extensions">
+      <Header title="Extensions" image={extensionImg} />
+      <Section title="Build a house extension">
+        <Text>
+          Here at ABC Project Ltd, we have over 15 years experience working on
+          building projects. We can supply Architects, Structural Engineers and
+          Surveyors to help you fulfill your dream extension from inception to
+          completion.
+        </Text>
+        <Text>
+          We only use the best building materials on our projects and our team
+          of experienced builders are all employed by ABC Project Ltd, we do not
+          use any contractors.
+        </Text>
+        <Text>
+          Please do <Link href="/contact">get in touch</Link> if you'd like to
+          discuss how we could help you realise your dream extension!
+        </Text>
+      </Section>
+    </Layout>
+  );
+}

pages/services/garage-conversions.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Header, Layout, Link, Section, Text } from "@components/index";
+import officeImg from "../../images/office.jpg";
+
+export default function GarageConversions() {
+  return (
+    <Layout title="Garage Conversions">
+      <Header title="Garage Conversions" image={officeImg} light />
+      <Section title="Repurpose your unused garage">
+        <Text>
+          Do you want to create a new room in your house? Perhaps a snug or a
+          home office? Repurposing your garage could be the answer.
+        </Text>
+        <Text>
+          Here at ABC Project Ltd, we have over 15 years experience working on
+          building projects. We can supply Architects, Structural Engineers and
+          Surveyors to help you fulfill your dream extension from inception to
+          completion.
+        </Text>
+        <Text>
+          We only use the best building materials on our projects and our team
+          of experienced builders are all employed by ABC Project Ltd, we do not
+          use any contractors.
+        </Text>
+        <Text>
+          Please do <Link href="/contact">get in touch</Link> if you'd like to
+          discuss how your garage could be converted.
+        </Text>
+      </Section>
+    </Layout>
+  );
+}

pages/services/index.js

@@ -10,22 +10,66 @@ import {
 import bannerImg from "../../images/banner_bathroom.jpg";
 import bathroomImg from "../../images/bathroom.jpg";
 import tilingImg from "../../images/tiling.jpg";
+import extensionImg from "../../images/extension.jpg";
+import officeImg from "../../images/office.jpg";
+import loftImg from "../../images/loft_conversion.jpg";
 
 export default function Services() {
   return (
     <Layout title="Services">
       <Header title="Services" image={bannerImg} />
       <Section title="Our services">
-        <Grid sm={2}>
+        <Grid sm={2} md={3}>
           <Card
-            heading={<Heading el="h3">Bathrooms</Heading>}
+            heading={
+              <Heading el="h3" size="md">
+                Extensions
+              </Heading>
+            }
+            image={extensionImg}
+            href="/services/extensions"
+          >
+            Build a house extension
+          </Card>
+          <Card
+            heading={
+              <Heading el="h3" size="md">
+                Loft conversions
+              </Heading>
+            }
+            image={loftImg}
+            href="/services/loft-conversions"
+          >
+            Add an extra bedroom
+          </Card>
+          <Card
+            heading={
+              <Heading el="h3" size="md">
+                Garage conversions
+              </Heading>
+            }
+            image={officeImg}
+            href="/services/garage-conversions"
+          >
+            Repurpose your unused garage
+          </Card>
+          <Card
+            heading={
+              <Heading el="h3" size="md">
+                Bathrooms
+              </Heading>
+            }
             image={bathroomImg}
             href="/services/bathrooms"
           >
             Fully accredited bathroom refurbishment service
           </Card>
           <Card
-            heading={<Heading el="h3">Tiling</Heading>}
+            heading={
+              <Heading el="h3" size="md">
+                Tiling
+              </Heading>
+            }
             image={tilingImg}
             href="/services/tiling"
           >

pages/services/loft-conversions.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Header, Layout, Link, Section, Text } from "@components/index";
+import loftImg from "../../images/loft_conversion.jpg";
+
+export default function LoftConversions() {
+  return (
+    <Layout title="Loft Conversions">
+      <Header title="Loft Conversions" image={loftImg} light />
+      <Section title="Add an extra bedroom">
+        <Text>
+          Do you want to make use of your unused loft space? You could add an
+          extra bedroom and possibly an en suite bathroom.
+        </Text>
+        <Text>
+          Here at ABC Project Ltd, we have over 15 years experience working on
+          building projects. We can supply Architects, Structural Engineers and
+          Surveyors to help you fulfill your dream extension from inception to
+          completion.
+        </Text>
+        <Text>
+          We only use the best building materials on our projects and our team
+          of experienced builders are all employed by ABC Project Ltd, we do not
+          use any contractors.
+        </Text>
+        <Text>
+          Please do <Link href="/contact">get in touch</Link> if you'd like to
+          discuss converting your loft space.
+        </Text>
+      </Section>
+    </Layout>
+  );
+}