Add new case study and testimonial page

ui/src/containers/About.svelte

@@ -0,0 +1,74 @@
+<script>
+  import { navigateTo } from "svelte-router-spa";
+</script>
+<div class="container mx-auto">
+  <div class="bg-white shadow-lg rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
+    <article class="markdown-body">
+      <h1>About SSW</h1>
+      <h3>
+        Australia's Leading Software Consultants
+      </h3>
+      <p>
+        SSW's Consulting Services have delivered the best breed Microsoft solutions for thousands of clients in 15 countries over more than 30 years. With over 100 consultants in 4 countries, SSW's developers are some of the best in the business. We have many Microsoft Certifications, several MVPs, and a Microsoft Regional Director.
+      </p>
+      <p>
+        We deliver scalable and extensible custom solutions with the future in mind. Our solutions improve businesses' bottom lines, with real time savings and long-term value. We will provide you with the competitive advantage you need.
+        <a href="https://ssw.com.au/company/about-us">Learn more about SSW.</a>
+      </p>
+      <h1>
+        About CodeAuditor
+      </h1>
+      <h3>
+        What is CodeAuditor?
+      </h3>
+      <p>
+        CodeAuditor is a tool that automatically scans your website and its code to check
+      </p>
+      <ul class="list-disc">
+        <li>Find broken Links - Links to pages which do not work</li>
+        <li>Check HTML formatting - May cause pages to be incorrectly shown to the user</li>
+        <li>Lighthouse scan - Audits for performance, accessibility, SEO, and more</li>
+        <li>Artillery load test - See how website behaves when lot of users access it simultaneously</li>
+      </ul> 
+      <h3>
+        How does it work?
+      </h3> 
+      <p>
+        CodeAuditor runs scans and checks for issues on your website, and can then generate a report which can be viewed online.
+      </p>
+      <p>
+        CodeAuditor is simple to use and can be either be run manually, or embedded directly into your build pipeline where it can be configured to automatically fail a build based on a number of broken links, SEO issues or other rules failures to ensure quality.
+      </p>
+      <p>Signing up for free and logging in to CodeAuditor will allow you to view and track your website's changes and improvements over time.</p>
+      <h1>
+        CodeAuditor Case Studies
+      </h1>
+      <p> 
+        In these case studies, we'll explore real-world scenarios where CodeAuditor has played a pivotal role in enhancing code quality and streamlining development processes. 
+        From identifying and resolving broken links that hinder user engagement to pinpointing critical code errors that impact functionality, each case study 
+        showcases CodeAuditor's ability to uncover issues efficiently and facilitate their resolution. 
+      </p>
+      <h3>
+        SSW Products
+      </h3>
+      <div class="float-left mb-2 mr-4 block border-r-1 p-4">
+        <a href="https://ssw.com.au/">
+        <img width="129" alt="image" src="https://github.com/SSWConsulting/SSW.CodeAuditor/assets/67776356/6c077ba5-111c-4e00-9067-f1f7cc3c5685">
+        </a>
+      </div>
+      <div class="prose max-w-full prose-img:my-0">
+        <p>
+          SSW offers a diverse array of products comprising web applications featuring server-side rendering and static website generation, rendering them ideally suited for CodeAuditor's scanning capabilities. 
+          These products include SSW Rules, SSW People, and SSW Website.
+        </p>
+      </div>
+      <button 
+        type="button"
+        on:click={() => {navigateTo("/about/case-study/ssw")}} 
+        class="bgred hover:bg-red-800 text-white font-semibold py-2 px-4 border hover:border-transparent rounded"
+      >
+        Read the case study
+      </button>
+    </article>
+  </div>
+</div>

ui/src/containers/CaseStudy.svelte

