From 91db6f89a320769b027803bc0a2fa7b744935bc4 Mon Sep 17 00:00:00 2001
From: Kagameow <kagami.404@gmail.com>
Date: Wed, 17 Jul 2024 18:32:22 +0200
Subject: [PATCH] home view responsivnes updates

---
 src/components/AppCardLink.vue          | 23 ++++++++++++++++++++++-
 src/views/home-view/HomeViewDesktop.vue |  3 ++-
 src/views/home-view/HomeViewMobile.vue  |  5 ++---
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/AppCardLink.vue b/src/components/AppCardLink.vue
index 49ab6df..64079d8 100644
--- a/src/components/AppCardLink.vue
+++ b/src/components/AppCardLink.vue
@@ -37,11 +37,13 @@ defineProps({
         <img
           :src="routesCubesIcons[route]"
           alt="icon"
+          class="app-card-link__icon"
         />
       </div>
       <div class="app-card-link__body">
         {{ text }}
       </div>
+      <div class="app-card-link__footer">See more</div>
     </div>
   </RouterLink>
 </template>
@@ -52,7 +54,7 @@ defineProps({
   flex-direction: column;
   gap: 5px;
   position: relative;
-  padding: 30px;
+  padding: 20px;
   width: 366px;
   height: 250px;
   background: #000;
@@ -60,6 +62,10 @@ defineProps({
   cursor: pointer;
   text-decoration: none;
   color: var(--color-text);
+
+  &:hover {
+    transform: scale(1.05);
+  }
 }
 
 .app-card-link__title {
@@ -75,7 +81,22 @@ defineProps({
   font-weight: 600;
 }
 
+.app-card-link__icon {
+  width: 50px;
+  height: 50px;
+}
+
 .app-card-link__body {
   text-align: left;
 }
+
+.app-card-link__footer {
+  display: flex;
+  flex-direction: row-reverse;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-decoration-line: underline;
+}
 </style>
diff --git a/src/views/home-view/HomeViewDesktop.vue b/src/views/home-view/HomeViewDesktop.vue
index eb5da26..bd806ea 100644
--- a/src/views/home-view/HomeViewDesktop.vue
+++ b/src/views/home-view/HomeViewDesktop.vue
@@ -34,6 +34,7 @@ const { industry, energyGrid, city, agriculture, health } = customerCards;
       <AppCard
         :label="joinUsCard.title"
         :text="joinUsCard.description"
+        :is-dense="true"
       />
       <AppCardLink
         :label="health.title"
@@ -82,7 +83,7 @@ const { industry, energyGrid, city, agriculture, health } = customerCards;
 
   @media (--breakpoint-tablet-large) {
     display: flex;
-    gap: 1rem;
+    gap: 2rem;
     flex-direction: column;
     visibility: visible;
   }
diff --git a/src/views/home-view/HomeViewMobile.vue b/src/views/home-view/HomeViewMobile.vue
index ef9e3e3..73695d5 100644
--- a/src/views/home-view/HomeViewMobile.vue
+++ b/src/views/home-view/HomeViewMobile.vue
@@ -3,7 +3,7 @@ import AppCardLink from '@/components/AppCardLink.vue';
 import { customerCards, joinUsCard } from '@/constants/home-page';
 import AppCard from '@/components/AppCard.vue';
 import 'vue3-carousel/dist/carousel.css';
-import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
+import { Carousel, Slide, Pagination } from 'vue3-carousel';
 </script>
 
 <template>
@@ -25,7 +25,6 @@ import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
         />
       </slide>
       <template #addons>
-        <navigation />
         <pagination />
       </template>
     </Carousel>
@@ -50,7 +49,7 @@ import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
 }
 
 .home-view-mobile__swiper {
-  max-width: 450px;
+  max-width: 350px;
 
   @media (--breakpoint-tablet-large) {
     display: none;