feat: enhance Card component with custom slot and optional title/description props

Author: yaroslav8765

adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -425,32 +425,41 @@ const enable = ref(false)
 </div>
 
 ## Card 
-### Standart card
+
+### Custom card
+If you need custom card, you can make it without 
 <div class="split-screen">
 ```ts
-import { Card } from '@/afcl'
-
-  ...
+<Card>
+  <h5 class="font-bold text-2xl text-gray-800 dark:text-gray-100 mb-6">Monthly Statistics</h5>
+  <div class="flex justify-between items-center gap-6">
+    <div class="flex flex-col">
+      <p class="font-semibold text-gray-600 dark:text-gray-300">Total Income</p>
+      <p class="text-blue-500 font-bold text-xl mt-2">350,000$</p>
+    </div>
 
-<Card 
-    title="New Reality" 
-    description="Click this card to visit the new AdminForth reality where you can build your own back-office"
->
+    <div class="flex flex-col">
+      <p class="font-semibold text-gray-600 dark:text-gray-300">Total Profit</p>
+      <p class="text-green-500 font-bold text-xl mt-2">100,000$</p>
+    </div>
+  </div>
 </Card>
 ```
 
-![AFCL Checkbox](Card.png)
 
-</div>
+![AFCL Checkbox](Card3.png)
 
-### Different card sizes
-If you want to have smaller card, you can specify size in props:
+</div>
 
+### Standart card
 <div class="split-screen">
 
 ```ts
+import { Card } from '@/afcl'
+
+  ...
+
   <Card
-    size="lg"
     title="This is a large card"
     description="Description text for large card. This is a large card. Very nice card. Big one. You can put here any content you want."
   >

adminforth/documentation/docs/tutorial/03-Customization/Card3.png

@@ -9,14 +9,15 @@
 
 <h5 class="font-bold tracking-tight text-lightCardTitle dark:text-darkCardTitle" :class="[props.size === 'sm' ? 'text-base' : props.size === 'md' ? 'text-lg mb-1' : 'text-xl mb-2']">{{ props.title }}</h5>
 <p class="font-normal text-lightCardDescription dark:text-darkCardDescription" :class="[props.size === 'sm' ? 'text-sm' : props.size === 'md' ? 'text-base' : 'text-lg']">{{ props.description }}</p>
+    <slot></slot>
 </a>
 </template>
 
 
 <script setup lang="ts">
 const props = defineProps<{
-    title: string;
-    description: string;
+    title?: string;
+    description?: string;
     size?: 'sm' | 'md' | 'lg';
     hideBorder?: boolean;
 }>();