haditha_ui/components/hadith/hero-page/SectionTwo.vue

<template>
  <section class="section-two">
    <div class="flex flex-col items-center py-6">
      <div>قابلیت ها</div>
      <div>
        <NuxtImg
          width="32"
          height="32"
          fit="auto"
          quality="80"
          placeholder
          src="/img/chevron-down.svg"
        />
      </div>
    </div>

    <div class="flex flex-col lg:flex-row">
      <div class="my-card card-one basis-full flex justify-center items-center">
        <div class="inner-container">
          <div>
            <p class="title">جستجوی معنایی</p>
            <p class="description">ارائه نتایج دقیق و معنادار از میان</p>
            <p class="description">حجم انبوه متون حدیثی</p>
          </div>

          <NuxtImg
            fit="auto"
            quality="80"
            placeholder
            src="/img/card-one.png"
          />
        </div>
      </div>
      <div class="my-card card-two basis-full flex justify-center items-center">
        <div class="inner-container">
          <div class="">
            <p class="title">جستجوی مترادف‌ها</p>
            <p class="description">یافتن سریع واژگان مرتبط برای</p>
            <p class="description">درک بهتر مفاهیم حدیثی</p>
          </div>

          <NuxtImg
            fit="auto"
            quality="80"
            placeholder
            src="/img/card-two.png"
          />
        </div>
      </div>
      <div
        class="my-card card-three basis-full flex flex-col justify-center items-center"
      >
        <div class="inner-container">
          <div>
            <p class="title">مشابهت‌یابی حدیث</p>
            <p class="description">امکان یافتن احادیث یا مفاهیمی</p>
            <p class="description">با معنای مشابه یک حدیث</p>
          </div>

          <NuxtImg
            fit="auto"
            quality="80"
            placeholder
            src="/img/card-three.png"
          />
        </div>
      </div>
    </div>
  </section>
</template>
<script></script>
<style scoped>
.section-two {
  font-weight: 200;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0%;
  text-align: center;

  .my-card {
    background-repeat: no-repeat;
    background-size: auto;
    height: 660px;

    .inner-container {
      max-width: 21.25em;
      margin: auto;
    }
    .title {
      font-weight: 500;
      font-size: 24px;
      line-height: 36px;
      letter-spacing: 0%;
      color: var(--ui-color-two);
      text-align: right;
    }

    .description {
      font-weight: 300;
      font-size: 20px;
      line-height: 30px;
      letter-spacing: 0%;
      text-align: right;
      color: #626b84;
    }

    &.card-one {
      background-image: url("/img/card-one-bgi.png"),
        linear-gradient(134.17deg, #ffffff -9.81%, #e5e0ff 87.62%);
    }
    &.card-two {
      background-image: url("/img/card-two-bgi.png"),
        linear-gradient(329.16deg, #b9fde0 13.45%, #eefff8 63.57%);
    }
    &.card-three {
      background-image: url("/img/card-three-bgi.png"),
        linear-gradient(134.17deg, #ffffff -9.81%, #e5e0ff 87.62%);
    }
  }
}
</style>