Change <a> for <Link> where appropriate

app/about/page.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import Image from 'components/Image'
 
 import system from '~/config/system.json'
@@ -40,7 +41,7 @@ export default function About() {
                 {member.bioShort}
               </p>
               <p>
-                <a href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</a>
+                <Link href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</Link>
               </p>
             </section>
           )
@@ -69,7 +70,7 @@ export default function About() {
                 {member.bioShort}
               </p>
               <p>
-                <a href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</a>
+                <Link href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</Link>
               </p>
             </section>
           )

app/page.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React from 'react'
+import Link from 'next/link'
 
 import styles from '~/styles/index.module.css'
 
@@ -39,7 +40,7 @@ export default function Index() {
 
       <p>
         <em>Note:</em> This is the information for our system in aggregate,
-        for individual info see our <a href="/about">about</a> page
+        for individual info see our <Link href="/about">about</Link> page
       </p>
     </main>
   )

components/layout/Footer.tsx

@@ -1,3 +1,5 @@
+import Link from 'next/link'
+
 export default function Footer() {
   return (
     <footer>
@@ -7,7 +9,7 @@ export default function Footer() {
         <a target="_blank" href="https://webring.umbreon.online/">webring</a>
         <a style={{ textDecoration: 'none' }} href="https://webring.umbreon.online/next?from=https://tempest.dev">&gt;</a>
       </span>
-      <a href="/pay-transparency">Pay Transparency</a>
+      <Link href="/pay-transparency">Pay Transparency</Link>
     </footer>
   )
 }

components/layout/Header.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import Link from 'next/link'
 import Image from 'components/Image'
 
 import { usePathname } from 'next/navigation'
@@ -14,13 +15,12 @@ export default function Title() {
     <header className={isHomepage ? 'homepage' : undefined}>
       {isHomepage
         ? <h1 className="siteTitle">tempest.dev</h1>
-        : <a href="/" className="siteTitle">tempest.dev</a>
+        : <Link href="/" className="siteTitle">tempest.dev</Link>
       }
       <nav>
-        <a href="/about">about</a>
-        {/* <a href="/posts">posts</a> */}
-        <a href="/contact">contact</a>
-        <a target="blank" href="https://git.tempest.dev/ashe/tempest.dev">code</a>
+        <Link href="/about">about</Link>
+        <Link href="/contact">contact</Link>
+        <Link target="blank" href="https://git.tempest.dev/ashe/tempest.dev">code</Link>
       </nav>
       <div className="headerBackground">
         <Image