Updated

frontend/components/product/ProductVideo.vue

@@ -1,15 +1,35 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+
+// import
+
+import useGetProduct from "~/composables/api/product/useGetProduct";
+
+// state
+
+const route = useRoute();
+const id = route.params.id as string | undefined;
+
+const { data: product } = useGetProduct(id);
+
+
+</script>
 
 <template>
-    <section class="h-[95svh] w-full relative bg-black mt-[5rem]">
-        <img src="/img/product-3.jpg" class="object-cover absolute size-full" />
-        <div class="size-full absolute inset-0 bg-black/60" />
+    <section class="h-[110svh] w-full relative bg-black mt-[5rem]">
+        <video
+            src="/video/product-video.mp4"
+            class="object-cover absolute size-full"
+            muted
+            autoplay
+            loop
+        />
+        <div class="size-full absolute inset-0 bg-black/20" />
         <StickyCard
-            color="سبز"
-            :price="240000"
-            picture="/img/product-1.jpg"
-            title="نام محصول"
-            class="absolute right-6 bottom-6"
+            color="آبی"
+            :price="product!.price"
+            picture="/img/product-6.webp"
+            :title="product!.name"
+            class="absolute right-10 bottom-10"
         />
     </section>
 </template>