Files
reui-blocks/blocks/faq6.tsx
T

75 lines
4.1 KiB
TypeScript

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
const faqs = [
{
question: "سوالات متداول چیست و چرا اهمیت دارد؟",
answer:
"سوالات متداول فهرستی است که پاسخ پرسش‌های رایج کاربران درباره یک محصول، خدمت یا موضوع خاص را ارائه می‌دهد.",
},
{
question: "چرا باید در وب‌سایت یا اپلیکیشن خود سوالات متداول داشته باشم؟",
answer:
"بخش سوالات متداول راهی عملی برای ارائه کمک فوری به کاربران یا مشتریان است. به‌جای انتظار برای پاسخ پشتیبانی، می‌توانند پاسخ پرسش‌های رایج را به‌سرعت بیابند.",
},
{
question: "چطور یک بخش سوالات متداول مؤثر بسازم؟",
answer:
"ساخت بخش سوالات متداول با جمع‌آوری پرتکرارترین پرسش‌های کاربران یا مشتریان آغاز می‌شود. سپس باید برای هر پرسش پاسخ‌هایی روشن، کامل و مفید بنویسید.",
},
{
question: "مزایای داشتن بخش سوالات متداول منظم چیست؟",
answer:
"نگهداری منظم بخش سوالات متداول مزایای زیادی دارد. اولاً پاسخ فوری به پرسش‌های رایج ارائه می‌دهد و تجربه کاربری را بهبود می‌بخشد.",
},
{
question: "چطور سوالات متداول را برای بهترین تجربه کاربری سازماندهی کنم؟",
answer:
"سازماندهی منطقی سوالات متداول برای کاربری آسان حیاتی است. پرسش‌های مشابه را در دسته‌هایی مثل «صورتحساب»، «راه‌اندازی حساب» یا «پشتیبانی فنی» گروه‌بندی کنید تا کاربران سریع بخش مرتبط با نیازشان را پیدا کنند.",
},
{
question: "چند وقت یک‌بار باید سوالات متداول را به‌روز کنم و چرا؟",
answer:
"به‌روزرسانی منظم سوالات متداول برای حفظ دقت و مرتبط بودن اطلاعات ضروری است. با تغییر محصول یا خدمت شما، نوع پرسش‌های کاربران نیز تغییر می‌کند.",
},
];
interface Faq6Props {
className?: string;
}
const Faq6 = ({ className }: Faq6Props) => {
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="container mx-auto max-w-3xl">
<div className="text-center">
<Badge className="text-xs font-medium">پرسش‌های متداول</Badge>
<h1 className="mt-4 text-xl font-semibold">
پاسخ پرسش‌های پرتکرار
</h1>
<p className="mt-6 font-medium text-muted-foreground">
پاسخ متداول‌ترین پرسش‌های کاربران درباره امکانات، خدمات و نحوه استفاده از پلتفرم را در این بخش مشاهده کنید.
</p>
</div>
<div className="mx-auto mt-14 grid gap-8 text-start md:grid-cols-2 md:gap-12">
{faqs.map((faq, index) => (
<div key={index} className="flex gap-4">
<span className="flex size-6 shrink-0 items-center justify-center rounded-sm bg-secondary font-mono text-xs text-primary">
{(index + 1).toLocaleString("fa-IR")}
</span>
<div>
<div className="mb-2 flex items-center justify-between">
<h3 className="font-medium">{faq.question}</h3>
</div>
<p className="text-sm text-muted-foreground">{faq.answer}</p>
</div>
</div>
))}
</div>
</div>
</section>
);
};
export { Faq6 };