create mainPage

2024-05-14 10:55:46 +03:30
parent 3692ec6f61
commit 80cf37d18b
25 changed files with 1131 additions and 47 deletions
@@ -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>
@@ -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>
@@ -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>