responsivness misc fixes

src/assets/base.css

@@ -45,15 +45,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
   padding: 0 0.5rem;
 
-  /*
   @media (--breakpoint-tablet) {
-    background: url('backgrounds/background-tablet.svg');
+    padding: 0 1rem;
   }
-*/
 
   @media (--breakpoint-desktop) {
     background: url('backgrounds/background.svg');
     background-size: cover;
-    padding: 0 2rem;
   }
 }

src/assets/main.css

@@ -8,10 +8,8 @@
   font-weight: normal;
 }
 
-a,
-.green {
+a {
   text-decoration: none;
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
-  padding: 3px;
 }

src/components/AppCard.vue

@@ -69,7 +69,8 @@ defineProps({
   gap: 10px;
   position: relative;
   padding: 30px;
-  width: 342px;
+  min-width: 350px;
+  max-width: 550px;
   min-height: 250px;
 
   &.app-card--is-dense {

src/components/AppCardLink.vue

@@ -55,16 +55,18 @@ defineProps({
   gap: 5px;
   position: relative;
   padding: 20px;
-  width: 366px;
+  max-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);
+  @media (--breakpoint-tablet-large) {
+    box-shadow: -1px 1px 16px 3px rgba(255, 255, 255, 0.25);
+    &:hover {
+      transform: scale(1.05);
+    }
   }
 }
 
@@ -98,5 +100,6 @@ defineProps({
   font-weight: 400;
   line-height: normal;
   text-decoration-line: underline;
+  margin-top: auto;
 }
 </style>

src/components/AppCardSelector.vue

@@ -57,6 +57,7 @@ const selectedCard = ref(props.cards[0]);
   justify-content: space-between;
   align-items: center;
   border-bottom: 2px solid var(--hiro-c-dark-gray);
+  gap: 20px;
 }
 
 .app-card-selector__menu-item {
@@ -65,6 +66,8 @@ const selectedCard = ref(props.cards[0]);
   height: 60px;
   position: relative;
   top: 3px;
+  width: 100%;
+  cursor: pointer;
 }
 
 .app-card-selector__menu-item--active {

src/views/home-view/HomeView.vue

@@ -5,9 +5,21 @@ import HomeViewDesktop from './HomeViewDesktop.vue';
 
 <template>
   <main>
+    <p class="home-view__heading">
+      Enhanced connectivity, automation, adaptive and learning systems, are
+      driving the digital transformation of enterprises that delivers them
+      higher levels of efficiency and sustainability in a data economy.
+    </p>
     <HomeViewMobile />
     <HomeViewDesktop />
   </main>
 </template>
 
-<style scoped></style>
+<style scoped>
+.home-view__heading {
+  max-width: 300px;
+  text-align: center;
+  margin: 0 auto;
+  padding: 1rem 0;
+}
+</style>

src/views/home-view/HomeViewDesktop.vue

@@ -35,6 +35,7 @@ const { industry, energyGrid, city, agriculture, health } = customerCards;
         :label="joinUsCard.title"
         :text="joinUsCard.description"
         :is-dense="true"
+        class="customers-view-desktop__join-us-card"
       />
       <AppCardLink
         :label="health.title"
@@ -93,4 +94,13 @@ const { industry, energyGrid, city, agriculture, health } = customerCards;
     flex-direction: row;
   }
 }
+
+.customers-view-desktop__join-us-card {
+  max-width: 366px;
+  height: 250px;
+
+  @media (--breakpoint-desktop) {
+    max-width: 350px;
+  }
+}
 </style>

src/views/home-view/HomeViewMobile.vue

@@ -29,8 +29,10 @@ import { Carousel, Slide, Pagination } from 'vue3-carousel';
       </template>
     </Carousel>
     <AppCard
+      class="home-view-mobile__join-us-card"
       :label="joinUsCard.title"
       :text="joinUsCard.description"
+      :is-dense="true"
     />
   </div>
 </template>
@@ -49,17 +51,31 @@ import { Carousel, Slide, Pagination } from 'vue3-carousel';
 }
 
 .home-view-mobile__swiper {
-  max-width: 350px;
+  max-width: 366px;
+}
 
-  @media (--breakpoint-tablet-large) {
-    display: none;
-  }
+.home-view-mobile__join-us-card {
+  max-width: 366px;
 }
+</style>
 
-.home-view-mobile__swiper-slide {
-  @media (--breakpoint-tablet-large) {
-    display: none;
-    visibility: hidden;
+<style>
+.carousel__viewport {
+  box-shadow: -1px 1px 16px 3px rgba(255, 255, 255, 0.25);
+}
+
+.carousel__pagination-button {
+  &:after {
+    content: '';
+    display: block;
+    width: 6px;
+    height: 6px;
+    background: var(--color-text);
+    border-radius: 50%;
   }
 }
+
+.carousel__pagination-button--active:after {
+  background: var(--hiro-c-green);
+}
 </style>

src/views/services-view/ServicesView.vue

@@ -22,7 +22,7 @@ import { servicesGraph } from '@/constants/services-page';
 .services-view {
   display: flex;
   gap: 20px;
-  padding: 20px;
+  padding: 0 1rem;
   justify-content: center;
   max-width: 1200px;
   height: 100%;

src/views/services-view/ServicesViewCards.vue

@@ -22,7 +22,6 @@ const activeCard = ref('');
 .services-view-cards {
   display: flex;
   gap: 50px;
-  padding: 20px;
   justify-content: center;
   flex-direction: column;
   flex: 1;