Add Button component

components/Button.vue

@@ -0,0 +1,24 @@
+<template>
+  <NuxtLink
+    :to="to"
+    :target="external ? '_blank' : ''"
+    :rel="external ? 'noopener noreferrer' : ''"
+    :class="
+      'flex gap-2 px-10 py-3 rounded-xl items-center text-lg text-inherit font-normal duration-300 active:scale-95 ' +
+      (secondary
+        ? 'border-2 border-[var(--text-colour)] hover:bg-[var(--text-colour)] hover:text-black'
+        : 'border-2 border-[var(--brand-background-old)] bg-[var(--brand-background-old)] hover:brightness-150')
+    "
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup>
+const props = defineProps({
+  to: String,
+  size: String,
+  secondary: Boolean,
+  external: Boolean,
+})
+</script>

components/ProjectCard.vue

@@ -20,12 +20,9 @@
     </div>
     <!-- Buttons -->
     <div class="flex flex-row flex-wrap gap-3 mb-5">
-      <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 text-inherit font-normal"
-        ><LucideDownload />{{ index }}</ExternalLink
-      >
+      <Button v-for="(link, index) in urls" :to="link" secondary external>
+        <LucideDownload />{{ index }}
+      </Button>
     </div>
   </div>
 </template>

pages/index.vue

@@ -15,17 +15,13 @@
       {{ $t("landing.reason") }}
     </p>
 
-    <NuxtLink class="w-fit" to="/alternatives">
-      <BigButton>
-        <LucideArrowUpRight /> {{ $t("landing.buttons.alternatives") }}
-      </BigButton>
-    </NuxtLink>
+    <Button class="w-fit sm:px-20 px-15 py-8" to="/alternatives">
+      <LucideArrowUpRight /> {{ $t("landing.buttons.alternatives") }}
+    </Button>
   </div>
 </template>
 
 <script setup lang="ts">
-import BigButton from "../components/BigButton.vue"
-
 const minecraftText = ref("MINECRAFT")
 
 if (Math.floor(Math.random() * 10000) === 0) {