init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,82 @@
+<template>
+    <section class="amazing-offers">
+        <div>
+            <aside>
+                <h2>
+                    <span>{{ $t("amazingOffers") }}</span>
+                    <span>{{ $t("asanMarket") }}</span>
+                </h2>
+                <img src="/images/amazing.svg" />
+            </aside>
+            <Swiper :slides-per-view="'auto'">
+                <SwiperSlide v-for="(product, i) in amazingOffers" :key="i">
+                    <ProductCard :data="product" type="main" />
+                </SwiperSlide>
+            </Swiper>
+        </div>
+    </section>
+</template>
+
+<script setup>
+const { amazingOffers } = inject('data')
+</script>
+
+<style lang="scss">
+.amazing-offers {
+    @apply w-full flex justify-center;
+    @apply mt-[2.6rem] lg:mt-[11.3rem];
+
+    &>div {
+        @apply max-w-full w-full flex shrink-0 bg-[#F2F2F2] overflow-hidden;
+        @apply gap-2.5 pr-2.5 h-max;
+        @apply lg:container lg:rounded-2xl lg:pr-[2.6rem] lg:gap-[2.4rem];
+
+        aside {
+            @apply bg-[linear-gradient(to_bottom,_#47B556_0%,_#F2F2F200_60%)];
+            @apply flex flex-col items-center justify-between;
+            @apply relative rounded-[0.6rem] shrink-0 mt-2;
+            @apply w-[6.2rem] h-[11.5rem] pt-4 px-2.5;
+            @apply lg:w-[11.6rem] lg:h-[20.1rem] lg:my-7 lg:px-5;
+
+            &::before {
+                @apply content-['_'] absolute inset-[0.2rem] bg-[#F2F2F2] rounded-lg;
+            }
+
+            h2 {
+                @apply flex flex-col items-center justify-center z-0 gap-2;
+
+                span {
+                    @apply text-center first:text-[#163D22] last:text-primary-600;
+                    @apply font-vazir font-black text-base lg:text-3xl;
+                }
+            }
+
+            img {
+                @apply w-[3.4rem] h-[4.3rem] lg:w-[9.6rem] lg:h-[12rem] self-start lg:-mb-20 z-0;
+            }
+        }
+
+        .swiper {
+            @apply w-full h-full rounded-xl relative rtl lg:ltr lg:px-6;
+
+            .swiper-wrapper {
+                @apply mt-2 mb-3 lg:my-6 z-0;
+
+                .swiper-slide {
+                    @apply h-max w-max ml-[0.3rem] lg:ml-6 first:ml-0 rtl;
+                }
+            }
+
+            &::before {
+                @apply content-['_'] w-6 absolute inset-y-0 -right-6 z-10;
+                @apply shadow-[-5px_0px_23px_0px_#00000040] max-lg:hidden;
+            }
+
+            &::after {
+                @apply content-['_'] w-6 absolute inset-y-0 -left-6 z-10;
+                @apply shadow-[5px_0px_23px_0px_#00000040] max-lg:hidden;
+            }
+        }
+    }
+}
+</style>