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

190 lines
4.6 KiB
Vue
Raw Normal View History

2025-02-26 07:52:21 +00:00
<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>