init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,121 @@
+<template>
+    <section class="product-brand">
+        <img :src="image" :alt="title" />
+        <div>
+            <h1>{{ title }}</h1>
+            <h2>{{ name }}</h2>
+            <h3>
+                <i class="isax isax-verify"></i>
+                <span>{{ category }}</span>
+            </h3>
+            <p>{{ desc }}</p>
+        </div>
+        <div>
+            <Button v-for="(btn, i) in navigation" :key="i" v-bind="btn" />
+            <Swiper v-bind="swiper">
+                <SwiperSlide v-for="(item, i) in images" :key="i">
+                    <img :src="item.src" />
+                </SwiperSlide>
+            </Swiper>
+        </div>
+    </section>
+</template>
+
+<script setup>
+import init from "../../initialize/brand";
+const { swiper, navigation } = init;
+
+defineProps({
+    image: { type: String, default: "/images/verity.svg" },
+    title: { type: String, default: "VERITY" },
+    name: { type: String, default: "وریتی" },
+    category: { type: String, default: "محصولات الکترونیکی و دیجیتال" },
+    desc: {
+        type: String,
+        default:
+            "برند وریتی مارکی آشنا و شناخته شده در بازار IT کشور است که با در نظر گرفتن نیاز افراد مختلف جامعه همواره تلاش کرده محصولاتی با قیمت مناسب و سطح کیفی بالا را روانه بازار کند. این موضوع باعث استقبال خوب توزیع کنندگان و کاربران لوازم جانبی کامپیوتر و موبایل، از محصولات برند Verity شده است و این امر موجب شده تا بازار فروش خوبی را در داخل کشور به دست آورد. تنوع محصولات وریتی در سه زمینه راهکارهای ذخیره سازی، لوازم جانبی کامپیوتر و لوازم جانبی موبایل است.",
+    },
+    images: {
+        type: Array,
+        default: [
+            { src: "/images/verity-banner.svg" },
+            { src: "/images/verity-banner.svg" },
+            { src: "/images/verity-banner.svg" },
+            { src: "/images/verity-banner.svg" },
+            { src: "/images/verity-banner.svg" },
+        ],
+    },
+});
+</script>
+
+<style lang="scss">
+.product-brand {
+    @apply w-full lg:h-[31.5rem] bg-[#FAFAFA] flex flex-col lg:flex-row gap-2 lg:gap-12 justify-center lg:pt-20 border-b-2 border-[#E5E5E5];
+
+    & > img {
+        @apply w-28 h-28 object-contain object-center max-lg:hidden;
+    }
+
+    & > div:nth-of-type(1) {
+        @apply flex flex-col gap-1 lg:gap-3 max-lg:items-center max-lg:p-6;
+
+        h1 {
+            @apply text-[#333333] text-[2em] leading-7 mt-3 font-bold font-vazir;
+        }
+
+        h2 {
+            @apply text-[#999999] text-xl font-medium font-vazir;
+        }
+
+        h3 {
+            @apply flex items-center gap-2 text-primary-600;
+
+            i {
+                @apply text-2xl;
+            }
+
+            span {
+                @apply font-medium font-vazir leading-normal;
+            }
+        }
+
+        p {
+            @apply w-full lg:w-[47.9rem] text-right text-[#333333] text-sm leading-5 max-lg:text-justify lg:text-lg font-normal font-vazir lg:leading-[2.3rem] mt-4;
+        }
+    }
+
+    & > div:nth-of-type(2) {
+        @apply flex gap-3 h-max w-full lg:w-max max-w-full max-lg:order-first;
+
+        .swiper {
+            @apply w-full max-w-[25rem] h-60 lg:h-[22rem] mx-0;
+
+            .swiper-wrapper {
+                @apply w-full lg:w-max h-max;
+                .swiper-slide {
+                    @apply w-max h-max lg:rounded-[0.6rem] overflow-hidden;
+                    img {
+                        @apply w-full h-60 lg:w-[25rem] lg:h-80 object-cover;
+                    }
+                }
+            }
+
+            .swiper-pagination {
+                @apply -bottom-1.5 max-lg:hidden;
+
+                .swiper-pagination-bullet {
+                    @apply w-7 rounded-full mx-1.5 bg-[#E5E5E5] opacity-100;
+                }
+
+                .swiper-pagination-bullet-active {
+                    @apply bg-[#47B556];
+                }
+            }
+        }
+
+        button {
+            @apply self-center -mt-3 text-[2.5em] last-of-type:order-last max-lg:hidden;
+        }
+    }
+}
+</style>