create single page of courses

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>