97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
import type { NextPage } from "next";
|
|
import Head from "next/head";
|
|
import HowItWorks from "~/components/how-it-works";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "~/components/ui/accordion";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
|
|
/**
|
|
* Pagina guida: /guida
|
|
*/
|
|
const Guida: NextPage = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{t.heads.guida_titolo}</title>
|
|
<meta content={t.heads.main_description} name="description" />
|
|
</Head>
|
|
<main className="mx-auto flex w-full max-w-8xl flex-col px-2 py-5 md:px-8">
|
|
<Badge className="bg-muted py-1 text-foreground text-sm outline outline-muted-foreground">
|
|
{t.guida}
|
|
</Badge>
|
|
|
|
{/* <ComeFunziona /> */}
|
|
<HowItWorks className="sm:mt-1" />
|
|
<FAQSection />
|
|
</main>
|
|
</>
|
|
);
|
|
};
|
|
export default Guida;
|
|
|
|
const FAQSection = () => {
|
|
const { t } = useTranslation();
|
|
|
|
if (!t.faq?.domande) {
|
|
return null; // Ensure translations are loaded before rendering
|
|
}
|
|
|
|
return (
|
|
<section className="px-4 py-8 sm:py-12 md:px-6" id="faq">
|
|
<div className="mx-auto grid max-w-5xl items-center gap-6">
|
|
<div className="flex flex-col justify-center space-y-4">
|
|
<div className="space-y-2">
|
|
<h2 className="font-bold text-3xl tracking-tighter md:text-4xl">
|
|
{t.faq.titolo}
|
|
</h2>
|
|
<p className="md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
|
|
{t.faq.descrizione}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex w-full flex-col gap-5">
|
|
{t.faq.domande.map((item) => (
|
|
<Accordion
|
|
className="relative w-full rounded-lg bg-secondary p-4 text-secondary-foreground"
|
|
collapsible
|
|
key={`accordion-${item.id}`}
|
|
//defaultValue="0"
|
|
type="single"
|
|
>
|
|
<div className="absolute -top-16" id={`faq-${item.id}`} />
|
|
<h3 className="font-semibold text-2xl">{item.label}</h3>
|
|
<hr className="border-primary" />
|
|
<div className="flex flex-col gap-1">
|
|
{item.qas.map((f, i) => (
|
|
<AccordionItem
|
|
className="border-primary border-b"
|
|
key={`accordion-item-${item.id}-${
|
|
// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
|
|
i
|
|
}`}
|
|
value={i.toString()}
|
|
>
|
|
<AccordionTrigger className="cursor-pointer text-left [&>svg]:text-secondary-foreground">
|
|
{f.title}
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
<p className="leading-relaxed">{f.description}</p>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</div>
|
|
</Accordion>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|