feat: add index

app/pages/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 useHead({ title: 'huaqo.de' })
 
-const { hub } = useAppConfig()
+const { hub, hubServices } = useAppConfig()
 
 const apps = computed(() => Object.values(hub as Record<string, HubApp>).sort((a, b) => a.title.localeCompare(b.title, 'de')))
 </script>
@@ -32,6 +32,30 @@ const apps = computed(() => Object.values(hub as Record<string, HubApp>).sort((a
           </NuxtLink>
         </li>
       </ul>
+
+      <template v-if="hubServices.length">
+        <h2 class="mt-10 mb-3 text-sm font-medium text-muted">
+          Dienste
+        </h2>
+        <ul class="grid gap-3 sm:grid-cols-2">
+          <li v-for="service in hubServices" :key="service.href">
+            <a
+              :href="service.href"
+              target="_blank"
+              rel="noopener"
+              class="group flex h-full items-center gap-4 rounded-lg border border-default p-4 transition-colors hover:border-primary hover:bg-elevated/50 focus-visible:outline-2 focus-visible:outline-primary"
+            >
+              <span class="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                <UIcon :name="service.icon" class="size-5" />
+              </span>
+              <span class="flex min-w-0 items-center gap-1.5 font-medium text-highlighted">
+                {{ service.title }}
+                <UIcon name="i-lucide-external-link" class="size-3.5 text-muted" aria-label="Öffnet in neuem Tab" />
+              </span>
+            </a>
+          </li>
+        </ul>
+      </template>
     </UContainer>
   </UMain>
 </template>