marzban-dev
80 lines
2.8 KiB
Vue
80 lines
2.8 KiB
Vue
<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">
|
|
<NuxtImg
|
|
class="absolute size-full object-cover"
|
|
src="/img/hero-bg.jpg"
|
|
loading="lazy"
|
|
fetch-priority="low"
|
|
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="text-base xs:text-lg sm:typo-h-6 lg:typo-h-5 !font-normal !leading-[150%] lg:leading-[175%] max-sm:px-4 sm:max-w-[600px] lg:max-w-[800px] text-center"
|
|
>
|
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک
|
|
است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم.
|
|
</p>
|
|
<span class="typo-p-sm md: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-1.5 md:size-2 rounded-full transition-all duration-200"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|