HAM!DREZA
275 lines
14 KiB
Vue
275 lines
14 KiB
Vue
<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> |