create frequently questions page

pages/[product]/index.vue

@@ -1,17 +1,32 @@
 <template>
-  <product-pageAttended-course v-if="paidCourse" />
-  <product-pageCourse-detail :slug="data.data" v-else/>
+  <div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
+    <product-page-course-detailsHeader :props="data.course"/>
+    <div
+      class="flex flex-col flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-[81.04%] mt-[10vw] md:mt-[4.7vw]"
+    >
+      <div
+        class="w-full md:w-[56.354vw] text-[#383E43] text-[3.59vw] md:text-[1.055vw] leading-[5.897vw] md:leading-[1.582vw]"
+      >
+        <product-page-course-detailsDescription :props="data.course" />
+        <product-page-course-detailsHeadlines :props="data.course"/>
+        <product-page-course-detailsComments :props="data.course"/>
+      </div>
+      <div class="w-full md:w-[23.438vw] text-[#383E43]">
+        <product-page-course-detailsCourse-status :props="data.course"/>
+        <product-page-course-detailsCourse-information :props="data.course"/>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 const route = useRoute();
-const data = await useFetch("/api/productId", {
+const  {data}  = await useFetch("/api/productId", {
     method: "POST",
       body: {
         id: route.params.product,
       },
   })
-const paidCourse = useState('paidStatus', () => false)
-
+console.log(data.value.course);
 
 </script>