112 lines
4.3 KiB
TypeScript
112 lines
4.3 KiB
TypeScript
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface FaqItem {
|
|
id: string;
|
|
question: string;
|
|
answer: string;
|
|
}
|
|
|
|
interface Faq3Props {
|
|
heading: string;
|
|
description: string;
|
|
items?: FaqItem[];
|
|
supportHeading: string;
|
|
supportDescription: string;
|
|
supportButtonText: string;
|
|
supportButtonUrl: string;
|
|
className?: string;
|
|
}
|
|
|
|
const faqItems = [
|
|
{
|
|
id: "faq-1",
|
|
question: "این بخش چه کاربردی دارد؟",
|
|
answer:
|
|
"در این بخش، پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات، محصولات و نحوه استفاده از سامانه ارائه شده تا بدون نیاز به تماس با پشتیبانی، پاسخ خود را پیدا کنید.",
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
question: "چرا این بخش برای کاربران مفید است؟",
|
|
answer:
|
|
"هدف این بخش کاهش زمان جستجوی اطلاعات، افزایش رضایت کاربران و دسترسی سریع به پاسخ پرسش‌های متداول است.",
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
question: "چگونه یک بخش پرسش‌های متداول مؤثر طراحی کنیم؟",
|
|
answer:
|
|
"پرسش‌های پرتکرار کاربران را جمع‌آوری کنید، برای هرکدام پاسخی دقیق و شفاف بنویسید و آن‌ها را بر اساس موضوع دسته‌بندی کنید.",
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
question: "وجود این بخش چه مزایایی دارد؟",
|
|
answer:
|
|
"این بخش باعث کاهش حجم درخواست‌های پشتیبانی، افزایش سرعت پاسخ‌گویی و بهبود تجربه کاربری می‌شود.",
|
|
},
|
|
{
|
|
id: "faq-5",
|
|
question: "چگونه پرسش‌ها را دسته‌بندی کنیم؟",
|
|
answer:
|
|
"پرسش‌ها را براساس موضوعاتی مانند حساب کاربری، خرید، پرداخت، ارسال، پشتیبانی و تنظیمات گروه‌بندی کنید تا کاربران سریع‌تر پاسخ خود را بیابند.",
|
|
},
|
|
{
|
|
id: "faq-6",
|
|
question: "پاسخ‌ها باید چه میزان جزئیات داشته باشند؟",
|
|
answer:
|
|
"پاسخ‌ها باید کوتاه، دقیق و کاربردی باشند؛ در صورت نیاز می‌توان لینک راهنما یا مستندات تکمیلی را نیز ارائه کرد.",
|
|
},
|
|
{
|
|
id: "faq-7",
|
|
question: "آیا ارجاع به راهنماهای بیشتر مفید است؟",
|
|
answer:
|
|
"بله، لینک به مستندات، آموزش‌ها یا مقالات مرتبط به کاربران کمک می‌کند اطلاعات کامل‌تری دریافت کنند.",
|
|
},
|
|
];
|
|
|
|
const Faq3 = ({
|
|
heading = "پرسش‌های متداول",
|
|
description = "پاسخ پرسش‌های رایج درباره محصولات ما را اینجا بیابید. جوابی پیدا نکردید؟ با تیم پشتیبانی ما تماس بگیرید.",
|
|
items = faqItems,
|
|
className,
|
|
}: Faq3Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container mx-auto max-w-3xl space-y-16">
|
|
<div className="flex flex-col text-center">
|
|
<h2 className="mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-xl">
|
|
{heading}
|
|
</h2>
|
|
<p className="text-muted-foreground lg:text-lg">{description}</p>
|
|
</div>
|
|
<Accordion
|
|
type="single"
|
|
collapsible
|
|
className="w-full text-start"
|
|
>
|
|
{items.map((item) => (
|
|
<AccordionItem key={item.id} value={item.id}>
|
|
<AccordionTrigger className="transition-opacity duration-200 hover:no-underline hover:opacity-60">
|
|
<div className="font-medium sm:py-1 lg:py-2 lg:text-lg">
|
|
{item.question}
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="sm:mb-1 lg:mb-2">
|
|
<div className="text-muted-foreground lg:text-lg">
|
|
{item.answer}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Faq3 };
|