create courses page

assets/css/tailwind.css

@@ -27,4 +27,7 @@ body {
     .categoriesOption{
         @apply font-semibold py-[2.051vw] md:py-[0.625vw] w-[22.821vw] md:w-[8vw] mx-[0.5vw] md:mx-auto gap-2 rounded-[2.051vw] md:rounded-[0.521vw]  border-[1px] border-primaryGreen text-primaryGreen text-[3.59vw] md:text-[1.055vw]
     }
+    .courses{
+        @apply w-[87.69%] md:w-[81.04%] flex flex-col justify-center mt-[18vw]  md:mt-[4.688vw] px-[3.846vw] md:px-[1.563vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]
+    }
 }

components/Card.vue

@@ -1,23 +1,31 @@
 <template>
-    <div class="pinkShadow min-h-[21.094vw] rounded-[15px] customShadow bg-white w-[78.462vw] md:w-auto">
+    <div class="pinkShadow h-[103.846vw] md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] bg-white">
-        <div class="relative text-center">
+
+
+        <div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
             <p
-                class="font-semibold flex justify-center items-center text-[18px] md:text-[0.938vw] text-[#0D3F40] w-[120px] md:w-[39.29%] !absolute post bottom-0 left-0 py-[0.417vw] px-[1.042vw] bg-white rounded-tr-[15px]">
+                class="post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] font-semibold flexBox text-[3.59vw] md:text-[0.938vw] absolute  left-0 bottom-0 bg-white  rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]">
                 540,000
-                <span class="text-[8.72px] md:text-[11.24px] ms-1">تومان</span>
+                <span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]">تومان</span>
             </p>
             <img style="object-fit: cover;" src="/public/images/course.png" alt="laravel"
-                class="min-h-[11.406vw] w-full rounded-t-[15px]">
+                class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]">
         </div>
-        <div class="description w-full flex flex-col justify-center space-y-5 md:space-y-[1.25vw]">
+
+
+
+        <div class="flexBox flex-col">
+            <div class="w-[69.231vw] md:w-[16vw] space-y-[9vw] md:space-y-[1.4vw] mt-[4vw] md:mt-[1vw]">
                 <p
-                class="text-[14px] md:text-[0.833vw]  text-[#383E43] px-[1.25vw] font-semibold mt-5 ms-3 md:ms-0">
+                    class="text-[3.59vw] md:text-[0.833vw] text-[#383E43] w-full font-semibold">
                     ترفند های کاربردی
                     پایتون
                 </p>
-            <div class="flex justify-around">
+                <div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
-                <p class="flex items-center text-[11.06px] md:text-[12.64px] text-[#878787]">
+                    <p class="flex items-center text-[#878787]">
-                    <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
+                        <svg 
+                        class="h-[5.556vw] md:h-[0.99vw] w-[5.556vw] md:w-[0.99vw]"
+                        viewBox="0 0 19 19" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M17.4163 13.2525V3.69713C17.4163 2.74713 16.6405 2.04255 15.6984 2.12171H15.6509C13.9884 2.26421 11.463 3.1113 10.0538 3.99796L9.91926 4.08505C9.68967 4.22755 9.30967 4.22755 9.08009 4.08505L8.88217 3.9663C7.47301 3.08755 4.95551 2.24838 3.29301 2.1138C2.35092 2.03463 1.58301 2.74713 1.58301 3.68921V13.2525C1.58301 14.0125 2.20051 14.725 2.96051 14.82L3.19009 14.8517C4.90801 15.0813 7.56009 15.9521 9.08009 16.7834L9.11176 16.7992C9.32551 16.918 9.66592 16.918 9.87176 16.7992C11.3918 15.96 14.0518 15.0813 15.7776 14.8517L16.0388 14.82C16.7988 14.725 17.4163 14.0125 17.4163 13.2525Z"
@@ -31,10 +39,12 @@
                                 stroke-linejoin="round" />
                         </svg>
     
-                    <span class="ms-[1px] md:ms-2">بک اند</span>
+                        <span class="md:ms-[0.2vw]">بک اند</span>
                     </p>
