✨ Terms listing

app/pages/index.vue

@@ -61,7 +61,7 @@
                       :href="product.repo"
                       target="_blank"
                     >
-                      <n-icon><code-round /></n-icon>
+                      <n-icon color="black"><code-round /></n-icon>
                     </n-button>
                     <n-button
                       v-if="product.url"
@@ -72,7 +72,7 @@
                       :href="product.url"
                       target="_blank"
                     >
-                      <n-icon><launch-round /></n-icon>
+                      <n-icon color="black"><launch-round /></n-icon>
                     </n-button>
                   </div>
                   <div
@@ -83,7 +83,9 @@
                     <p class="text-lg text-white line-height-1">
                       {{ product.name }}
                     </p>
-                    <p>{{ product.description }}</p>
+                    <p class="text-white line-height-1">
+                      {{ product.description }}
+                    </p>
                   </div>
                 </n-carousel-item>
               </n-carousel>

app/pages/terms/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="container max-w-lg mx-auto my-16">
+    <h1 class="text-4xl font-bold mb-4">Terms and Conditions</h1>
+    <nuxt-link v-for="term in terms" :key="term.path" :to="term.path">
+      <n-card :title="term.title" hoverable class="mb-4 mx-[-8px]">
+        <p>{{ term.description }}</p>
+
+        <template #footer>
+          <p class="text-xs">
+            Last updated at
+            {{ new Date(term.updatedDate).toLocaleDateString() }}
+          </p>
+        </template>
+      </n-card>
+    </nuxt-link>
+  </div>
+</template>
+
+<script setup>
+import { NCard } from "naive-ui";
+const { data: terms } = await useAsyncData("terms", () =>
+  queryCollection("terms").order("updatedDate", "DESC").all(),
+);
+</script>
+
+<style scoped>
+/* Styling for the terms listing page */
+</style>