From 17d95b2d21a5cd50e9ca60a1a1518072a7290f1f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 3 Jun 2025 20:28:30 +0000
Subject: [PATCH] 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.
---
 README.md                               |  3 +++
 ui/src/components/ui/NucleoDataCard.vue | 21 ++++++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index eb98a43..33338dc 100644
--- a/README.md
+++ b/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`)
diff --git a/ui/src/components/ui/NucleoDataCard.vue b/ui/src/components/ui/NucleoDataCard.vue
index 7781a93..1d4d623 100644
--- a/ui/src/components/ui/NucleoDataCard.vue
+++ b/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>