haditha_ui/pages/hadith/index.vue

<template>
  <HadithLayout>
    <section-one></section-one>
    <section-two></section-two>
  </HadithLayout>
</template>
<script>

export default {
  name: "hadith",
  setup() {
    useHead({
      title: import.meta.env.VITE_HADITH_PAGE_TITLE,
      meta: [
        { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
      ],
      bodyAttrs: {
        class: import.meta.env.VITE_HADITH_SYSTEM,
      },
    });

    definePageMeta({
      layout: false,
      name: "hadith",
    });
  },
  components: {
    SectionOne: defineAsyncComponent(() =>
      import("@hadith/components/hadith/hero-page/SectionOne.vue")
    ),
    SectionTwo: defineAsyncComponent(() =>
      import("@hadith/components/hadith/hero-page/SectionTwo.vue")
    ),
    HadithLayout: defineAsyncComponent(() =>
      import("@hadith/layouts/HadithLayout.vue")
    ),
  },
};
</script>
<style scoped>
.section-one {
  .bg-container {
    height: 521px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    /* background-image: url("/img/background.svg"),
      linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%); */
  }

  .text-logo {
    padding-top: 10em;
    position: relative;

    .title {
      margin-top: 3.5em;
      font-family: IRANSansX;
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0%;
      text-align: center;
      color: #1b2132;
    }
    .badge-style {
      width: 100;
      height: 23;
      border-radius: 40px;
      padding-right: 8px;
      padding-bottom: 2px;
      padding-left: 8px;
      gap: 10px;
      color: #fff;

      background: linear-gradient(270.29deg, #d284ff 8.12%, #4d00ff 109.58%);
    }
  }

  .search-box-container {
    padding-top: 1em;
    padding-bottom: 4em; /*64px */
  }
}

.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: #1b2132;
      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>