Data-driven alternative cards

components/projectCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col gap-6 bg-[color:var(--brand-colour)] rounded-2xl max-w-full"
+    class="flex flex-col gap-4 bg-[color:var(--brand-colour)] rounded-2xl max-w-full"
   >
     <!-- Title -->
     <span
@@ -11,15 +11,19 @@
       <img class="h-12 bg-white rounded-xl p-1" :src="props.icon" />
     </span>
     <!-- Description -->
-    <div class="flex flex-col gap-3 text-xl sm:text-2xl">
-      <slot />
+    <div
+      v-for="description in description"
+      class="flex flex-col gap-3 text-xl sm:text-2xl"
+    >
+      {{ description }}
     </div>
     <!-- Buttons -->
     <div class="flex mt-5">
       <NuxtLink
-        :to="download"
+        v-for="(link, index) in urls"
+        :to="link"
         class="flex gap-2 px-10 py-3 rounded-xl items-center text-lg border-2 duration-300 hover:bg-white hover:text-black active:scale-95"
-        ><LucideDownload />{{service}}</NuxtLink
+        ><LucideDownload />{{ index }}</NuxtLink
       >
     </div>
   </div>
@@ -28,8 +32,8 @@
 <script setup>
 const props = defineProps({
   title: String,
-  download: String,
+  description: Object,
+  urls: Object,
   icon: String,
-  service: String
 })
 </script>

components/projectSection.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex flex-col flex-wrap gap-8">
+    <span class="text-white italic text-[4rem]">
+      <span class="font-[250] tracking wider">{{ title }}</span>
+    </span>
+    <ProjectCard
+      v-for="(projectData, title) in data"
+      :title="title"
+      :description="projectData.description"
+      :urls="projectData.links"
+      :icon="projectData.icon"
+      service="Modrinth"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  data: Object,
+  title: String,
+})
+</script>