carousel for home page

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@vue-flow/core": "^1.36.0",
+    "swiper": "^11.1.4",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },

src/components/AppCardLink.vue

@@ -34,9 +34,9 @@ defineProps({
         <div class="app-card-link__label">
           {{ label }}
         </div>
-        <component
-          :is="routesCubesIcons[route]"
-          v-if="route"
+        <img
+          :src="routesCubesIcons[route]"
+          alt="icon"
         />
       </div>
       <div class="app-card-link__body">

src/constants/cube-parts.ts

@@ -4,11 +4,11 @@ import EdgeCloudServicesIcon from '@/assets/cube-parts/edge-cloud-services.svg?s
 import GovernanceIcon from '@/assets/cube-parts/governance.svg?skipsvgo';
 import EdgeMicroDataCentersIcon from '@/assets/cubes/empty.svg';
 
-import AgricultureIcon from '@/assets/routes-cubes/agriculture.svg?skipsvgo';
-import CityIcon from '@/assets/routes-cubes/city.svg?skipsvgo';
-import HealthIcon from '@/assets/routes-cubes/health.svg?skipsvgo';
-import IndustryIcon from '@/assets/routes-cubes/industry.svg?skipsvgo';
-import EnergyGridIcon from '@/assets/routes-cubes/energy-grid.svg?skipsvgo';
+import AgricultureIcon from '@/assets/routes-cubes/agriculture.svg?url';
+import CityIcon from '@/assets/routes-cubes/city.svg?url';
+import HealthIcon from '@/assets/routes-cubes/health.svg?url';
+import IndustryIcon from '@/assets/routes-cubes/industry.svg?url';
+import EnergyGridIcon from '@/assets/routes-cubes/energy-grid.svg?url';
 
 import { customerCards } from '@/constants/home-page';
 

src/layout/AppHeader.vue

@@ -26,9 +26,10 @@ const currentPath = computed(() => router.currentRoute.value.path);
       </RouterLink>
     </nav>
     <div class="app-header__heading">
-      <component
-        :is="routesCubesIcons[currentPath]"
+      <img
         v-if="currentPath"
+        :src="routesCubesIcons[currentPath]"
+        :alt="currentPath"
         class="app-header__heading-cube"
       />
       <h1 class="app-header__heading-text">

src/views/home-view/HomeViewDesktop.vue

@@ -63,10 +63,13 @@ const { industry, energyGrid, city, agriculture, health } = customerCards;
 }
 
 .customers-view__upper-section {
+  visibility: hidden;
+
   @media (--breakpoint-tablet-large) {
     display: flex;
     gap: 1rem;
     flex-direction: column;
+    visibility: visible;
   }
 
   @media (--breakpoint-desktop) {
@@ -75,10 +78,13 @@ const { industry, energyGrid, city, agriculture, health } = customerCards;
 }
 
 .customers-view__lower-section {
+  visibility: hidden;
+
   @media (--breakpoint-tablet-large) {
     display: flex;
     gap: 1rem;
     flex-direction: column;
+    visibility: visible;
   }
 
   @media (--breakpoint-desktop) {

src/views/home-view/HomeViewMobile.vue

@@ -2,15 +2,41 @@
 import AppCardLink from '@/components/AppCardLink.vue';
 import { customerCards, joinUsCard } from '@/constants/home-page';
 import AppCard from '@/components/AppCard.vue';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+
+const spaceBetween = 10;
+const onProgress = (e) => {
+  const [swiper, progress] = e.detail;
+  console.log(progress);
+};
+
+const onSlideChange = () => {
+  console.log('slide changed');
+};
 </script>
 
 <template>
   <div class="home-view-mobile">
-    <AppCardLink
-      :label="customerCards.energyGrid.title"
-      :text="customerCards.energyGrid.description"
-      :route="customerCards.energyGrid.route"
-    />
+    <swiper
+      :slides-per-view="1"
+      :space-between="50"
+      class="home-view-mobile__swiper"
+      @swiperprogress="onProgress"
+      @swiperslidechange="onSlideChange"
+    >
+      <swiper-slide
+        v-for="(value, index) in Object.values(customerCards)"
+        :key="index + value.title"
+        class="home-view-mobile__swiper-slide"
+      >
+        <AppCardLink
+          :label="value.title"
+          :text="value.description"
+          :route="value.route"
+        />
+      </swiper-slide>
+    </swiper>
     <AppCard
       :label="joinUsCard.title"
       :text="joinUsCard.description"
@@ -30,4 +56,19 @@ import AppCard from '@/components/AppCard.vue';
     display: none;
   }
 }
+
+.home-view-mobile__swiper {
+  max-width: 366px;
+
+  @media (--breakpoint-tablet-large) {
+    display: none;
+  }
+}
+
+.home-view-mobile__swiper-slide {
+  @media (--breakpoint-tablet-large) {
+    display: none;
+    visibility: hidden;
+  }
+}
 </style>