66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { HelpCircle } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
import {
|
|
ExpandableScreen,
|
|
ExpandableScreenContent,
|
|
ExpandableScreenTrigger,
|
|
} from "./expandable_screen";
|
|
import { Button } from "./ui/button";
|
|
import { Separator } from "./ui/separator";
|
|
|
|
export const ComeFunziona = () => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<ExpandableScreen
|
|
contentRadius="14px"
|
|
layoutId="cta-card"
|
|
triggerRadius="100px"
|
|
>
|
|
<ExpandableScreenTrigger className="w-full">
|
|
<Button
|
|
className="w-full text-lg md:text-base lg:text-lg"
|
|
data-umami-event="come_funziona_guida_open"
|
|
size="xl"
|
|
>
|
|
<HelpCircle />
|
|
<span>{t.come_funziona_guida.title}</span>
|
|
</Button>
|
|
</ExpandableScreenTrigger>
|
|
|
|
<ExpandableScreenContent className="bg-primary text-primary-foreground">
|
|
<div className="h-full space-y-6 p-6 py-12 sm:space-y-16 sm:px-10">
|
|
{t.come_funziona_guida.features.map((text, index) => (
|
|
// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
|
|
<div className="space-y-6" key={index}>
|
|
<div className="space-y-2">
|
|
<h2 className="font-semibold text-4xl">{text.title}</h2>
|
|
{text.parts.map((p, i) => {
|
|
return typeof p === "object" ? (
|
|
<Link
|
|
className="text-2xl underline after:content-['_↗'] hover:text-secondary"
|
|
href={p.href}
|
|
// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
|
|
key={`${index}-link-${i}`}
|
|
>
|
|
{p.text}
|
|
</Link>
|
|
) : (
|
|
<p
|
|
className="text-2xl"
|
|
// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
|
|
key={`${index}-${i}`}
|
|
>
|
|
{p}
|
|
</p>
|
|
);
|
|
})}
|
|
</div>
|
|
<Separator />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ExpandableScreenContent>
|
|
</ExpandableScreen>
|
|
);
|
|
};
|