feat: update link titles to include arrows + ui updates

components/Section/Header/header.module.css

@@ -2,19 +2,30 @@
   display: grid;
   gap: var(--Spacing-x1);
   grid-template-columns: 1fr auto;
+  align-items: baseline;
 }
 
 .title {
-  grid-column: 1/2;
+  grid-column: 1 / 2;
-  grid-row: 1/2;
-}
-
-.link {
-  grid-column: 2/-1;
-  grid-row: 1/2;
 }
 
 .subtitle {
-  grid-column: 1/-1;
+  grid-column: 1 / 2;
-  grid-row: 2;
+}
+
+.linkWrapper {
+  display: flex;
+  align-items: baseline;
+  grid-column: 2 / 3;
+  gap: var(--Spacing-x-half);
+  justify-self: end;
+}
+
+.link {
+  display: flex;
+  align-items: baseline;
+}
+
+.icon {
+  align-self: center;
 }

components/Section/Header/index.tsx

@@ -1,3 +1,4 @@
+import ArrowRight from "@/components/Icons/ArrowRight"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -21,12 +22,20 @@ export default function SectionHeader({
       >
         {title}
       </Title>
+      {subtitle && <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>}
       {link ? (
-        <Link className={styles.link} href={link.href} variant="myPage">
+        <span className={styles.linkWrapper}>
-          {link.text}
+          <ArrowRight color="burgundy" className={styles.icon} />
-        </Link>
+          <Link
+            className={styles.link}
+            color="burgundy"
+            href={link.href}
+            variant="myPage"
+          >
+            {link.text}
+          </Link>
+        </span>
       ) : null}
-      <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>
     </header>
   )
 }