haditha_ui/components/haditha/hero-page/SectionThree.vue
mustafa-rezae 953d98f3be Rename files.
Add svg icons
2025-03-06 14:58:20 +03:30

108 lines
2.9 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<script setup>
const img = useImage();
const backgroundImageStyle = computed(() => {
// Use $img to generate an optimized image URL
const optimizedImageUrl = img("/img/haditha/section-three-bgi.png", {
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/haditha/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>