75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
|
import { Clock, Heart, Home, Wallet } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface FaqItem {
|
|
icon: LucideIcon;
|
|
heading: string;
|
|
description: string;
|
|
}
|
|
|
|
interface Faq15Props {
|
|
title?: string;
|
|
items?: FaqItem[];
|
|
className?: string;
|
|
}
|
|
|
|
const defaultItems: FaqItem[] = [
|
|
{
|
|
icon: Heart,
|
|
heading: "یک جان را نجات دهید، یک دوست پیدا کنید",
|
|
description:
|
|
"با انتخاب به‌سرپرستی، به حیوانی شایسته فرصت دوم برای خوشبختی می‌دهید و در عوض یک همراه وفادار پیدا می‌کنید که شادی را به زندگی‌تان می‌آورد.",
|
|
},
|
|
{
|
|
icon: Wallet,
|
|
heading: "مقرون‌به‌صرفه‌تر از خرید",
|
|
description:
|
|
"هزینه به‌سرپرستی معمولاً شامل واکسیناسیون، میکروچیپ و عقیم‌سازی است و از خرید از پرورش‌دهنده مقرون‌به‌صرفه‌تر است.",
|
|
},
|
|
{
|
|
icon: Clock,
|
|
heading: "از مرحله توله‌سگی بگذرید",
|
|
description:
|
|
"بسیاری از حیوانات پناهگاه از قبل نظافت و دستورات پایه را یاد گرفته‌اند و زمان و تلاش کمتری برای آموزش نیاز دارید.",
|
|
},
|
|
{
|
|
icon: Home,
|
|
heading: "از پناهگاه‌های محلی حمایت کنید",
|
|
description:
|
|
"به‌سرپرستی شما به کار مهم پناهگاه‌های محلی کمک می‌کند تا به نجات و مراقبت از حیوانات نیازمند ادامه دهند.",
|
|
},
|
|
];
|
|
|
|
const Faq15 = ({
|
|
title = "چرا باید حیوان خانگی‌تان را از پناهگاه محلی به‌سرپرستی بگیرید؟",
|
|
items = defaultItems,
|
|
className,
|
|
}: Faq15Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container mx-auto max-w-3xl">
|
|
<h2 className="text-center text-3xl font-semibold md:text-2xll">
|
|
{title}
|
|
</h2>
|
|
<ul className="mt-12 grid grid-cols-1 gap-8 text-start md:grid-cols-2 md:gap-10">
|
|
{items.map((item, idx) => (
|
|
<li className="flex flex-col gap-2.5" key={idx}>
|
|
<div className="flex items-center gap-2 md:gap-2.5">
|
|
<item.icon className="size-5 shrink-0 md:size-6" />
|
|
<h3 className="font-semibold md:text-lg">{item.heading}</h3>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground md:text-base">
|
|
{item.description}
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Faq15 };
|