create frequently questions page

components/product-page/course-details/Course-information.vue

@@ -6,6 +6,7 @@
       class="gap-[2vw] md:gap-[0.5vw] text-[3.59vw] md:text-[1.055vw] font-semibold flex items-center"
     >
       اطلاعات دوره
+   
       <svg
         class="h-[4.359vw] md:h-[1.25vw] w-[4.359vw] md:w-[1.25vw]"
         viewBox="0 0 24 24"
@@ -73,7 +74,7 @@
           </svg>
           تعداد ویدیو ها
         </p>
-        <p class="text-[#383E43] font-semibold">3</p>
+        <p class="text-[#383E43] font-semibold">{{props.props.countOfVideos}}</p>
       </div>
       <div
         class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
@@ -113,7 +114,7 @@
 
           حجم فایل ها
         </p>
-        <p class="text-[#383E43] font-semibold">14 گیگابایت</p>
+        <p class="text-[#383E43] font-semibold">{{props.props.totalFileSize}}</p>
       </div>
       <div
         class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
@@ -149,7 +150,7 @@
           </svg>
           سطح دوره
         </p>
-        <p class="text-[#383E43] font-semibold">متوسط</p>
+        <p class="text-[#383E43] font-semibold">{{props.props.level}}</p>
       </div>
       <div
         class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
@@ -200,19 +201,19 @@
 
           زبان
         </p>
-        <p class="text-[#383E43] font-semibold">فارسی</p>
+        <p class="text-[#383E43] font-semibold">{{props.props.language}}</p>
       </div>
       <div
         class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
       >
         <p class="flex items-center gap-[0.8vw] ps-[2vw]">سطح رضایت</p>
-        <p class="text-[#383E43] font-semibold">5.0</p>
+        <p class="text-[#383E43] font-semibold">{{props.props.satisfactionLevel}}</p>
       </div>
 
       <h2
         class="my-[5vw] md:my-[1.25vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold flex items-center justify-end w-full gap-[0.5vw]"
       >
-        220,000
+        {{props.props.price}},000
         <p class="text-[2.836vw] md:text-[0.741vw]">تومان</p>
       </h2>
       <button
@@ -255,5 +256,5 @@
 
 
 <script setup>
-const paidStatus = useState("paidStatus");
+const props = defineProps(['props'])
 </script>

components/product-page/course-details/Course-status.vue

@@ -43,20 +43,25 @@
           />
         </svg>
       </h2>
-      <span class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
+      <span v-if="props.props.completionPercentage > 99" class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
         >تکمیل شده</span
       >
+      <span v-else-if="props.props.completionPercentage > 1 && props.props.completionPercentage < 99" class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
+        >در حال تکمیل</span
+      >
+      <span v-else class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">در حال تولید</span>
     </div>
     <div>
       <div class="flex justify-between text-[3.19vw] md:text-[0.833vw]">
         <span class="text-[#383E43]">درصد تکمیل دوره</span>
-        <span>77٪</span>
+        <span>{{props.props.completionPercentage}}٪</span>
       </div>
       <div
         id="progressbar"
         class="mt-[3vw] md:mt-[0.7vw] h-[2.051vw] md:h-[0.521vw] rounded-[2vw] md:rounded-[0.521vw]"
       >
         <div
+          :class="`w-[${props.props.completionPercentage}%]`"
           class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
         ></div>
       </div>
@@ -64,7 +69,9 @@
   </div>
 
 </template>
-
+<script setup>
+const props = defineProps(['props'])
+</script>
 <style scoped>
 #progressbar {
     background-color: #e5e5e5;
@@ -73,7 +80,6 @@
   }
   #progressbar > div {
     background-color: #0d3f40;
-    width: 77%;
     float: left;
   
     left: 0;

components/product-page/course-details/Description.vue

@@ -18,11 +18,7 @@
     >
   </div>
   <p class="mt-[4vw] md:mt-[2.1vw] thin">
