create about-us page

2024-05-16 13:26:35 +03:30
parent ebfdad9d98
commit 33bf2cf5c3
6 changed files with 318 additions and 40 deletions
@@ -55,7 +55,7 @@
    <div
      class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
    >
-      <Card />
+    <Card />
      <Card />
      <Card />
      <Card />
@@ -219,39 +219,46 @@
            </span>

          </nuxt-link>
-          <span class="flexBox gap-[0.8vw]">
-            <svg
-              width="1.302vw"
-              height="1.302vw"
-              viewBox="0 0 25 25"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
+          <nuxt-link to="/about-us">
+            <span class="flexBox gap-[0.8vw]"
+            :class="{ 'text-primaryGreen': $route.path === '/about-us' }"
            >
-              <path
-                d="M12.5 22.5C18 22.5 22.5 18 22.5 12.5C22.5 7 18 2.5 12.5 2.5C7 2.5 2.5 7 2.5 12.5C2.5 18 7 22.5 12.5 22.5Z"
-                stroke="#383E43"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M12.5 8.5V13.5"
-                stroke="#383E43"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M12.4946 16.5H12.5036"
-                stroke="#383E43"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-
-            درباره ما</span
-          >
+              <svg
+                width="1.302vw"
+                height="1.302vw"
+                viewBox="0 0 25 25"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                :class="{ 'stroke-primaryGreen': $route.path === '/about-us' }"
+                  d="M12.5 22.5C18 22.5 22.5 18 22.5 12.5C22.5 7 18 2.5 12.5 2.5C7 2.5 2.5 7 2.5 12.5C2.5 18 7 22.5 12.5 22.5Z"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                :class="{ 'stroke-primaryGreen': $route.path === '/about-us' }"
+                  d="M12.5 8.5V13.5"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                :class="{ 'stroke-primaryGreen': $route.path === '/about-us' }"
+                  d="M12.4946 16.5H12.5036"
+                  stroke="#383E43"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+  
+              درباره ما</span
+            >
+          </nuxt-link>
        </div>

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


@@ -186,7 +186,7 @@



-    <nuxt-link to="/" class="bg-footerGreen text-primaryGreen font-semibold p-[2.564vw]  flexBox rounded-[7.692vw]">
+    <nuxt-link to="/about-us" class="bg-footerGreen text-primaryGreen p-[2.564vw]  flexBox rounded-[7.692vw]">
      <svg 
      class="h-[6.154vw] w-[6.154vw]"
      viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -196,12 +196,8 @@
        </svg>
        
   
-      <span v-if="$route.path === '/y'" class="ps-[2vw]">درباره ما</span>
+      <span v-if="$route.path === '/about-us'" class="px-[2vw]">درباره ما</span>
    </nuxt-link>
-
-
-
-
    <nuxt-link to="/" class="bg-footerGreen text-primaryGreen font-semibold p-[2.564vw]  flexBox rounded-[7.692vw]">
      <svg
      class="h-[6.154vw] w-[6.154vw]"
@@ -0,0 +1,275 @@
+<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>
+</template>