Merge pull request #29 from josedario87/feature/card-growing-animation

feat: Add growing animation to NucleoDataCard and update README

README.md

@@ -132,6 +132,9 @@ docker compose down --remove-orphans
 * Arranca en puerto **80** internamente.
 * Código fuente en `ui/src/`, configuración en `vite.config.js`.
 
+#### Card Animation
+The data cards implemented in `ui/src/components/ui/NucleoDataCard.vue` now feature a subtle growing animation when hovered over. This animation is implemented purely with CSS using keyframes and transitions defined within the component's `<style scoped>` section, ensuring the styles are encapsulated and don't affect other elements.
+
 ---
 
 ## 📦 CI/CD (`.gitea/workflows/build.yml`)

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>