-                <p class="flex items-center text-[11.06px] md:text-[12.64px]  text-[#878787]">
+                    <p class="flex items-center text-[#878787]">
-                    <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
+                        <svg 
+                        class="h-[5.556vw] md:h-[0.99vw] w-[5.556vw] md:w-[0.99vw]"
+                        viewBox="0 0 19 19" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M7.12467 1.58337C5.05051 1.58337 3.36426 3.26962 3.36426 5.34379C3.36426 7.37837 4.95551 9.02504 7.02967 9.09629C7.09301 9.08837 7.15634 9.08837 7.20384 9.09629C7.21967 9.09629 7.22759 9.09629 7.24342 9.09629C7.25134 9.09629 7.25134 9.09629 7.25926 9.09629C9.28592 9.02504 10.8772 7.37837 10.8851 5.34379C10.8851 3.26962 9.19884 1.58337 7.12467 1.58337Z"
@@ -50,24 +60,28 @@
                                 fill="#E5E5E5" />
                         </svg>
     
-                    <span class="ms-[1px] md:ms-2">825 دانشجو</span>
+                        <span class="md:ms-[0.2vw]">825 دانشجو</span>
                     </p>
-                <p class="flex items-center text-[11.06px] md:text-[12.64px]  text-[#878787]">
+                    <p class="flex items-center text-[#878787]">
-                    <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
+                        <svg
+                        class="h-[5.556vw] md:h-[0.99vw] w-[5.556vw] md:w-[0.99vw]"
+                        viewBox="0 0 19 19" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M9.49967 1.58337C5.13759 1.58337 1.58301 5.13796 1.58301 9.50004C1.58301 13.8621 5.13759 17.4167 9.49967 17.4167C13.8618 17.4167 17.4163 13.8621 17.4163 9.50004C17.4163 5.13796 13.8618 1.58337 9.49967 1.58337ZM12.9434 12.3263C12.8326 12.5163 12.6347 12.6192 12.4288 12.6192C12.3259 12.6192 12.223 12.5955 12.128 12.5321L9.67384 11.0675C9.06426 10.7034 8.61301 9.90379 8.61301 9.19921V5.95337C8.61301 5.62879 8.88217 5.35962 9.20676 5.35962C9.53134 5.35962 9.80051 5.62879 9.80051 5.95337V9.19921C9.80051 9.48421 10.038 9.90379 10.2834 10.0463L12.7376 11.5109C13.0226 11.6771 13.1176 12.0413 12.9434 12.3263Z"
                                 fill="#E5E5E5" />
                         </svg>
     
-                    <span class="ms-[1px] md:ms-2">00:28</span>
+                        <span class="md:ms-[0.2vw]">00:28</span>
                     </p>
                 </div>
-            <div class="flex justify-between items-center py-5 px-4">
+                <div class="flex justify-between">
                     <button
-                    class="flex items-center justify-center gap-2 h-[37px] md:h-[2.292vw] px-[12px] md:px-[30px] py-[10px] bg-[#0D3F40] text-white text-[12.44px] md:text-[0.833vw] rounded-[10px] w-[105px] md:w-[152px]">
+                        class="mt-[0.5vw] flex items-center justify-center gap-[0.417vw]  md:h-[2.292vw] px-[4.103vw] md:px-[1.563vw] py-[2.308vw] md:py-[0.521vw] bg-primaryGreen text-white text-[3.19vw] md:text-[0.833vw] rounded-[2.564vw] md:rounded-[0.521vw] md:w-[7.917vw]">
                         شروع دوره
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+                        <svg
+                        class="w-[4.575vw] md:w-[0.833vw] h-[4.575vw] md:h-[0.833vw]"
+                        viewBox="0 0 16 16" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M10.0002 13.28L5.65355 8.93331C5.14022 8.41997 5.14022 7.57997 5.65355 7.06664L10.0002 2.71997"
@@ -77,7 +91,7 @@
     
                     </button>
                     <span>
