From 706d757c74ac4b584a785f554a13b9713f273872 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sat, 21 Dec 2024 22:13:04 +0330
Subject: [PATCH] Create most recent comments

---
 .../components/home/MostRecentComments.vue    | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 frontend/components/home/MostRecentComments.vue

diff --git a/frontend/components/home/MostRecentComments.vue b/frontend/components/home/MostRecentComments.vue
new file mode 100644
index 0000000..fce34f6
--- /dev/null
+++ b/frontend/components/home/MostRecentComments.vue
@@ -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>
\ No newline at end of file