♻️ Migrated to new UI

app/pages/index.vue

@@ -25,7 +25,7 @@
                 show-arrow
                 autoplay
                 dot-type="line"
-                class="rounded-xl w-full max-h-[360px] aspect-video flex-shrink-1"
+                class="rounded-xl w-full max-h-[360px] aspect-video shrink"
               >
                 <n-carousel-item
                   v-for="product in products"
@@ -114,7 +114,7 @@
         <n-grid cols="1 m:2 l:2" responsive="screen" x-gap="32" y-gap="16">
           <n-gi>
             <div
-              class="flex justify-center text-left h-full py-8 px-4 flex flex-col"
+              class="justify-center text-left h-full py-8 px-4 flex flex-col"
             >
               <h2 class="text-3xl font-bold mb-3">About us</h2>
               <p class="text-lg mb-1">

app/pages/products/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="container max-w-xl mx-auto my-16 px-8">
+    <h1 class="text-4xl font-bold mb-8">Our Products</h1>
+
+    <nuxt-link
+      v-for="product in products"
+      :key="product.url"
+      :to="product.url"
+      class="no-underline block mb-4"
+    >
+      <n-card hoverable>
+        <template #cover>
+          <div class="h-48 overflow-hidden relative">
+            <img :src="product.background" class="w-full h-full object-cover" />
+            <div
+              class="absolute bottom-0 left-0 p-4 bg-linear-to-t from-black/80 to-transparent w-full flex items-center gap-3"
+            >
+              <img
+                :src="product.icon"
+                class="aspect-square h-10 rounded-full bg-white/10 p-1"
+                style="width: auto"
+              />
+              <span class="text-white font-bold text-lg grow">{{
+                product.name
+              }}</span>
+            </div>
+          </div>
+        </template>
+        <p class="line-clamp-3 pt-4">{{ product.description }}</p>
+        <template #footer>
+          <div class="flex justify-between items-center text-xs opacity-75">
+            <span>v{{ product.version }}</span>
+            <span>
+              Released:
+              {{ new Date(product.releasedDate ?? "").toLocaleDateString() }}
+            </span>
+          </div>
+        </template>
+      </n-card>
+    </nuxt-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard } from "naive-ui";
+
+const { data: products } = await useAsyncData("products", () =>
+  queryCollection("products").all()
+);
+
+useHead({
+  title: "Products",
+});
+</script>