chore: separate frontend from backend

app/components/Ui/BadgeList.vue

@@ -0,0 +1,13 @@
+<template>
+  <div v-if="tools" class="flex flex-row gap-1 flex-wrap">
+    <UBadge v-for="tool in tools" :key="tool" size="md" variant="solid">
+      {{ tool }}
+    </UBadge>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { tools } = defineProps<{
+  tools: string[];
+}>();
+</script>

app/components/Ui/BadgeListCard.vue

@@ -0,0 +1,14 @@
+<template>
+  <UPageCard class="bg-background-100 my-10">
+    <p class="text-xl">
+      <slot />
+    </p>
+    <UiBadgeList :tools="tools" />
+  </UPageCard>
+</template>
+
+<script setup lang="ts">
+const { tools } = defineProps<{
+  tools: string[];
+}>();
+</script>