76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import { Handshake, HeartPlus, Home, ScrollText, Search } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
|
|
export const ComeFunziona = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const features = [
|
|
{
|
|
desc: t.come_funziona.features.ricerca.desc,
|
|
icon: <Search className="size-8" />,
|
|
image: "/come_funziona_ricerca.jpg",
|
|
title: t.come_funziona.features.ricerca.title,
|
|
},
|
|
{
|
|
desc: t.come_funziona.features.aggiungi.desc,
|
|
icon: <HeartPlus className="size-8" />,
|
|
image: "/come_funziona_aggiungi.jpg",
|
|
title: t.come_funziona.features.aggiungi.title,
|
|
},
|
|
{
|
|
desc: t.come_funziona.features.contatta.desc,
|
|
icon: <Handshake className="size-8" />,
|
|
image: "/come_funziona_meet.jpg",
|
|
title: t.come_funziona.features.contatta.title,
|
|
},
|
|
{
|
|
desc: t.come_funziona.features.conferma.desc,
|
|
icon: <Home className="size-8" />,
|
|
image: "/come_funziona_confirm.jpg",
|
|
title: t.come_funziona.features.conferma.title,
|
|
},
|
|
{
|
|
desc: t.come_funziona.features.firma.desc,
|
|
icon: <ScrollText className="size-8" />,
|
|
image: "/come_funziona_contratto.jpg",
|
|
title: t.come_funziona.features.firma.title,
|
|
},
|
|
];
|
|
return (
|
|
<div className="mx-auto w-full max-w-6xl py-2">
|
|
<h2 className="max-w-xl font-semibold text-3xl tracking-tight md:mx-auto md:text-center md:text-4xl md:leading-14">
|
|
{t.come_funziona.title}
|
|
</h2>
|
|
<div className="mx-auto mt-8 w-full space-y-12 md:mt-16">
|
|
{features.map((feature) => (
|
|
<div
|
|
className="flex flex-col items-center gap-x-8 gap-y-6 lg:flex-row lg:odd:flex-row-reverse"
|
|
key={feature.title}
|
|
>
|
|
<div className="flex shrink-0 basis-1/2 justify-center">
|
|
<Image
|
|
alt={`img${feature.title}`}
|
|
className="aspect-6/4 rounded-xl border border-border/50"
|
|
height={200}
|
|
src={feature.image}
|
|
width={400}
|
|
/>
|
|
</div>
|
|
<div className="flex basis-1/2 flex-col">
|
|
<div className="flex items-center gap-3">
|
|
{feature.icon}
|
|
<h4 className="my-3 font-semibold text-3xl tracking-tight">
|
|
{feature.title}
|
|
</h4>
|
|
</div>
|
|
<p className="text-[17px] text-muted-foreground">
|
|
{feature.desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|