haditha_ui/components/hadith/hero-page/SectionFour.vue
2025-03-01 16:14:34 +03:30

126 lines
3.6 KiB
Vue

<script setup>
const state = reactive({
cards: [
{
img: "/img/section-four_card-one.png",
title: "تشخیص موجودیت",
description:
"استخراج و شناسایی موجودیت‌های مرتبط از متن حدیثی (مانند افراد، مکان‌ها، مفاهیم کلیدی یا موضوعات)",
},
{
img: "/img/section-four_card-two.png",
title: "تشخیص موجودیت",
description: "تجمیع نکات کلیدی از احادیث و شروح مختلف",
},
{
img: "/img/section-four_card-three.png",
title: "تشخیص موجودیت",
description:
"امکان تعامل مستقیم با سامانه برای پاسخ به سوالات یا دریافت توضیحات از مفاهیم حدیثی",
},
{
img: "/img/section-four_card-four.png",
title: "تشخیص کلمات کلیدی",
description:
"با تحلیل دقیق متن، کلمات و عبارات کلیدی هر حدیث را شناسایی و ارائه می‌کند",
},
{
img: "/img/section-four_card-five.png",
title: "دسته‌بندی هوشمند",
description:
"احادیث را بر اساس موضوعات، مفاهیم یا کلیدواژه‌های اصلی به‌صورت خودکار دسته‌بندی می‌کند",
},
],
});
</script>
<template>
<section class="section-four flex">
<UContainer
class="section-container mx-auto max-w-[var(--ui-container-two)] sm:px-6 lg:px-4"
>
<div class="header flex items-center justify-center mb-8 ">
<span class="title me-1">امکانات </span>
<NuxtImg
width="49"
height="18"
fit="auto"
quality="80"
placeholder
src="/img/haditha-title.svg"
class="me-2"
/>
</div>
<!-- grid-cols-1 md:grid-cols-2 lg:grid-cols-3 -->
<div class="content flex justify-center flex-wrap items-start p-4 space-y-3">
<UCard
:ui="{
root: 'ring ring-[white] shadow-none bg-transparent card-item flex flex-col items-center basis-[360px] p-4',
header: 'header border-0 px-0 pb-2 pt-0',
body: 'sm:p-0 p-0 border-0 bg-transparent body',
footer: 'footer',
}"
v-for="(item, index) in state.cards"
:key="index"
>
<template #header>
<NuxtImg
fit="auto"
quality="100"
:src="item.img"
class="me-2"
/>
</template>
<p class="mb-2 title">{{ item.title }}</p>
<p class="description">
{{ item.description }}
</p>
<!-- <template #footer> </template> -->
</UCard>
</div>
</UContainer>
</section>
</template>
<style scoped>
.section-four {
padding: 7.5em 0; /* 120px */
.header {
.title {
font-family: IRANSansX;
font-weight: 300;
font-size: 20px;
line-height: 30px;
letter-spacing: 0%;
text-align: center;
color: #626b84;
}
}
.card-item {
.body {
border: none;
.title {
font-family: IRANSansX;
font-weight: 600;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%;
text-align: center;
}
.description {
font-family: IRANSansX;
font-weight: 300;
font-size: 14px;
line-height: 21px;
letter-spacing: 0%;
text-align: center;
}
}
}
}
</style>