haditha_ui/components/haditha/hero-page/SectionFive.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/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>