validate index page html

gatsby-ssr.tsx

@@ -29,7 +29,7 @@ const fonts = [
   "/fonts/Inter/Inter-Regular.ttf",
   // "/fonts/Inter/Inter-Thin.ttf",
 ]
-export const onRenderBody = ({ setHeadComponents }) => {
+export const onRenderBody = ({ setHeadComponents, setHtmlAttributes }) => {
   const links = fonts.map((font) => {
     return <link
       rel="preload"
@@ -46,4 +46,5 @@ export const onRenderBody = ({ setHeadComponents }) => {
     <link rel="preload" href="//app.usercentrics.eu/browser-ui/latest/loader.js" key="usercentrics-loader" as="script" />
   ]
   setHeadComponents([...links, ...userCentricLinks])
+  setHtmlAttributes({ lang: "en" })
 }

src/components/about-page/AboutHero.tsx

@@ -3,10 +3,10 @@ import React from "react";
 import "./css/about-hero.css";
 
 export const AboutHero = () => (
-  <section className="about-hero">
+  <div className="about-hero">
     <div className="about-hero__contents">
       <h1 className="about-hero__heading">Too many software projects fail.</h1>
       <p className="about-hero__text">Your vision deserves to see the light of day</p>
     </div>
-  </section>
+  </div>
 );

src/components/about-page/BetterWay.tsx

@@ -11,12 +11,11 @@ export const BetterWay = () => {
   const { modal, clickHandler } = useBookCallModal();
 
   return (
-    <section className="better-way">
+    <div className="better-way">
       <div className="better-way__contents">
         <StaticImage
           alt=""
           className="better-way__decorative-square"
-          role="presentation"
           src="../../images/decorations/decorative_square_large.png"
         />
         <div className="better-way__text-container">
@@ -85,6 +84,6 @@ export const BetterWay = () => {
         </div>
       </div>
       {modal}
-    </section>
+    </div>
   );
 };

src/components/about-page/Leaders.tsx

@@ -10,7 +10,7 @@ export const Leaders = () => {
   const { modal, clickHandler } = useBookCallModal();
 
   return (
-    <section className="leaders">
+    <div className="leaders">
       {modal}
       <div className="leaders__contents">
         <div className="leaders__heading-container">
@@ -137,6 +137,6 @@ export const Leaders = () => {
           Book my launch call
         </button>
       </div>
-    </section>
+    </div>
   );
 };

src/components/about-page/OurBeliefs.tsx

@@ -5,7 +5,7 @@ import { StaticImage } from "gatsby-plugin-image";
 import "./css/our-beliefs.css";
 
 export const OurBeliefs = () => (
-  <section className="our-beliefs">
+  <div className="our-beliefs">
     <div className="our-beliefs__contents">
       <div className="our-beliefs__image-container">
         <StaticImage
@@ -75,5 +75,5 @@ export const OurBeliefs = () => (
         </li>
       </ul>
     </div>
-  </section>
+  </div>
 );

src/components/about-page/VisionToReality.tsx

@@ -39,12 +39,11 @@ export const VisionToReality = () => {
   };
 
   return (
-    <section className="vision-to-reality">
+    <div className="vision-to-reality">
       <div className="vision-to-reality__contents">
         <StaticImage
           alt=""
           className="vision-to-reality__decorative-circle"
-          role="presentation"
           src="../../images/decorations/alternate_circle.png"
         />
         <ThreeCardSection sectionContents={sectionContents} />
@@ -53,6 +52,6 @@ export const VisionToReality = () => {
         </button>
       </div>
       {modal}
-    </section>
+    </div>
   );
 };

src/components/about-page/WhySoftwareExists.tsx

@@ -9,7 +9,7 @@ export const WhySoftwareExists = () => {
   const { modal, clickHandler } = useBookCallModal();
 
   return (
-    <section className="why-software-exists">
+    <div className="why-software-exists">
       <div className="why-software-exists__contents">
         <div className="why-software-exists__image-container">
           <StaticImage
@@ -70,6 +70,6 @@ export const WhySoftwareExists = () => {
         </div>
       </div>
       {modal}
-    </section>
+    </div>
   );
 };

src/components/blog-page/BlogCardList.tsx

@@ -29,8 +29,8 @@ export const BlogCardList: FC<BlogCardListProps> = ({ articles }) => {
   });
 
   return (
-    <section className="blog-card-list">
+    <div className="blog-card-list">
       <ul className="blog-card-list__contents">{listItems}</ul>
-    </section>
+    </div>
   );
 };

src/components/blog-page/BlogHero.tsx

@@ -4,7 +4,7 @@ import "./css/blog-hero.css";
 
 export const BlogHero = () => {
   return (
-    <section className="blog-hero">
+    <div className="blog-hero">
       <div className="blog-hero__contents">
         <div className="blog-hero__image-container">
           <img className="blog-hero__image" src="https://placehold.co/600x400" />
@@ -18,6 +18,6 @@ export const BlogHero = () => {
           </p>
         </div>
       </div>
-    </section>
+    </div>
   );
 };

src/components/book-call/BookCallModal.tsx

@@ -9,7 +9,6 @@ export const BookCallModal = ({ divRef }: { divRef: RefObject<HTMLDivElement> })
     <StaticImage
       alt=""
       className="book-call__decorative-square"
-      role="presentation"
       src="../../images/decorations/decorative_square.png"
     />
     <div className="book-call__text-container">

src/components/contact-page/ContactForm.tsx

@@ -154,7 +154,7 @@ export const ContactForm = () => {
   );
 
   return (
-    <section className="one-small-step">
+    <div className="one-small-step">
       <div className="one-small-step__contents">
         <div className="one-small-step__text-container">
           <h2 className="get-in-touch__heading">
@@ -173,6 +173,6 @@ export const ContactForm = () => {
           )}
         </div>
       </div>
-    </section>
+    </div>
   );
 };

src/components/contact-page/ContactUsChat.tsx

@@ -8,12 +8,11 @@ import { StaticImage } from "gatsby-plugin-image";
 import "./css/contact-us-chat.css";
 
 export const ContactUsChat = () => (
-  <section className="contact-us-chat">
+  <div className="contact-us-chat">
     <div className="contact-us-chat__contents">
       <StaticImage
         alt=""
         className="contact-us-chat__dots"
-        role="presentation"
         src="../../images/decorations/dots.png"
       />
       <div className="contact-us-chat__text-container">
@@ -37,5 +36,5 @@ export const ContactUsChat = () => (
         />
       </div>
     </div>
-  </section>
+  </div>
 );

src/components/contact-page/ContactUsHero.tsx

@@ -3,10 +3,10 @@ import React from "react";
 import "./css/contact-us-hero.css";
 
 export const ContactUsHero = () => (
-  <section className="contact-us-hero">
+  <div className="contact-us-hero">
     <div className="contact-us-hero__contents">
       <h1 className="contact-us-hero__heading">Contact us</h1>
       <p className="contact-us-hero__text">Let’s get started in making your vision a reality</p>
     </div>
-  </section>
+  </div>
 );

src/components/contact-page/GetInTouch.tsx

@@ -2,29 +2,27 @@ import React from "react";
 
 import { faEnvelope, faLocationDot, faPhone, faSms } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { StaticImage } from "gatsby-plugin-image";
 
-import { getFieldClassName } from "../general/services/getFieldClassName";
 import { companyContactInformation } from "../../configuration/companyContactInformation";
-import "./css/get-in-touch.css";
 import { ContactForm } from "./ContactForm";
-import { StaticImage } from "gatsby-plugin-image";
+import "./css/get-in-touch.css";
 
 export const GetInTouch = () => {
   const {
     email,
     mailingAddress: { streetAddress, streetAddress2, city, state, zipCode },
-    phone,
+    phoneHref,
+    phoneFormatted,
     sms,
   } = companyContactInformation;
 
   return (
-    <section className="get-in-touch">
+    <div className="get-in-touch">
       <div className="get-in-touch__contents">
         <StaticImage
           alt=""
           className="get-in-touch__alternate-circle"
-          role="presentation"
           src="../../images/decorations/alternate_circle.png"
         />
         <h2 className="get-in-touch__section-heading">Get in touch</h2>
@@ -48,11 +46,11 @@ export const GetInTouch = () => {
                 </li>
                 <li className="get-in-touch__list-item">
                   <FontAwesomeIcon className="get-in-touch__icon" icon={faPhone} />
-                  <a href={`tel:${phone}`}>{phone}</a>
+                  <a href={`tel:${phoneHref}`}>{phoneFormatted}</a>
                 </li>
                 <li className="get-in-touch__list-item">
                   <FontAwesomeIcon className="get-in-touch__icon" icon={faSms} />
-                  <a href={`tel:${sms}`}>{sms}</a>
+                  <a href={`tel:${phoneHref}`}>{sms}</a>
                 </li>
                 <li className="get-in-touch__list-item">
                   <FontAwesomeIcon className="get-in-touch__icon" icon={faEnvelope} />
@@ -66,6 +64,6 @@ export const GetInTouch = () => {
           </div>
         </div>
       </div>
-    </section>
+    </div>
   );
 };

src/components/contact-page/MediaInquiries.tsx

@@ -8,7 +8,7 @@ import { StaticImage } from "gatsby-plugin-image";
 import "./css/media-inquiries.css";
 
 export const MediaInquiries = () => (
-  <section className="media-inquiries">
+  <div className="media-inquiries">
     <div className="media-inquiries__contents">
       <StaticImage
         layout="constrained"
@@ -34,5 +34,5 @@ export const MediaInquiries = () => (
         </Link>
       </div>
     </div>
-  </section>
+  </div>
 );

src/components/icons/BinaryIcon.tsx

@@ -3,7 +3,7 @@ import React from "react";
 export const BinaryIcon = ({ className = "", width }: { className?: string; width?: string }) => {
   return (
     <svg
-      id="Layer_1"
+      id="binary-icon"
       className={className}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 92 52"

src/components/icons/CommunityIcon.tsx

@@ -9,7 +9,7 @@ export const CommunityIcon = ({
 }) => {
   return (
     <svg
-      id="Layer_1"
+      id="community-icon"
       className={className}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 104 104"

src/components/icons/RiskAssessmentIcon.tsx

@@ -9,7 +9,7 @@ export const RiskAssessmentIcon = ({
 }) => {
   return (
     <svg
-      id="Layer_1"
+      id="risk-assessment-icon"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
       width={width}
@@ -18,21 +18,21 @@ export const RiskAssessmentIcon = ({
       <defs>
         <style>
           {`
-            .cls-1 {
+            .risk-assessment-1 {
               fill: #fff;
             }
-            .cls-2, .cls-3 {
+            .risk-assessment-2, .risk-assessment-3 {
               fill:none;
             }
-            .cls-2, .cls-3, .cls-4 {
+            .risk-assessment-2, .risk-assessment-3, .risk-assessment-4 {
               strokeLinecap: round;
               strokeLinejoin: round;
               strokeWidth: 2px;
             }
-            .cls-2, .cls-4 {
+            .risk-assessment-2, .risk-assessment-4 {
               stroke:#000;
             }
-            .cls-3 {
+            .risk-assessment-3 {
               stroke:#fff;
             }
           `}
@@ -41,7 +41,7 @@ export const RiskAssessmentIcon = ({
       <g>
         <g>
           <rect
-            className="cls-2"
+            className="risk-assessment-2"
             x="17.621"
             y="25.135"
             width="54.286"
@@ -50,28 +50,28 @@ export const RiskAssessmentIcon = ({
             ry="6.215"
           />
           <path
-            className="cls-4"
+            className="risk-assessment-4"
             d="m50.564,21.277c0-3.203-2.6-5.796-5.802-5.796s-5.802,2.594-5.802,5.796h-6.52v7.869h24.651v-7.869h-6.526Z"
           />
         </g>
-        <polyline className="cls-2" points="26.945 42.638 29.348 45.041 35.049 39.34" />
-        <line className="cls-2" x1="40.871" y1="42.459" x2="61.288" y2="42.459" />
-        <polyline className="cls-2" points="26.945 53.829 29.348 56.232 35.049 50.531" />
-        <line className="cls-2" x1="40.871" y1="54.704" x2="61.288" y2="54.704" />
-        <line className="cls-2" x1="40.871" y1="66.95" x2="55.888" y2="66.95" />
+        <polyline className="risk-assessment-2" points="26.945 42.638 29.348 45.041 35.049 39.34" />
+        <line className="risk-assessment-2" x1="40.871" y1="42.459" x2="61.288" y2="42.459" />
+        <polyline className="risk-assessment-2" points="26.945 53.829 29.348 56.232 35.049 50.531" />
+        <line className="risk-assessment-2" x1="40.871" y1="54.704" x2="61.288" y2="54.704" />
+        <line className="risk-assessment-2" x1="40.871" y1="66.95" x2="55.888" y2="66.95" />
         <g>
-          <line className="cls-2" x1="27.971" y1="63.924" x2="34.023" y2="69.976" />
-          <line className="cls-2" x1="34.023" y1="63.924" x2="27.971" y2="69.976" />
+          <line className="risk-assessment-2" x1="27.971" y1="63.924" x2="34.023" y2="69.976" />
+          <line className="risk-assessment-2" x1="34.023" y1="63.924" x2="27.971" y2="69.976" />
         </g>
       </g>
       <g>
         <path
-          className="cls-4"
+          className="risk-assessment-4"
           d="m67.737,64.584l-9.65,16.714c-1.853,3.21.463,7.222,4.17,7.222h19.299c3.706,0,6.023-4.012,4.17-7.222l-9.65-16.714c-1.853-3.21-6.486-3.21-8.339,0Z"
         />
         <g>
-          <line className="cls-3" x1="71.907" y1="70.809" x2="71.907" y2="76.687" />
-          <circle className="cls-1" cx="71.907" cy="81.171" r="1.921" />
+          <line className="risk-assessment-3" x1="71.907" y1="70.809" x2="71.907" y2="76.687" />
+          <circle className="risk-assessment-1" cx="71.907" cy="81.171" r="1.921" />
         </g>
       </g>
     </svg>