-                    <svg class="hidden md:block" width="43" height="43" viewBox="0 0 44 46"
+                        <svg class="mt-[0.5vw] w-[8.718vw] md:w-[2.24vw] h-[8.718vw] md:h-[2.24vw]" viewBox="0 0 44 46"
                             fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M22.4035 2C19.8297 2 17.2812 2.50851 14.9033 3.4965C12.5255 4.48448 10.365 5.9326 8.54504 7.75816C6.72512 9.58372 5.28149 11.751 4.29656 14.1362C3.31163 16.5214 2.80469 19.0778 2.80469 21.6596C2.80469 24.2413 3.31163 26.7978 4.29656 29.183C5.28149 31.5682 6.72512 33.7354 8.54504 35.561C10.365 37.3866 12.5255 38.8347 14.9033 39.8227C17.2812 40.8106 19.8297 41.3191 22.4035 41.3191L22.4035 21.6596V2Z"
@@ -102,34 +116,59 @@
                                 </linearGradient>
                             </defs>
                         </svg>
-                    <svg class="block md:hidden" width="41" height="41" viewBox="0 0 41 41"
-                        fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                            d="M20.5 2C18.0705 2 15.6649 2.47852 13.4204 3.40823C11.1758 4.33794 9.13641 5.70064 7.41852 7.41852C5.70064 9.13641 4.33794 11.1758 3.40823 13.4204C2.47852 15.6649 2 18.0705 2 20.5C2 22.9295 2.47852 25.3351 3.40823 27.5796C4.33794 29.8242 5.70064 31.8636 7.41853 33.5815C9.13641 35.2994 11.1758 36.6621 13.4204 37.5918C15.6649 38.5215 18.0705 39 20.5 39L20.5 20.5V2Z"
-                            fill="white" stroke="url(#paint0_linear_8_2874)" stroke-width="3" />
-                        <path
-                            d="M20.5 2C23.2429 2 25.9515 2.60993 28.4297 3.78562C30.9078 4.96131 33.0935 6.67335 34.8286 8.79779C36.5636 10.9222 37.8045 13.4059 38.4615 16.069C39.1185 18.732 39.1751 21.5079 38.6271 24.1955C38.0792 26.8831 36.9405 29.4153 35.2935 31.6086C33.6465 33.802 31.5323 35.6017 29.1041 36.8774C26.6759 38.1531 23.9944 38.8729 21.2538 38.9846C18.5132 39.0964 15.782 38.5973 13.258 37.5236L20.5 20.5L20.5 2Z"
-                            fill="white" stroke="#ABDCDD" stroke-width="3" stroke-linecap="round"
-                            stroke-dasharray="6 6" />
-                        <ellipse cx="20.5" cy="20" rx="17" ry="16.5" transform="rotate(-90 20.5 20)"
-                            fill="white" />
-                        <path
-                            d="M8.00911 28.0475L9.03578 30.1009C9.17578 30.3867 9.54911 30.6609 9.86411 30.7134L11.7249 31.0225C12.9149 31.2209 13.1949 32.0842 12.3374 32.9359L10.8908 34.3825C10.6458 34.6275 10.5116 35.1 10.5874 35.4384L11.0016 37.2292C11.3283 38.6467 10.5758 39.195 9.32161 38.4542L7.57745 37.4217C7.26245 37.235 6.74328 37.235 6.42245 37.4217L4.67828 38.4542C3.42995 39.195 2.67161 38.6409 2.99828 37.2292L3.41245 35.4384C3.48828 35.1 3.35411 34.6275 3.10911 34.3825L1.66245 32.9359C0.81078 32.0842 1.08495 31.2209 2.27495 31.0225L4.13578 30.7134C4.44495 30.6609 4.81828 30.3867 4.95828 30.1009L5.98495 28.0475C6.54495 26.9334 7.45495 26.9334 8.00911 28.0475Z"
-                            fill="#0D3F40" />
-                        <path
-                            d="M18.5137 26.3618C18.5244 26.0738 18.5297 25.6471 18.5297 25.0818C18.5297 23.3645 18.4391 21.8125 18.2577 20.4258C18.0231 18.6551 17.6284 17.1351 17.0737 15.8658L18.8497 14.7938C19.0311 15.1671 19.2071 15.6045 19.3777 16.1058C19.5484 16.5538 19.7031 16.9005 19.8417 17.1458C19.9911 17.3911 20.1831 17.5885 20.4177 17.7378C20.6524 17.8765 20.9617 17.9458 21.3457 17.9458C22.3697 17.9458 22.8817 17.2791 22.8817 15.9458C22.8817 15.7005 22.8657 15.4338 22.8337 15.1458L24.5137 14.8098C24.6097 15.2685 24.6577 15.7325 24.6577 16.2018C24.6577 16.9485 24.5351 17.6365 24.2897 18.2658C24.0444 18.8845 23.6711 19.3858 23.1697 19.7698C22.6791 20.1431 22.0817 20.3298 21.3777 20.3298C20.9617 20.3298 20.5671 20.2445 20.1937 20.0738V20.1218C20.3217 21.3271 20.3857 22.8311 20.3857 24.6338C20.3857 25.4018 20.3804 25.9778 20.3697 26.3618H18.5137Z"
-                            fill="#383E43" />
-                        <defs>
-                            <linearGradient id="paint0_linear_8_2874" x1="19.02" y1="1.26" x2="20.5"
-                                y2="2" gradientUnits="userSpaceOnUse">
-                                <stop stop-color="#22A4A6" stop-opacity="0.6" />
-                                <stop offset="1" stop-color="#22A4A6" stop-opacity="0" />
-                            </linearGradient>
-                        </defs>
-                    </svg>
-
                     </span>
                 </div>
