create profile section

components/ProgressCard.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="thin pinkShadow 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="text-black post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] 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="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="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]"
+          />
+        </div>
+
+        <div
+          class="w-full flex flex-col justify-center space-y-[1.042vw] md:space-y-[1.25vw]"
+        >
+          <p
+            class="mb-[15vw] md:mb-[2.5vw] text-[14px] md:text-[0.833vw] text-[#383E43] ] mt-[4vw] md:mt-[1.042vw] ms-[3vw] md:ms-[0.625vw]"
+          >
+            ترفند های کاربردی پایتون
+          </p>
+
+          <div
+            class="flex flex-col justify-between items-center py-[3vw] md:py-[0.7vw] mx-[3vw] md:mx-[0.833vw] border-t"
+          >
+            <div class="flex justify-between w-full mb-[0.417vw]">
+              <p class="text-[2.836vw] md:text-[0.658vw] text-[#383E43]">میزان مشاهده</p>
+              <p class="text-[3.19vw] md:text-[0.741vw] text-[#383E43]">0 %</p>
+            </div>
+            <div
+            id="progressbar"
+            class="mt-[3vw] md:mt-[0vw] h-[2.051vw] md:h-[0.26vw] rounded-[2vw] md:rounded-[0.521vw]"
+          >
+            <div
+              class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.26vw]"
+            ></div>
+            </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.16vw;
+    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);
+}
+#progressbar {
+  background-color: #e5e5e5;
+
+  width: 100%;
+}
+#progressbar > div {
+  background-color: #0d3f40;
+  width: 77%;
+  float: left;
+
+  left: 0;
+}
+
+
+@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

@@ -9,8 +9,8 @@
         class="text-[0.741vw] text-[#383E43] flex items-center gap-[0.5vw] pb-[0.681vw]"
       >
         <svg
-          width="24"
-          height="25"
+        class="w-[6.154vw] md:w-[1.25vw] h-[6.154vw] md:h-[1.302vw]"
+    
           viewBox="0 0 24 25"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -43,7 +43,7 @@
       </span>
       <ul class="gap-x-[1vw] items-center hidden md:flex">
         <li
-          class="pb-[0.5vw] text-primaryGreen border-b-[0.104vw] border-primaryGreen"
+          class="relative pb-[0.681vw] text-primaryGreen active"
         >
           همه دوره ها
         </li>
@@ -89,4 +89,15 @@ const openSortOptions = () => {
   }
 };
 
-</script>
+</script>
+
+<style>
+.active::before{
+  content: '';
+  position: absolute;
+  background-color: #0D3F40;
+  width: 100%;
+  height: 0.01vw;
+  top: 2vw;
+}
+</style>

components/home-page/About-us.vue

@@ -39,11 +39,11 @@
 </template>
 
 
-<style scoped>
+<style>
 @media (min-width: 768px) { 
 
   .panel {
-    background: url("./images/aboutUs.jpg");
+    background: url("public/images/aboutUs.jpg");
     background-size: cover;
     background-repeat: no-repeat !important;
     clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
@@ -80,7 +80,7 @@
  }
 
  .panel {
-  background: url("./images/aboutUs.jpg");
+  background: url("public/images/aboutUs.jpg");
   background-size: cover;
   background-repeat: no-repeat !important;
   clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);