Create landing hero section

2024-12-20 00:08:13 +03:30
parent d1996908eb
commit 30671005a8
1 changed files with 121 additions and 0 deletions
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+
+// import
+
+import { Swiper, SwiperSlide } from "swiper/vue";
+import type { SwiperClass } from "swiper/react";
+
+// state
+
+const swiper_instance = ref<SwiperClass | null>(null);
+
+const slides = [
+    {
+        id: 0,
+        title: "TEST"
+    },
+    {
+        id: 1,
+        title: "TEST"
+    },
+    {
+        id: 2,
+        title: "TEST"
+    },
+    {
+        id: 3,
+        title: "TEST"
+    },
+    {
+        id: 4,
+        title: "TEST"
+    }
+];
+
+// methods
+
+const onSwiper = (swiper: SwiperClass) => {
+    swiper_instance.value = swiper;
+};
+
+const onChange = (swiper: SwiperClass) => {
+    console.log(swiper.activeIndex, swiper.realIndex, swiper.snapIndex);
+};
+
+</script>
+
+<template>
+    <div class="w-full mb-20">
+        <div
+            class="relative"
+        >
+            <Swiper
+                :slides-per-view="1.2"
+                :loop="true"
+                :space-between="40"
+                :centered-slides="true"
+                @swiper="onSwiper"
+                @slide-change="onChange"
+            >
+                <SwiperSlide
+                    v-for="slide in slides"
+                    :key="slide.id"
+                >
+                    <div class="relative w-full rounded-200 h-[80svh] overflow-hidden">
+                        <img
+                            class="absolute inset-0 size-full object-cover"
+                            src="/img/hero-bg.jpg"
+                            alt=""
+                        />
+                        <div class="size-full absolute z-10 bg-linear-to-t from-black to-transparent" />
+                        <div class="px-20 absolute z-10 w-full bottom-36">
+                            <div class="border-b border-white/10 pb-6">
+                                <h3 class="typo-hero-1 text-white">
+                                    Samsung {{ slide.id }}
+                                </h3>
+                                <div class="flex justify-between items-end">
+                                <span class="typo-p-lg text-white">
+                                    توضیحات درمورد این محصول خاص
+                                </span>
+                                    <Button class="invert rounded-full hover:bg-transparent">
+                                        خرید Samsung
+                                    </Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </SwiperSlide>
+            </Swiper>
+            <div class="absolute w-full bottom-20 left-[50%] translate-x-[-50%] z-100">
+                <div class="container h-full">
+                    <div class="h-full flex items-center justify-between px-20">
+                        <button @click="swiper_instance?.slidePrev()">
+                            <Icon
+                                class="**:stroke-white cursor-pointer"
+                                name="ci:arrow-right"
+                                size="24"
+                            />
+                        </button>
+                        <div class="flex items-center justify-center gap-3 text-white">
+                            <div
+                                v-for="(slide, index) in slides"
+                                :class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
+                                class="border border-white size-3 rounded-full transition-all duration-200"
+                                @click="swiper_instance?.slideTo(index)"
+                            >
+                            </div>
+                        </div>
+                        <button>
+                            <Icon
+                                @click="swiper_instance?.slideNext()"
+                                class="**:stroke-white cursor-pointer"
+                                name="ci:arrow-left"
+                                size="24"
+                            />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>