use node 23

.nvmrc

@@ -0,0 +1 @@
+23.9

components/Footer.js

@@ -14,24 +14,21 @@ export default function Footer() {
               <Icon size="lg">
                 <PhoneSvg />
               </Icon>
-              02071013958
+              02071 013958
             </ContactButton>
-            <ContactButton href="tel:+447378839358" size="sm">
+            <ContactButton href="tel:+447979173138" size="sm">
               <Icon size="lg">
                 <MobileSvg />
               </Icon>
-              07378839358
+              07979 173138
             </ContactButton>
           </div>
           <div className={styles.buttons}>
-            <ContactButton
+            <ContactButton href="mailto:costeadany00@gmail.com" size="sm">
-              href="mailto:quotations@abcprojectdesign.com"
-              size="sm"
-            >
               <Icon size="lg">
                 <EnvelopeSvg />
               </Icon>
-              quotations@abcprojectdesign.com
+              costeadany00@gmail.com
             </ContactButton>
             <ContactButton
               href="https://www.facebook.com/people/ABC-Project-Design/100088268944294/"

components/HeaderLogo.js

@@ -13,7 +13,7 @@ export default function HeaderLogo({ transition }) {
         <LogoArrowsSvg />
       </div>
       <div className={styles.middle}>
-        <Heading>ABC Project Design Ltd</Heading>
+        <Heading>ABC Project Ltd</Heading>
         <Text size="lg" noMargin>
           Easy as ABC
         </Text>

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/Layout.js

@@ -4,7 +4,7 @@ import { Footer, Nav } from ".";
 import styles from "./Layout.module.css";
 
 export default function Layout({ title, children }) {
-  const pageTitle = `${title ? `${title} : ` : ""}ABC Project Design`;
+  const pageTitle = `${title ? `${title} : ` : ""}ABC Project Ltd`;
   return (
     <div className={styles.block}>
       <Head>

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 {

package.json

@@ -17,24 +17,24 @@
   },
   "dependencies": {
     "@fontsource/cooper-hewitt": "^4.5.3",
-    "@react-google-maps/api": "^2.17.0",
+    "@react-google-maps/api": "^2.19.2",
     "@svgr/webpack": "^6.5.1",
     "classnames": "^2.3.2",
     "gray-matter": "^4.0.3",
-    "next": "^12.1.5",
+    "next": "^12.3.4",
-    "react": "^18.0.0",
+    "react": "^18.2.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.2.0",
-    "remark-html": "^15.0.1",
+    "remark-html": "^15.0.2",
-    "remark-parse": "^10.0.1",
+    "remark-parse": "^10.0.2",
     "unified": "^10.1.2"
   },
   "devDependencies": {
-    "@netlify/plugin-nextjs": "^4.29.2",
+    "@netlify/plugin-nextjs": "^4.41.2",
-    "husky": "^8.0.2",
+    "husky": "^8.0.3",
-    "lint-staged": "^13.1.0",
+    "lint-staged": "^13.3.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.8",
-    "stylelint": "^14.16.0",
+    "stylelint": "^14.16.1",
     "stylelint-prettier": "^2.0.0"
   }
 }

pages/about.js

@@ -10,10 +10,10 @@ export default function About() {
           <em>Easy as</em> ABC
         </Text>
       </Header>
-      <Section title="About ABC Project Design">
+      <Section title="About ABC Project Ltd">
         <Text>
-          ABC Project Design Ltd is a medium sized family run business with more
+          ABC Project Ltd is a medium sized family run business with more than
-          than 30 years experience in the building and construction industry. We
+          30 years experience in the building and construction industry. We
           offer a fully certified and accredited bathroom refurbishment service.
         </Text>
         <Text>

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>
+  );
+}