♻️ Implement website design feedback (#78)

<!-- describe the change, why is it needed and what does it accomplish
as per https://ssw.com.au/rules/write-a-good-pull-request/ -->

Refactor website design based on feedback from @bradystroud and
@JackDevAU. This includes:
- Moved SSW Dory logo to the left of the page
- Change the "Automatically send out reminder emails" screenshot to
refer to an actual user
- Fix the broken svg format screenshot
- Add link to ssw.com.au in footer
- Reduce h1 tags to one
- Add Open Graph metadata tags

<!-- Add done video, screenshots as per
https://ssw.com.au/rules/record-a-quick-and-dirty-done-video/-->
<img width="1906" alt="image"
src="https://github.com/SSWConsulting/SSW.Dory/assets/41951199/4e5f3785-3e0e-4177-bbe5-5baf394ac7e5">\
**Figure: SSW Dory logo on the left of the nav bar**

<img width="1426" alt="image"
src="https://github.com/SSWConsulting/SSW.Dory/assets/41951199/b74ec130-7d7e-4d2a-962d-116b2d5be4b6">\
**Figure: Screenshot now refers to a user instead of a service account**

<img width="1414" alt="image"
src="https://github.com/SSWConsulting/SSW.Dory/assets/41951199/b56c65b1-cb59-4e8e-befe-6901fbdc1bb7">\
**Figure: Previously broken svg is now fixed**

<img width="1058" alt="image"
src="https://github.com/SSWConsulting/SSW.Dory/assets/41951199/b07d68c0-d95e-4562-b5ea-3fee75120134">\
**Figure: Added Open Graph metadata tags**

<img width="754" alt="image"
src="https://github.com/SSWConsulting/SSW.Dory/assets/41951199/5d103be0-457a-4569-bf8f-21e84c37d93f">\
**Figure: Footer now has link to ssw.com.au**

<!-- As per rule https://www.ssw.com.au/rules/over-the-shoulder-prs -->
<!-- Getting the PR merged is part of the task - Call someone to review
your changes to get them merged ASAP -->

docs/src/app/footer.tsx

@@ -30,8 +30,15 @@ export default function Footer() {
           <div className="xl:mx-6">
             <div className="mx-6 flex flex-col-reverse md:flex-row justify-between align-middle leading-6">
               <div className="py-2">
-                Copyright © SSW 1990 - {new Date().getFullYear()}. All Rights
-                Reserved.
+                Copyright © {" "}
+                <a
+                  className="footer-link"
+                  href="https://www.ssw.com.au/"
+                  target="_blank"
+                >
+                  SSW
+                </a>
+                {" "} 1990 - {new Date().getFullYear()}. All Rights Reserved.
               </div>
               <div className="w-full md:w-3/6 md:text-right py-2">
                 <a

docs/src/app/layout.tsx

@@ -6,10 +6,20 @@ import '@fortawesome/fontawesome-svg-core/styles.css'
 config.autoAddCss = false
 
 const inter = Inter({ subsets: ['latin'] })
+const metadataTitle = 'SSW Dory'
+const metadataDescription = 'A low-code solution to automatically remind users to check-in their SharePoint pages or merge their open GitHub Pull Requests'
 
 export const metadata: Metadata = {
-  title: 'SSW Dory',
-  description: 'A low-code solution to automatically remind users to check-in their SharePoint pages or merge their open GitHub Pull Requests',
+  title: metadataTitle,
+  description: metadataDescription,
+  openGraph: {
+    title: metadataTitle,
+    description: metadataDescription,
+    url: 'https://www.sswdory.com/',
+    siteName: metadataTitle,
+    images: '/dory-architecture-diagram.webp',
+    type: 'website'
+  }
 }
 
 export default function RootLayout({

docs/src/app/marketingCard.tsx

@@ -15,10 +15,10 @@ type MarketingCardProps = {
 function MarketingCardText({ title, description }: MarketingCardTextProps) {
   return (
     <div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
-      <h1 className="title-font leading-tight sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
+      <h2 className="title-font leading-tight sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
         {title}
-      </h1>
-      <p className="mb-8 leading-relaxed max-w-xl">{description}</p>
+      </h2>
+      <h3 className="mb-8 leading-relaxed max-w-xl">{description}</h3>
     </div>
   );
 }

docs/src/app/page.tsx

@@ -6,7 +6,7 @@ export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center">
       <nav className="bggrey w-full h-24 p-4 flex justify-center">
-        <div className="w-3/5">
+        <div className="w-full">
           <Image
             src="/sswdory-logo.png"
             alt="SSW Dory Logo"
@@ -20,7 +20,7 @@ export default function Home() {
         <section className="text-gray-700 body-font">
           <div className="container mx-auto flex px-5 py-20 items-center justify-center flex-col">
             <div className="text-center lg:w-2/3 w-full">
-              <h1 className="title-font leading-tight sm:text-4xl text-3xl mb-10 font-medium text-gray-900">
+              <h1 className="title-font leading-tight sm:text-5xl text-4xl mb-10 font-semibold text-gray-900">
                 Check out our Github
               </h1>
             </div>