feat: add afcl card component

Author: yaroslav8765

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

@@ -436,6 +436,25 @@ const enable = ref(false)
   </div>
 </div>
 
+## Card 
+
+<div class="split-screen">
+```ts
+import { Card } from '@/afcl'
+
+  ...
+
+<Card 
+    title="New Reality" 
+    description="Click this card to visit the new AdminForth reality where you can build your own back-office"
+>
+</Card>
+```
+
+![AFCL Checkbox](Card.png)
+
+
+</div>
 
 ## Toggle
 

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

@@ -340,11 +340,12 @@ export const styles = () => ({
     lightToastCloseIconFocusRing: "#D1D5DB",
     lightToastText: "#6B7280",
 
+    lightCardBackground: "#FFFFFF",
+    lightCardBackgroundHover: "#F3F4F6",
+    lightCardBorder: "#E5E7EB",
+    lightCardTitle: "#374151",
+    lightCardDescription: "#6B7280",
 
-
-
-    
-    
     // colors for dark theme
     darkHtml: "#111827",
 
@@ -682,6 +683,11 @@ export const styles = () => ({
     darkToastCloseIconFocusRing: "#374151",
     darkToastText: "#9CA3AF",
 
+    darkCardBackground: "#1F2937", // card background
+    darkCardBackgroundHover: "#374151", // card background hover
+    darkCardBorder: "#4B5563", // card border
+    darkCardTitle: "#FFFFFF", // card title
+    darkCardDescription: "#9CA3AF", // card description
 
   },
   boxShadow: {

adminforth/modules/styles.ts

@@ -0,0 +1,16 @@
+<template>
+<a href="#" class="block max-w-sm p-6 bg-lightCardBackground border border-lightCardBorder rounded-lg shadow-sm hover:bg-lightCardBackgroundHover dark:bg-darkCardBackground dark:border-darkCardBorder dark:hover:bg-darkCardBackgroundHover">
+
+<h5 class="mb-2 text-2xl font-bold tracking-tight text-lightCardTitle dark:text-darkCardTitle">{{ props.title }}</h5>
+<p class="font-normal text-base text-lightCardDescription dark:text-darkCardDescription">{{ props.description }}</p>
+</a>
+</template>
+
+
+<script setup lang="ts">
+const props = defineProps<{
+    title: string;
+    description: string;
+}>();
+
+</script>

adminforth/spa/src/afcl/Card.vue

@@ -23,4 +23,5 @@ export { default as JsonViewer } from './JsonViewer.vue';
 export { default as Toggle } from './Toggle.vue';
 export { default as DatePicker } from './DatePicker.vue';
 export { default as Textarea } from './Textarea.vue';
-export { default as ButtonGroup } from './ButtonGroup.vue';
+export { default as ButtonGroup } from './ButtonGroup.vue';
+export { default as Card } from './Card.vue';