From de48692eb454070acff5aba90c927649e27809be Mon Sep 17 00:00:00 2001
From: Kagameow <kagami.404@gmail.com>
Date: Mon, 22 Jul 2024 19:02:39 +0200
Subject: [PATCH] updated our service view

---
 src/views/home-view/HomeView.vue             |  2 +-
 src/views/services-view/ServicesViewCard.vue | 40 +++++++++++++-------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/views/home-view/HomeView.vue b/src/views/home-view/HomeView.vue
index 14a8f8e..d6c44fc 100644
--- 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
index b203dd1..ff3ac35 100644
--- 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 {