From 07392d946668d4ecee28aa6bbad12860e7745c3c Mon Sep 17 00:00:00 2001
From: Nitrrine <nitrrine@team.lodine.xyz>
Date: Thu, 11 Jul 2024 13:50:03 +0500
Subject: [PATCH 1/4] Add PageHero component

---
 components/pageHero.vue | 17 +++++++++++++++++
 pages/alternatives.vue  | 12 ++++--------
 2 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 components/pageHero.vue

diff --git a/components/pageHero.vue b/components/pageHero.vue
new file mode 100644
index 0000000..0c10407
--- /dev/null
+++ b/components/pageHero.vue
@@ -0,0 +1,17 @@
+<template>
+  <header class="text-[4rem] flex flex-col flex-wrap">
+    <span
+      class="text-[1.5rem] text-pretty sm:text-[2rem] md:text-[3rem] lg:text-[4rem] internalFont"
+    >
+      {{ title }}
+    </span>
+    <span class="text-lg">{{ subTitle }}</span>
+  </header>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: String,
+  subTitle: String,
+})
+</script>
diff --git a/pages/alternatives.vue b/pages/alternatives.vue
index 522ba3a..6fd5e4d 100644
--- a/pages/alternatives.vue
+++ b/pages/alternatives.vue
@@ -1,12 +1,8 @@
 <template>
-  <span class="text-[4rem] flex flex-col flex-wrap">
-    <span
-      class="text-[1.5rem] text-pretty sm:text-[2rem] md:text-[3rem] lg:text-[4rem] internalFont"
-    >
-      {{ $t("alternatives.hero") }}
-    </span>
-    <span class="text-lg">{{ $t("alternatives.reason") }}</span>
-  </span>
+  <PageHero
+    :title="$t('alternatives.hero')"
+    :sub-title="$t('alternatives.reason')"
+  />
 
   <!-- Need to add a project? It's now data driven (and localised!). Go to the English lang file (~/i18n/lang/en-US.json) -->
 

From 99d9719b507ceb242f80ccaa9948230ec748c8dd Mon Sep 17 00:00:00 2001
From: Nitrrine <nitrrine@team.lodine.xyz>
Date: Thu, 11 Jul 2024 13:54:07 +0500
Subject: [PATCH 2/4] Mark component User for deletion

---
 components/user.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/user.vue b/components/user.vue
index d14a99b..501597b 100644
--- a/components/user.vue
+++ b/components/user.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- ! DEPRECATED COMPONENT, MARKED FOR DELETION -->
   <span
     class="gap-4 flex flex-row font-bold text-2xl bg-[color:var(--brand-colour)] items-center p-4 rounded-2xl select-none duration-[0.4s] active:scale-[0.9]"
   >

From c64b9ccdfdf312ad8f784f1aef93444e5d05dad0 Mon Sep 17 00:00:00 2001
From: Nitrrine <nitrrine@team.lodine.xyz>
Date: Thu, 11 Jul 2024 13:57:10 +0500
Subject: [PATCH 3/4] Add CategoryDivider component

---
 components/categoryDivider.vue | 9 +++++++++
 components/projectSection.vue  | 6 +-----
 2 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 components/categoryDivider.vue

diff --git a/components/categoryDivider.vue b/components/categoryDivider.vue
new file mode 100644
index 0000000..4adb4b6
--- /dev/null
+++ b/components/categoryDivider.vue
@@ -0,0 +1,9 @@
+<template>
+  <span
+    class="text-[var(--big-text-color)] italic font-['Geist Mono'] text-[4rem]"
+  >
+    <span class="font-[250] tracking wider">
+      <slot />
+    </span>
+  </span>
+</template>
diff --git a/components/projectSection.vue b/components/projectSection.vue
index 2e583b1..051ff78 100644
--- a/components/projectSection.vue
+++ b/components/projectSection.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="flex flex-col flex-wrap gap-6 pb-8">
-    <span
-      class="text-[var(--big-text-color)] italic font-['Geist Mono'] text-[4rem]"
-    >
-      <span class="font-[250] tracking wider">{{ title }}</span>
-    </span>
+    <CategoryDivider>{{ title }}</CategoryDivider>
     <ProjectCard
       v-for="(projectData, title) in data"
       :title="title"

From aa948cbc82a1c06a19b384e50ddb2765d9436edc Mon Sep 17 00:00:00 2001
From: Nitrrine <nitrrine@team.lodine.xyz>
Date: Thu, 11 Jul 2024 14:13:49 +0500
Subject: [PATCH 4/4] Use ExternalLink for download button

---
 components/projectCard.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/projectCard.vue b/components/projectCard.vue
index a4d0c94..c0a75ac 100644
--- a/components/projectCard.vue
+++ b/components/projectCard.vue
@@ -20,11 +20,11 @@
     </div>
     <!-- Buttons -->
     <div class="flex flex-row flex-wrap gap-3 mb-5">
-      <NuxtLink
+      <ExternalLink
         v-for="(link, index) in urls"
         :to="link"
-        class="flex gap-2 px-10 py-3 rounded-xl items-center text-lg border-2 border-[var(--text-colour)] duration-300 hover:bg-[var(--text-colour)] hover:text-black active:scale-95"
-        ><LucideDownload />{{ index }}</NuxtLink
+        class="flex gap-2 px-10 py-3 rounded-xl items-center text-lg border-2 border-[var(--text-colour)] duration-300 hover:bg-[var(--text-colour)] hover:text-black active:scale-95 text-inherit font-normal"
+        ><LucideDownload />{{ index }}</ExternalLink
       >
     </div>
   </div>