78 lines
3.3 KiB
TypeScript
78 lines
3.3 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface FaqItem {
|
|
question: string;
|
|
answer: string;
|
|
}
|
|
|
|
export interface Faq5Props {
|
|
badge?: string;
|
|
heading?: string;
|
|
description?: string;
|
|
faqs?: FaqItem[];
|
|
className?: string;
|
|
}
|
|
|
|
const defaultFaqs: FaqItem[] = [
|
|
{
|
|
question: "سوالات متداول چیست و چرا اهمیت دارد؟",
|
|
answer:
|
|
"سوالات متداول فهرستی است که پاسخ پرسش‌های رایج کاربران درباره یک محصول، خدمت یا موضوع خاص را ارائه می‌دهد.",
|
|
},
|
|
{
|
|
question: "چرا باید در وب‌سایت یا اپلیکیشن خود سوالات متداول داشته باشم؟",
|
|
answer:
|
|
"بخش سوالات متداول راهی عملی برای ارائه کمک فوری به کاربران یا مشتریان است. به‌جای انتظار برای پاسخ پشتیبانی، می‌توانند پاسخ پرسش‌های رایج را به‌سرعت بیابند.",
|
|
},
|
|
{
|
|
question: "چطور یک بخش سوالات متداول مؤثر بسازم؟",
|
|
answer:
|
|
"ساخت بخش سوالات متداول با جمع‌آوری پرتکرارترین پرسش‌های کاربران یا مشتریان آغاز می‌شود. سپس باید برای هر پرسش پاسخ‌هایی روشن، کامل و مفید بنویسید.",
|
|
},
|
|
{
|
|
question: "مزایای داشتن بخش سوالات متداول منظم چیست؟",
|
|
answer:
|
|
"نگهداری منظم بخش سوالات متداول مزایای زیادی دارد. اولاً پاسخ فوری به پرسش‌های رایج ارائه می‌دهد و تجربه کاربری را بهبود می‌بخشد.",
|
|
},
|
|
];
|
|
|
|
const Faq5 = ({
|
|
badge = "پرسش‌های متداول",
|
|
heading = "پاسخ پرسش‌های پرتکرار",
|
|
description = "پاسخ متداول‌ترین پرسش‌های کاربران درباره امکانات، خدمات و نحوه استفاده از پلتفرم را در این بخش مشاهده کنید.",
|
|
faqs = defaultFaqs,
|
|
className,
|
|
}: Faq5Props) => {
|
|
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}</Badge>
|
|
<h1 className="mt-4 text-xl font-semibold">{heading}</h1>
|
|
<p className="mt-6 font-medium text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto mt-14 max-w-xl text-start">
|
|
{faqs.map((faq, index) => (
|
|
<div key={index} className="mb-8 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 { Faq5 };
|