create courses page

components/home-page/courses-section/Categories.vue

@@ -1,17 +1,63 @@
 <template>
   <div class="category">
     <h3
+      v-if="$route.path === '/'"
       class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
     >
       انتخاب گسترده ای از دوره ها
     </h3>
+    <div
+      class="flex flex-col md:flex-row items-start justify-between md:items-center"
+      v-else
+    >
+      <h3
+        class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[6vw] md:mt-[4.103vw] md:mt-[3.2vw] ms-0 md:ms-[1.563vw]"
+      >
+        حرفه آینده را کشف کنید
+      </h3>
+      <span
+        class="mt-[3vw] md:mt-[3vw] text-[#878787] text-[3.59vw] md:text-[0.833vw] md:me-[1.563vw]"
+        >42 ویدیو آموزشی</span
+      >
+    </div>
     <p
-      class="ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
+      class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
     >
       انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید که هر
       ماه منتشر می شود
     </p>
+    <div
+      v-show="$route.path === '/courses'"
+      class="mt-[5vw] md:mt-[2.3vw] mb-[3.2vw] relative"
+    >
+      <svg
+        class="absolute top-[3vw] md:top-[0.9vw] right-[4.5vw] md:right-[2.5vw] h-[5.128vw] md:h-[1.458vw] w-[5.128vw] md:w-[1.458vw]"
+        viewBox="0 0 28 28"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.4168 24.5C19.538 24.5 24.5002 19.5378 24.5002 13.4167C24.5002 7.29552 19.538 2.33334 13.4168 2.33334C7.29567 2.33334 2.3335 7.29552 2.3335 13.4167C2.3335 19.5378 7.29567 24.5 13.4168 24.5Z"
+          stroke="#878787"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M25.6668 25.6667L23.3335 23.3333"
+          stroke="#878787"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
 
+      <input
+        class="w-[100%] md:w-[45vw] h-[10.769vw] md:h-[3.333vw] text-[2.836vw] md:text-[0.741vw] text-[#878787] rounded-[2.564vw] md:rounded-[0.781vw] ps-[12vw] md:ps-[3vw] md:ms-[1.563vw] shadow-sm"
+        type="text"
+        placeholder="نام آموزش ، دوره و ... را وارد کنید"
+      />
+    </div>
     <div class="flexBox px-0 md:px-[1vw] h-[2.813vw] mt-[10vw] md:mt-[2.5vw]">
       <svg
         @click="this.$refs.carousel.next()"
@@ -21,9 +67,8 @@
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-        class="fill-[#878787] hover:fill-[#383E43]"
+          class="fill-[#878787] hover:fill-[#383E43]"
           d="M18.9996 13.1125L16.5371 10.65L12.5246 6.63753C11.6746 5.80003 10.2246 6.40003 10.2246 7.60003V15.3875V22.4C10.2246 23.6 11.6746 24.2 12.5246 23.35L18.9996 16.875C20.0371 15.85 20.0371 14.15 18.9996 13.1125Z"
-         
         />
       </svg>
 
@@ -34,9 +79,7 @@
         :wrapAround="true"
         class="w-full md:w-[95%]"
       >
-      
-        <Slide v-for="slide in categories" :key="slide"
-        >
+        <Slide v-for="slide in categories" :key="slide">
           <div class="categoriesOption">{{ slide }}</div>
         </Slide>
       </Carousel>
@@ -70,26 +113,23 @@ const categories = [
   "Ruby",
   "Node.js",
 ];
-   const breakpoints= {
-      // 700px and up
-      300: {
-        itemsToShow: 3.5,
-        snapAlign: 'end',
-      },
-      700: {
-        itemsToShow: 7.3,
-        snapAlign: 'end',
-      },
-      // 1024 and up
-      1024: {
-        itemsToShow: 8.3,
-        snapAlign: 'end',
-      },
-    }
-
-
+const breakpoints = {
+  // 700px and up
+  300: {
+    itemsToShow: 3.5,
+    snapAlign: "end",
+  },
+  700: {
+    itemsToShow: 7.3,
+    snapAlign: "end",
+  },
+  // 1024 and up
+  1024: {
+    itemsToShow: 8.3,
+    snapAlign: "end",
+  },
+};
 </script>
 
 <style scoped>
-
 </style>