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

108 lines
2.8 KiB
Vue
Raw Normal View History

2025-03-01 12:44:34 +00:00
<script setup>
const img = useImage();
const backgroundImageStyle = computed(() => {
// Use $img to generate an optimized image URL
const optimizedImageUrl = img("/img/section-three-bgi.svg", {
quality: 80,
fit: "auto",
});
return {
backgroundImage: `url(${optimizedImageUrl})`,
};
});
</script>
<template>
<section class="section-three flex" :style="backgroundImageStyle">
<div class="section-container mx-auto">
<div class="header flex items-center mb-2">
<NuxtImg
width="88"
height="34"
fit="auto"
quality="80"
placeholder
src="/img/section-three-logo.svg"
class="me-2"
/>
<span class="title"> چگونه کار میکند؟ </span>
</div>
<div class="content">
حدیثا، پیشرفتهترین سامانه هوش مصنوعی در حوزه مفاهیم حدیثی است. این
سامانه با تحلیل عمیق متون حدیثی و استفاده از جدیدترین فناوریهای هوش
مصنوعی، امکان دسترسی سریع، دقیق و معنادار به احادیث و مفاهیم اسلامی را
فراهم میکند.این سرویس با استفاده از تکنولوژیهای پیشرفتهای نظیر پردازش
زبان طبیعی (NLP) و جستجوی معنایی، مفاهیم مرتبط را شناسایی کرده و بهترین
نتایج را نمایش میدهد.
</div>
</div>
</section>
</template>
<style scoped>
.section-three {
padding-top: 11em; /*120px;*/
padding-bottom: 11em; /*65px;*/
background-repeat: no-repeat;
/*height: 37.5em;600px;*/
gap: 8.75em; /*140px;*/
padding-right: 2em; /*32px;*/
padding-left: 2em; /*32px;*/
background-color: #1b2132;
.section-container {
width: 56.7em; /*907px;*/
/*height: 15.5em; 249px;*/
gap: 9px;
.header {
max-width: 30em; /*480px;*/
background: #1b2132cc;
width: 352.611083984375;
height: 56;
gap: 10px;
padding-top: 4px;
padding-right: 16px;
padding-bottom: 4px;
padding-left: 16px;
border-radius: 16px;
.title {
font-family: IRANSansX;
font-weight: 300;
font-size: 32px;
line-height: 48px;
letter-spacing: 0%;
text-align: center;
color: #d9d9d9;
}
}
.content {
max-width: 30em; /*480px;*/
height: 184;
gap: 10px;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
border-radius: 16px;
background: #1b2132cc;
font-family: IRANSansX;
font-weight: 300;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%;
text-align: right;
color: #ffffff;
}
}
}
</style>