danak/dlearn-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create mainPage

Browse Source
This commit is contained in:
HAM!DREZA
2024-05-14 10:55:46 +03:30
parent 3692ec6f61
commit 80cf37d18b
25 changed files with 1131 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/home-page/About-us.vue
+117
View File
@@ -0,0 +1,117 @@
<template>
<div class="flex justify-center mt-[10vw] md:mt-[8vw] pb-[10vw]">
<div
class="w-[87.69%] md:w-[81.04%] flex flex-col md:flex-row justify-between mt-[3.846vw] md:mt-[1.667vw]"
>
<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]"
>
درباره ما
</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]"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی
در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می
طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این
صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای
اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده
قرار گیرد.
</p>
</div>
<div class="relative basis-1/1 md:basis-1/2">
<div class="grid-gallery mt-0 md:mt-[3.906vw] pb-[105vw] md:pb-0">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
@media (min-width: 768px) {
.panel {
background: url("./images/aboutUs.jpg");
background-size: cover;
background-repeat: no-repeat !important;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: absolute;
}
.panel:nth-child(1) {
width: 16.667vw !important;
height: 16.667vw !important;
top: 4vw !important;
left: -0.1vw !important;
background-position-x: 28% !important;
background-position-y: 0% !important;
background-size: 340% !important;
}
.panel:nth-child(2) {
top: 12.75vw !important;
left: 0.26vw !important;
height: 33.076vw !important;
width: 33.076vw !important;
background-position-x: 50% !important;
background-position-y: -7.24vw !important;
background-size: 150% !important;
}
.panel:nth-child(3) {
width: 16.667vw !important;
height: 16.667vw !important;
top: 4vw !important;
left: 17.1vw !important;
background-size: 300% !important;
background-position-x: 75% !important;
background-position-y: 0% !important;
}
}
.panel {
background: url("./images/aboutUs.jpg");
background-size: cover;
background-repeat: no-repeat !important;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: absolute;
}
.panel:nth-child(1) {
width: 45.667vw;
height: 45.667vw;
top: 9vw;
left: -2.5vw;
background-position-x: 28%;
background-position-y: 0%;
background-size: 340%;
}
.panel:nth-child(2) {
top: 32.75vw;
left: 0.26vw;
height: 87.076vw;
width: 87.692vw;
background-position-x: 50%;
background-position-y: 310%;
background-size: 160%;
}
.panel:nth-child(3) {
width: 45.667vw;
height: 45.667vw;
top: 9vw;
left: 45.2vw;
background-size: 300%;
background-position-x: 75%;
background-position-y: 0%;
}
</style>
components/home-page/Information.vue
+123
View File
@@ -0,0 +1,123 @@
<template>
<div class="flex justify-center">
<div class="w-[81.04%] flex flex-col md:flex-row justify-between mt-[12.821vw] md:mt-[7.25vw]">
<div class="flex flex-col md:flex-row items-center text-center mb-5 md:mb-0">
<svg class="h-[18.205vw] md:h-[8.854vw] w-[18.205vw] md:w-[8.854vw]" width="8.854vw" height="8.854vw" viewBox="0 0 170 170" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_1_2081)">
<circle cx="85" cy="81" r="70" fill="white" />
</g>
<g clip-path="url(#clip0_1_2081)">
<path
d="M75.5335 77.2334C75.2002 77.2001 74.8002 77.2001 74.4335 77.2334C66.5002 76.9667 60.2002 70.4667 60.2002 62.4667C60.2002 54.3001 66.8002 47.6667 75.0002 47.6667C83.1669 47.6667 89.8002 54.3001 89.8002 62.4667C89.7669 70.4667 83.4669 76.9667 75.5335 77.2334Z"
stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M99.6999 54.3333C106.167 54.3333 111.367 59.5666 111.367 65.9999C111.367 72.2999 106.367 77.4333 100.133 77.6666C99.8666 77.6333 99.5666 77.6333 99.2666 77.6666"
stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M58.8664 89.5333C50.7997 94.9333 50.7997 103.733 58.8664 109.1C68.0331 115.233 83.0664 115.233 92.2331 109.1C100.3 103.7 100.3 94.8999 92.2331 89.5333C83.0997 83.4333 68.0664 83.4333 58.8664 89.5333Z"
stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M106.134 107.667C108.534 107.167 110.8 106.2 112.667 104.767C117.867 100.867 117.867 94.4334 112.667 90.5334C110.834 89.1334 108.6 88.2001 106.234 87.6667"
stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<filter id="filter0_d_1_2081" x="0" y="0" width="170" height="170"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="4" />
<feGaussianBlur stdDeviation="7.5" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix"
values="0 0 0 0 0.960784 0 0 0 0 0.898039 0 0 0 0 0.945098 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_2081" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_2081"
result="shape" />
</filter>
<clipPath id="clip0_1_2081">
<rect width="80" height="80" fill="white" transform="translate(45 41)" />
</clipPath>
</defs>
</svg>
<div class="text-[#383E43] font-semibold">
<p class="text-[5.11vw] md:text-[1.979vw]">+2000</p>
<p class="text-[3.59vw] md:text-[1.502vw]">دانشجو</p>
</div>
</div>
<div class="flex flex-col md:flex-row items-center text-center mb-5 md:mb-0">
<svg class="h-[18.205vw] md:h-[8.854vw] w-[18.205vw] md:w-[8.854vw]" viewBox="0 0 171 170" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_1_2068)">
<circle cx="85.5" cy="81" r="70" fill="white" />
</g>
<path
d="M87.267 109.067H66.2003C55.667 109.067 52.167 102.067 52.167 95.0333V66.9667C52.167 56.4333 55.667 52.9333 66.2003 52.9333H87.267C97.8003 52.9333 101.3 56.4333 101.3 66.9667V95.0333C101.3 105.567 97.767 109.067 87.267 109.067Z"
stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M110.566 97.9999L101.3 91.4999V70.4666L110.566 63.9666C115.1 60.8 118.833 62.7333 118.833 68.2999V93.6999C118.833 99.2666 115.1 101.2 110.566 97.9999Z"
stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M83.833 77.6667C86.5944 77.6667 88.833 75.4282 88.833 72.6667C88.833 69.9053 86.5944 67.6667 83.833 67.6667C81.0716 67.6667 78.833 69.9053 78.833 72.6667C78.833 75.4282 81.0716 77.6667 83.833 77.6667Z"
stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
<defs>
<filter id="filter0_d_1_2068" x="0.5" y="0" width="170" height="170"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="4" />
<feGaussianBlur stdDeviation="7.5" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix"
values="0 0 0 0 0.960784 0 0 0 0 0.898039 0 0 0 0 0.945098 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_2068" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_2068"
result="shape" />
</filter>
</defs>
</svg>
<div class="text-[#383E43] font-semibold">
<p class="text-[5.11vw] md:text-[1.979vw]">375</p>
<p class="text-[3.59vw] md:text-[1.502vw]">ویدئوی آموزشی</p>
</div>
</div>
<div class="flex flex-col md:flex-row items-center text-center mb-5 md:mb-0">
<svg class="h-[18.205vw] md:h-[8.854vw] w-[18.205vw] md:w-[8.854vw]" viewBox="0 0 170 170" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_1_2057)">
<circle cx="85" cy="81" r="70" fill="white" />
</g>
<g clip-path="url(#clip0_1_2057)">
<path
d="M90.7664 52.7L96.633 64.4334C97.433 66.0667 99.5664 67.6334 101.366 67.9334L112 69.7C118.8 70.8334 120.4 75.7667 115.5 80.6334L107.233 88.9C105.833 90.3 105.066 93.0001 105.5 94.9334L107.866 105.167C109.733 113.267 105.433 116.4 98.2664 112.167L88.2997 106.267C86.4997 105.2 83.533 105.2 81.6997 106.267L71.733 112.167C64.5997 116.4 60.2664 113.233 62.133 105.167L64.4997 94.9334C64.933 93.0001 64.1664 90.3 62.7664 88.9L54.4997 80.6334C49.633 75.7667 51.1997 70.8334 57.9997 69.7L68.633 67.9334C70.3997 67.6334 72.533 66.0667 73.333 64.4334L79.1997 52.7C82.3997 46.3334 87.5997 46.3334 90.7664 52.7Z"
stroke="#0D3F40" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<filter id="filter0_d_1_2057" x="0" y="0" width="170" height="170"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="4" />
<feGaussianBlur stdDeviation="7.5" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix"
values="0 0 0 0 0.960784 0 0 0 0 0.898039 0 0 0 0 0.945098 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_2057" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_2057"
result="shape" />
</filter>
<clipPath id="clip0_1_2057">
<rect width="80" height="80" fill="white" transform="translate(45 41)" />
</clipPath>
</defs>
</svg>
<div class="text-[#383E43] font-semibold">
<p class="text-[5.11vw] md:text-[1.979vw]">4.6</p>
<p class="text-[3.59vw] md:text-[1.502vw]">امتیاز دانشجویان به ما</p>
</div>
</div>
</div>
</div>
</template>
components/home-page/Intro.vue
+25
View File
@@ -0,0 +1,25 @@
<template>
<div id="head" class="flex justify-center md:flexBox h-[77.692vw] md:h-[40.625vw] relative mt-0 md:mt-[7.4vw]">
<img src="/public/images/HeaderBg.jpg" class="absolute top-0 left-0 w-full h-full object-cover -z-[1] scale-x-[-1] md:scale-x-[1]" alt="">
<div class=" flex w-[81.04%] text-white">
<div class="flex flex-col text-start">
<h2 class="text-[5.751vw] md:text-[2.188vw] font-bold mt-[25vw] md:mt-[0.052vw]">
داستان برنامه‌نویس <br />
شدنت از اینجا شروع میشه!
</h2>
<p class="hidden md:block mt-[1.25vw] text-[1.055vw] leading-[30.38px] mb-[2.917vw]">
شینان، آکادمی آموزش آنلاین تخصصی برنامه نویسی، با افتخار بهترین و به روزترین مقالات و فیلم های
آموزشی
پروژه محور و کاربردی در زمینه برنامه نویسی وب را در اختیار علاقه مندان این حرفه <br /> قرار خواهد
داد تا
بتوانند از این طریق درآمد بیشتری کسب کنند با ما همراه باشید تا گام های تبدیل شدن به توسعه دهنده وب
را از
مبتدی تا پیشرفته طی کنیم
</p>
<button
class="greenButton h-[8.974vw] md:h-[3.125vw] px-0 flexBox rounded-[2.051vw] md:rounded-[0.521vw] w-[26.41vw] md:w-[14.01vw] text-[3.19vw] md:text-[1.055vw] mt-[10vw] md:mt-0">شروع
یادگیری</button>
</div>
</div>
</div>
</template>
components/home-page/Suggested-courses.vue
+11
View File
@@ -0,0 +1,11 @@
<template>
<div class="flex justify-center">
<div
class="courses w-[87.69%] md:w-[81.04%] flex flex-col justify-center mt-[18vw] md:mt-[4.688vw] px-[3.846vw] md:px-[1.563vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]"
>
<home-page-courses-sectionCategories />
<home-page-courses-sectionSuggestedCourses />
<home-page-courses-sectionWatchCoursesButton />
</div>
</div>
</template>
components/home-page/courses-section/Categories.vue
+95
View File
@@ -0,0 +1,95 @@
<template>
<div class="category">
<h3
class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
>
انتخاب گسترده ای از دوره ها
</h3>
<p
class="ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
>
انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید که هر
ماه منتشر می شود
</p>
<div class="flexBox px-0 md:px-[1vw] h-[2.813vw] mt-[10vw] md:mt-[2.5vw]">
<svg
@click="this.$refs.carousel.next()"
class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="fill-[#878787] hover:fill-[#383E43]"
d="M18.9996 13.1125L16.5371 10.65L12.5246 6.63753C11.6746 5.80003 10.2246 6.40003 10.2246 7.60003V15.3875V22.4C10.2246 23.6 11.6746 24.2 12.5246 23.35L18.9996 16.875C20.0371 15.85 20.0371 14.15 18.9996 13.1125Z"
/>
</svg>
<Carousel
:items-to-show="8.3"
ref="carousel"
:breakpoints="breakpoints"
:wrapAround="true"
class="w-full md:w-[95%]"
>
<Slide v-for="slide in categories" :key="slide"
>
<div class="categoriesOption">{{ slide }}</div>
</Slide>
</Carousel>
<svg
@click="this.$refs.carousel.prev()"
class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.4748 6.65005L13.4623 10.6626L10.9998 13.1126C9.9623 14.1501 9.9623 15.8376 10.9998 16.8751L17.4748 23.3501C18.3248 24.2001 19.7748 23.5876 19.7748 22.4001V15.3876V7.60005C19.7748 6.40005 18.3248 5.80005 17.4748 6.65005Z"
class="fill-[#878787] hover:fill-[#383E43]"
/>
</svg>
</div>
</div>
</template>
<script setup>
const categories = [
"Python",
"JavaScript",
"C#",
"php",
"C++",
"Ruby",
"Node.js",
"php",
"C++",
"Ruby",
"Node.js",
];
const breakpoints= {
// 700px and up
300: {
itemsToShow: 3.5,
snapAlign: 'end',
},
700: {
itemsToShow: 7.3,
snapAlign: 'end',
},
// 1024 and up
1024: {
itemsToShow: 8.3,
snapAlign: 'end',
},
}
</script>
<style scoped>
</style>
components/home-page/courses-section/SuggestedCourses.vue
+23
View File
@@ -0,0 +1,23 @@
<template>
<div
class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.2vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
>
<h5
class="text-[4.544vw] mt-[1.5vw] md:mt-[1.6vw] md:text-[1.481vw] text-[#383E43] font-bold"
>
دوره های پیشنهادی
</h5>
<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 />
<Card />
<Card />
<Card />
</div>
</div>
</template>
components/home-page/courses-section/WatchCoursesButton.vue
+39
View File
@@ -0,0 +1,39 @@
<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]"
>
<nuxt-link to="/courses"
class="flex justify-center items-center border-b-2 border-[#878787] w-[45.59vw] md:w-[13.542vw]"
>
<svg
class="mb-[0.417vw] h-[4.103vw] w-[4.103vw] md:h-[1.146vw] md:w-[1.146vw]"
viewBox="0 0 22 23"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.917 10.5833L19.4337 3.06665"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M20.1666 6.73325V2.33325H15.7666"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.083 2.33325H8.24967C3.66634 2.33325 1.83301 4.16659 1.83301 8.74992V14.2499C1.83301 18.8333 3.66634 20.6666 8.24967 20.6666H13.7497C18.333 20.6666 20.1663 18.8333 20.1663 14.2499V12.4166"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span class="ms-[2vw] md:ms-[0.417vw] pb-[0.417vw]"> دیدن همه ی دوره ها </span>
</nuxt-link>
</div>
</template>