diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 9395a51..b60cdec 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,9 +1,14 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 @font-face {
     font-family: "Iransans";
-    src: url(~/public/fonts/IRANSansWebFaNum.woff2) format("woff2");
+    src: url(~/public/fonts/IRANSansXFaNum-Medium.woff2) format("woff2");
+}
+@font-face {
+    font-family: "thinSans";
+    src: url(~/public/fonts/IRANSansXFaNum-Regular.woff2) format("woff2");
 }
 body {
     font-family: "Iransans";
@@ -13,6 +18,12 @@ body {
     .pinkShadow {
         filter: drop-shadow(0px 0px 2px #a6228527);
     }
+    .smallShadow{
+        box-shadow: 0px 0px 5px 0px #0000001A;
+    }
+    .thin{
+        font-family: "thinSans";
+    }
 }
 @layer components {
     .loginInput{
diff --git a/components/Card.vue b/components/Card.vue
index c475041..8464f9a 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -4,7 +4,7 @@
 
         <div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
             <p
-                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]">
+                class="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>
@@ -15,12 +15,12 @@
 
 
         <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">
+            <div class="w-[69.231vw] md:w-[16vw] space-y-[9vw] md:space-y-[1.4vw] mt-[4vw] md:mt-[0vw] xl:mt-[0.7vw]">
+                <NuxtLink to="/ترفندهای-پایتون"
+                    class="hover:text-primaryGreen text-[3.59vw] md:text-[0.833vw] text-[#383E43] w-full">
                     ترفند های کاربردی
                     پایتون
-                </p>
+               </NuxtLink>
                 <div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
                     <p class="flex items-center text-[#878787]">
                         <svg 
@@ -77,7 +77,7 @@
                 </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]">
+                        class="font-[500] mt-[0.5vw] flex items-center justify-center gap-[0.417vw]  md:h-[2.292vw] px-[4.103vw] md:px-0 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]"
diff --git a/components/about-us/Header.vue b/components/about-us/Header.vue
new file mode 100644
index 0000000..5c7cfd9
--- /dev/null
+++ b/components/about-us/Header.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="h-[40.625vw] mt-[7.4vw] relative w-full flex flex-col md:flex-row justify-between">
+        <div
+          class="flexBox bg-white absolute -right-[65vw] rounded-b-[50%]  md:right-0 w-[230vw] md:w-[42vw] -top-[60vw] md:-top-[10vw] z-[1] h-[121.538vw] md:h-[60.625vw] md:rounded-b-[0vw] md:!rounded-l-[27vw]"
+        >
+          <div class="flex mt-[45vw] ms-[45vw] md:ms-[10vw] md:mt-[1.3vw] flex-col text-[#383E43]">
+            <h2 class="text-[7.264vw] md:text-[2.344vw] border-b w-[65vw] md:w-[14vw] pb-[1.2vw] font-bold md:-tracking-[0.1vw]">
+              درباره ما
+            </h2>
+            <p class="font-[400] text-[5.192vw] md:text-[1.69vw] w-[50%] md:w-[80%] md:w-[24.688vw] mt-[2.5vw] leading-[10.79vw] md:leading-[3vw]">
+              ما از
+              <span class="font-semibold"> قدرت آموزش </span>
+              برای ایجاد
+              <span class="font-semibold">تغییرات معنادار</span>
+              استفاده می کنیم.
+            </p>
+          </div>
+        </div>
+        <img
+          class="top-[55vw] md:top-0 md:h-[40.625vw] left-0 absolute"
+          src="/public/images/aboutHead.jpg"
+          alt="header-image"
+        />
+      </div>
+</template>
\ No newline at end of file
diff --git a/components/about-us/Information.vue b/components/about-us/Information.vue
new file mode 100644
index 0000000..d13d6db
--- /dev/null
+++ b/components/about-us/Information.vue
@@ -0,0 +1,23 @@
+<template>
+    <div
+    class="flex flex-col md:flex-row justify-between items-center py-[10vw] md:py-0 absolute top-[140vw] md:top-[54.3vw] w-full z-[3] border-y h-[133.846vw] md:h-[9.115vw] text-[#383E43] px-[10vw]"
+  >
+    <div class="flexBox flex-col">
+      <p class="text-[8.318vw] md:text-[2.344vw]">280</p>
+      <p class="text-[3.59vw] md:text-[0.938vw]">حوزه تخصصی</p>
+    </div>
+    <div class="flexBox flex-col">
+      <p class="text-[8.318vw] md:text-[2.344vw]">2,200,000</p>
+      <p class="text-[3.59vw] md:text-[0.938vw]">دانشجو</p>
+    </div>
+    <div class="flexBox flex-col">
+      <p class="text-[8.318vw] md:text-[2.344vw]">8,100</p>
+      <p class="text-[3.59vw] md:text-[0.938vw]">عنوان آموزشی</p>
+    </div>
+    <div class="flexBox flex-col">
+      <p class="text-[8.318vw] md:text-[2.344vw]">27,000</p>
+      <p class="text-[3.59vw] md:text-[0.938vw]">ساعت آموزش</p>
+    </div>
+  </div>
+
+</template>
\ No newline at end of file
diff --git a/components/about-us/Missions.vue b/components/about-us/Missions.vue
new file mode 100644
index 0000000..ffcdc13
--- /dev/null
+++ b/components/about-us/Missions.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="flexBox mt-[250vw] md:mt-[23.6vw]">
+        <div class="w-[87.692vw] md:w-[81.2vw] flex flex-col md:flex-row">
+          <div class="w-full md:w-[30.5%] flex gap-[1vw]">
+            <div class="w-full md:w-[70%] flex gap-[3vw] md:gap-[1vw] border-b h-[13.077vw] md:h-[6vw]">
+              <svg
+                class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
+                viewBox="0 0 10 53"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
+                  fill="#0D3F40"
+                />
+              </svg>
+  
+              <p class="w-full md:w-[7.552vw] text-[5.11vw] md:text-[1.69vw] text-[#383E43] font-semibold">
+                ماموریت و چشم انداز
+              </p>
+            </div>
+          </div>
+          <div class="w-full md:w-[60%] mt-[6vw] md:mt-0 text-[3.59vw] md:text-[1.055vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw]">
+            <p>
+              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+              استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
+              ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
+              کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی
+              در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را
+              می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
+              الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این
+              صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و
+              شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی
+              دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا
+              مورد استفاده قرار گیرد. و جوابگوی سوالات پیوسته اهل دنیای موجود
+              طراحی اساسا مورد استفاده قرار گیرد. و جوابگوی سوالات پیوسته اهل
+              دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. و جوابگوی سوالات
+              پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+            </p>
+            <p class="mt-[2vw]">
+              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+              استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
+              ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
+              کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی
+              در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را
+              می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
+              الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این
+              صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
+            </p>
+          </div>
+        </div>
+      </div>
+</template>
\ No newline at end of file
diff --git a/components/about-us/Shinan-story.vue b/components/about-us/Shinan-story.vue
new file mode 100644
index 0000000..7511d57
--- /dev/null
+++ b/components/about-us/Shinan-story.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="flex items-center w-[87.692vw] md:w-[80.9vw] mt-[22vw] md:mt-[8.4vw] border-b pb-[3vw] md:pb-[1.2vw] gap-[3vw] md:gap-[1vw]">
+        <svg
+        class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
+          viewBox="0 0 10 53"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
+            fill="#0D3F40"
+          />
+        </svg>
+        <h2 class="text-[5.11vw] md:text-[1.69vw] text-[#383E43] font-semibold ">
+          داستان شکل گیری ShinanLearning
+        </h2>
+      </div>
+  
+  
+  
+  
+      <div class="flexBox mt-[10vw] md:mt-[7.7vw]">
+        <div class="w-[81.2vw] flex flex-col md:flex-row">
+          <div class="w-full md:w-[30.5%] flex gap-[1vw]">
+            <div class="w-full md:w-[70%] flex gap-[1vw] border-b border-dashed h-[10vw] md:h-[3.3vw]">
+              <p class="w-full md:w-[7.552vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold">
+                رویای آغاز
+              </p>
+            </div>
+          </div>
+          <div class="mt-[6vw] md:mt-0 w-full md:w-[60%] text-[3.59vw] md:text-[1.055vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw]">
+            <p>
+              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+              استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
+              ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
+              کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی
+              در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را
+              می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
+              الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این
+              صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="flexBox mt-[6vw] md:mt-[1.5vw]">
+        <div class="w-[81.2vw] flex flex-col md:flex-row mt-[5vw]">
+          <div class="w-full md:w-[30.5%] flex gap-[1vw]">
+            <div class="w-full md:w-[70%] flex gap-[1vw] border-b border-dashed h-[10vw] md:h-[3.3vw]">
+              <p class="text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold">
+                آرمان ShinanLearning
+              </p>
+            </div>
+          </div>
+          <div class="mt-[6vw] md:mt-0 w-full md:w-[60%] text-[3.59vw] md:text-[1.055vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw]">
+            <p>
+              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+              استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
+              ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
+              کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی
+              در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را
+              می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
+              الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این
+              صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و
+              شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی
+              دستاوردهای اصلی
+            </p>
+          </div>
+        </div>
+      </div>
+  
+</template>
\ No newline at end of file
diff --git a/components/about-us/Slider.vue b/components/about-us/Slider.vue
new file mode 100644
index 0000000..7309dfe
--- /dev/null
+++ b/components/about-us/Slider.vue
@@ -0,0 +1,96 @@
+<template>
+    <div class="flexBox flex-col mt-[20vw] md:mt-[8.5vw] mb-[6.5vw] relative">
+        <div class="w-[81.2vw] flex justify-between">
+          <div class="w-full md:w-[30.5%] flex gap-[1vw]">
+            <div class="w-full md:w-[70%] flex gap-[3vw] md:gap-[1vw] border-b h-[13.077vw] md:h-[6.4vw]">
+              <svg
+              class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
+                viewBox="0 0 10 53"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
+                  fill="#0D3F40"
+                />
+              </svg>
+              <p class="w-full md:w-[18vw] text-[4.8vw] md:text-[1.69vw] text-[#383E43] font-semibold">
+                بخشی از فعالیت های ShinanLearning
+              </p>
+            </div>
+          </div>
+          <div class="flex gap-[2vw] md:gap-[0.6vw] absolute md:left-[0.5vw] top-[20vw] md:top-[3.2vw]">
+            <svg
+            class="h-[12.308vw] md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
+              viewBox="0 0 60 60"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="30"
+                cy="30"
+                r="29.5"
+                transform="rotate(-180 30 30)"
+                stroke="#878787"
+              />
+              <path
+                d="M26.9999 22.0802L33.5199 28.6002C34.2899 29.3702 34.2899 30.6302 33.5199 31.4002L26.9999 37.9202"
+                stroke="#878787"
+                stroke-width="2"
+                stroke-miterlimit="10"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+  
+            <svg
+            class="h-[12.308vw] md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
+              viewBox="0 0 60 60"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="30" cy="30" r="29.5" stroke="#383E43" />
+              <g clip-path="url(#clip0_1_1122)">
+                <path
+                  d="M33.0001 37.9198L26.4801 31.3998C25.7101 30.6298 25.7101 29.3698 26.4801 28.5998L33.0001 22.0798"
+                  stroke="#383E43"
+                  stroke-width="2"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_1_1122">
+                  <rect
+                    width="24"
+                    height="24"
+                    fill="white"
+                    transform="translate(18 18)"
+                  />
+                </clipPath>
+              </defs>
+            </svg>
+          </div>
+        </div>
+  
+  
+        <div class="flex flex-col flex-col-reverse md:flex-row items-center justify-between mt-[25vw] md:mt-[1.6vw] w-full md:w-[81.2%]">
+          <div>
+              <h2 class="text-[4.544vw] mt-[10vw] md:mt-0 md:text-[1.502vw] text-[#383E43] ">آموزش آنلاین</h2>
+              <p class="text-[3.59vw] md:text-[1.186vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw] mt-[3vw] md:mt-[1vw] w-[81.2vw] md:w-[39.844vw]">
+                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
+                از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و
+                سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای
+                متنوع با هدف بهبود ابزارهای کاربردی می باشد
+              </p>
+  
+          </div>
+          <img
+            class="h-[85.692vw] md:h-[20.469vw] w-[87.692vw] md:w-[20.469vw] rounded-[50%] object-cover"
+            src="/public/images/about-slider.jpg"
+            alt=""
+          />
+        </div>
+      </div>  
+</template>
\ No newline at end of file
diff --git a/components/courses-page/Courses-list.vue b/components/courses-page/Courses-list.vue
index 3ba2ed5..85068d6 100644
--- a/components/courses-page/Courses-list.vue
+++ b/components/courses-page/Courses-list.vue
@@ -3,7 +3,7 @@
     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]"
+      class="ps-[1.5vw] border-b-[0.104vw] 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]"
@@ -43,7 +43,7 @@
       </span>
       <ul class="gap-x-[1vw] items-center hidden md:flex">
         <li
-          class="pb-[0.681vw] text-primaryGreen border-b-[2px] border-primaryGreen"
+          class="pb-[0.5vw] text-primaryGreen border-b-[0.104vw] border-primaryGreen"
         >
           همه دوره ها
         </li>
diff --git a/components/home-page/About-us.vue b/components/home-page/About-us.vue
index fa97772..3f45843 100644
--- a/components/home-page/About-us.vue
+++ b/components/home-page/About-us.vue
@@ -6,12 +6,12 @@
 
       <div class="basis-1/1 md:basis-1/2">
         <h2
-          class="text-[5.11vw] md:text-[1.69vw] text-[#0D3F40] text-[#383E43] font-semibold ms-0 md:ms-[1.458vw]"
+          class="text-[5.11vw] md:text-[1.69vw] text-primaryGreen text-[#383E43] font-semibold ms-0 md:ms-[1.458vw]"
         >
           درباره ما
         </h2>
         <p
-          class="max-w-[766px] text-[3.59vw] md:text-[1.335vw] mt-[4vw] md:mt-[1.354vw] mb-[6vw] md:mb-0 leading-[7.179vw] md:leading-[2.865vw]"
+          class="text-[#383E43] max-w-[766px] text-[3.59vw] md:text-[1.335vw] mt-[4vw] md:mt-[1.354vw] mb-[6vw] md:mb-0 leading-[7.179vw] md:leading-[2.865vw]"
         >
           لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
           استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
diff --git a/components/home-page/Intro.vue b/components/home-page/Intro.vue
index 5656da4..0273f4c 100644
--- a/components/home-page/Intro.vue
+++ b/components/home-page/Intro.vue
@@ -10,7 +10,7 @@
                 <p class="hidden md:block mt-[1.25vw] text-[1.055vw] leading-[30.38px] mb-[2.917vw]">
                     شینان، آکادمی آموزش آنلاین تخصصی برنامه نویسی، با افتخار بهترین و به روزترین مقالات و فیلم های
                     آموزشی
-                    پروژه محور و کاربردی در زمینه برنامه نویسی وب را در اختیار علاقه مندان این حرفه <br /> قرار خواهد
+                    پروژه محور و کاربردی در زمینه برنامه نویسی وب را در اختیار علاقه مندان این  <br /> قرار خواهد
                     داد تا
                     بتوانند از این طریق درآمد بیشتری کسب کنند با ما همراه باشید تا گام های تبدیل شدن به توسعه دهنده وب
                     را از
diff --git a/components/home-page/courses-section/Categories.vue b/components/home-page/courses-section/Categories.vue
index 0e84521..a3ca0cb 100644
--- a/components/home-page/courses-section/Categories.vue
+++ b/components/home-page/courses-section/Categories.vue
@@ -53,7 +53,7 @@
       </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"
+        class="thin 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="نام آموزش ، دوره و ... را وارد کنید"
       />
@@ -120,12 +120,12 @@ const breakpoints = {
     snapAlign: "end",
   },
   700: {
-    itemsToShow: 7.3,
+    itemsToShow: 8.6,
     snapAlign: "end",
   },
   // 1024 and up
   1024: {
-    itemsToShow: 8.3,
+    itemsToShow: 8.6,
     snapAlign: "end",
   },
 };
