Files
reui-blocks/blocks/faq10.tsx
T

100 lines
4.1 KiB
TypeScript

import { MessageCircleQuestion } from "lucide-react";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
const DATA = [
{
question: "آیا نسخه آزمایشی رایگان دارید؟",
answer:
"بله. می‌توانید فضای کاری را رایگان راه‌اندازی کنید و پس از دیدن ارزش روی داده واقعی، به پلن تیمی ارتقا دهید.",
},
{
question: "هوش مصنوعی دقیقاً روی چه داده‌هایی کار می‌کند؟",
answer:
"روی مکالمات، تیکت‌ها و یادداشت‌های فضای کاری خودتان؛ داده به مدل عمومی برای آموزش منتقل نمی‌شود.",
},
{
question: "پیشنهاد هوشمند چه کمکی به تیم فروش می‌کند؟",
answer:
"خلاصه تماس، پیش‌نویس پاسخ و گام بعدی پیگیری را پیشنهاد می‌دهد تا کارشناس سریع‌تر به معامله برسد.",
},
{
question: "استفاده چندنفره چطور مدیریت می‌شود؟",
answer:
"نقش، سهمیه مصرف و فضای کاری مشترک را تعریف کنید تا همکاری همزمان بدون تداخل دسترسی ممکن شود.",
},
{
question: "امنیت و حریم داده چگونه تضمین می‌شود؟",
answer:
"رمزنگاری در انتقال و نگهداری، کنترل دسترسی نقش‌محور و گزارش ممیزی برای تیم امنیت شما آماده است.",
},
{
question: "پلن و مصرف را از کجا مدیریت کنم؟",
answer:
"در پنل صورتحساب، پلن، سقف مصرف ماهانه و روش پرداخت را بدون قطع سرویس تغییر می‌دهید.",
},
];
interface Faq10Props {
className?: string;
}
const Faq10 = ({ className }: Faq10Props) => {
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="border-y">
<div className="container mx-auto flex max-w-3xl flex-col gap-6 border-x py-4 text-center max-lg:border-x lg:py-8">
<Badge
variant="outline"
className="mx-auto w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
>
<MessageCircleQuestion className="size-4" />
<span>هوش مصنوعی کسب‌وکار</span>
</Badge>
<h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
پاسخ کوتاه به سوال‌های پرتکرار
</h2>
<p className="mx-auto max-w-[600px] tracking-[-0.32px] text-muted-foreground">
به دنبال پاسخ سریع هستید؟{" "}
<span className="underline">همین فهرست</span> را مطالعه کنید.
</p>
</div>
</div>
<div className="container mx-auto max-w-3xl">
<div className="pt-8 pb-4 md:pb-8 lg:pt-[3.75rem] lg:pb-[50px]">
<Accordion type="single" collapsible className="space-y-4 text-start">
{DATA.map((item, index) => (
<AccordionItem
key={index}
value={`item-${index}`}
className="rounded-[7px] border px-6 text-primary data-[state=open]:pb-2"
>
<AccordionTrigger className="py-5 text-start text-base tracking-[-0.32px]">
{item.question}
</AccordionTrigger>
<AccordionContent className="text-base tracking-[-0.32px] text-muted-foreground">
{item.answer}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
</div>
<div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
<div className="container mx-auto h-full max-w-3xl border-x"></div>
</div>
</section>
);
};
export { Faq10 };