haditha_ui/pages/hadith/public-pages/contactus.vue

<script setup>
definePageMeta({
  layout: false,
  name: "hadithContact",
});
useHead({
  name: "hadithContact",
  title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | تماس با ما`,
  meta: [
    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
  ],
  bodyAttrs: {
    class: import.meta.env.VITE_HADITH_SYSTEM,
  },
});

// components declaration
const HadithLayout = defineAsyncComponent(() =>
  import("@hadith/layouts/HadithLayout.vue")
);
const NavigationMenu = defineAsyncComponent(() =>
  import("@hadith/components/hadith/NavigationMenu.vue")
);
</script>

<template>
  <HadithLayout>
    <div class="page-container h-full">
      <!-- max-w-[var(--ui-container-two)] -->
      <UContainer class="page-inner-container sm:px-6 lg:px-4">
        <span class="top-left-bgi z-0"></span>

        <navigation-menu></navigation-menu>

        <div class="page-header pt-38 pb-4 flex justify-between items-center">
          <div class="flex items-center">
            <h1 class="m-0 title">تماس با ما</h1>
          </div>
        </div>

        <div class="page-content p-6">
          <div class="mb-4">
            <span class="label">تلفن ثابت</span>
            <span class="value"> ۰۲۵۳۲۹۰۶۴۵۲</span>
          </div>

          <div class="mb-4">
            <span class="label">تلفن همراه </span>
            <span class="value">۰۹۱۲۷۵۰۵۰۵۰ </span>
          </div>
          <div class="mb-4">
            <span class="label">پشتیبان ایتا </span>
            <span class="value"> ۰۹۱۲۷۵۰۵۰۵۰</span>
          </div>
          <div class="mb-4">
            <span class="label">کدپستی </span>
            <span class="value">۱۲۳۴۵۶۷۸ </span>
          </div>
          <div class="mb-4">
            <span class="label"> آدرس</span>
            <span class="value">
              دفتر مرکزی: قم، خیابان معلم، کوچه ۱۰، فرعی ۳ پلاک ۵۵ ساختمان
              اشراق، واحد ۳۰۵</span
            >
          </div>
          <div class="location">
            <NuxtImg
              fit="auto"
              quality="80"
              placeholder
              src="/img/location.png"
            />
          </div>
        </div>
      </UContainer>
    </div>
  </HadithLayout>
</template>

<style scoped>
.page-container {
  background: #f7fffd;
  position: relative;
  z-index: 1;

  .top-left-bgi {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("../../../assets/hadith/images/modal-top-bgi.png");
    backdrop-filter: blur(54px);
    width: 447px;
    height: 447px;
    top: 0;
    left: 0;

    background-repeat: no-repeat;
    background-size: auto;
    z-index: -1;
  }
  &::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    background-image: url("../../../assets/hadith/images/modal-bttom-right-bgi.png");
    backdrop-filter: blur(54px);
    width: 438px;
    height: 238px;
    mix-blend-mode: Multiply;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
  }

  &::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 458px;
    height: 239px;
    mix-blend-mode: Multiply;
    background-image: url("../../../assets/hadith/images/modal-bottom-left-bgi.png");
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: blur(54px);
    z-index: -1;
  }
  .page-inner-container {
    .page-header {
      color: var(--ui-color-two);

      .title {
        font-family: IRANSansX;
        font-weight: 300;
        font-size: 24px;
        line-height: 36px;
        letter-spacing: 0%;
        text-align: center;
      }
    }

    .page-content {
      color: var(--ui-color-two);

      .label {
        display: inline-block;
        margin-inline-end: 1em;
        font-family: IRANSansX;
        font-weight: 300;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0%;
        text-align: right;
        color: #626b84;
        width: 77px;
        height: 21;
      }
      .value {
        font-family: IRANSansX;
        font-weight: 300;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0%;
        text-align: right;
        color: #1b2132;
      }

      .location {
        width: 672;
        height: 348;
        border-width: 1px;
        border-radius: 16px;

        border: 1px solid;

        border-image-source: linear-gradient(
          102.02deg,
          #4be8ae 7.38%,
          #00a762 91.78%
        );
      }
    }
  }
}
</style>