diff --git a/components/home-page/courses-section/WatchCoursesButton.vue b/components/home-page/courses-section/WatchCoursesButton.vue
index 28c9d76..6bf629d 100644
--- a/components/home-page/courses-section/WatchCoursesButton.vue
+++ b/components/home-page/courses-section/WatchCoursesButton.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-      class="flex text-[#383E43] font-semibold py-[4vw] md:py-[1.1vw] md:pt-[1.9vw] text-[3.59vw] md:text-[0.938vw] justify-center mt-[2vw] md:mt-[0.417vw]"
+      class="flex text-[#383E43] py-[4vw] md:py-[1.1vw] md:pt-[1.9vw] text-[3.59vw] md:text-[0.938vw] justify-center mt-[2vw] md:mt-[0.417vw]"
   >
     <nuxt-link to="/courses"
       class="flex justify-center items-center border-b-2 border-[#878787] w-[45.59vw] md:w-[13.542vw]"
diff --git a/components/product-page/Attended-course.vue b/components/product-page/Attended-course.vue
new file mode 100644
index 0000000..03ec73d
--- /dev/null
+++ b/components/product-page/Attended-course.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex items-center flex-col pb-[25vw] md:pb-[6vw]">
+    <div
+      class="flex flex-col flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-[81.04%] mt-[8.2vw]"
+    >
+      <div
+        class="w-full md:w-[56.354vw] text-[#383E43] text-[1.055vw] leading-[1.582vw]"
+      >
+
+
+   <product-page-attended-coursesVideo />
+   <product-page-attended-coursesDownload-box />
+   <product-page-attended-coursesChats />
+
+  
+    
+    
+    </div>
+
+      <div class="w-full md:w-[23.438vw]">
+        <product-page-attended-coursesHeadlines />
+        <product-page-attended-coursesProgress-bar />
+
+
+      </div>
+    </div>
+  </div>
+</template>
+
diff --git a/components/product-page/Course-detail.vue b/components/product-page/Course-detail.vue
new file mode 100644
index 0000000..8a82162
--- /dev/null
+++ b/components/product-page/Course-detail.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
+    <product-page-course-detailsHeader />
+    <div
+      class="flex flex-col flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-[81.04%] mt-[10vw] md:mt-[4.7vw]"
+    >
+      <div
+        class="w-full md:w-[56.354vw] text-[#383E43] text-[3.59vw] md:text-[1.055vw] leading-[5.897vw] md:leading-[1.582vw]"
+      >
+        <product-page-course-detailsDescription />
+        <product-page-course-detailsHeadlines />
+        <product-page-course-detailsComments />
+      </div>
+      <div class="w-full md:w-[23.438vw] text-[#383E43]">
+        <product-page-course-detailsCourse-status />
+        <product-page-course-detailsCourse-information />
+      </div>
+    </div>
+  </div>
+</template>
+  
diff --git a/components/product-page/attended-courses/Chats.vue b/components/product-page/attended-courses/Chats.vue
new file mode 100644
index 0000000..f999695
--- /dev/null
+++ b/components/product-page/attended-courses/Chats.vue
@@ -0,0 +1,51 @@
+<template>
+          
+    <div class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[15vw] md:mt-[7vw]">
+        <svg
+        class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
+          viewBox="0 0 10 53"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
+            fill="#0D3F40"
+          />
+        </svg>
+        <span class="text-[4.544vw] md:text-[1.481vw] font-semibold">پرسش و پاسخ</span>
+      </div>
+      <div class="bg-[#F8F8F8] p-[4vw] md:p-[1vw] rounded-[3.846vw] md:rounded-[0.781vw] mt-[6vw] md:mt-[2vw]">
+        <div class="space-y-[5vw] md:space-y-[1vw]">
+          <div class="flex gap-[1vw]">
+            <img
+              src="/public/images/client1.png"
+              alt=""
+              class="h-[10.256vw0] md:h-[3.385vw] w-[10.256vw] md:w-[3.385vw] rounded-[50%]"
+            />
+            <div class="space-y-[4vw] mt-[1vw] md:mt-0 ms-[1vw] md:ms-0 md:space-y-0">
+              <p class="text-[3.59vw] md:text-[0.938vw]">علی مصلحی</p>
+              <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">پرسش جدید</p>
+            </div>
+          </div>
+          <textarea
+            class="h-[50vw] md:h-[18vw] w-full rounded-[3.846vw] md:rounded-[0.781vw] p-[1vw]"
+            name=""
+            id=""
+            cols="30"
+            rows="10"
+          ></textarea>
+          <div class="flex justify-end gap-[1vw] text-[3.19vw] md:text-[0.833vw] text-white">
+            <button
+              class="h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-[#5A6268]"
+            >
+              حذف
+            </button>
+            <button
+              class="h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-primaryGreen"
+            >
+              ثبت
+            </button>
+          </div>
+        </div>
+      </div>
+</template>
\ No newline at end of file
diff --git a/components/product-page/attended-courses/Download-box.vue b/components/product-page/attended-courses/Download-box.vue
new file mode 100644
index 0000000..3af5519
--- /dev/null
+++ b/components/product-page/attended-courses/Download-box.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="hidden md:flex justify-between items-center mt-[3.3vw]">
+        <button
+          class="greenButton flexBox p-0 w-[8.177vw] h-[2.656vw] rounded-[0.521vw] text-[0.938vw]"
+        >
+          دانلود
+          <svg
+            class="w-[1.25vw] h-[1.302vw]"
+            viewBox="0 0 24 25"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.32007 12.18L11.8801 14.74L14.4401 12.18"
+              stroke="white"
+              stroke-width="1.5"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M11.8799 4.5V14.67"
+              stroke="white"
+              stroke-width="1.5"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M20 12.68C20 17.1 17 20.68 12 20.68C7 20.68 4 17.1 4 12.68"
+              stroke="white"
+              stroke-width="1.5"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+        <div class="flexBox text-[#878787] text-[0.833vw] gap-[1vw]">
+          <span>اشتراک گذاری :</span>
+          <svg
+            class="w-[1.25vw] h-[1.042vw]"
+            viewBox="0 0 24 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M1.64987 8.56244C8.09231 5.75558 12.3883 3.90512 14.5378 3.01107C20.675 0.45837 21.9503 0.0149404 22.7815 0.000141954C22.9643 -0.00292234 23.3731 0.0423843 23.6379 0.257234C23.8614 0.438648 23.9229 0.683713 23.9524 0.855714C23.9818 1.02771 24.0185 1.41954 23.9893 1.7257C23.6567 5.22014 22.2177 13.7002 21.4856 17.6141C21.1758 19.2702 20.5658 19.8254 19.9753 19.8798C18.6919 19.9979 17.7174 19.0317 16.4744 18.2169C14.5294 16.9419 13.4305 16.1482 11.5425 14.904C9.36064 13.4662 10.7751 12.6759 12.0185 11.3844C12.344 11.0464 17.9985 5.90319 18.1079 5.43662C18.1216 5.37827 18.1343 5.16076 18.0051 5.04591C17.8759 4.93105 17.6851 4.97033 17.5475 5.00156C17.3524 5.04584 14.2452 7.0996 8.22584 11.1628C7.34386 11.7685 6.54499 12.0636 5.82924 12.0481C5.04017 12.0311 3.52233 11.602 2.39397 11.2352C1.00999 10.7853 -0.0899675 10.5474 0.00581422 9.7834C0.0557033 9.38545 0.603724 8.97846 1.64987 8.56244Z"
+              fill="#878787"
+            />
+          </svg>
+          <svg
+            class="h-[1.25vw] w-[1.25vw]"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 2.16867C15.1807 2.16867 15.6145 2.16867 16.9157 2.16867C18.0723 2.16867 18.6506 2.45783 19.0843 2.60241C19.6627 2.89157 20.0964 3.03615 20.5301 3.46988C20.9639 3.90362 21.253 4.33735 21.3976 4.91566C21.5422 5.3494 21.6867 5.92771 21.8313 7.08434C21.8313 8.38554 21.8313 8.6747 21.8313 12C21.8313 15.3253 21.8313 15.6145 21.8313 16.9157C21.8313 18.0723 21.5422 18.6506 21.3976 19.0843C21.1084 19.6627 20.9639 20.0964 20.5301 20.5301C20.0964 20.9639 19.6627 21.253 19.0843 21.3976C18.6506 21.5422 18.0723 21.6867 16.9157 21.8313C15.6145 21.8313 15.3253 21.8313 12 21.8313C8.6747 21.8313 8.38554 21.8313 7.08434 21.8313C5.92771 21.8313 5.3494 21.5422 4.91566 21.3976C4.33735 21.1084 3.90362 20.9639 3.46988 20.5301C3.03615 20.0964 2.74699 19.6627 2.60241 19.0843C2.45783 18.6506 2.31325 18.0723 2.16867 16.9157C2.16867 15.6145 2.16867 15.3253 2.16867 12C2.16867 8.6747 2.16867 8.38554 2.16867 7.08434C2.16867 5.92771 2.45783 5.3494 2.60241 4.91566C2.89157 4.33735 3.03615 3.90362 3.46988 3.46988C3.90362 3.03615 4.33735 2.74699 4.91566 2.60241C5.3494 2.45783 5.92771 2.31325 7.08434 2.16867C8.38554 2.16867 8.81928 2.16867 12 2.16867ZM12 0C8.6747 0 8.38554 0 7.08434 0C5.78313 0 4.91566 0.289157 4.19277 0.578314C3.46988 0.867471 2.74699 1.30121 2.0241 2.0241C1.30121 2.74699 1.01205 3.3253 0.578314 4.19277C0.289157 4.91566 0.144578 5.78313 0 7.08434C0 8.38554 0 8.81928 0 12C0 15.3253 0 15.6145 0 16.9157C0 18.2169 0.289157 19.0843 0.578314 19.8072C0.867471 20.5301 1.30121 21.253 2.0241 21.9759C2.74699 22.6988 3.3253 22.988 4.19277 23.4217C4.91566 23.7108 5.78313 23.8554 7.08434 24C8.38554 24 8.81928 24 12 24C15.1807 24 15.6145 24 16.9157 24C18.2169 24 19.0843 23.7108 19.8072 23.4217C20.5301 23.1325 21.253 22.6988 21.9759 21.9759C22.6988 21.253 22.988 20.6747 23.4217 19.8072C23.7108 19.0843 23.8554 18.2169 24 16.9157C24 15.6145 24 15.1807 24 12C24 8.81928 24 8.38554 24 7.08434C24 5.78313 23.7108 4.91566 23.4217 4.19277C23.1325 3.46988 22.6988 2.74699 21.9759 2.0241C21.253 1.30121 20.6747 1.01205 19.8072 0.578314C19.0843 0.289157 18.2169 0.144578 16.9157 0C15.6145 0 15.3253 0 12 0Z"
+              fill="#878787"
+            />
+            <path
+              d="M12 5.78313C8.53012 5.78313 5.78313 8.53012 5.78313 12C5.78313 15.4699 8.53012 18.2169 12 18.2169C15.4699 18.2169 18.2169 15.4699 18.2169 12C18.2169 8.53012 15.4699 5.78313 12 5.78313ZM12 16.0482C9.83133 16.0482 7.95181 14.3133 7.95181 12C7.95181 9.83133 9.68675 7.95181 12 7.95181C14.1687 7.95181 16.0482 9.68675 16.0482 12C16.0482 14.1687 14.1687 16.0482 12 16.0482Z"
+              fill="#878787"
+            />
+            <path
+              d="M18.3614 7.08434C19.1599 7.08434 19.8072 6.43704 19.8072 5.63856C19.8072 4.84007 19.1599 4.19277 18.3614 4.19277C17.563 4.19277 16.9157 4.84007 16.9157 5.63856C16.9157 6.43704 17.563 7.08434 18.3614 7.08434Z"
+              fill="#878787"
+            />
+          </svg>
+          <svg
+            class="h-[1.25vw] w-[1.25vw]"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z"
+              fill="#878787"
+            />
+            <path
+              d="M17.1 2H12.9C9.81693 2 8.37099 3.09409 8.06975 5.73901C8.00673 6.29235 8.465 6.75 9.02191 6.75H11.1C15.3 6.75 17.25 8.7 17.25 12.9V14.9781C17.25 15.535 17.7077 15.9933 18.261 15.9303C20.9059 15.629 22 14.1831 22 11.1V6.9C22 3.4 20.6 2 17.1 2Z"
+              fill="#878787"
+            />
+          </svg>
+        </div>
+      </div>
+
+</template>
\ No newline at end of file
diff --git a/components/product-page/attended-courses/Headlines.vue b/components/product-page/attended-courses/Headlines.vue
new file mode 100644
index 0000000..cddfb3f
--- /dev/null
+++ b/components/product-page/attended-courses/Headlines.vue
@@ -0,0 +1,146 @@
+<template>
+    <div
+    class="mt-[82vw] md:mt-[4.6vw] min-h-[87.692vw] md:min-h-[29.635vw] rounded-[3.846vw] md:rounded-[0.781vw] bg-[#F8F8F8] pinkShadow space-y-[2vw] thin"
+  >
+    <div class="flexBox w-full flex-col text-[0.938vw] text-[#878787]">
+      <label
+        class="h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
+      >
+        <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+          <input type="radio" class="accent-primaryGreen" />
+          HTML چیست؟
+        </div>
+        <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+          02:24
+          <svg
+            class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
+            viewBox="0 0 19 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g clip-path="url(#clip0_1_896)">
+              <path
+                d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
+                stroke="#383E43"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
+                stroke="#383E43"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_1_896">
+                <rect
+                  width="19"
+                  height="19"
+                  fill="white"
+                  transform="translate(0 0.5)"
+                />
+              </clipPath>
+            </defs>
+          </svg>
+        </div>
+      </label>
+
+      <label
+        class="bg-[#FDF4FB] h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
+      >
+        <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+          <input
+            type="radio"
+            checked="checked"
+            class="accent-primaryGreen"
+          />
+          آشنایی با ساختار صفحات
+        </div>
+        <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+          08:44
+          <svg
+            class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
+            viewBox="0 0 19 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g clip-path="url(#clip0_1_896)">
+              <path
+                d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
+                stroke="#383E43"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
+                stroke="#383E43"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_1_896">
+                <rect
+                  width="19"
+                  height="19"
+                  fill="white"
+                  transform="translate(0 0.5)"
+                />
+              </clipPath>
+            </defs>
+          </svg>
+        </div>
+      </label>
+
+      <label
+        class="h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
+      >
+        <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+          <input type="radio" class="accent-primaryGreen" />
+          تگ های Heading
+        </div>
+        <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
+          07:41
+          <svg
+            class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
+            viewBox="0 0 19 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g clip-path="url(#clip0_1_896)">
+              <path
+                d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
+                stroke="#383E43"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
+                stroke="#383E43"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_1_896">
+                <rect
+                  width="19"
+                  height="19"
+                  fill="white"
+                  transform="translate(0 0.5)"
+                />
+              </clipPath>
+            </defs>
+          </svg>
+        </div>
+      </label>
+    </div>
+  </div> 
+</template>
\ No newline at end of file
diff --git a/components/product-page/attended-courses/Progress-bar.vue b/components/product-page/attended-courses/Progress-bar.vue
new file mode 100644
index 0000000..56827fb
--- /dev/null
+++ b/components/product-page/attended-courses/Progress-bar.vue
@@ -0,0 +1,36 @@
+<template>
+    
+    <div
+    class="mt-[5vw] rounded-[3.846vw] md:rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1vw] space-y-[6vw] md:space-y-[2vw] md:mt-[1vw] text-[#383E43]"
+  >
+    <div
+      class="flex justify-between text-[3.19vw] md:text-[0.833vw] font-semibold text-[#383E43]"
+    >
+      <span class="text-[3.59vw] md:text-[0.938vw]">پیشرفت شما</span>
+      <span>77٪</span>
+    </div>
+    <div
+      id="progressbar"
+      class="mt-[3vw] md:mt-[0.7vw] h-[2.051vw] md:h-[0.521vw] rounded-[2vw] md:rounded-[0.521vw]"
+    >
+      <div
+        class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
+      ></div>
+    </div>
+  </div>
+</template>
+<style scoped>
+#progressbar {
+  background-color: #e5e5e5;
+
+  width: 100%;
+}
+#progressbar > div {
+  background-color: #0d3f40;
+  width: 77%;
+  float: left;
+
+  left: 0;
+}
+
+</style>
\ No newline at end of file
diff --git a/components/product-page/attended-courses/Video.vue b/components/product-page/attended-courses/Video.vue
new file mode 100644
index 0000000..428f8b9
--- /dev/null
+++ b/components/product-page/attended-courses/Video.vue
@@ -0,0 +1,139 @@
+<template>
+    <div class="absolute top-[5vw] md:top-0 right-0 px-[3vw] md:px-0 md:relative ">
+        <div class=" flex items-center gap-[3vw] md:gap-[0.7vw]">
+            <svg
+            class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
+            viewBox="0 0 10 53"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
+              fill="#0D3F40"
+            />
+          </svg>
+          <span
+            class="text-[4.544vw] md:text-[1.69vw] text-[#383E43] font-bold -tracking-[0.05vw]"
+            >آموزش HTML رایگان مقدماتی تا پیشرفته</span
+          >
+        </div>
+
+        <video controls class="mt-[4vw] md:mt-[1.8vw] w-full">
+          <source src="/public/video/test.mp4" type="video/mp4" />
+        </video>
+        <div
+          class="relative flex items-center text-[4.038vw] md:text-[1.502vw] mt-[6vw] md:mt-[1.6vw] font-semibold"
+        >
+          آشنایی با ساختار صفحات
+          <div class="absolute gap-[2vw] flex md:hidden left-0">
+            <svg
+              class="h-[5.641vw] w-[5.641vw]"
+              viewBox="0 0 24 22"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clip-path="url(#clip0_1_6600)">
+                <path
+                  d="M16.96 5.65576C18.96 6.92993 20.34 8.95576 20.62 11.2933"
+                  stroke="#878787"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M3.48999 11.3392C3.74999 9.01083 5.10999 6.98499 7.08999 5.70166"
+                  stroke="#878787"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M8.19 19.1951C9.35 19.7359 10.67 20.0384 12.06 20.0384C13.4 20.0384 14.66 19.7634 15.79 19.2592"
+                  stroke="#878787"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M12.06 7.05834C13.5954 7.05834 14.84 5.91741 14.84 4.51C14.84 3.1026 13.5954 1.96167 12.06 1.96167C10.5247 1.96167 9.28003 3.1026 9.28003 4.51C9.28003 5.91741 10.5247 7.05834 12.06 7.05834Z"
+                  stroke="#878787"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M4.82999 18.26C6.36534 18.26 7.60999 17.1191 7.60999 15.7117C7.60999 14.3043 6.36534 13.1633 4.82999 13.1633C3.29464 13.1633 2.04999 14.3043 2.04999 15.7117C2.04999 17.1191 3.29464 18.26 4.82999 18.26Z"
+                  stroke="#878787"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M19.17 18.26C20.7054 18.26 21.95 17.1191 21.95 15.7117C21.95 14.3043 20.7054 13.1633 19.17 13.1633C17.6347 13.1633 16.39 14.3043 16.39 15.7117C16.39 17.1191 17.6347 18.26 19.17 18.26Z"
+                  stroke="#878787"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_1_6600">
+                  <rect width="24" height="22" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+
+            <svg
+              class="h-[5.641vw] w-[5.641vw]"
+              viewBox="0 0 22 22"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clip-path="url(#clip0_1_6599)">
+                <path
+                  d="M8.54333 10.7068L10.89 13.0535L13.2367 10.7068"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M10.89 3.66675V12.9892"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M18.3334 11.165C18.3334 15.2167 15.5834 18.4984 11 18.4984C6.41669 18.4984 3.66669 15.2167 3.66669 11.165"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_1_6599">
+                  <rect width="22" height="22" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+          </div>
+        </div>
+    </div>
+
+</template>
+
+<style scoped>
+video {
+    border-radius: 0.781vw;
+  }
+  @media (max-width: 768px) {
+    video {
+      border-radius: 3.846vw;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/components/product-page/course-details/Comments.vue b/components/product-page/course-details/Comments.vue
new file mode 100644
index 0000000..db9eec6
--- /dev/null
+++ b/components/product-page/course-details/Comments.vue
@@ -0,0 +1,183 @@
+<template>
+      <!-- comments -->
+      <div
+      class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[12vw] md:mt-[6.3vw] mb-[6vw] md:mb-[2.1vw]"
+    >
+      <svg
+        class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
+        viewBox="0 0 10 53"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
+          fill="#0D3F40"
+        />
+      </svg>
+      <span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
+        >نظرات</span
+      >
+    </div>
+
+    <!-- comment 1 -->
+    <div
+      class="relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
+    >
+      <img
+        src="/public/images/client1.png"
+        alt="profile"
+        class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
+      />
+
+      <div class="ps-[3vw] md:ps-[1vw]">
+        <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+          علی مصلحی
+        </p>
+        <div class="thin">
+          <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
+            1402/09/14
+          </p>
+          <p
+            class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
+          >
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+            استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله
+            در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
+            نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
+          </p>
+        </div>
+      </div>
+
+      <svg
+        class="absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
+          stroke="#383E43"
+          stroke-width="1.5"
+          stroke-miterlimit="10"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
+          stroke="#383E43"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+
+    <!-- comment 2 -->
+    <div
+      class="mt-[4vw] md:mt-[1vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]"
+    >
+      <div class="flex justify-between relative p-[4vw] md:p-[1.55vw]">
+        <img
+          src="/public/images/client2.png"
+          alt="profile"
+          class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
+        />
+
+        <div class="ps-[3vw] md:ps-[1vw]">
+          <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+            علی مصلحی
+          </p>
+          <div class="thin">
+            <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
+              1402/09/14
+            </p>
+            <p
+              class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
+            >
+              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+              استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و
+              مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
+              تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
+              کاربردی می باشد
+            </p>
+          </div>
+        </div>
+
+        <svg
+          class="absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+
+      <div
+        class="relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between ps-[16vw] md:ps-[6vw] p-[2vw] md:p-[1.55vw]"
+      >
+        <img
+          src="/public/images/client3.png"
+          alt="profile"
+          class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
+        />
+
+        <div class="ps-[3vw] md:ps-[1vw]">
+          <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+            علی مصلحی
+          </p>
+          <div class="thin">
+            <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
+              1402/09/14
+            </p>
+            <p
+              class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
+            >
+              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+              استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و
+              مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
+              تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
+              کاربردی می باشد
+            </p>
+          </div>
+        </div>
+
+        <svg
+          class="absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/product-page/course-details/Course-information.vue b/components/product-page/course-details/Course-information.vue
new file mode 100644
index 0000000..69f39bd
--- /dev/null
+++ b/components/product-page/course-details/Course-information.vue
@@ -0,0 +1,259 @@
+<template>
+    <div
+    class="mt-[5vw] md:mt-[1vw] rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1.3vw] space-y-[6vw] md:space-y-[0.4vw] thin"
+  >
+    <h2
+      class="gap-[2vw] md:gap-[0.5vw] text-[3.59vw] md:text-[1.055vw] font-semibold flex items-center"
+    >
+      اطلاعات دوره
+      <svg
+        class="h-[4.359vw] md:h-[1.25vw] w-[4.359vw] md:w-[1.25vw]"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
+          stroke="#0D3F40"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M12 8V13"
+          stroke="#0D3F40"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M11.9946 16H12.0036"
+          stroke="#0D3F40"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </h2>
+
+    <div
+      class="flexBox w-full flex-col text-[3.59vw] md:text-[0.938vw] text-[#878787]"
+    >
+      <div
+        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
+      >
+        <p class="flex items-center gap-[0.8vw]">
+          <svg
+            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12.53 20.42H6.21C3.05 20.42 2 18.32 2 16.21V7.78996C2 4.62996 3.05 3.57996 6.21 3.57996H12.53C15.69 3.57996 16.74 4.62996 16.74 7.78996V16.21C16.74 19.37 15.68 20.42 12.53 20.42Z"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M19.5202 17.1L16.7402 15.15V8.84001L19.5202 6.89001C20.8802 5.94001 22.0002 6.52001 22.0002 8.19001V15.81C22.0002 17.48 20.8802 18.06 19.5202 17.1Z"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M11.5 11C12.3284 11 13 10.3284 13 9.5C13 8.67157 12.3284 8 11.5 8C10.6716 8 10 8.67157 10 9.5C10 10.3284 10.6716 11 11.5 11Z"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          تعداد ویدیو ها
+        </p>
+        <p class="text-[#383E43] font-semibold">3</p>
+      </div>
+      <div
+        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
+      >
+        <p class="flex items-center gap-[0.8vw]">
+          <svg
+            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.31982 11.6801L11.8798 14.2401L14.4398 11.6801"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M11.8799 4V14.17"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M20 12.1801C20 16.6001 17 20.1801 12 20.1801C7 20.1801 4 16.6001 4 12.1801"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+
+          حجم فایل ها
+        </p>
+        <p class="text-[#383E43] font-semibold">14 گیگابایت</p>
+      </div>
+      <div
+        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
+      >
+        <p class="flex items-center gap-[0.8vw]">
+          <svg
+            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13.01 2.91995L18.91 5.53995C20.61 6.28995 20.61 7.52995 18.91 8.27995L13.01 10.8999C12.34 11.1999 11.24 11.1999 10.57 10.8999L4.67002 8.27995C2.97002 7.52995 2.97002 6.28995 4.67002 5.53995L10.57 2.91995C11.24 2.61995 12.34 2.61995 13.01 2.91995Z"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M3 11C3 11.84 3.63 12.81 4.4 13.15L11.19 16.17C11.71 16.4 12.3 16.4 12.81 16.17L19.6 13.15C20.37 12.81 21 11.84 21 11"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M3 16C3 16.93 3.55 17.77 4.4 18.15L11.19 21.17C11.71 21.4 12.3 21.4 12.81 21.17L19.6 18.15C20.45 17.77 21 16.93 21 16"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          سطح دوره
+        </p>
+        <p class="text-[#383E43] font-semibold">متوسط</p>
+      </div>
+      <div
+        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
+      >
+        <p class="flex items-center gap-[0.8vw]">
+          <svg
+            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M8.0001 3H9.0001C7.0501 8.84 7.0501 15.16 9.0001 21H8.0001"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M15 3C16.95 8.84 16.95 15.16 15 21"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M3 16V15C8.84 16.95 15.16 16.95 21 15V16"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M3 8.99998C8.84 7.04998 15.16 7.04998 21 8.99998"
+              stroke="#878787"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+
+          زبان
+        </p>
+        <p class="text-[#383E43] font-semibold">فارسی</p>
+      </div>
+      <div
+        class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between"
+      >
+        <p class="flex items-center gap-[0.8vw] ps-[2vw]">سطح رضایت</p>
+        <p class="text-[#383E43] font-semibold">5.0</p>
+      </div>
+
+      <h2
+        class="my-[5vw] md:my-[1.25vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold flex items-center justify-end w-full gap-[0.5vw]"
+      >
+        220,000
+        <p class="text-[2.836vw] md:text-[0.741vw]">تومان</p>
+      </h2>
+      <button
+        class="greenButton h-[11.795vw] md:h-auto w-full flexBox text-[4.038vw] md:text-[1.055vw] rounded-[2.564vw] md:rounded-[0.521vw]"
+        @click="paidStatus = true"
+      >
+        <svg
+          class="h-[5.641vw] md:h-[1.458vw] w-[5.641vw] md:w-[1.458vw]"
+          viewBox="0 0 28 28"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11.7248 2.95171L4.70145 7.53671C2.44978 9.00671 2.44978 12.2967 4.70145 13.7667L11.7248 18.3517C12.9848 19.18 15.0614 19.18 16.3214 18.3517L23.3098 13.7667C25.5498 12.2967 25.5498 9.01837 23.3098 7.54837L16.3214 2.96338C15.0614 2.12338 12.9848 2.12338 11.7248 2.95171Z"
+            stroke="white"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M6.56831 15.26L6.55664 20.7317C6.55664 22.2133 7.69997 23.8 9.09998 24.2667L12.8216 25.5033C13.4633 25.7133 14.525 25.7133 15.1783 25.5033L18.9 24.2667C20.3 23.8 21.4433 22.2133 21.4433 20.7317V15.3183"
+            stroke="white"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M24.9668 17.5V10.5"
+            stroke="white"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        شرکت در دوره
+      </button>
+    </div>
+  </div> 
+</template>
+
+
+<script setup>
+const paidStatus = useState("paidStatus");
+</script>
\ No newline at end of file
diff --git a/components/product-page/course-details/Course-status.vue b/components/product-page/course-details/Course-status.vue
new file mode 100644
index 0000000..115feb1
--- /dev/null
+++ b/components/product-page/course-details/Course-status.vue
@@ -0,0 +1,81 @@
+<template>
+    <div
+    class="rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1.3vw] space-y-[6vw] md:space-y-[2.45vw] thin"
+  >
+    <div class="flex justify-between">
+      <h2
+        class="text-[3.59vw] gap-[2vw] md:gap-[0.5vw] md:text-[1.055vw] font-semibold flex items-center"
+      >
+        وضعیت دوره
+        <svg
+          class="h-[4.359vw] md:h-[1.25vw] w-[4.359vw] md:w-[1.25vw]"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11.02 19.5H7.5C6.88 19.5 6.33 19.48 5.84 19.41C3.21 19.12 2.5 17.88 2.5 14.5V9.5C2.5 6.12 3.21 4.88 5.84 4.59C6.33 4.52 6.88 4.5 7.5 4.5H10.96"
+            stroke="#0D3F40"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M15.02 4.5H16.5C17.12 4.5 17.67 4.52 18.16 4.59C20.79 4.88 21.5 6.12 21.5 9.5V14.5C21.5 17.88 20.79 19.12 18.16 19.41C17.67 19.48 17.12 19.5 16.5 19.5H15.02"
+            stroke="#0D3F40"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M15 2V22"
+            stroke="#0D3F40"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M8 8.5V15.5"
+            stroke="#0D3F40"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </h2>
+      <span class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
+        >تکمیل شده</span
+      >
+    </div>
+    <div>
+      <div class="flex justify-between text-[3.19vw] md:text-[0.833vw]">
+        <span class="text-[#383E43]">درصد تکمیل دوره</span>
+        <span>77٪</span>
+      </div>
+      <div
+        id="progressbar"
+        class="mt-[3vw] md:mt-[0.7vw] h-[2.051vw] md:h-[0.521vw] rounded-[2vw] md:rounded-[0.521vw]"
+      >
+        <div
+          class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
+        ></div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+#progressbar {
+    background-color: #e5e5e5;
+  
+    width: 100%;
+  }
+  #progressbar > div {
+    background-color: #0d3f40;
+    width: 77%;
+    float: left;
+  
+    left: 0;
+  }
+</style>
\ No newline at end of file
diff --git a/components/product-page/course-details/Description.vue b/components/product-page/course-details/Description.vue
new file mode 100644
index 0000000..7711d64
--- /dev/null
+++ b/components/product-page/course-details/Description.vue
@@ -0,0 +1,50 @@
+<template>
+    <div
+    class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[15vw] md:mt-0"
+  >
+    <svg
+      class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
+      viewBox="0 0 10 53"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
+        fill="#0D3F40"
+      />
+    </svg>
+    <span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
+      >توضیحات</span
+    >
+  </div>
+  <p class="mt-[4vw] md:mt-[2.1vw] thin">
+    آموزش HTML یکی از اساسی ترین ماموریت های شینان برای پرورش برنامه
+    نویسان وب حرفه ای محسوب میشه. حتما اسمشو شنیدید اما شاید براتون سوال
+    پیش اومده که چرا و چطور باید اون رو یاد گرفت و چه اهمیتی داره؟ میشه
+    گفت الفبای برنامه نویسی وب هست و یادگیری اون اولین پیش نیاز ورود به
+    این تخصص جذاب محسوب میشه.
+  </p>
+  <p class="mt-[3.4vw] thin">
+    شینان در کنار شماست تا بدون سردرگمی و گشتن بین آموزش های مختلف، کامل
+    ترین و تخصصی ترین آموزش HTML رو دریافت کنید و مزه ی یک آموزش اصولی و
+    یادگیری راحت رو بچشید و خیلی زود قدم های بعدی رو بردارید تا به شغل ها
+    و درآمدهای بالا برسید.
+  </p>
+
+  <p class="text-[4.038vw] md:text-[1.335vw] mt-[10vw] md:mt-[4.8vw]">
+    این دوره برای چه کسانی مناسب هست؟
+  </p>
+  <p class="mt-[5vw] md:mt-[2.2vw] thin">اگر :</p>
+  <ul class="ms-[3vw] md:ms-[1vw] list-disc thin">
+    <li>به حوزه فرانت اند و طراحی رابط کاربری (UI) علاقه دارید</li>
+    <li>دوست دارید صفحات سایت خودتون رو شخصا به شکل دلخواه تغییر بدید</li>
+    <li>
+      قصد دارید سایت هارو آنالیز کنید یا از ساختار اونها ایده بگیرید
+    </li>
+    <li>
+      قصد دارید یک برنامه نویس وب (طراح سایت و اپلیکیشن تحت وب) بشید
+    </li>
+    <li>دوست دارید کدهای بهینه تولید کنید تا سئوی قوی تری داشته باشید</li>
+  </ul>
+
+</template>
\ No newline at end of file
diff --git a/components/product-page/course-details/Header.vue b/components/product-page/course-details/Header.vue
new file mode 100644
index 0000000..672535f
--- /dev/null
+++ b/components/product-page/course-details/Header.vue
@@ -0,0 +1,197 @@
+<template>
+    <div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
+        <img
+          src="/public/images/html.png"
+          alt="html"
+          class="absolute h-[86.41vw] md:h-[40.625vw] top-0 left-0 w-full object-cover brightness-75"
+        />
+        <div class="mt-[14vw] ms-[9.5vw] z-[1] text-white">
+          <h1
+            class="text-[5.751vw] md:text-[1.69vw] font-[600] -tracking-[0.05vw]"
+          >
+            آموزش HTML رایگان مقدماتی تا پیشرفته
+          </h1>
+          <p class="text-[3.19vw] md:text-[0.833vw] mt-[0.6vw] text-[#E5E5E5]">
+            برنامه نویسی
+          </p>
+          <p
+            class="hidden md:block w-[39.896vw] text-[1.055vw] leading-[1.582vw] mt-[1.2vw]"
+          >
+            اولین قدم شروع طراحی وبسایت، آموزش HTML هست. HTML یه زبان نشانه گذاری
+            هست که با کمک اون میتونی تگ هایی بنویسی تا سایت رو روی اون تگ ها پیاده
+            کنی. همونجوری که هیچ موجودی نمیتونه بدون اسکلت زندگی کنه،...
+          </p>
+          <p
+            class="text-[2.836vw] md:text-[0.741vw] text-[##E5E5E5] mt-[1.8vw] absolute bottom-[8vw] md:bottom-auto md:relative"
+          >
+            مدرس دوره :
+            <span class="text-[3.59vw] md:text-[1.055vw] text-white ms-[1vw]"
+              >حمیدرضا عبادی</span
+            >
+          </p>
+          <div
+            class="w-[39.896vw] mt-[3.2vw] flex flex-col md:flex-row justify-between absolute left-0 bottom-[8vw] md:bottom-auto md:relative space-y-[2vw] md:space-y-0"
+          >
+            <div class="flex gap-[1vw] items-center">
+              <svg
+                class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
+                viewBox="0 0 37 37"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12.3335 3.08331V7.70831"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M24.6665 3.08331V7.70831"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M5.396 14.0137H31.6043"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M32.375 13.1041V26.2083C32.375 30.8333 30.0625 33.9166 24.6667 33.9166H12.3333C6.9375 33.9166 4.625 30.8333 4.625 26.2083V13.1041C4.625 8.47915 6.9375 5.39581 12.3333 5.39581H24.6667C30.0625 5.39581 32.375 8.47915 32.375 13.1041Z"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M24.196 21.1209H24.2098"
+                  stroke="white"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M24.196 25.7459H24.2098"
+                  stroke="white"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M18.4928 21.1209H18.5067"
+                  stroke="white"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M18.4928 25.7459H18.5067"
+                  stroke="white"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M12.7873 21.1209H12.8011"
+                  stroke="white"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M12.7873 25.7459H12.8011"
+                  stroke="white"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <div class="space-y-[0.3vw]">
+                <p class="text-[3.59vw] md:text-[1.055vw]">آخرین بروزرسانی</p>
+                <p class="text-[2.518vw] md:text-[0.741vw]">1401/12/24</p>
+              </div>
+            </div>
+            <div class="border-l"></div>
+            <div class="flex gap-[1vw] items-center">
+              <svg
+                class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
+                viewBox="0 0 37 37"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M33.9168 18.5C33.9168 27.01 27.0102 33.9166 18.5002 33.9166C9.99016 33.9166 3.0835 27.01 3.0835 18.5C3.0835 9.98998 9.99016 3.08331 18.5002 3.08331C27.0102 3.08331 33.9168 9.98998 33.9168 18.5Z"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M24.2197 23.4025L19.4405 20.5504C18.608 20.0571 17.9297 18.87 17.9297 17.8988V11.5779"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+  
+              <div class="space-y-[0.3vw]">
+                <p class="text-[3.59vw] md:text-[1.055vw]">مدت زمان دوره</p>
+                <p class="text-[2.518vw] md:text-[0.741vw]">7 ساعت</p>
+              </div>
+            </div>
+            <div class="border-l"></div>
+            <div class="flex gap-[1vw] items-center">
+              <svg
+                class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
+                viewBox="0 0 37 37"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14.1215 16.7579C13.9673 16.7425 13.7823 16.7425 13.6127 16.7579C9.94353 16.6346 7.02979 13.6283 7.02979 9.92831C7.02979 6.15123 10.0823 3.08331 13.8748 3.08331C17.6519 3.08331 20.7198 6.15123 20.7198 9.92831C20.7044 13.6283 17.7906 16.6346 14.1215 16.7579Z"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M25.2986 6.16669C28.2894 6.16669 30.6944 8.5871 30.6944 11.5625C30.6944 14.4763 28.3819 16.8504 25.499 16.9584C25.3756 16.9429 25.2369 16.9429 25.0981 16.9584"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M6.41336 22.4467C2.68253 24.9442 2.68253 29.0142 6.41336 31.4963C10.6529 34.3329 17.6059 34.3329 21.8454 31.4963C25.5763 28.9988 25.5763 24.9288 21.8454 22.4467C17.6213 19.6254 10.6684 19.6254 6.41336 22.4467Z"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M28.2739 30.8333C29.3839 30.6021 30.4323 30.155 31.2956 29.4921C33.7006 27.6883 33.7006 24.7129 31.2956 22.9091C30.4477 22.2616 29.4148 21.83 28.3202 21.5833"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+  
+              <div class="space-y-[0.3vw]">
+                <p class="text-[3.59vw] md:text-[1.055vw]">37546</p>
+                <p class="text-[2.518vw] md:text-[0.741vw]">دانشجو</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+</template>
\ No newline at end of file
diff --git a/components/product-page/course-details/Headlines.vue b/components/product-page/course-details/Headlines.vue
new file mode 100644
index 0000000..b8872cd
--- /dev/null
+++ b/components/product-page/course-details/Headlines.vue
@@ -0,0 +1,318 @@
+<template>
+    <div
+    class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[10vw] md:mt-[3.95vw]"
+  >
+    <svg
+      class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
+      viewBox="0 0 10 53"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
+        fill="#0D3F40"
+      />
+    </svg>
+    <span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
+      >سرفصل ها</span
+    >
+  </div>
+  <div class="mt-[6vw] md:mt-[2.1vw] space-y-[3vw] md:space-y-[1vw] thin">
+    <div
+      class="px-[3vw] md:px-[0.4vw] flex items-center justify-between bg-[#F4FDFD] rounded-[3.846vw] md:rounded-[0.781vw] h-[15.385vw] md:h-[3.438vw] w-full smallShadow"
+    >
+      <div class="flex items-center relative">
+        <span
+          class="borderb mx-[0.9vw] ps-[0.6vw] pe-[2.5vw] md:pe-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
+        >
+          1
+        </span>
+        <h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
+      </div>
+      <div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
+        <span>08:55</span>
+        <svg
+          class="ms-[0.3vw] h-[1.042vw] w-[1.042vw]"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18.3332 9.99996C18.3332 14.6 14.5998 18.3333 9.99984 18.3333C5.39984 18.3333 1.6665 14.6 1.6665 9.99996C1.6665 5.39996 5.39984 1.66663 9.99984 1.66663C14.5998 1.66663 18.3332 5.39996 18.3332 9.99996Z"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M13.0919 12.65L10.5086 11.1083C10.0586 10.8416 9.69189 10.2 9.69189 9.67497V6.2583"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+
+      <div class="flex gap-[1vw] pe-[1vw]">
+        <svg
+          class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9 11V17L11 15"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M9 17L7 15"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M22 10H18C15 10 14 9 14 6V2L22 10Z"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+
+        <svg
+          class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4 12V8.44002C4 4.02002 7.13 2.21002 10.96 4.42002L14.05 6.20002L17.14 7.98002C20.97 10.19 20.97 13.81 17.14 16.02L14.05 17.8L10.96 19.58C7.13 21.79 4 19.98 4 15.56V12Z"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      class="px-[3vw] md:px-[0.4vw] flex items-center justify-between bg-[#F4FDFD] rounded-[3.846vw] md:rounded-[0.781vw] h-[15.385vw] md:h-[3.438vw] w-full smallShadow"
+    >
+      <div class="flex items-center relative">
+        <span
+          class="borderb mx-[0.9vw] ps-[0.6vw] pe-[2.5vw] md:pe-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
+        >
+          1
+        </span>
+        <h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
+      </div>
+      <div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
+        <span>08:55</span>
+        <svg
+          class="ms-[0.3vw] h-[1.042vw] w-[1.042vw]"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18.3332 9.99996C18.3332 14.6 14.5998 18.3333 9.99984 18.3333C5.39984 18.3333 1.6665 14.6 1.6665 9.99996C1.6665 5.39996 5.39984 1.66663 9.99984 1.66663C14.5998 1.66663 18.3332 5.39996 18.3332 9.99996Z"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M13.0919 12.65L10.5086 11.1083C10.0586 10.8416 9.69189 10.2 9.69189 9.67497V6.2583"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+
+      <div class="flex gap-[1vw] pe-[1vw]">
+        <svg
+          class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9 11V17L11 15"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M9 17L7 15"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M22 10H18C15 10 14 9 14 6V2L22 10Z"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+
+        <svg
+          class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4 12V8.44002C4 4.02002 7.13 2.21002 10.96 4.42002L14.05 6.20002L17.14 7.98002C20.97 10.19 20.97 13.81 17.14 16.02L14.05 17.8L10.96 19.58C7.13 21.79 4 19.98 4 15.56V12Z"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+    </div>
+
+    <div
+      class="px-[3vw] md:px-[0.4vw] flex items-center justify-between bg-[#F4FDFD] rounded-[3.846vw] md:rounded-[0.781vw] h-[15.385vw] md:h-[3.438vw] w-full smallShadow"
+    >
+      <div class="flex items-center relative">
+        <span
+          class="borderb mx-[0.9vw] ps-[0.6vw] pe-[2.5vw] md:pe-[0.5vw] text-[4.038vw] md:text-[1.055vw] font-black text-[#878787]"
+        >
+          1
+        </span>
+        <h2 class="border-r ps-[2.2vw]">HTML چیست؟</h2>
+      </div>
+      <div class="hidden md:flex items-center text-[0.833vw] ms-[2.5vw]">
+        <span>08:55</span>
+        <svg
+          class="ms-[0.3vw] h-[1.042vw] w-[1.042vw]"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18.3332 9.99996C18.3332 14.6 14.5998 18.3333 9.99984 18.3333C5.39984 18.3333 1.6665 14.6 1.6665 9.99996C1.6665 5.39996 5.39984 1.66663 9.99984 1.66663C14.5998 1.66663 18.3332 5.39996 18.3332 9.99996Z"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M13.0919 12.65L10.5086 11.1083C10.0586 10.8416 9.69189 10.2 9.69189 9.67497V6.2583"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+
+      <div class="flex gap-[1vw] pe-[1vw]">
+        <svg
+          class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9 11V17L11 15"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M9 17L7 15"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M22 10H18C15 10 14 9 14 6V2L22 10Z"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+
+        <svg
+          class="h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4 12V8.44002C4 4.02002 7.13 2.21002 10.96 4.42002L14.05 6.20002L17.14 7.98002C20.97 10.19 20.97 13.81 17.14 16.02L14.05 17.8L10.96 19.58C7.13 21.79 4 19.98 4 15.56V12Z"
+            stroke="#383E43"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.borderb::before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    right: 1.1vw;
+    width: 1vw;
+    background: #878787;
+    height: 0.208vw;
+    border-radius: 20vw;
+  }
+  @media (max-width: 768px) {
+    .borderb::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      right: 0.2vw;
+      width: 4vw;
+      background: #878787;
+      height: 0.7vw;
+      border-radius: 20vw;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 35add0f..c96e6b0 100644
--- a/layouts/default.vue
+++ b/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
diff --git a/pages/[product]/index.vue b/pages/[product]/index.vue
new file mode 100644
index 0000000..715ba24
--- /dev/null
+++ b/pages/[product]/index.vue
@@ -0,0 +1,8 @@
+<template>
+  <product-pageAttended-course v-if="paidCourse" />
+  <product-pageCourse-detail v-else/>
+</template>
+
+<script setup>
+const paidCourse = useState('paidStatus', () => false)
+</script>
\ No newline at end of file
diff --git a/pages/about-us/index.vue b/pages/about-us/index.vue
index 41409d6..a7555cd 100644
--- a/pages/about-us/index.vue
+++ b/pages/about-us/index.vue
@@ -1,275 +1,11 @@
 <template>
-  <div class="flexBox flex-col relative max-w-[100vw] overflow-x-hidden pb-[25vw] md:pb-0">
-    <!-- header -->
-    <div class="h-[40.625vw] mt-[7.4vw] relative w-full flex flex-col md:flex-row justify-between">
-      <div
-        class="flexBox bg-white absolute -right-[65vw] rounded-b-[50%]  md:right-0 w-[230vw] md:w-[41vw] -top-[60vw] md:-top-[10vw] z-[1] h-[121.538vw] md:h-[60.625vw] md:rounded-b-[0vw] md:!rounded-l-[27vw]"
-      >
-        <div class="flex mt-[45vw] ms-[45vw] md:ms-[6vw] md:mt-0 flex-col text-[#383E43]">
-          <h2 class="text-[7.264vw] md:text-[2.344vw] border-b w-[65vw] md:w-[14vw] pb-[1.2vw] font-semibold">
-            درباره ما
-          </h2>
-          <p class="text-[5.192vw] md:text-[1.69vw] w-[50%] md:w-[70%] md:w-[24.688vw] mt-[2.5vw] leading-[10.79vw] md:leading-[3vw]">
-            ما از
-            <span class="font-semibold"> قدرت آموزش </span>
-            برای ایجاد
-            <span class="font-semibold">تغییرات معنادار</span>
-            استفاده می کنیم.
-          </p>
-        </div>
-      </div>
-      <img
-        class="top-[55vw] md:top-0 md:h-[40.625vw] left-0 absolute"
-        src="/public/images/aboutHead.jpg"
-        alt="header-image"
-      />
-    </div>
-
-
-    <!-- info -->
-    <div
-      class="flex flex-col md:flex-row justify-between items-center py-[10vw] md:py-0 absolute top-[140vw] md:top-[54.3vw] w-full z-[3] border-y h-[133.846vw] md:h-[9.115vw] text-[#383E43] font-semibold px-[10vw]"
-    >
-      <div class="flexBox flex-col">
-        <p class="text-[8.318vw] md:text-[2.344vw]">280</p>
-        <p class="text-[3.59vw] md:text-[0.938vw]">حوزه تخصصی</p>
-      </div>
-      <div class="flexBox flex-col">
-        <p class="text-[8.318vw] md:text-[2.344vw]">2,200,000</p>
-        <p class="text-[3.59vw] md:text-[0.938vw]">دانشجو</p>
-      </div>
-      <div class="flexBox flex-col">
-        <p class="text-[8.318vw] md:text-[2.344vw]">8,100</p>
-        <p class="text-[3.59vw] md:text-[0.938vw]">عنوان آموزشی</p>
-      </div>
-      <div class="flexBox flex-col">
-        <p class="text-[8.318vw] md:text-[2.344vw]">27,000</p>
-        <p class="text-[3.59vw] md:text-[0.938vw]">ساعت آموزش</p>
-      </div>
-    </div>
-
-
-
-    <!-- missions -->
-    <div class="flexBox mt-[250vw] md:mt-[23.6vw]">
-      <div class="w-[87.692vw] md:w-[81.2vw] flex flex-col md:flex-row">
-        <div class="w-full md:w-[30.5%] flex gap-[1vw]">
-          <div class="w-full md:w-[70%] flex gap-[3vw] md:gap-[1vw] border-b h-[13.077vw] md:h-[6vw]">
-            <svg
-              class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
-              viewBox="0 0 10 53"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
-                fill="#0D3F40"
-              />
-            </svg>
-
-            <p class="w-full md:w-[7.552vw] text-[5.11vw] md:text-[1.69vw] text-[#383E43] font-semibold">
-              ماموریت و چشم انداز
-            </p>
-          </div>
-        </div>
-        <div class="w-full md:w-[60%] mt-[6vw] md:mt-0 text-[3.59vw] md:text-[1.055vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw]">
-          <p>
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
-            استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
-            ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
-            کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی
-            در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را
-            می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
-            الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این
-            صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و
-            شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی
-            دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا
-            مورد استفاده قرار گیرد. و جوابگوی سوالات پیوسته اهل دنیای موجود
-            طراحی اساسا مورد استفاده قرار گیرد. و جوابگوی سوالات پیوسته اهل
-            دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. و جوابگوی سوالات
-            پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-          </p>
-          <p class="mt-[2vw]">
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
-            استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
-            ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
-            کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی
-            در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را
-            می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
-            الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این
-            صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <!-- shinan story -->
-    <!-- <div class="w-full md:w-[70%] flex gap-[3vw] md:gap-[1vw] border-b h-[13.077vw] md:h-[6vw]"> -->
-    <div class="flex items-center w-[87.692vw] md:w-[80.9vw] mt-[22vw] md:mt-[8.4vw] border-b pb-[3vw] md:pb-[1.2vw] gap-[3vw] md:gap-[1vw]">
-      <svg
-      class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
-        viewBox="0 0 10 53"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
-          fill="#0D3F40"
-        />
-      </svg>
-      <h2 class="text-[5.11vw] md:text-[1.69vw] text-[#383E43] font-semibold ">
-        داستان شکل گیری ShinanLearning
-      </h2>
-    </div>
-
-
-
-
-    <div class="flexBox mt-[10vw] md:mt-[7.7vw]">
-      <div class="w-[81.2vw] flex flex-col md:flex-row">
-        <div class="w-full md:w-[30.5%] flex gap-[1vw]">
-          <div class="w-full md:w-[70%] flex gap-[1vw] border-b border-dashed h-[10vw] md:h-[3.3vw]">
-            <p class="w-full md:w-[7.552vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold">
-              رویای آغاز
-            </p>
-          </div>
-        </div>
-        <div class="mt-[6vw] md:mt-0 w-full md:w-[60%] text-[3.59vw] md:text-[1.055vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw]">
-          <p>
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
-            استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
-            ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
-            کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی
-            در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را
-            می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
-            الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این
-            صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="flexBox mt-[6vw] md:mt-[1.5vw]">
-      <div class="w-[81.2vw] flex flex-col md:flex-row mt-[5vw]">
-        <div class="w-full md:w-[30.5%] flex gap-[1vw]">
-          <div class="w-full md:w-[70%] flex gap-[1vw] border-b border-dashed h-[10vw] md:h-[3.3vw]">
-            <p class="text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold">
-              آرمان ShinanLearning
-            </p>
-          </div>
-        </div>
-        <div class="mt-[6vw] md:mt-0 w-full md:w-[60%] text-[3.59vw] md:text-[1.055vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw]">
-          <p>
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
-            استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
-            ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
-            کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی
-            در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را
-            می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
-            الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این
-            صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و
-            شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی
-            دستاوردهای اصلی
-          </p>
-        </div>
-      </div>
-    </div>
-
-
-
-    <!-- slider -->
-    <div class="flexBox flex-col mt-[20vw] md:mt-[8.5vw] mb-[6.5vw] relative">
-      <div class="w-[81.2vw] flex justify-between">
-        <div class="w-full md:w-[30.5%] flex gap-[1vw]">
-          <div class="w-full md:w-[70%] flex gap-[3vw] md:gap-[1vw] border-b h-[13.077vw] md:h-[6.4vw]">
-            <svg
-            class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
-              viewBox="0 0 10 53"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
-                fill="#0D3F40"
-              />
-            </svg>
-            <p class="w-full md:w-[18vw] text-[4.8vw] md:text-[1.69vw] text-[#383E43] font-semibold">
-              بخشی از فعالیت های ShinanLearning
-            </p>
-          </div>
-        </div>
-        <div class="flex gap-[2vw] md:gap-[0.6vw] absolute md:left-[0.5vw] top-[20vw] md:top-[3.2vw]">
-          <svg
-          class="h-[12.308vw] md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
-            viewBox="0 0 60 60"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              cx="30"
-              cy="30"
-              r="29.5"
-              transform="rotate(-180 30 30)"
-              stroke="#878787"
-            />
-            <path
-              d="M26.9999 22.0802L33.5199 28.6002C34.2899 29.3702 34.2899 30.6302 33.5199 31.4002L26.9999 37.9202"
-              stroke="#878787"
-              stroke-width="2"
-              stroke-miterlimit="10"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-
-          <svg
-          class="h-[12.308vw] md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
-            viewBox="0 0 60 60"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle cx="30" cy="30" r="29.5" stroke="#383E43" />
-            <g clip-path="url(#clip0_1_1122)">
-              <path
-                d="M33.0001 37.9198L26.4801 31.3998C25.7101 30.6298 25.7101 29.3698 26.4801 28.5998L33.0001 22.0798"
-                stroke="#383E43"
-                stroke-width="2"
-                stroke-miterlimit="10"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </g>
-            <defs>
-              <clipPath id="clip0_1_1122">
-                <rect
-                  width="24"
-                  height="24"
-                  fill="white"
-                  transform="translate(18 18)"
-                />
-              </clipPath>
-            </defs>
-          </svg>
-        </div>
-      </div>
-
-
-      <div class="flex flex-col flex-col-reverse md:flex-row items-center justify-between mt-[25vw] md:mt-[1.6vw] w-full md:w-[81.2%]">
-        <div>
-            <h2 class="text-[4.544vw] mt-[10vw] md:mt-0 md:text-[1.502vw] text-[#383E43] font-semibold">آموزش آنلاین</h2>
-            <p class="text-[3.59vw] md:text-[1.186vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw] mt-[3vw] md:mt-[1vw] w-[81.2vw] md:w-[39.844vw]">
-              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
-              از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و
-              سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای
-              متنوع با هدف بهبود ابزارهای کاربردی می باشد
-            </p>
-
-        </div>
-        <img
-          class="h-[85.692vw] md:h-[20.469vw] w-[87.692vw] md:w-[20.469vw] rounded-[50%] object-cover"
-          src="/public/images/about-slider.jpg"
-          alt=""
-        />
-      </div>
-    </div>
+  <div
+    class="flexBox flex-col relative max-w-[100vw] overflow-x-hidden pb-[25vw] md:pb-0 thin"
+  >
+    <about-usHeader />
+    <about-usInformation />
+    <about-usMissions />
+    <about-usShinan-story />
+    <about-usSlider />
   </div>
 </template>
\ No newline at end of file
diff --git a/public/fonts/IRANSansXFaNum-DemiBold.woff2 b/public/fonts/IRANSansXFaNum-DemiBold.woff2
new file mode 100644
index 0000000..d012ce1
Binary files /dev/null and b/public/fonts/IRANSansXFaNum-DemiBold.woff2 differ
diff --git a/public/fonts/IRANSansXFaNum-ExtraBold.otf b/public/fonts/IRANSansXFaNum-ExtraBold.otf
new file mode 100644
index 0000000..208a78c
Binary files /dev/null and b/public/fonts/IRANSansXFaNum-ExtraBold.otf differ
diff --git a/public/fonts/IRANSansXFaNum-Medium.woff2 b/public/fonts/IRANSansXFaNum-Medium.woff2
new file mode 100644
index 0000000..9935acc
Binary files /dev/null and b/public/fonts/IRANSansXFaNum-Medium.woff2 differ
diff --git a/public/fonts/IRANSansXFaNum-Regular.woff2 b/public/fonts/IRANSansXFaNum-Regular.woff2
new file mode 100644
index 0000000..48388e4
Binary files /dev/null and b/public/fonts/IRANSansXFaNum-Regular.woff2 differ
diff --git a/public/images/client1.png b/public/images/client1.png
new file mode 100644
index 0000000..090648d
Binary files /dev/null and b/public/images/client1.png differ
diff --git a/public/images/client2.png b/public/images/client2.png
new file mode 100644
index 0000000..f1ffc84
Binary files /dev/null and b/public/images/client2.png differ
diff --git a/public/images/client3.png b/public/images/client3.png
new file mode 100644
index 0000000..8d8c7ce
Binary files /dev/null and b/public/images/client3.png differ
diff --git a/public/images/html.png b/public/images/html.png
new file mode 100644
index 0000000..e9f5dc3
Binary files /dev/null and b/public/images/html.png differ
diff --git a/public/video/2.mp4 b/public/video/2.mp4
new file mode 100644
index 0000000..be3a77e
Binary files /dev/null and b/public/video/2.mp4 differ
diff --git a/public/video/test.mp4 b/public/video/test.mp4
new file mode 100644
index 0000000..893580b
Binary files /dev/null and b/public/video/test.mp4 differ