init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,59 @@
+<template>
+    <section class="main-categories">
+        <Swiper slides-per-view="auto">
+            <SwiperSlide v-for="(item, i) in store.items" :key="i">
+                <router-link :to="{ path: '/search', query: { category: item.link } }">
+                    <img :src="item.headerImage" />
+                    <h3>{{ $t(item.name) }}</h3>
+                </router-link>
+            </SwiperSlide>
+        </Swiper>
+    </section>
+</template>
+
+<script setup>
+const store = useCategoriesStore();
+</script>
+
+<style lang="scss">
+.main-categories {
+	@apply w-full flex mt-12 lg:mt-[9.6rem];
+
+	.swiper {
+		@apply container py-2 lg:py-4 max-lg:px-4;
+
+		.swiper-wrapper {
+			@apply w-max mx-auto;
+
+			.swiper-slide {
+				@apply w-max ml-2.5 lg:ml-[1.4rem] last:ml-0;
+
+				a {
+					@apply flex flex-col items-center shrink-0;
+					@apply w-[6.3rem] gap-2.5 pb-4;
+					@apply lg:w-[10.8rem] lg:gap-5 lg:pb-6;
+
+					// &::before {
+					// 	@apply content-['_'] h-[5.6rem] lg:h-[10.8rem] rounded-2xl absolute bottom-0 inset-x-0 -z-10;
+					// 	@apply shadow-[3px_2px_10px_#87C29A] lg:shadow-[5px_5px_19px_0px_#87C29A,_-5px_-1px_15px_0px_#ffffffcc];
+					// 	background: linear-gradient(
+					// 		133deg,
+					// 		#e9ecef 0%,
+					// 		white 100%
+					// 	);
+					// }
+
+					img {
+						@apply w-[4.4rem] h-[4.4rem] rounded-full lg:w-[9.1rem] lg:h-32;
+					}
+
+					h3 {
+						@apply text-[#191919] font-medium font-vazir;
+						@apply text-[0.625em] lg:text-[1.1875em];
+					}
+				}
+			}
+		}
+	}
+}
+</style>