haditha_ui/pages/hadith/index.vue
2025-02-18 16:26:13 +03:30

133 lines
2.9 KiB
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>