2025-08-04 17:45:44 +02:00
|
|
|
import type { NextPage } from "next";
|
|
|
|
|
import Head from "next/head";
|
2025-08-28 18:27:07 +02:00
|
|
|
import { ComeFunziona } from "~/components/come_funziona";
|
2025-08-04 17:45:44 +02:00
|
|
|
import {
|
2025-08-28 18:27:07 +02:00
|
|
|
Accordion,
|
|
|
|
|
AccordionContent,
|
|
|
|
|
AccordionItem,
|
|
|
|
|
AccordionTrigger,
|
2025-08-04 17:45:44 +02:00
|
|
|
} from "~/components/ui/accordion";
|
2025-08-28 18:27:07 +02:00
|
|
|
import { Button } from "~/components/ui/button";
|
|
|
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
2025-08-04 17:45:44 +02:00
|
|
|
|
|
|
|
|
const Guida: NextPage = () => {
|
2025-08-28 18:27:07 +02:00
|
|
|
const { t } = useTranslation();
|
2025-08-04 17:45:44 +02:00
|
|
|
|
2025-08-28 18:27:07 +02:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>{t.heads.guida_titolo}</title>
|
2025-08-29 16:18:32 +02:00
|
|
|
<meta content={t.heads.main_description} name="description" />
|
2025-08-28 18:27:07 +02:00
|
|
|
</Head>
|
2025-09-01 17:31:19 +02:00
|
|
|
<main className="mx-auto w-full max-w-7xl px-2 py-5 md:px-8">
|
2025-10-10 16:18:43 +02:00
|
|
|
<div className="inline-block rounded-md bg-primary/10 px-3 py-1 text-primary text-sm">
|
2025-08-28 18:27:07 +02:00
|
|
|
{t.guida}
|
|
|
|
|
</div>
|
2025-08-04 17:45:44 +02:00
|
|
|
|
2025-08-28 18:27:07 +02:00
|
|
|
<ComeFunziona />
|
|
|
|
|
<FAQSection />
|
|
|
|
|
</main>
|
|
|
|
|
</>
|
|
|
|
|
);
|
2025-08-04 17:45:44 +02:00
|
|
|
};
|
|
|
|
|
export default Guida;
|
|
|
|
|
|
|
|
|
|
const FAQSection = () => {
|
2025-08-28 18:27:07 +02:00
|
|
|
const { t } = useTranslation();
|
2025-08-04 17:45:44 +02:00
|
|
|
|
2025-08-28 18:27:07 +02:00
|
|
|
const handleScroll = (id: string) => {
|
|
|
|
|
document.getElementById(id)?.scrollIntoView({
|
|
|
|
|
behavior: "smooth",
|
|
|
|
|
});
|
|
|
|
|
window.history.replaceState({}, "", `${window.location.pathname}#${id}`);
|
|
|
|
|
};
|
2025-08-04 17:45:44 +02:00
|
|
|
|
2025-08-28 18:27:07 +02:00
|
|
|
if (!t.faq?.domande) {
|
|
|
|
|
return null; // Ensure translations are loaded before rendering
|
|
|
|
|
}
|
2025-08-04 17:45:44 +02:00
|
|
|
|
2025-08-28 18:27:07 +02:00
|
|
|
return (
|
|
|
|
|
<section className="px-4 py-12 md:px-6" id="faq">
|
|
|
|
|
<div className="mx-auto grid max-w-5xl items-center gap-6 py-12">
|
|
|
|
|
<div className="flex flex-col justify-center space-y-4 text-center">
|
|
|
|
|
<div className="space-y-2">
|
2025-10-10 16:18:43 +02:00
|
|
|
<h2 className="font-bold text-3xl tracking-tighter md:text-4xl">
|
2025-08-28 18:27:07 +02:00
|
|
|
{t.faq.titolo}
|
|
|
|
|
</h2>
|
2025-10-10 16:18:43 +02:00
|
|
|
<p className="mx-auto max-w-[600px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
|
2025-08-28 18:27:07 +02:00
|
|
|
{t.faq.descrizione}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-08-04 17:45:44 +02:00
|
|
|
|
2025-08-28 18:27:07 +02:00
|
|
|
<div className="flex w-full max-w-6xl justify-between gap-5">
|
|
|
|
|
<div className="hidden flex-col gap-5 md:flex">
|
|
|
|
|
{t.faq.domande.map((item, index) => (
|
|
|
|
|
<Button
|
2025-10-10 16:18:43 +02:00
|
|
|
className="justify-start font-semibold text-lg"
|
2025-08-29 16:18:32 +02:00
|
|
|
key={index}
|
2025-08-28 18:27:07 +02:00
|
|
|
onClick={() => handleScroll(`faq-${item.id}`)}
|
2025-08-29 16:18:32 +02:00
|
|
|
variant="ghost"
|
2025-08-28 18:27:07 +02:00
|
|
|
>
|
|
|
|
|
{item.label}
|
|
|
|
|
</Button>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex w-full flex-col gap-5">
|
|
|
|
|
{t.faq.domande.map((item, index) => (
|
|
|
|
|
<Accordion
|
2025-08-29 16:18:32 +02:00
|
|
|
className="relative w-full rounded-lg bg-neutral-50 p-4"
|
2025-08-28 18:27:07 +02:00
|
|
|
collapsible
|
|
|
|
|
key={index}
|
|
|
|
|
//defaultValue="0"
|
2025-08-29 16:18:32 +02:00
|
|
|
type="single"
|
2025-08-28 18:27:07 +02:00
|
|
|
>
|
2025-10-10 16:18:43 +02:00
|
|
|
<div className="-top-16 absolute" id={`faq-${item.id}`} />
|
|
|
|
|
<h3 className="font-semibold text-2xl">{item.label}</h3>
|
2025-08-28 18:27:07 +02:00
|
|
|
<div className="flex flex-col gap-1">
|
|
|
|
|
{item.qas.map((f, i) => (
|
2025-08-29 16:18:32 +02:00
|
|
|
<AccordionItem key={i} value={i.toString()}>
|
2025-08-28 18:27:07 +02:00
|
|
|
<AccordionTrigger className="text-left">
|
|
|
|
|
{f.title}
|
|
|
|
|
</AccordionTrigger>
|
|
|
|
|
<AccordionContent>
|
|
|
|
|
<p className="leading-relaxed">{f.description}</p>
|
|
|
|
|
</AccordionContent>
|
|
|
|
|
</AccordionItem>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</Accordion>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
);
|
2025-08-04 17:45:44 +02:00
|
|
|
};
|
