marzban-dev
78 lines
2.6 KiB
Vue
78 lines
2.6 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"
|
|
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> |