From bf2b3769bfba28cf297d816a1559c19d0676c92e Mon Sep 17 00:00:00 2001
From: HAM!DREZA <hamidreza.eidy1999@gmail.com>
Date: Wed, 15 May 2024 16:09:09 +0330
Subject: [PATCH] create courses page

---
 assets/css/tailwind.css                       |   3 +
 components/Card.vue                           | 285 ++++++++++--------
 components/courses-page/Courses-list.vue      |  92 ++++++
 components/courses-page/Pagination.vue        |  51 ++++
 components/courses-page/Sort-filter.vue       |  53 ++++
 components/home-page/About-us.vue             |   2 +-
 components/home-page/Suggested-courses.vue    |   2 +-
 .../home-page/courses-section/Categories.vue  |  90 ++++--
 layouts/default.vue                           |  82 ++---
 layouts/footer.vue                            |   2 +-
 pages/courses/index.vue                       |  11 +-
 11 files changed, 486 insertions(+), 187 deletions(-)
 create mode 100644 components/courses-page/Courses-list.vue
 create mode 100644 components/courses-page/Pagination.vue
 create mode 100644 components/courses-page/Sort-filter.vue

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 617e98d..9395a51 100644
--- a/assets/css/tailwind.css
+++ b/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]
+    }
 }
diff --git a/components/Card.vue b/components/Card.vue
index ef50aed..c475041 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -1,135 +1,174 @@
 <template>
-    <div class="pinkShadow min-h-[21.094vw] rounded-[15px] customShadow bg-white w-[78.462vw] md:w-auto">
-        <div class="relative text-center">
+    <div class="pinkShadow h-[103.846vw] md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] bg-white">
+
+
+        <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]">
-            <p
-                class="text-[14px] md:text-[0.833vw]  text-[#383E43] px-[1.25vw] font-semibold mt-5 ms-3 md:ms-0">
-                ترفند های کاربردی
-                پایتون
-            </p>
-            <div class="flex justify-around">
-                <p class="flex items-center text-[11.06px] md:text-[12.64px] text-[#878787]">
-                    <svg width="19" height="19" 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"
-                            fill="#E5E5E5" stroke="#E5E5E5" stroke-width="1.5"
-                            stroke-linecap="round" stroke-linejoin="round" />
-                        <path d="M9.5 4.34619V16.2212" stroke="white" stroke-linecap="round"
-                            stroke-linejoin="round" />
-                        <path d="M6.13574 6.72119H4.35449" stroke="white" stroke-linecap="round"
-                            stroke-linejoin="round" />
-                        <path d="M6.72949 9.09619H4.35449" stroke="white" stroke-linecap="round"
-                            stroke-linejoin="round" />
-                    </svg>
 
