From 01ce1c76f36d513cfac9f412b63e7e9a56e52a7d Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Thu, 9 Jul 2026 20:32:03 +0200
Subject: [PATCH] switch out section header and footer link arrows

---
 web/src/components/general/SectionFooter.tsx  |  6 +++-
 web/src/components/general/SectionHeader.tsx  |  8 +++++-
 .../general/sectionFooter.module.scss         | 25 ++++++++---------
 .../general/sectionHeader.module.scss         | 28 +++++++++----------
 4 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/web/src/components/general/SectionFooter.tsx b/web/src/components/general/SectionFooter.tsx
index cadcd10..1801b5d 100644
--- a/web/src/components/general/SectionFooter.tsx
+++ b/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>
   );
 };
diff --git a/web/src/components/general/SectionHeader.tsx b/web/src/components/general/SectionHeader.tsx
index 98764ec..052e10d 100644
--- a/web/src/components/general/SectionHeader.tsx
+++ b/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>
   );
 };
diff --git a/web/src/components/general/sectionFooter.module.scss b/web/src/components/general/sectionFooter.module.scss
index bb3044c..c371f31 100644
--- a/web/src/components/general/sectionFooter.module.scss
+++ b/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);
+  }
+}
diff --git a/web/src/components/general/sectionHeader.module.scss b/web/src/components/general/sectionHeader.module.scss
index d46d578..0eb8701 100644
--- a/web/src/components/general/sectionHeader.module.scss
+++ b/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);
+  }
+}
\ No newline at end of file