links list at the bottom

app.vue

@@ -2,9 +2,40 @@
   <div>
     <NuxtLayout>
       <NuxtPage/>
-      <div class="mx-auto px-0 m-0 mt-6 md:mt-8">
-        <p class="text-xs mx-auto italic text-center text-slate-400 font-thin">Copyright WubzyGD 2024</p>
+      <div id="global-outro-container" class="mt-6 mb-2 mx-0 p2 max-w-screen">
+        <div id="global-outro-links" class="mb-0 lg:mb-1 mx-auto mt-4 md:mt-6 p0 flex flex-row flex-wrap justify-center justify-items-center min-w-content">
+          <template v-for="link in links" :key="link.text">
+            <a :href="`https://${link.href}`" :target="link.target ? `_${link.target}` : '_blank'" class="flex-none text-center text-sm font-mont text-slate-300 font-light px-2 py-1 hover:font-normal hover:text-white transition-colors ease-in-out duration-300">{{ link.text }}</a>
+          </template>
+        </div>
+        <div id="global-copyright-container" class="mx-auto px-0 m-0">
+          <p class="text-xs mx-auto italic text-center text-slate-400 font-thin">Copyright WubzyGD 2024</p>
+        </div>
+        <div id="global-outro-glow" class="p0 m0 mt-2 border-solid border-b lg:mx-6"></div>
       </div>
     </NuxtLayout>
   </div>
-</template>
+</template>
+
+<style>
+#global-outro-glow {
+  border-image: linear-gradient(to right, transparent 0%, transparent 5%, #ffffff4a 30%, #ffffffa4 47%, #ffffffa4 53%, #ffffff4a 70%, transparent 100%) 1;
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      links: [
+        {text: "Home", href: "wubzy.xyz", target: "self"},
+        {text: "GitHub", href: "github.com/WubzyGD"},
+        {text: "Insta", href: "instagram.com/wubzygd"},
+        {text: "Theme Generator", href: "wubzy.xyz/util/theme"},
+        {text: "Gitea", href: "git.wubzy.xyz"},
+        {text: "Site Source", href: "git.wubzy.xyz/Wubzy/site-v2"}
+      ]
+    }
+  }
+}
+</script>