78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import Link from "next/link";
|
|
import FAQAccordion from "./faqAccardion";
|
|
import { faqItems } from "@/lib/demoData";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export function Togle() {
|
|
const t = useTranslations();
|
|
const faqItems = [
|
|
{
|
|
id: "faq-1",
|
|
question: t("faq.question1.question"),
|
|
answer: t("faq.question1.answer"),
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
question: t("faq.question2.question"),
|
|
answer: t("faq.question2.answer"),
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
question: t("faq.question3.question"),
|
|
answer: t("faq.question3.answer"),
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
question: t("faq.question4.question"),
|
|
answer: t("faq.question4.answer"),
|
|
},
|
|
{
|
|
id: "faq-5",
|
|
question: t("faq.question5.question"),
|
|
answer: t("faq.question5.answer"),
|
|
},
|
|
];
|
|
return (
|
|
<div className="min-h-screen bg-[#1e1d1c]">
|
|
<main className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
|
|
{/* Header Section */}
|
|
<div className="mb-16 flex items-start justify-between gap-4 lg:gap-12">
|
|
<div className="flex items-center md:col-span-1">
|
|
<h1
|
|
className="font-unbounded uppercase bg-linear-to-br from-white via-white/50 to-black
|
|
text-transparent bg-clip-text text-3xl font-bold leading-tight sm:text-4xl md:text-5xl lg:text-6xl"
|
|
>
|
|
{t("faq.banner.topic")}
|
|
</h1>
|
|
</div>
|
|
|
|
{/* FAQ Section */}
|
|
<div className="max-w-250 w-full">
|
|
<FAQAccordion items={faqItems} />
|
|
</div>
|
|
</div>
|
|
{/* ASK QUESTION */}
|
|
<div className="space-y-8 w-full mt-10 ">
|
|
<h1
|
|
className="font-unbounded uppercase text-center bg-linear-to-br from-white via-white/50 to-black
|
|
text-transparent bg-clip-text text-3xl font-bold leading-tight sm:text-4xl md:text-5xl lg:text-6xl"
|
|
>
|
|
{t("faq.ask.question")}
|
|
</h1>
|
|
<p className="font-almarai text-center text-white/80 text-lg">
|
|
{t("faq.ask.subtitle")}
|
|
</p>
|
|
<div className="w-full flex items-center justify-center">
|
|
<Link
|
|
href={"/contact"}
|
|
className="font-almarai mx-auto shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit"
|
|
>
|
|
{t("faq.ask.btn")}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|