refactor: revamp homepage

assets/css/main.scss

@@ -1,17 +1,9 @@
 @import "media";
 
-.page {
-  @apply overflow-x-hidden scroll-smooth;
-}
-
 .body {
   @apply text-rui-text;
 }
 
-.container {
-  @apply px-4 md:px-12 xl:px-16;
-}
-
 .fade-enter-active, .fade-leave-active {
   transition: opacity .4s;
 }

assets/css/tailwind.css

@@ -3,3 +3,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.container {
+    @apply px-4 md:px-12 xl:px-16;
+}

components/NavigationMenu.vue

@@ -60,7 +60,7 @@ const menus: Menu[] = [
       :external="menu.external"
       :to="menu.to"
     >
-      <span> {{ menu.label }} </span>
+      {{ menu.label }}
       <template v-if="menu.external" #append>
         <RuiIcon size="18" name="external-link-line" />
       </template>

components/common/AppShowcaseSlider.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import { Autoplay } from 'swiper/modules';
+import { SwiperSlide } from 'swiper/vue';
+import { type Swiper } from 'swiper/types';
+import { get, set } from '@vueuse/core';
+
+const css = useCssModule();
+
+const swiper = ref<Swiper>();
+const pages = ref(get(swiper)?.snapGrid.length ?? 1);
+const activeIndex = ref((get(swiper)?.activeIndex ?? 0) + 1);
+
+const images = ref([]);
+
+const scanImages = () => {
+  const assetContext = import.meta.glob(
+    '~/public/img/screenshots/*.(png|jpe?g|webp)',
+  );
+
+  const assetPaths = Object.keys(assetContext).map((path) =>
+    path.replace('/public/img', '/img'),
+  );
+
+  set(images, assetPaths);
+};
+
+const onSwiperUpdate = (s: Swiper) => {
+  set(swiper, s);
+  set(activeIndex, s.activeIndex + 1);
+  set(pages, s.snapGrid.length);
+};
+
+scanImages();
+</script>
+
+<template>
+  <div :class="css.container" class="container">
+    <Carousel
+      :autoplay="{
+        delay: 5000,
+        disableOnInteraction: false,
+        pauseOnMouseEnter: true,
+      }"
+      :modules="[Autoplay]"
+      auto-height
+      :class="css.slider"
+      @swiper="onSwiperUpdate($event)"
+      @slide-change="onSwiperUpdate($event)"
+    >
+      <SwiperSlide v-for="(image, i) in images" :key="i">
+        <img :src="image" alt=" " class="w-full" />
+      </SwiperSlide>
+    </Carousel>
+    <div class="container relative !px-0">
+      <div :class="css.controls">
+        <CarouselControls
+          v-if="swiper"
+          v-model:swiper="swiper"
+          :active-index="activeIndex"
+          :pages="pages"
+          arrow-buttons
+        />
+        <div :class="css.thumbnail">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  @apply flex flex-col relative;
+
+  .slider {
+    @apply rounded-lg md:rounded-2xl lg:rounded-3xl border border-black/[0.12];
+  }
+
+  .controls {
+    @apply flex flex-col md:absolute top-0 mt-4 transform md:translate-y-[calc(-50%-2.5rem)] md:-left-6 md:-right-6 items-center justify-center z-[1];
+
+    .thumbnail {
+      @apply px-8 py-2 md:py-6 rounded-xl border border-black/[.12] bg-white;
+      box-shadow: 4px 32px 80px 0 rgba(191, 194, 203, 0.24);
+    }
+  }
+}
+</style>

components/common/PageContainer.vue

@@ -17,7 +17,7 @@ const slots = useSlots();
 </script>
 
 <template>
-  <div :class="css.wrapper">
+  <div :class="css.wrapper" class="container">
     <div
       :class="{
         [css.content]: true,
@@ -49,7 +49,7 @@ const slots = useSlots();
 @import '@/assets/css/main.scss';
 
 .wrapper {
-  @apply container flex flex-col min-h-full flex-grow py-12;
+  @apply flex flex-col min-h-full flex-grow py-12;
 }
 
 .subtitle {