create frequently questions page

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>