Updated

frontend/components/home/Hero.vue

@@ -4,34 +4,13 @@
 
 import { Swiper, SwiperSlide } from "swiper/vue";
 import type { SwiperClass } from "swiper/react";
+import useHomeData from "~/composables/api/home/useHomeData";
 
 // state
 
+const { data: homeData } = useHomeData();
 const swiper_instance = ref<SwiperClass | null>(null);
 
-const slides = [
-    {
-        id: 0,
-        title: "TEST"
-    },
-    {
-        id: 1,
-        title: "TEST"
-    },
-    {
-        id: 2,
-        title: "TEST"
-    },
-    {
-        id: 3,
-        title: "TEST"
-    },
-    {
-        id: 4,
-        title: "TEST"
-    }
-];
-
 // methods
 
 const onSwiper = (swiper: SwiperClass) => {
@@ -58,27 +37,36 @@ const onChange = (swiper: SwiperClass) => {
                 @slide-change="onChange"
             >
                 <SwiperSlide
-                    v-for="slide in slides"
+                    v-for="slide in homeData!.sliders"
                     :key="slide.id"
                 >
                     <div class="relative w-full rounded-200 h-[80svh] overflow-hidden">
-                        <img
+                        <video
+                            v-if="!!slide.video"
+                            muted
+                            autoplay
+                            loop
                             class="absolute inset-0 size-full object-cover"
-                            src="/img/hero-bg.jpg"
-                            alt=""
+                            :src="slide.video"
                         />
-                        <div class="size-full absolute z-10 bg-linear-to-t from-black to-transparent" />
+                        <img
+                            v-else
+                            class="absolute inset-0 size-full object-cover"
+                            :src="slide.image!"
+                            :alt="slide.title"
+                        />
+                        <div class="size-full absolute z-10 bg-linear-to-t from-black/50 to-transparent" />
                         <div class="px-20 absolute z-10 w-full bottom-36">
-                            <div class="border-b border-white/10 pb-6">
-                                <h3 class="typo-hero-1 text-white">
-                                    Samsung {{ slide.id }}
+                            <div class="border-b border-white/10 pb-6 flex flex-col gap-4">
+                                <h3 class="typo-h-1 tracking-[-2px] text-white">
+                                    {{ slide.title }}
                                 </h3>
                                 <div class="flex justify-between items-end">
-                                <span class="typo-p-lg text-white">
-                                    توضیحات درمورد این محصول خاص
-                                </span>
+                                    <span class="typo-p-lg text-white">
+                                        {{ slide.description }}
+                                    </span>
                                     <Button class="invert rounded-full hover:bg-transparent">
-                                        خرید Samsung
+                                        مشاهده
                                     </Button>
                                 </div>
                             </div>
@@ -98,7 +86,7 @@ const onChange = (swiper: SwiperClass) => {
                         </button>
                         <div class="flex items-center justify-center gap-3 text-white">
                             <div
-                                v-for="(slide, index) in slides"
+                                v-for="(_slide, index) in homeData!.sliders"
                                 :class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
                                 class="border border-white size-3 rounded-full transition-all duration-200"
                                 @click="swiper_instance?.slideTo(index)"