updated our service view

HIRO-MicroDataCenters-BV · Jul 22, 2024 · de48692 · de48692
1 parent 1dc4ec7
commit de48692
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/src/views/home-view/HomeView.vue b/src/views/home-view/HomeView.vue
@@ -4,7 +4,7 @@ import HomeViewDesktop from './HomeViewDesktop.vue';
 </script>
 
 <template>
-  <main>
+  <main class="home-view">
     <p class="home-view__heading">
       Enhanced connectivity, automation, adaptive and learning systems, are
       driving the digital transformation of enterprises that delivers them

diff --git a/src/views/services-view/ServicesViewCard.vue b/src/views/services-view/ServicesViewCard.vue
@@ -21,21 +21,25 @@ const activate = () => {
 
 <template>
   <div class="services-view-cards__card">
-    <div
-      class="services-view-cards__card-heading"
-      @click="activate"
-    >
-      <component
-        :is="cubePartsIcons[service.type]"
-        v-if="service.type"
-      />
+    <div class="services-view-cards__card-heading">
       <div
-        class="services-view-cards__card-title-container"
-        :class="`services-view-cards__card-title-container--${service.type}`"
+        class="services-view-cards__card-heading-container"
+        tabindex="0"
+        @click="activate"
+        @keydown.enter.space="activate"
       >
-        <h2 class="services-view-cards__card-title">
-          {{ service.title }}
-        </h2>
+        <component
+          :is="cubePartsIcons[service.type]"
+          v-if="service.type"
+        />
+        <div
+          class="services-view-cards__card-title-container"
+          :class="`services-view-cards__card-title-container--${service.type}`"
+        >
+          <h2 class="services-view-cards__card-title">
+            {{ service.title }}
+          </h2>
+        </div>
       </div>
     </div>
     <div
@@ -51,7 +55,6 @@ const activate = () => {
 .services-view-cards__card {
   display: flex;
   gap: 20px;
-  cursor: pointer;
   flex-direction: column;
 
   &:nth-child(odd) {
@@ -61,9 +64,18 @@ const activate = () => {
 
 .services-view-cards__card-heading {
   display: flex;
+}
+
+.services-view-cards__card-heading-container {
+  display: flex;
+  transition: transform 300ms ease-out;
   gap: 10px;
   align-items: center;
   cursor: pointer;
+
+  &:hover {
+    transform: scale(1.05);
+  }
 }
 
 .services-view-cards__card-title-container {