infoalloggi-monorepo/apps/infoalloggi/src/pages/chi-siamo.tsx

68 lines
2.4 KiB
TypeScript
Raw Normal View History

2025-08-04 17:45:44 +02:00
import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
2025-08-04 17:45:44 +02:00
import { useTranslation } from "~/providers/I18nProvider";
2025-08-28 18:27:07 +02:00
2025-08-04 17:45:44 +02:00
const ChiSiamo: NextPage = () => {
2025-08-28 18:27:07 +02:00
const { t } = useTranslation();
return (
<>
<Head>
<title>{t.heads.chi_siamo_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>
<main className="mx-auto w-full max-w-7xl space-y-5 px-2 py-5 md:px-8">
<div className="bg-primary/10 text-primary inline-block rounded-md px-3 py-1 text-sm">
2025-08-28 18:27:07 +02:00
{t.chi_siamo.title}
</div>
<div className="mx-auto w-full space-y-5 sm:space-y-14 max-w-6xl">
2025-08-28 18:27:07 +02:00
<section className="relative mx-auto flex max-w-6xl flex-col items-center justify-between gap-8 px-4 py-4 sm:flex-row sm:gap-20 md:px-8">
<div className="mx-auto mt-5 flex-1 sm:w-9/12 md:mt-0 md:w-auto">
<Image
alt=""
className="w-full rounded-md object-cover"
height={1050}
2025-08-29 16:18:32 +02:00
src="/ufficio.webp"
width={1400}
2025-08-28 18:27:07 +02:00
/>
</div>
<div className="max-w-lg flex-1 py-5 sm:mx-auto sm:text-center md:max-w-max md:text-left">
<h3 className="text-3xl font-semibold text-gray-800 md:text-4xl">
{t.chi_siamo.cta.title1}
<span className="text-indigo-600">
{t.chi_siamo.cta.title2}
</span>
</h3>
<p className="mt-3 leading-relaxed text-gray-500">
{t.chi_siamo.cta.desc}
</p>
</div>
</section>
2025-08-28 18:27:07 +02:00
<div className="flex w-full flex-col gap-8">
<div className="flex flex-col gap-8 sm:flex-row sm:items-stretch sm:justify-between">
<div className="border-border w-full basis-1/2 space-y-2 rounded-lg border p-4 hover:bg-neutral-100">
<h3 className="text-xl font-bold">{t.chi_siamo.mission}</h3>
<p>{t.chi_siamo.mission_desc}</p>
</div>
<div className="border-border w-full basis-1/2 space-y-2 rounded-lg border p-4 hover:bg-neutral-100">
<h3 className="text-xl font-bold">{t.chi_siamo.vision}</h3>
<p>{t.chi_siamo.vision_desc}</p>
</div>
</div>
<div className="border-border w-full space-y-2 rounded-lg border p-4 hover:bg-neutral-100">
<h3 className="text-xl font-bold">{t.chi_siamo.progetto}</h3>
<p>{t.chi_siamo.progetto_desc}</p>
</div>
</div>
2025-08-28 18:27:07 +02:00
<section className="text-center">
<p className="text-lg">{t.chi_siamo.indirizzo}</p>
</section>
</div>
</main>
</>
);
2025-08-04 17:45:44 +02:00
};
export default ChiSiamo;