new changes

frontend/components/product/ProductHero.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 // state
 const quantity = ref(1);
 const maxQuantity = ref(10);
@@ -8,61 +7,56 @@ const selectedSlide = ref(0);
 const slides = [
     {
         id: 0,
-        picture: "/img/product-1.jpg"
+        picture: "/img/product-1.jpg",
     },
     {
         id: 1,
-        picture: "/img/product-2.jpg"
+        picture: "/img/product-2.jpg",
     },
     {
         id: 2,
-        picture: "/img/product-3.jpg"
-    }
+        picture: "/img/product-3.jpg",
+    },
 ];
-
 </script>
 
 <template>
-    <div class="flex gap-12 container">
+    <div class="flex gap-12 container pt-[5rem]">
         <Slider
             class="flex-1"
             v-model:selectedSlide="selectedSlide"
             :slides="slides"
         />
         <div class="flex-1 flex flex-col gap-3 mt-12">
-            <span class="typo-label-sm">
-                سامسونگ
-            </span>
-            <h1 class="typo-h-2">
-                موبایل Nova
-            </h1>
+            <span class="typo-label-sm"> سامسونگ </span>
+            <h1 class="typo-h-2">موبایل Nova</h1>
             <div class="flex w-full items-center justify-between">
-                <span class="typo-p-2xl">
-                    $689.00
-                </span>
+                <span class="typo-p-2xl"> $689.00 </span>
                 <Rating />
             </div>
             <p class="typo-p-md text-slate-500 text-justify">
-                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
-                متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
-                کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته.
+                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+                استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
+                در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
+                نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                کتابهای زیادی در شصت و سه درصد گذشته.
             </p>
             <div class="w-full flex flex-col gap-6 mt-4">
-                <RemainQuantity :maxQuantity="maxQuantity" :quantity="quantity" />
+                <RemainQuantity
+                    :maxQuantity="maxQuantity"
+                    :quantity="quantity"
+                />
                 <div class="w-full flex gap-3 flex-col">
                     <div class="w-full flex gap-3">
-                        <Button
-                            class="w-full rounded-full"
-                            end-icon="ci:plus"
-                        >
+                        <Button class="w-full rounded-full" end-icon="ci:plus">
                             افزودن به سبد خرید
                         </Button>
-                        <QuantityCounter v-model="quantity" :max="maxQuantity" />
+                        <QuantityCounter
+                            v-model="quantity"
+                            :max="maxQuantity"
+                        />
                     </div>
-                    <Button
-                        class="w-full rounded-full"
-                        variant="outlined"
-                    >
+                    <Button class="w-full rounded-full" variant="outlined">
                         همین الان بخر
                     </Button>
                 </div>
@@ -71,4 +65,4 @@ const slides = [
             </div>
         </div>
     </div>
-</template>
+</template>

frontend/components/product/Video.vue

@@ -1,14 +1,9 @@
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>
 
 <template>
-    <div class="h-[95svh] w-full relative bg-black my-20">
-        <img
-            src="/img/product-3.jpg"
-            class="object-cover absolute size-full"
-        />
-        <div class="size-full absolute inset-0 bg-black/60"/>
+    <div 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" />
         <StickyCard
             color="سبز"
             :price="240000"
@@ -17,4 +12,4 @@
             class="absolute right-6 bottom-6"
         />
     </div>
-</template>
+</template>