home view responsivnes updates

HIRO-MicroDataCenters-BV · Jul 17, 2024 · 91db6f8 · 91db6f8
1 parent b0f8566
commit 91db6f8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git 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,14 +54,18 @@ defineProps({
   flex-direction: column;
   gap: 5px;
   position: relative;
-  padding: 30px;
+  padding: 20px;
   width: 366px;
   height: 250px;
   background: #000;
   box-shadow: -1px 1px 16px 3px rgba(255, 255, 255, 0.25);
   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
@@ -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
@@ -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;