@@ -0,0 +1,67 @@
+<script>
+</script>
+<div class="container mx-auto">
+  <div class="bg-white shadow-lg rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
+    <article class="markdown-body">
+      <h1>SSW Sites</h1>
+      <h2 class="textred">Challenge</h2>
+      <p>
+        SSW presents an extensive range of products encompassing web applications with server-side rendering and static website generation,
+        making them particularly well-suited for integration with CodeAuditor's scanning capabilities. Notable among these products are 
+        <a href="https://ssw.com.au/rules">SSW Rules</a>, <a href="https://ssw.com.au/people">SSW People</a> and 
+        <a href="https://ssw.com.au">SSW Website</a>. However, these platforms consist of a multitude of pages with numerous links, 
+        particularly SSW Rules, which poses a significant challenge for CodeAuditor's scanning process. 
+      </p>
+      <p>
+        The main obstacle encountered pertained to the substantial volume of content within SSW Rules, 
+        resulting in inconsistencies in CodeAuditor's scanning efforts, as well as difficulties in rectifying each individual broken link and addressing code warnings/errors.
+      </p>
+      <p>
+        The secondary primary challenge stemmed from the management of false positive occurrences, exacerbating the complexity of error fixing within our process.
+      </p>
+      <div style="display: inline-flex">
+        <a href="https://ssw.com.au/">
+          <img width="129" alt="image" src="/images/SSW-Logo.png">
+        </a>
+        <a href="https://ssw.com.au/people">
+          <img width="255" alt="image" src="/images/SSW-People-Logo.png">
+        </a>
+        <a href="https://ssw.com.au/rules">
+          <img width="240" alt="image" src="/images/SSW-Rules-Logo.png">
+        </a>
+      </div>
+      <h2 class="textred">We make complicated things simple</h2>
+      <p>
+        Managing the substantial volume of content within SSW Rules presented a formidable challenge. It necessitated the 
+        allocation of additional resources and processing power to CodeAuditor's scan engine to ensure more consistent and stable scan runs. 
+        Furthermore, the implementation of numerous unit tests was imperative to verify the accuracy and consistency of results across all scanning iterations.
+      </p>
+      <p>
+        Once we got the scan result ready, fixing the broken links and code errors/warnings remain another big challenge. 
+      </p>
+      <ul class="list-disc">
+        <li>
+          Numerous instances arose wherein the identification of false positive errors complicated our fixing process. 
+          One such scenario pertained to one of our custom HTML rules designed to enforce the inclusion of specified programming language tags 
+          within code block elements. However, within certain pages of SSW Rules, deviations from best practices were observed, with instances 
+          of code blocks lacking language specifications. Consequently, these pages were erroneously flagged as errors within CodeAuditor and thus, 
+          we needed to add the links to the ignore list so CodeAuditor no longer reports them.
+        </li>
+        <li>
+          Another main challenge entails situations where custom HTML rules are not applicable to specific technology frameworks 
+          employed within the product. For instance, SSW Rules is built using Gatsby where the framework controls the rendering of numerous HTML elements by default. 
+          Consequently, the team encountered limitations in rectifying the source code to adhere to the prescribed best practices outlined in the custom HTML rule.
+          Hence, we had to categorize the custom rules according to each framework, discerning which rules are applicable to Gatsby or NextJS, with the aim of mitigating false positive.
+        </li>
+      </ul> 
+      <h2 class="textred">Result</h2>
+      <p>
+        Despite the significant volume of broken links and code warnings/errors found in these sites, the team diligently addressed each instance, ignoring false positives 
+        and appropriately categorizing custom rules within their respective frameworks.
+      </p>
+      <p>
+        As a result of these efforts, recent scan results indicate the absence of any remaining broken links or code errors within SSW People and Rules.
+      </p>
+    </article>
+  </div>
+</div>

ui/src/containers/Layout.svelte

@@ -36,7 +36,7 @@
 
 <body class="flex flex-col min-h-screen">
   <main class="grow">
-    <nav class="items-center justify-between p-4 lg:h-24 bggrey mb-4">
+    <nav class="items-center justify-between p-4 bggrey mb-4">
       <div class="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-1 items-center text-center">
         <div class="mx-auto">
           <Navigate to="/">
@@ -52,38 +52,38 @@
         >
           <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
             <span
-              class="header-item {currentRoute.path === '/'
+              class="header-item {currentRoute.path.includes('/howitworks')
                 ? 'textred'
                 : 'textdark'}"
             >
-              <Navigate to="/" styles="hover:no-underline">Home</Navigate>
+              <Navigate to="/howItWorks" styles="hover:no-underline">How It Works</Navigate>
             </span>
           </span>
           <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
             <span
-              class="header-item {currentRoute.path.includes('/howitworks')
+              class="header-item {currentRoute.path === '/explore'
                 ? 'textred'
                 : 'textdark'}"
             >
-              <Navigate to="/howItWorks" styles="hover:no-underline">How It Works</Navigate>
+              <Navigate to="/explore" styles="hover:no-underline">Explore</Navigate>
             </span>
           </span>
           <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
             <span
-              class="header-item {currentRoute.path === '/explore'
+              class="header-item {currentRoute.path === '/rules'
                 ? 'textred'
                 : 'textdark'}"
             >
-              <Navigate to="/explore" styles="hover:no-underline">Explore</Navigate>
+              <Navigate to="/rules" styles="hover:no-underline">Rules</Navigate>
             </span>
           </span>
           <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
             <span
-              class="header-item {currentRoute.path === '/rules'
+              class="header-item {currentRoute.path === '/aboutus'
                 ? 'textred'
                 : 'textdark'}"
             >
-              <Navigate to="/rules" styles="hover:no-underline">Rules</Navigate>
+              <Navigate to="/about" styles="hover:no-underline">About</Navigate>
             </span>
           </span>
         </div>
@@ -367,7 +367,7 @@
     max-width: 1280px;
   }
   img {
-    max-width: 400px;
+    max-width: 360px;
     height: auto;
   }
   footer {

ui/src/routes.js

@@ -14,6 +14,8 @@ import ArtilleryReport from './containers/ArtilleryReport.svelte';
 import AppLayout from './containers/Layout.svelte';
 import ScanCompare from './containers/ScanCompare.svelte';
 import ErrorPage from './containers/ErrorPage.svelte';
+import About from './containers/About.svelte';
+import CaseStudy from './containers/CaseStudy.svelte';
 
 const routes = [
 	{
@@ -43,6 +45,16 @@ const routes = [
 		component: Rules,
 		layout: AppLayout
 	},
+	{
+		name: '/about',
+		component: About,
+		layout: AppLayout
+	},
+	{
+		name: '/about/case-study/:project',
+		component: CaseStudy,
+		layout: AppLayout
+	},
 	{
 		name: '/build/:id',
 		component: LinkReport,
@@ -74,7 +86,8 @@ const routes = [
 		layout: AppLayout
 	},
 	{
-		name: '/error',
+		name: '404',
+		path: '404',
 		component: ErrorPage,
 		layout: AppLayout
 	},