fix: updated some styles regarding accessibility

Author: Marc Gonzalez Capdevila

src/components/atoms/CardsManager.vue

@@ -1,25 +1,25 @@
 <template>
-  <v-row justify="center" justify-md="space-around">
-    <v-col v-for="(item, n) in cards" :key="n" cols="12" :md="12 / perRow">
-      <v-card class="rounded-xl cards-animation" height="270px" :style="item.cardStyle" :ripple="false" color="#F2F3F4"
-        @click="$emit('click', item.path)">
-        <v-row style="height: 200px" justify="center" align="center">
-          <v-img max-height="150" :style="item.imageStyle" :src="require('../../assets/manager/' + item.image)" />
-        </v-row>
+  <v-container>
+    <v-row justify="center" justify-md="space-around">
+      <v-col v-for="(item, n) in cards" :key="n" cols="12" :md="12 / perRow">
+        <v-card :ripple="false" @click="$emit('click', item.path)">
+          <div class="d-flex justify-center align-center pa-4">
+            <v-img height="120" max-width="120" :style="item.imageStyle"
+              :src="require('../../assets/manager/' + item.image)" class="mx-auto" />
+          </div>
+          <v-divider></v-divider>
 
-        <div class="text-white pl-4 footer" :style="{ 'background-color': item.bottom }">
-          <!-- Prefer direct text if provided, otherwise fall back to translation keys -->
-          <h2>
+          <v-card-title>
             {{ item.titleDirect ? item.titleDirect : $t(`titles.${item.title}`) }}
-          </h2>
+          </v-card-title>
 
-          <div>
+          <v-card-text>
             {{ item.descriptionDirect ? item.descriptionDirect : $t(`descriptions.${item.description}`) }}
-          </div>
-        </div>
-      </v-card>
-    </v-col>
-  </v-row>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
@@ -41,24 +41,3 @@ export default {
   emits: ['click'],
 }
 </script>
-
-<style>
-.footer {
-  height: 90px;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  /* background-color: item.bottom; */
-  padding-top: 10px;
-  border-top: .3px solid #505050;
-}
-
-.cards-animation {
-  box-shadow: 0;
-  transition: box-shadow 0.5s;
-}
-
-.cards-animation:hover {
-  box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.7) !important;
-}
-</style>