create single page of courses

layouts/default.vue

@@ -74,7 +74,7 @@
           class="h-[3.698vw] w-[3.698vw]"
         />
         <div
-          class="relative navigator flexBox gap-[2vw] text-[0.938vw] text-[#383E43] font-semibold"
+          class="relative navigator flexBox gap-[2.2vw] text-[0.938vw] text-[#383E43] font-medium"
         >
           <div id="searchBox" class="hidden absolute right-0 w-full">
             <svg
@@ -102,10 +102,12 @@
             <input
               type="text"
               placeholder="نام آموزش، دوره و... را وارد کنید"
-              class="w-full h-[2.604vw] rounded-[0.521vw] bg-[#F5F5F5] text-[#878787] text-[0.658vw] ps-[3vw]"
+              class="thin w-full h-[2.604vw] rounded-[0.521vw] bg-[#F5F5F5] text-[#878787] text-[0.658vw] ps-[3vw]"
             />
           </div>
-          <div class="border-e pe-[1vw] cursor-pointer" @click="openSearchBox">
+
+
+          <div class="border-e pe-[0.8vw] cursor-pointer" @click="openSearchBox">
             <svg
               width="1.458vw"
               height="1.406vw"
@@ -132,7 +134,7 @@
 
           <nuxt-link to="/">
             <span
-              class="flexBox gap-[0.8vw]"
+              class="flexBox gap-[0.6vw] !-ms-[0.8vw]"
               :class="{ 'text-primaryGreen': $route.path === '/' }"
             >
               <svg
@@ -180,7 +182,7 @@
             </span>
           </nuxt-link>
           <nuxt-link to="/courses">
-            <span class="flexBox gap-[0.8vw]"
+            <span class="flexBox gap-[0.6vw]"
             :class="{ 'text-primaryGreen': $route.path === '/courses' }"
             >
               <svg
@@ -220,7 +222,7 @@
 
           </nuxt-link>
           <nuxt-link to="/about-us">
-            <span class="flexBox gap-[0.8vw]"
+            <span class="flexBox gap-[0.6vw]"
             :class="{ 'text-primaryGreen': $route.path === '/about-us' }"
             >
               <svg