infoalloggi-monorepo/apps/infoalloggi/src/components/come_funziona.tsx

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-[3.5rem]">
				{t.come_funziona.title}
			</h2>
			<div className="mx-auto mt-8 w-full space-y-12 md:mt-16">
				{features.map((feature, idx) => (
					<div
						className="flex flex-col items-center gap-x-8 gap-y-6 lg:flex-row lg:odd:flex-row-reverse"
						key={idx}
					>
						<div className="flex shrink-0 basis-1/2 justify-center">
							<Image
								alt={`img${idx}`}
								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 text-blue-600">
								{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>
	);
};