new widgets

app/pages/dashboard.vue

@@ -2,6 +2,27 @@
   definePageMeta({
     layout: "dashboard"
   });
+  const color = useColorMode();
+  color.preference = "dark";
+
+  const cards: any[] = [
+    {
+      title: "1",
+      icon: "meteor-icons:chevron-up",
+      desc: "pila"
+    },
+    {
+      title: "2",
+      icon: "majesticons:award",
+      desc: "bolas"
+    },
+    {
+      title: "3",
+      icon: "svg-spinners:clock",
+      desc: "espera aí um becs bro"
+    },
+
+  ];
 </script>
 
 <template>
@@ -9,16 +30,25 @@
     <div class="mt-1 mb-2 flex flex-col w-full">
       <ProseH2 class="text-center m-0.5 w-full">Hey there, user!</ProseH2>
       <ProseP class="text-center text-muted m-0.5">Welcome to the UI!</ProseP>
-      <UBadge variant="subtle" class="inline mx-auto">Something like that</UBadge> 
+      <UBadge variant="subtle" class="inline mx-auto">It's cool, isn't it ?</UBadge> 
     </div>
     
-    <div class="w-full flex flex-col">
+    <div class="mx-auto max-w-220">
-
+      <div class="row">
+          <UPageCard 
+            v-for="card in cards"
+            :title="card.title"
+            :description="card.desc"
+            :icon="card.icon"
+            variant="subtle"
+            class="dark-widget-bg col-md"
+          />
+        </div>
     </div>
   </UContainer>
 </template>
 
 <style scoped>
-
+@import "bootstrap/dist/css/bootstrap-grid.css";
 
 </style>