haditha_ui/components/hadith/hero-page/SectionFive.vue
2025-03-01 16:14:34 +03:30

185 lines
5.7 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
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',
}"
>
<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;
}
}
</style>