removed bootstrap, new table

app/pages/dashboard.vue

@@ -9,12 +9,12 @@
     {
       title: "1",
       icon: "meteor-icons:chevron-up",
-      desc: "pila"
+      desc: "epah ya bro"
     },
     {
       title: "2",
       icon: "majesticons:award",
-      desc: "bolas"
+      desc: "bolinhas de natal ou whatever"
     },
     {
       title: "3",
@@ -23,6 +23,44 @@
     },
 
   ];
+  const table_demo = ref([
+    {
+      id: '4600',
+      date: '2024-03-11T15:30:00',
+      status: 'paid',
+      email: 'james.anderson@example.com',
+      amount: 594
+    },
+    {
+      id: '4599',
+      date: '2024-03-11T10:10:00',
+      status: 'failed',
+      email: 'mia.white@example.com',
+      amount: 276
+    },
+    {
+      id: '4598',
+      date: '2024-03-11T08:50:00',
+      status: 'refunded',
+      email: 'william.brown@example.com',
+      amount: 315
+    },
+    {
+      id: '4597',
+      date: '2024-03-10T19:45:00',
+      status: 'paid',
+      email: 'emma.davis@example.com',
+      amount: 529
+    },
+    {
+      id: '4596',
+      date: '2024-03-10T15:55:00',
+      status: 'paid',
+      email: 'ethan.harris@example.com',
+      amount: 639
+    }
+  ])
+
 </script>
 
 <template>
@@ -30,24 +68,26 @@
     
     <UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>
 
-    <div class="mt-1 mb-2 flex flex-col w-full relative z-0">
+    <div class="mt-1 mb-3 flex flex-col w-full relative z-0">
       <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">It's cool, isn't it ?</UBadge> 
     </div>
     
-    <div class="mx-auto max-w-220">
-      <div class="row">
+    <!--<div class="mx-auto max-w-220">-->
+      <UPageGrid class="lg:grid-cols-3 lg:gap-0 not-lg:gap-3">
           <UPageCard 
             v-for="card in cards"
             :title="card.title"
             :description="card.desc"
             :icon="card.icon"
             variant="subtle"
-            class="dark-widget-bg col-md"
+            class="dark-widget-bg col-lg lg:rounded-none first:lg:rounded-l-2xl last:lg:rounded-r-2xl  sm:rounded-2xl"
           />
-        </div>
-    </div>
+      </UPageGrid>
+
+
+    <UTable :data="table_demo"/>
   </UContainer>
 </template>