93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
|
import { HelpCircle } from "lucide-react";
|
||
|
|
import Link from "next/link";
|
||
|
|
import {
|
||
|
|
ExpandableScreen,
|
||
|
|
ExpandableScreenContent,
|
||
|
|
ExpandableScreenTrigger,
|
||
|
|
} from "./expandable_screen";
|
||
|
|
import { Button } from "./ui/button";
|
||
|
|
import { Separator } from "./ui/separator";
|
||
|
|
|
||
|
|
const texts: {
|
||
|
|
title: string;
|
||
|
|
parts: (string | { href: string; text: string })[];
|
||
|
|
}[] = [
|
||
|
|
{
|
||
|
|
title: "Costo del servizio",
|
||
|
|
parts: [
|
||
|
|
"Il costo del servizio è personalizzato in base alla tipologia e parametri della tua ricerca.",
|
||
|
|
"Per contattare i proprietari ti chiederemo un acconto di 35€ sul totale.",
|
||
|
|
"Potrai contattare tutti i proprietari degli immobili che desideri durante la durata del servizio.",
|
||
|
|
{ href: "/prezzi", text: "Scopri i prezzi" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Come procedere",
|
||
|
|
parts: [
|
||
|
|
"Contattaci per un immobile, prepareremo per te degli annunci compatibili alle tue esigenze e ti invieremo un invito via email per accedere alla piattaforma.",
|
||
|
|
"Una volta effettuato l'accesso, potrai acquistare il servizio e visualizzare i contatti dei proprietari degli immobili.",
|
||
|
|
{
|
||
|
|
href: "/annunci",
|
||
|
|
text: "Vai agli annunci",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Nulla di fatto",
|
||
|
|
parts: [
|
||
|
|
"Se non trovi un immobile che soddisfi le tue esigenze, avrai 14 giorni di tempo per interrompere il servizio senza necessità di ulteriori pagamenti.",
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
export const ComeFunziona = () => {
|
||
|
|
return (
|
||
|
|
<ExpandableScreen
|
||
|
|
contentRadius="14px"
|
||
|
|
layoutId="cta-card"
|
||
|
|
triggerRadius="100px"
|
||
|
|
>
|
||
|
|
<ExpandableScreenTrigger className="w-full">
|
||
|
|
<Button className="w-full">
|
||
|
|
<HelpCircle className="size-5" />
|
||
|
|
<span>Scopri come funziona</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">
|
||
|
|
{texts.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>
|
||
|
|
);
|
||
|
|
};
|