feat: enhance HeroSlider and index page layout with improved styling and overlays

app/components/HeroSlider.vue

@@ -49,7 +49,7 @@ defineExpose({ goTo })
     <SwiperSlide v-for="(slide, index) in props.slides" :key="`${slide.source}-${slide.slug}-${index}`"
       class="h-full w-full">
       <img :src="slide.thumb || slide.poster" :alt="slide.name"
-        class="h-full w-full object-cover object-top lg:object-[72%_center]">
+        class="absolute inset-[-1px] h-[calc(100%+2px)] w-[calc(100%+2px)] max-w-none object-cover object-top lg:object-[72%_center]">
     </SwiperSlide>
   </Swiper>
 </template>

app/pages/index.vue

@@ -289,34 +289,22 @@ useHead({
     <AppHeader />
 
     <div v-if="hero" class="relative bg-black mt-16 md:mt-0">
-      <section class="relative w-full aspect-video md:h-screen overflow-hidden">
+      <section class="relative w-full aspect-video md:h-screen overflow-hidden bg-black after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-1.5 after:bg-black after:z-10">
         <ClientOnly>
-        <HeroSlider
+          <HeroSlider v-if="heroSlides.length" ref="heroSliderRef" :slides="heroSlides"
-          v-if="heroSlides.length"
+            @update:modelValue="heroIndex = $event" />
-          ref="heroSliderRef"
-          :slides="heroSlides"
-          @update:modelValue="heroIndex = $event"
-        />
         </ClientOnly>
 
-      <!-- Dot pattern overlay (desktop) -->
+        <!-- Mobile gradient overlay (bottom only) -->
-      <div class="absolute inset-0 pointer-events-none opacity-30 hidden md:block"
+        <div class="absolute inset-0 z-10 pointer-events-none md:hidden" style="background:linear-gradient(to top, #000000 0%, rgba(0,0,0,0.92) 8%, rgba(0,0,0,0.75) 22%, rgba(0,0,0,0.35) 50%, transparent 78%)">
-        style="background-image:radial-gradient(rgba(0,0,0,0.4) 0.4px, transparent 1px);background-size:3px 3px">
         </div>
 
-      <!-- Mobile gradient overlay -->
+        <!-- Desktop gradient overlay (bottom only) -->
-      <div class="absolute inset-0 pointer-events-none md:hidden" style="background:linear-gradient(to top, black 0%, rgba(15,17,21,0.95) 45%, rgba(15,17,21,0.7) 65%, transparent 85%),
+        <div class="absolute inset-0 z-10 pointer-events-none hidden md:block" style="background:linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.75) 20%, rgba(0,0,0,0.35) 45%, transparent 70%)">
-                  radial-gradient(ellipse at center, transparent 60%, rgba(15,17,26,0.7) 100%)">
-      </div>
-
-      <!-- Desktop gradient overlay -->
-      <div class="absolute inset-0 pointer-events-none hidden md:block" style="background:linear-gradient(to right, rgba(15,17,26,0.6) 0%, rgba(15,17,26,0.1) 30%, transparent 60%),
-                  linear-gradient(to top, #0f111a 0%, transparent 40%),
-                  radial-gradient(ellipse at center, transparent 65%, rgba(15,17,26,0.8) 100%)">
         </div>
 
         <!-- Content overlay -->
-      <div class="absolute inset-0 z-20 flex items-end pb-0 md:pb-[6vw] lg:pb-[5vw] xl:pb-32 pointer-events-none">
+        <div class="absolute inset-0 z-20 flex items-end pb-8 md:pb-[8vw] lg:pb-[7vw] xl:pb-40 pointer-events-none">
           <div class="max-w-350 w-full mx-auto px-4 md:px-8 pointer-events-none">
             <div
               class="max-w-xl mx-auto md:mx-0 md:max-w-[50vw] lg:max-w-2xl flex flex-col items-center md:items-start text-center md:text-left">
@@ -374,7 +362,8 @@ useHead({
                 <!-- Watch Now button -->
                 <NuxtLink :to="movieLink(hero)"
                   class="w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 text-[#0f1115] rounded-full flex items-center justify-center transition-transform hover:scale-105 shadow-[0_0_15px_rgba(254,207,89,0.5)] shrink-0 pointer-events-auto"
-                style="background:linear-gradient(39deg, rgb(254, 207, 89), rgb(255, 241, 204))" aria-label="Xem ngay">
+                  style="background:linear-gradient(39deg, rgb(254, 207, 89), rgb(255, 241, 204))"
+                  aria-label="Xem ngay">
                   <AppIcon name="play" class="size-6 md:size-7 lg:size-8 fill-current" />
                 </NuxtLink>
 
@@ -404,16 +393,15 @@ useHead({
 
       </section>
 
-      <!-- Mobile fade gradient between hero and thumbnails -->
       <!-- Thumbnail navigation -->
       <div
-        class="relative md:absolute md:bottom-8 md:left-auto md:right-8 md:translate-x-0 z-50 flex gap-2 overflow-x-auto max-w-full md:max-w-md lg:max-w-lg py-3 md:py-0 pb-2 md:pb-0 snap-x px-4 md:px-2 pointer-events-auto scroll-smooth [&::-webkit-scrollbar]:hidden bg-black md:bg-transparent"
+        class="relative md:absolute md:bottom-8 md:left-auto md:right-8 md:translate-x-0 z-50 flex gap-2 overflow-x-auto max-w-full md:max-w-md lg:max-w-lg py-3 md:py-0 pb-2 md:pb-0 snap-x px-4 md:px-2 pointer-events-auto scroll-smooth [&::-webkit-scrollbar]:hidden bg-transparent"
         style="scrollbar-width:none;-ms-overflow-style:none">
         <button v-for="(slide, index) in heroSlides" :key="`${slide.source}-${slide.slug}-thumb`" type="button"
           class="relative shrink-0 w-[14vw] sm:w-[10vw] md:w-[7vw] lg:w-[6vw] xl:w-[5vw] max-w-10 md:max-w-18.75 lg:max-w-21.25 aspect-square md:aspect-video transition-all duration-300 rounded-full md:rounded-lg overflow-hidden snap-center transform-gpu border-2 cursor-pointer"
           :class="index === heroIndex ? 'border-white/90 opacity-100 scale-100 shadow-md' : 'border-transparent opacity-80 scale-95 hover:scale-100 hover:opacity-100'"
-          style="-webkit-mask-image:-webkit-radial-gradient(white, black)" :aria-label="`Chuyển đến phim ${index + 1}`"
+          style="-webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black);"
-          @click="goToSlide(index)">
+          :aria-label="`Chuyển đến phim ${index + 1}`" @click="goToSlide(index)">
           <img :src="slide.thumb || slide.poster" :alt="slide.name"
             class="absolute inset-0 h-full w-full object-cover rounded-full md:rounded-lg pointer-events-none">
         </button>