210 lines
6.2 KiB
Vue
210 lines
6.2 KiB
Vue
<script setup>
|
|
const state = reactive({
|
|
items: [
|
|
{
|
|
img: "https://picsum.photos/640/640?random=1",
|
|
title: "حجتالاسلام خسروپناه",
|
|
job: "پژوهشگر",
|
|
summary:
|
|
"این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است.",
|
|
},
|
|
{
|
|
img: "https://picsum.photos/640/640?random=1",
|
|
title: "حجتالاسلام خسروپناه",
|
|
job: "پژوهشگر",
|
|
summary:
|
|
"این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است.",
|
|
},
|
|
{
|
|
img: "https://picsum.photos/640/640?random=1",
|
|
title: "حجتالاسلام خسروپناه",
|
|
job: "پژوهشگر",
|
|
summary:
|
|
"این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است.",
|
|
},
|
|
{
|
|
img: "https://picsum.photos/640/640?random=1",
|
|
title: "حجتالاسلام خسروپناه",
|
|
job: "پژوهشگر",
|
|
summary:
|
|
"این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهشهای من بسیار سادهتر شده است.",
|
|
},
|
|
],
|
|
});
|
|
</script>
|
|
<template>
|
|
<section class="section-five flex">
|
|
<UContainer
|
|
class="section-container mx-auto max-w-[var(--ui-container-two)] sm:px-6 lg:px-4"
|
|
>
|
|
<div class="header flex items-center justify-center mb-8">
|
|
<span class="title me-1">تجربه شما با </span>
|
|
|
|
<NuxtImg
|
|
width="49"
|
|
height="18"
|
|
fit="auto"
|
|
quality="80"
|
|
placeholder
|
|
src="/img/haditha-title.svg"
|
|
class="me-2"
|
|
/>
|
|
</div>
|
|
|
|
<!-- :prev="{ color: 'ghost' }"
|
|
:next="{ variant: 'ghost' }" -->
|
|
|
|
<div class="content">
|
|
<UCarousel
|
|
:autoplay="{ delay: 10000 }"
|
|
loop
|
|
arrows
|
|
dots
|
|
prev-icon="i-lucide-chevron-right"
|
|
next-icon="i-lucide-chevron-left"
|
|
v-slot="{ item }"
|
|
:items="state.items"
|
|
class="w-full max-w-xs mx-auto"
|
|
:ui="{
|
|
item: 'carousel-item flex flex-col items-center justify-center',
|
|
root: 'root',
|
|
viewport: 'viewport',
|
|
container: 'container',
|
|
controls: 'controls',
|
|
arrows: 'arrows',
|
|
prev: 'prev rounded-xl top-1/7',
|
|
next: 'next rounded-xl top-1/7 ',
|
|
dots: 'dots -bottom-10',
|
|
dot: 'dot size-2',
|
|
}"
|
|
>
|
|
<NuxtImg
|
|
width="100"
|
|
height="100"
|
|
fit="auto"
|
|
quality="80"
|
|
placeholder
|
|
:src="item.img"
|
|
class="rounded-full"
|
|
/>
|
|
<div class="my-6">
|
|
<p class="title">{{ item.title }}</p>
|
|
<p class="job">{{ item.job }}</p>
|
|
</div>
|
|
<p class="summary">
|
|
{{ item.summary }}
|
|
</p>
|
|
</UCarousel>
|
|
</div>
|
|
</UContainer>
|
|
</section>
|
|
</template>
|
|
<style scoped>
|
|
.section-five {
|
|
background: linear-gradient(329.16deg, #b9fde0 13.45%, #eefff8 63.57%);
|
|
padding: 6em 0 11.2em; /* 120px */
|
|
|
|
.header {
|
|
.title {
|
|
font-family: IRANSansX;
|
|
font-weight: 300;
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
letter-spacing: 0%;
|
|
text-align: center;
|
|
|
|
color: #626b84;
|
|
}
|
|
}
|
|
.carousel-item {
|
|
.title {
|
|
font-family: IRANSansX;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
letter-spacing: 0%;
|
|
text-align: center;
|
|
|
|
/* Fallback color */
|
|
color: #4d00ff;
|
|
|
|
/* Gradient background */
|
|
background: linear-gradient(268.92deg, #d284ff 37.62%, #4d00ff 63.24%);
|
|
|
|
/* Clip the background to the text */
|
|
background-clip: text;
|
|
-webkit-background-clip: text; /* For Safari */
|
|
|
|
/* Make the text transparent */
|
|
color: transparent;
|
|
-webkit-text-fill-color: transparent; /* For Safari */
|
|
}
|
|
|
|
.job {
|
|
font-family: IRANSansX;
|
|
font-weight: 300;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
letter-spacing: 0%;
|
|
text-align: center;
|
|
color: #626b84;
|
|
}
|
|
|
|
.summary {
|
|
/* padding: 2.5em 0 2.5em; */
|
|
margin-bottom: 0.3em;
|
|
font-family: IRANSansX;
|
|
font-weight: 300;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
letter-spacing: 0%;
|
|
text-align: justify;
|
|
|
|
color: var(--ui-color-two);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.section-five {
|
|
.prev,
|
|
.next {
|
|
width: 40;
|
|
height: 56;
|
|
padding: 1.2em 0.6em;
|
|
border-radius: 12px;
|
|
|
|
background: #ffffff;
|
|
border: 0.3px solid #e0e0e0;
|
|
box-shadow: 0px 1px 4px 0px #0000000d;
|
|
|
|
color: #545aea;
|
|
}
|
|
|
|
.content {
|
|
.controls {
|
|
.dots {
|
|
.dot {
|
|
background-color: #fff;
|
|
border: 1px solid #e0e0e0;
|
|
box-shadow: 0px 1px 4px 0px #0000000d;
|
|
|
|
&[class*="bg-[var(--ui-border-inverted)]"] {
|
|
width: 0.8em;
|
|
height: 0.8em;
|
|
background: linear-gradient(
|
|
102.02deg,
|
|
#4be8ae 7.38%,
|
|
#00a762 91.78%
|
|
);
|
|
border:0;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|