switch out section header and footer link arrows

web/src/components/general/SectionFooter.tsx

@@ -1,10 +1,14 @@
 import Link from "next/link";
 import styles from "./sectionFooter.module.scss";
+import { Icon } from "./Icon";
 
 export const SectionFooter = ({ link, linkText }: { link: string, linkText: string }) => {
   return (
     <footer className={styles.sectionFooter}>
-      {link && linkText && <Link href={link}>{linkText}</Link>}
+      {link && linkText && <Link href={link} className={styles.link}>
+        <span>{linkText}</span>
+        <Icon type="arrowRight" />
+      </Link>}
     </footer>
   );
 };

web/src/components/general/SectionHeader.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import styles from "./sectionHeader.module.scss";
+import { Icon } from "./Icon";
 
 export const SectionHeader = ({ heading, link, linkText }: { heading: string, link?: string, linkText?: string }) => {
   return (
@@ -10,7 +11,12 @@ export const SectionHeader = ({ heading, link, linkText }: { heading: string, li
         <span className="circle"></span>
         {heading}
       </h2>
-      {link && linkText && <Link href={link}>{linkText}</Link>}
+      {link && linkText &&
+        <Link href={link} className={styles.link}>
+          <span>{linkText}</span>
+          <Icon type="arrowRight" />
+        </Link>
+      }
     </header>
   );
 };

web/src/components/general/sectionFooter.module.scss

@@ -5,21 +5,20 @@
   align-items: center;
   flex-wrap: wrap;
 
-  a {
-    display: block;
-    font-family: var(--font-serif);
-    position: relative;
-    padding-right: 1.4rem;
-
-    &:after {
-      content: "→";
-      position: absolute;
-      right: 0;
-    }
-  }
-
   display: none;
   @media (max-width: 800px) {
     display: flex;
   }
 }
+
+.link {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-s);
+  position: relative;
+
+  span {
+    font-family: var(--font-serif);
+  }
+}

web/src/components/general/sectionHeader.module.scss

@@ -4,23 +4,21 @@
   align-items: center;
   flex-wrap: wrap;
 
-  a {
-    display: block;
-    font-family: var(--font-serif);
-    margin-bottom: var(--spacing-s);
-    position: relative;
-    padding-right: 1.4rem;
-
-    &:after {
-      content: "→";
-      position: absolute;
-      right: 0;
-    }
-  }
-
   @media (max-width: 800px) {
-    a {
+    .link {
       display: none;
     }
   }
 }
+
+.link {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-s);
+  position: relative;
+
+  span {
+    font-family: var(--font-serif);
+  }
+}