+
+            </div>
         </div>
     </div>
 </template>
+
+<style scoped>
+.post::before {
+    content: "";
+    position: absolute;
+    top: -8.1vw;
+    left: 0vw;
+    width: 3vw;
+    height: 8.1vw;
+    border-bottom-left-radius: 0.781vw;
+    box-shadow: -0.03vw 0.8vw 0 -0.026vw rgb(255, 255, 255);
+}
+.post::after {
+    content: "";
+    position: absolute;
+    top: 0.15vw;
+    left: 100%;
+    width: 3.083vw;
+    height: 2.083vw;
+    border-bottom-left-radius: 0.781vw;
+    box-shadow: -0.26vw 1.042vw 0 0.026vw rgb(255, 255, 255);
+}
+
+
+
+@media (max-width: 768px) {
+    .post::before {
+        content: "";
+        position: absolute;
+        top: -8.1vw;
+        left: 0vw;
+        width: 3vw;
+        height: 8.1vw;
+        border-bottom-left-radius: 3.59vw;
+        box-shadow: -0.03vw 2.8vw 0 -0.026vw rgb(255, 255, 255) ;
+    }
+    .post::after {
+        content: "";
+        position: absolute;
+        top: 3.4vw;
+        left: 100%;
+        width: 5.083vw;
+        height: 6.083vw;
+        border-bottom-left-radius: 3.59vw;
+        box-shadow: -1vw 2vw 0 0.026vw rgb(255, 255, 255) ;
+    }
+
+}
+</style>

components/courses-page/Courses-list.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.3vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
+  >
+    <div
+      class="ps-[1.5vw] border-b-[2px] mt-[2vw] flex gap-x-[1vw] items-center text-[0.833vw] text-[#878787]"
+    >
+      <span
+        class="text-[0.741vw] text-[#383E43] flex items-center gap-[0.5vw] pb-[0.681vw]"
+      >
+        <svg
+          width="24"
+          height="25"
+          viewBox="0 0 24 25"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3 7.5H21"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M6 12.5H18"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M10 17.5H14"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+        </svg>
+        <span class="hidden md:block"> مرتب سازی بر اساس: </span>
+        <span
+          class="block md:hidden text-[3.59vw] py-[2vw] ps-[1vw]"
+          @click="openSortOptions"
+          >مرتب سازی</span
+        >
+      </span>
+      <ul class="gap-x-[1vw] items-center hidden md:flex">
+        <li
+          class="pb-[0.681vw] text-primaryGreen border-b-[2px] border-primaryGreen"
+        >
+          همه دوره ها
+        </li>
+        <li class="pb-[0.681vw]">دوره های رایگان</li>
+        <li class="pb-[0.681vw]">ارزان ترین</li>
+        <li class="pb-[0.681vw]">گران ترین</li>
+      </ul>
+    </div>
+    <div
+      class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
+    >
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+      <Card />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const openSortOptions = () => {
+  if (process.client) {
+    document
+      .getElementById("filters")
+      .classList.remove("translate-y-[80.769vw]");
+    document.getElementsByTagName("html")[0].classList.add("overflow-hidden");
+    document.getElementById("brightnessFilter").style.filter =
+      "brightness(50%)";
+    document.getElementById("brightnessFilter").style.backdropFilter =
+      "brightness(90%)";
+  }
+};
+
+</script>

