feat: Add growing animation to NucleoDataCard and update README

This commit introduces a growing animation to the NucleoDataCard component.
- The animation is implemented using CSS keyframes and is triggered on hover.
- A smooth transition effect has also been added.

The README.md file has been updated to include information about this new feature under the UI section.

ui/src/components/ui/NucleoDataCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="rounded-lg shadow-md p-6 border-t-4"
+    class="nucleo-data-card-container rounded-lg shadow-md p-6 border-t-4"
     :style="{ backgroundColor: backgroundColor, borderTopColor: accentColor }"
   >
     <!-- Header -->
@@ -86,4 +86,23 @@ export default {
 
 <style scoped>
 /* Scoped styles can be added here if needed, Tailwind CSS is preferred for general styling */
+
+@keyframes grow {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(1.05);
+  }
+}
+
+.nucleo-data-card-container:hover {
+  animation-name: grow;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+}
+
+.nucleo-data-card-container {
+  transition: transform 0.3s ease-out;
+}
 </style>