-                    <span class="ms-[1px] md:ms-2">بک اند</span>
+
+
+        <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-[3.59vw] md:text-[0.833vw] text-[#383E43] w-full font-semibold">
+                    ترفند های کاربردی
+                    پایتون
                 </p>
-                <p class="flex items-center text-[11.06px] md:text-[12.64px]  text-[#878787]">
-                    <svg width="19" height="19" 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"
-                            fill="#E5E5E5" />
-                        <path
-                            d="M11.1468 11.202C8.93801 9.72953 5.33592 9.72953 3.11134 11.202C2.10592 11.8749 1.55176 12.7854 1.55176 13.7591C1.55176 14.7329 2.10592 15.6354 3.10342 16.3004C4.21176 17.0445 5.66842 17.4166 7.12509 17.4166C8.58176 17.4166 10.0384 17.0445 11.1468 16.3004C12.1443 15.6274 12.6984 14.7249 12.6984 13.7433C12.6905 12.7695 12.1443 11.867 11.1468 11.202Z"
-                            fill="#E5E5E5" />
-                        <path
-                            d="M15.8259 5.81083C15.9526 7.34666 14.8601 8.6925 13.348 8.87458C13.3401 8.87458 13.3401 8.87458 13.3321 8.87458H13.3084C13.2609 8.87458 13.2134 8.87458 13.1738 8.89041C12.4059 8.93 11.7013 8.68458 11.1709 8.23333C11.9863 7.505 12.4534 6.4125 12.3584 5.225C12.303 4.58375 12.0813 3.99791 11.7488 3.49916C12.0496 3.34875 12.398 3.25375 12.7542 3.22208C14.3059 3.0875 15.6913 4.24333 15.8259 5.81083Z"
-                            fill="#E5E5E5" />
-                        <path
-                            d="M17.4085 13.1337C17.3452 13.9017 16.8544 14.5667 16.031 15.0179C15.2394 15.4533 14.2419 15.6592 13.2523 15.6354C13.8223 15.1208 14.1548 14.4796 14.2181 13.7987C14.2973 12.8171 13.8302 11.875 12.896 11.1229C12.3656 10.7033 11.7481 10.3708 11.0752 10.1254C12.8248 9.61874 15.0256 9.95915 16.3794 11.0517C17.1077 11.6375 17.4798 12.3737 17.4085 13.1337Z"
-                            fill="#E5E5E5" />
-                    </svg>
+                <div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
+                    <p class="flex items-center text-[#878787]">
+                        <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"
+                                fill="#E5E5E5" stroke="#E5E5E5" stroke-width="1.5"
+                                stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M9.5 4.34619V16.2212" stroke="white" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                            <path d="M6.13574 6.72119H4.35449" stroke="white" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                            <path d="M6.72949 9.09619H4.35449" stroke="white" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </svg>
+    
+                        <span class="md:ms-[0.2vw]">بک اند</span>
+                    </p>
+                    <p class="flex items-center text-[#878787]">
+                        <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"
+                                fill="#E5E5E5" />
+                            <path
+                                d="M11.1468 11.202C8.93801 9.72953 5.33592 9.72953 3.11134 11.202C2.10592 11.8749 1.55176 12.7854 1.55176 13.7591C1.55176 14.7329 2.10592 15.6354 3.10342 16.3004C4.21176 17.0445 5.66842 17.4166 7.12509 17.4166C8.58176 17.4166 10.0384 17.0445 11.1468 16.3004C12.1443 15.6274 12.6984 14.7249 12.6984 13.7433C12.6905 12.7695 12.1443 11.867 11.1468 11.202Z"
+                                fill="#E5E5E5" />
+                            <path
+                                d="M15.8259 5.81083C15.9526 7.34666 14.8601 8.6925 13.348 8.87458C13.3401 8.87458 13.3401 8.87458 13.3321 8.87458H13.3084C13.2609 8.87458 13.2134 8.87458 13.1738 8.89041C12.4059 8.93 11.7013 8.68458 11.1709 8.23333C11.9863 7.505 12.4534 6.4125 12.3584 5.225C12.303 4.58375 12.0813 3.99791 11.7488 3.49916C12.0496 3.34875 12.398 3.25375 12.7542 3.22208C14.3059 3.0875 15.6913 4.24333 15.8259 5.81083Z"
+                                fill="#E5E5E5" />
+                            <path
+                                d="M17.4085 13.1337C17.3452 13.9017 16.8544 14.5667 16.031 15.0179C15.2394 15.4533 14.2419 15.6592 13.2523 15.6354C13.8223 15.1208 14.1548 14.4796 14.2181 13.7987C14.2973 12.8171 13.8302 11.875 12.896 11.1229C12.3656 10.7033 11.7481 10.3708 11.0752 10.1254C12.8248 9.61874 15.0256 9.95915 16.3794 11.0517C17.1077 11.6375 17.4798 12.3737 17.4085 13.1337Z"
+                                fill="#E5E5E5" />
+                        </svg>
+    
+                        <span class="md:ms-[0.2vw]">825 دانشجو</span>
+                    </p>
+                    <p class="flex items-center text-[#878787]">
+                        <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="md:ms-[0.2vw]">00:28</span>
+                    </p>
+                </div>
+                <div class="flex justify-between">
+                    <button
+                        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
+                        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"
+                                stroke="white" stroke-width="1.5" stroke-miterlimit="10"
+                                stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+    
+                    </button>
+                    <span>
+                        <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"
+                                fill="white" stroke="url(#paint0_linear_7_1513)" stroke-width="3" />
+                            <path
+                                d="M22.4035 2.00019C25.3093 2.00019 28.1788 2.64834 30.8041 3.89773C33.4295 5.14712 35.745 6.96647 37.5831 9.22406C39.4212 11.4817 40.7358 14.121 41.4318 16.951C42.1278 19.781 42.1877 22.7308 41.6073 25.5869C41.0268 28.443 39.8205 31.1338 38.0756 33.4647C36.3308 35.7955 34.0911 37.708 31.5186 39.0637C28.9462 40.4193 26.1055 41.1842 23.2021 41.303C20.2987 41.4218 17.4052 40.8914 14.7313 39.7504L22.4035 21.6598L22.4035 2.00019Z"
+                                fill="white" stroke="#ABDCDD" stroke-width="3" stroke-linecap="round"
+                                stroke-dasharray="6 6" />
+                            <ellipse cx="22.4002" cy="21.1915" rx="18.2553" ry="17.7322"
+                                transform="rotate(-90 22.4002 21.1915)" fill="white" />
+                            <path
+                                d="M10.6786 30.0149L12.0474 32.761C12.234 33.1433 12.7318 33.5099 13.1518 33.5801L15.6327 33.9936C17.2193 34.2589 17.5926 35.4135 16.4493 36.5525L14.5206 38.4872C14.1939 38.8149 14.015 39.4468 14.1161 39.8993L14.6683 42.2943C15.1039 44.1901 14.1006 44.9234 12.4285 43.9326L10.1031 42.5518C9.68309 42.3021 8.99091 42.3021 8.56316 42.5518L6.23774 43.9326C4.5734 44.9234 3.56235 44.1823 3.99788 42.2943L4.55007 39.8993C4.65117 39.4468 4.4723 38.8149 4.14565 38.4872L2.21688 36.5525C1.0814 35.4135 1.44693 34.2589 3.0335 33.9936L5.51445 33.5801C5.92665 33.5099 6.4244 33.1433 6.61105 32.761L7.97986 30.0149C8.72648 28.5248 9.93974 28.5248 10.6786 30.0149Z"
+                                fill="#0D3F40" />
+                            <path
+                                d="M19.5137 27.3618C19.5244 27.0738 19.5297 26.6471 19.5297 26.0818C19.5297 24.3645 19.4391 22.8125 19.2577 21.4258C19.0231 19.6551 18.6284 18.1351 18.0737 16.8658L19.8497 15.7938C20.0311 16.1671 20.2071 16.6045 20.3777 17.1058C20.5484 17.5538 20.7031 17.9005 20.8417 18.1458C20.9911 18.3911 21.1831 18.5885 21.4177 18.7378C21.6524 18.8765 21.9617 18.9458 22.3457 18.9458C23.3697 18.9458 23.8817 18.2791 23.8817 16.9458C23.8817 16.7005 23.8657 16.4338 23.8337 16.1458L25.5137 15.8098C25.6097 16.2685 25.6577 16.7325 25.6577 17.2018C25.6577 17.9485 25.5351 18.6365 25.2897 19.2658C25.0444 19.8845 24.6711 20.3858 24.1697 20.7698C23.6791 21.1431 23.0817 21.3298 22.3777 21.3298C21.9617 21.3298 21.5671 21.2445 21.1937 21.0738V21.1218C21.3217 22.3271 21.3857 23.8311 21.3857 25.6338C21.3857 26.4018 21.3804 26.9778 21.3697 27.3618H19.5137Z"
+                                fill="#383E43" />
+                            <defs>
+                                <linearGradient id="paint0_linear_7_1513" x1="20.8356" y1="1.21362"
+                                    x2="22.4054" y2="1.99611" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#22A4A6" stop-opacity="0.6" />
+                                    <stop offset="1" stop-color="#22A4A6" stop-opacity="0" />
+                                </linearGradient>
+                            </defs>
+                        </svg>
+                    </span>
+                </div>
 
-                    <span class="ms-[1px] md:ms-2">825 دانشجو</span>
-                </p>
-                <p class="flex items-center text-[11.06px] md:text-[12.64px]  text-[#878787]">
-                    <svg width="19" height="19" 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>
-                </p>
-            </div>
-            <div class="flex justify-between items-center py-5 px-4">
-                <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]">
-                    شروع دوره
-                    <svg width="16" height="16" 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"
-                            stroke="white" stroke-width="1.5" stroke-miterlimit="10"
-                            stroke-linecap="round" stroke-linejoin="round" />
-                    </svg>
-
-                </button>
-                <span>
-                    <svg class="hidden md:block" width="43" height="43" 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"
-                            fill="white" stroke="url(#paint0_linear_7_1513)" stroke-width="3" />
-                        <path
-                            d="M22.4035 2.00019C25.3093 2.00019 28.1788 2.64834 30.8041 3.89773C33.4295 5.14712 35.745 6.96647 37.5831 9.22406C39.4212 11.4817 40.7358 14.121 41.4318 16.951C42.1278 19.781 42.1877 22.7308 41.6073 25.5869C41.0268 28.443 39.8205 31.1338 38.0756 33.4647C36.3308 35.7955 34.0911 37.708 31.5186 39.0637C28.9462 40.4193 26.1055 41.1842 23.2021 41.303C20.2987 41.4218 17.4052 40.8914 14.7313 39.7504L22.4035 21.6598L22.4035 2.00019Z"
-                            fill="white" stroke="#ABDCDD" stroke-width="3" stroke-linecap="round"
-                            stroke-dasharray="6 6" />
-                        <ellipse cx="22.4002" cy="21.1915" rx="18.2553" ry="17.7322"
-                            transform="rotate(-90 22.4002 21.1915)" fill="white" />
-                        <path
-                            d="M10.6786 30.0149L12.0474 32.761C12.234 33.1433 12.7318 33.5099 13.1518 33.5801L15.6327 33.9936C17.2193 34.2589 17.5926 35.4135 16.4493 36.5525L14.5206 38.4872C14.1939 38.8149 14.015 39.4468 14.1161 39.8993L14.6683 42.2943C15.1039 44.1901 14.1006 44.9234 12.4285 43.9326L10.1031 42.5518C9.68309 42.3021 8.99091 42.3021 8.56316 42.5518L6.23774 43.9326C4.5734 44.9234 3.56235 44.1823 3.99788 42.2943L4.55007 39.8993C4.65117 39.4468 4.4723 38.8149 4.14565 38.4872L2.21688 36.5525C1.0814 35.4135 1.44693 34.2589 3.0335 33.9936L5.51445 33.5801C5.92665 33.5099 6.4244 33.1433 6.61105 32.761L7.97986 30.0149C8.72648 28.5248 9.93974 28.5248 10.6786 30.0149Z"
-                            fill="#0D3F40" />
-                        <path
-                            d="M19.5137 27.3618C19.5244 27.0738 19.5297 26.6471 19.5297 26.0818C19.5297 24.3645 19.4391 22.8125 19.2577 21.4258C19.0231 19.6551 18.6284 18.1351 18.0737 16.8658L19.8497 15.7938C20.0311 16.1671 20.2071 16.6045 20.3777 17.1058C20.5484 17.5538 20.7031 17.9005 20.8417 18.1458C20.9911 18.3911 21.1831 18.5885 21.4177 18.7378C21.6524 18.8765 21.9617 18.9458 22.3457 18.9458C23.3697 18.9458 23.8817 18.2791 23.8817 16.9458C23.8817 16.7005 23.8657 16.4338 23.8337 16.1458L25.5137 15.8098C25.6097 16.2685 25.6577 16.7325 25.6577 17.2018C25.6577 17.9485 25.5351 18.6365 25.2897 19.2658C25.0444 19.8845 24.6711 20.3858 24.1697 20.7698C23.6791 21.1431 23.0817 21.3298 22.3777 21.3298C21.9617 21.3298 21.5671 21.2445 21.1937 21.0738V21.1218C21.3217 22.3271 21.3857 23.8311 21.3857 25.6338C21.3857 26.4018 21.3804 26.9778 21.3697 27.3618H19.5137Z"
-                            fill="#383E43" />
-                        <defs>
-                            <linearGradient id="paint0_linear_7_1513" x1="20.8356" y1="1.21362"
-                                x2="22.4054" y2="1.99611" gradientUnits="userSpaceOnUse">
-                                <stop stop-color="#22A4A6" stop-opacity="0.6" />
-                                <stop offset="1" stop-color="#22A4A6" stop-opacity="0" />
-                            </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>
-</template>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/components/courses-page/Courses-list.vue b/components/courses-page/Courses-list.vue
new file mode 100644
index 0000000..e1571da
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/courses-page/Pagination.vue b/components/courses-page/Pagination.vue
new file mode 100644
index 0000000..0f56429
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/courses-page/Sort-filter.vue b/components/courses-page/Sort-filter.vue
new file mode 100644
index 0000000..7f2bd28
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/home-page/About-us.vue b/components/home-page/About-us.vue
index 24a9aab..fa97772 100644
--- a/components/home-page/About-us.vue
+++ b/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>
diff --git a/components/home-page/Suggested-courses.vue b/components/home-page/Suggested-courses.vue
index 9959b06..2d13ee0 100644
--- a/components/home-page/Suggested-courses.vue
+++ b/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 />
diff --git a/components/home-page/courses-section/Categories.vue b/components/home-page/courses-section/Categories.vue
index cf43ba8..0e84521 100644
--- a/components/home-page/courses-section/Categories.vue
+++ b/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>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index e1d46e1..cdf1fdf 100644
--- a/layouts/default.vue
+++ b/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,38 +179,46 @@
               صفحه اصلی
             </span>
           </nuxt-link>
-          <span class="flexBox gap-[0.8vw]">
-            <svg
-              width="1.302vw"
-              height="1.302vw"
-              viewBox="0 0 25 25"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
+          <nuxt-link to="/courses">
+            <span class="flexBox gap-[0.8vw]"
+            :class="{ 'text-primaryGreen': $route.path === '/courses' }"
             >
-              <path
-                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"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                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"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M21.8999 15.5V9.5"
-                stroke="#383E43"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-            دوره های آموزشی
-          </span>
+              <svg
+                width="1.302vw"
+                height="1.302vw"
+                viewBox="0 0 25 25"
+                fill="none"
+                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"
+                  stroke-linecap="round"
+                  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"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                :class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
+                  d="M21.8999 15.5V9.5"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              دوره های آموزشی
+            </span>
+
+          </nuxt-link>
           <span class="flexBox gap-[0.8vw]">
             <svg
               width="1.302vw"
diff --git a/layouts/footer.vue b/layouts/footer.vue
index 66f8807..7624276 100644
--- a/layouts/footer.vue
+++ b/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"
   >
 
 
diff --git a/pages/courses/index.vue b/pages/courses/index.vue
index d64742e..08e8666 100644
--- a/pages/courses/index.vue
+++ b/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>
\ No newline at end of file