components/courses-page/Pagination.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="flexBox py-[5vw] md:py-[2vw]">
+    <ul class="flexBox gap-[6vw] md:gap-[2vw] text-[4.038vw] md:text-[1.055vw] text-[#383E43]">
+      <li>
+        <svg
+          class="w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.91016 19.9201L15.4302 13.4001C16.2002 12.6301 16.2002 11.3701 15.4302 10.6001L8.91016 4.08008"
+            stroke="#292D32"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </li>
+
+      <li>53</li>
+
+      <li>...</li>
+
+      <li>3</li>
+
+      <li>2</li>
+
+      <li class="flexBox bg-primaryGreen text-white w-[7.692vw] md:w-[2.292vw] h-[7.692vw] md:h-[2.292vw] rounded-[50%]">1</li>
+
+      <li>
+        <svg
+        class="w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14.9998 19.9201L8.47984 13.4001C7.70984 12.6301 7.70984 11.3701 8.47984 10.6001L14.9998 4.08008"
+            stroke="#292D32"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </li>
+    </ul>
+  </div>
+</template>

components/courses-page/Sort-filter.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    id="filters"
+    class="text-[#333333] rounded-t-[4.103vw] p-[5vw] flex flex-col fixed bg-white bottom-0 left-0 z-[1000] h-[80.769vw] translate-y-[80.769vw] duration-500 w-[100vw]"
+  >
+    <div class="flex items-center justify-between w-full">
+      <span class="text-[3.59vw]">مرتب سازی بر اساس</span>
+      <svg
+        @click="closeSortOptions"
+        class="w-[5.641vw] h-[5.641vw]"
+        viewBox="0 0 22 22"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.41663 6.41675L15.5833 15.5834M6.41663 15.5834L15.5833 6.41675"
+          stroke="#878787"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+
+    <ul class="mt-[4vw] text-[3.19vw] px-[2vw]">
+      <li class="border-b py-[4vw] flex justify-between items-center">
+        <span>
+            همه ی دوره ها
+        </span>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+    </li>
+      <li class="border-b py-[4vw]">دوره های رایگان</li>
+      <li class="border-b py-[4vw]">ارزانترین</li>
+      <li class="py-[4vw]">گرانترین</li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+const closeSortOptions = () => {
+  if (process.client) {
+    document.getElementById("brightnessFilter").style.filter = "none";
+    document.getElementById("brightnessFilter").style.backdropFilter = "none";
+    document.getElementById("filters").classList.add("translate-y-[80.769vw]");
+    document
+      .getElementsByTagName("html")[0]
+      .classList.remove("overflow-hidden");
+  }
+};
+
+</script>

components/home-page/About-us.vue

@@ -28,7 +28,7 @@
       </div>
 
       <div class="relative basis-1/1 md:basis-1/2">
-        <div class="grid-gallery mt-0 md:mt-[3.906vw] pb-[105vw] md:pb-0">
+        <div class="grid-gallery mt-0 md:mt-[3.906vw] pb-[120vw] md:pb-0">
           <div class="panel"></div>
           <div class="panel"></div>
           <div class="panel"></div>

components/home-page/Suggested-courses.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex justify-center">
       <div
-        class="courses w-[87.69%] md:w-[81.04%] flex flex-col justify-center mt-[18vw]  md:mt-[4.688vw] px-[3.846vw] md:px-[1.563vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]"
+        class="courses"
       >
         <home-page-courses-sectionCategories />
         <home-page-courses-sectionSuggestedCourses />

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()"
@@ -23,7 +69,6 @@
         <path
           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= {
+const breakpoints = {
   // 700px and up
   300: {
     itemsToShow: 3.5,
-        snapAlign: 'end',
+    snapAlign: "end",
   },
   700: {
     itemsToShow: 7.3,
-        snapAlign: 'end',
+    snapAlign: "end",
   },
   // 1024 and up
   1024: {
     itemsToShow: 8.3,
-        snapAlign: 'end',
+    snapAlign: "end",
   },
-    }
+};
-
-
 </script>
 
 <style scoped>
