Create most recent comments

2024-12-21 22:13:04 +03:30
parent 2877a9b68d
commit 706d757c74
1 changed files with 78 additions and 0 deletions
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+
+// import
+
+import { Swiper, SwiperSlide } from "swiper/vue";
+import type { SwiperClass } from "swiper/react";
+
+// types
+
+type Props = {}
+
+// props
+
+const props = defineProps<Props>();
+const {} = toRefs(props);
+
+// state
+
+const swiper_instance = ref<SwiperClass | null>(null);
+
+// methods
+
+const onSwiper = (swiper: SwiperClass) => {
+    swiper_instance.value = swiper;
+};
+
+</script>
+
+<template>
+    <div class="relative max-h-[700px] flex justify-center items-center h-svh w-full">
+        <img
+            class="absolute size-full object-cover"
+            src="/img/hero-bg.jpg"
+            alt=""
+        />
+        <div class="absolute bg-black/60 size-full z-10" />
+
+        <div class="w-full relative z-10">
+            <Swiper
+                :slides-per-view="1"
+                :loop="true"
+                :space-between="40"
+                :centered-slides="true"
+                :grab-cursor="true"
+                @swiper="onSwiper"
+            >
+                <SwiperSlide
+                    v-for="i in 6"
+                    :key="i"
+                >
+                    <div class="flex justify-center items-center">
+                        <div class="max-w-[900px] px-4 text-white flex flex-col items-center gap-4">
+                            <Icon name="ci:instagram" size="28" class="**:stroke-white" />
+                            <p class="typo-h-5 leading-[150%] text-center">
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+                                استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
+                                در ستون و سطرآنچنان که لازم.
+                            </p>
+                            <span class="typo-p-xl text-center">
+                             - منصور مرزبان
+                        </span>
+                        </div>
+                    </div>
+                </SwiperSlide>
+            </Swiper>
+
+            <div class="flex items-center justify-center gap-3 text-white mt-6 relative z-10">
+                <div
+                    v-for="(i, index) in 6"
+                    :class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
+                    class="border border-white size-2 rounded-full transition-all duration-200"
+                >
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>