59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
|
import { cn } from "@ui/lib";
|
||
|
|
import { useTranslations } from "next-intl";
|
||
|
|
|
||
|
|
export function FaqSection({ className }: { className?: string }) {
|
||
|
|
const t = useTranslations();
|
||
|
|
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
question: "What is the refund policy?",
|
||
|
|
answer: "We offer a 30-day money-back guarantee if you're not happy with our product.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
question: "How do I cancel my subscription?",
|
||
|
|
answer: "You can cancel your subscription by visiting the billing page.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
question: "Can I change my plan?",
|
||
|
|
answer: "Yes, you can change your plan at any time by visiting the billing page.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
question: "Do you offer a free trial?",
|
||
|
|
answer: "Yes, we offer a 14-day free trial.",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
if (!items) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section
|
||
|
|
className={cn("scroll-mt-20 border-t py-12 lg:py-16", className)}
|
||
|
|
id="faq"
|
||
|
|
>
|
||
|
|
<div className="container max-w-5xl">
|
||
|
|
<div className="mb-12 lg:text-center">
|
||
|
|
<h1 className="mb-2 font-bold text-4xl lg:text-5xl">
|
||
|
|
{t("faq.title")}
|
||
|
|
</h1>
|
||
|
|
<p className="text-lg opacity-50">{t("faq.description")}</p>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||
|
|
{items.map((item, i) => (
|
||
|
|
<div
|
||
|
|
key={`faq-item-${i}`}
|
||
|
|
className="rounded-lg bg-card border p-4 lg:p-6"
|
||
|
|
>
|
||
|
|
<h4 className="mb-2 font-semibold text-lg">
|
||
|
|
{item.question}
|
||
|
|
</h4>
|
||
|
|
<p className="text-foreground/60">{item.answer}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|