-
 </style>

layouts/default.vue

@@ -143,29 +143,33 @@
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
+                :class="{ 'stroke-primaryGreen': $route.path === '/' }"
                   d="M6.94 2.5H18.05C21.61 2.5 22.5 3.39 22.5 6.94V13.27C22.5 16.83 21.61 17.71 18.06 17.71H6.94C3.39 17.72 2.5 16.83 2.5 13.28V6.94C2.5 3.39 3.39 2.5 6.94 2.5Z"
-                  stroke="#0D3F40"
+                  stroke="#383E43"
                   stroke-width="1.5"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                 />
                 <path
+                :class="{ 'stroke-primaryGreen': $route.path === '/' }"
                   d="M12.5 17.72V22.5"
-                  stroke="#0D3F40"
+                  stroke="#383E43"
                   stroke-width="1.5"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                 />
                 <path
+                :class="{ 'stroke-primaryGreen': $route.path === '/' }"
                   d="M2.5 13.5H22.5"
-                  stroke="#0D3F40"
+                  stroke="#383E43"
                   stroke-width="1.5"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                 />
                 <path
+                :class="{ 'stroke-primaryGreen': $route.path === '/' }"
                   d="M8 22.5H17"
-                  stroke="#0D3F40"
+                  stroke="#383E43"
                   stroke-width="1.5"
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -175,7 +179,10 @@
               صفحه اصلی
             </span>
           </nuxt-link>
-          <span class="flexBox gap-[0.8vw]">
+          <nuxt-link to="/courses">
+            <span class="flexBox gap-[0.8vw]"
+            :class="{ 'text-primaryGreen': $route.path === '/courses' }"
+            >
               <svg
                 width="1.302vw"
                 height="1.302vw"
@@ -184,6 +191,7 @@
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
+                :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
                   d="M10.55 3.03004L4.53002 6.96004C2.60002 8.22004 2.60002 11.04 4.53002 12.3L10.55 16.23C11.63 16.94 13.41 16.94 14.49 16.23L20.48 12.3C22.4 11.04 22.4 8.23004 20.48 6.97004L14.49 3.04004C13.41 2.32004 11.63 2.32004 10.55 3.03004Z"
                   stroke="#383E43"
                   stroke-width="1.5"
@@ -191,6 +199,7 @@
                   stroke-linejoin="round"
                 />
                 <path
+                :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
                   d="M6.13012 13.58L6.12012 18.27C6.12012 19.54 7.10012 20.9 8.30012 21.3L11.4901 22.36C12.0401 22.54 12.9501 22.54 13.5101 22.36L16.7001 21.3C17.9001 20.9 18.8801 19.54 18.8801 18.27V13.63"
                   stroke="#383E43"
                   stroke-width="1.5"
@@ -198,6 +207,7 @@
                   stroke-linejoin="round"
                 />
                 <path
+                :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
                   d="M21.8999 15.5V9.5"
                   stroke="#383E43"
                   stroke-width="1.5"
@@ -207,6 +217,8 @@
               </svg>
               دوره های آموزشی
             </span>
+
+          </nuxt-link>
           <span class="flexBox gap-[0.8vw]">
             <svg
               width="1.302vw"

layouts/footer.vue

@@ -126,7 +126,7 @@
         $route.path === '/reset-password' ||
         $route.path === '/new-password',
     }"
-    class="px-[5vw] flex justify-around items-center md:hidden h-[19.479vw] shadow-2xl border-t"
+    class="fixed bottom-0 px-[5vw] flex bg-white w-full justify-around items-center md:hidden h-[19.479vw] shadow-2xl border-t"
   >
 
 

pages/courses/index.vue

@@ -1,3 +1,12 @@
 <template>
-    دوره ها
+    <div id="brightnessFilter"  class="flex justify-center -mt-[12vw] mb-[25vw] md:my-[5.9vw] ">
+        <div class="courses">
+            <div >
+                <home-page-courses-sectionCategories />
+                <courses-pageCourses-list />
+                <courses-pagePagination />
+            </div>
+        </div>
+    </div>
+    <courses-pageSort-filter />
 </template>