-    آموزش HTML یکی از اساسی ترین ماموریت های شینان برای پرورش برنامه
-    نویسان وب حرفه ای محسوب میشه. حتما اسمشو شنیدید اما شاید براتون سوال
-    پیش اومده که چرا و چطور باید اون رو یاد گرفت و چه اهمیتی داره؟ میشه
-    گفت الفبای برنامه نویسی وب هست و یادگیری اون اولین پیش نیاز ورود به
-    این تخصص جذاب محسوب میشه.
+{{props.props.description}}
   </p>
   <p class="mt-[3.4vw] thin">
     شینان در کنار شماست تا بدون سردرگمی و گشتن بین آموزش های مختلف، کامل
@@ -47,4 +43,9 @@
     <li>دوست دارید کدهای بهینه تولید کنید تا سئوی قوی تری داشته باشید</li>
   </ul>
 
-</template>
+</template>
+
+<script setup>
+const props = defineProps(['props'])
+
+</script>

components/product-page/course-details/Header.vue

@@ -2,7 +2,7 @@
     <div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
         <NuxtImg
         :placeholder="[30, 20]"
-          :src="props.props.slug.value.image"
+          :src="props.props.image"
           alt="html"
           class="absolute h-[86.41vw] md:h-[40.625vw] top-0 left-0 w-full object-cover brightness-75"
         />
@@ -10,17 +10,15 @@
           <h1
             class="text-[5.751vw] md:text-[1.69vw] font-[600] -tracking-[0.05vw]"
           >
-           {{ props.props.slug.value.name }} 
+           {{ props.props.name }} 
           </h1>
           <p class="text-[3.19vw] md:text-[0.833vw] mt-[0.6vw] text-[#E5E5E5]">
-            برنامه نویسی
+            {{props.props.categories[0].name}}
           </p>
           <p
             class="hidden md:block w-[39.896vw] text-[1.055vw] leading-[1.582vw] mt-[1.2vw]"
           >
-            اولین قدم شروع طراحی وبسایت، آموزش HTML هست. HTML یه زبان نشانه گذاری
-            هست که با کمک اون میتونی تگ هایی بنویسی تا سایت رو روی اون تگ ها پیاده
-            کنی. همونجوری که هیچ موجودی نمیتونه بدون اسکلت زندگی کنه،...
+       {{props.props.description}}
           </p>
           <p
             class="text-[2.836vw] md:text-[0.741vw] text-[##E5E5E5] mt-[1.8vw] absolute bottom-[8vw] md:bottom-auto md:relative"
@@ -117,7 +115,7 @@
               </svg>
               <div class="space-y-[0.3vw]">
                 <p class="text-[3.59vw] md:text-[1.055vw]">آخرین بروزرسانی</p>
-                <p class="text-[2.518vw] md:text-[0.741vw]">1401/12/24</p>
+                <p class="text-[2.518vw] md:text-[0.741vw]">{{props.props.createdAt}}</p>
               </div>
             </div>
             <div class="border-l"></div>
@@ -146,7 +144,7 @@
   
               <div class="space-y-[0.3vw]">
                 <p class="text-[3.59vw] md:text-[1.055vw]">مدت زمان دوره</p>
-                <p class="text-[2.518vw] md:text-[0.741vw]">7 ساعت</p>
+                <p class="text-[2.518vw] md:text-[0.741vw]">{{props.props.duration}} ساعت</p>
               </div>
             </div>
             <div class="border-l"></div>
@@ -188,7 +186,7 @@
               </svg>
   
               <div class="space-y-[0.3vw]">
-                <p class="text-[3.59vw] md:text-[1.055vw]">37546</p>
+                <p class="text-[3.59vw] md:text-[1.055vw]">{{props.props.studentsCount}}</p>
                 <p class="text-[2.518vw] md:text-[0.741vw]">دانشجو</p>
               </div>
             </div>
@@ -199,4 +197,5 @@
 
 <script setup>
 const props = defineProps(['props'])
+
 </script>