Frontend: Update ChiSiamo and Proprietari pages with new layout and images for improved visual appeal

This commit is contained in:
Marco Pedone 2025-08-06 09:46:40 +02:00
parent e544b25795
commit 0ea14d0650
5 changed files with 83 additions and 17 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 43 KiB

View file

@ -1,5 +1,8 @@
import { ArrowRight } from "lucide-react";
import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useTranslation } from "~/providers/I18nProvider";
const ChiSiamo: NextPage = () => {
const { t } = useTranslation();
@ -10,25 +13,88 @@ const ChiSiamo: NextPage = () => {
<title>{t.heads.chi_siamo_titolo}</title>
<meta name="description" content={t.heads.main_description} />
</Head>
<main className="mx-auto w-full max-w-6xl space-y-8 px-2 py-5 sm:space-y-20 sm:px-8">
<main className="mx-auto w-full max-w-6xl space-y-5 px-2 py-5 md:px-8">
<div className="bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm">
{t.chi_siamo.title}
</div>
<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 className="mx-auto w-full space-y-5 sm:space-y-14">
<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
src="/rent_2.webp"
alt=""
className="w-full rounded-md object-cover"
width={1400}
height={1050}
/>
</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 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.proprietari.cta2.title1}{" "}
<span className="text-indigo-600">
{t.proprietari.cta2.title2}
</span>
{t.proprietari.cta2.title3}
</h3>
<p className="mt-3 leading-relaxed text-gray-500">
{t.proprietari.cta2.desc}
</p>
<Link
className="mt-5 inline-flex items-center rounded-full bg-indigo-50 px-4 py-2 font-medium text-indigo-600"
href="/contatti"
>
{t.proprietari.contattaci}
<ArrowRight className="ml-1 h-5 w-5 duration-150" />
</Link>
</div>
</section>
<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>
<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>
<section className="relative mx-auto flex max-w-6xl flex-col-reverse items-center justify-between gap-8 px-4 py-4 sm:flex-row sm:gap-20 md:px-8">
<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.proprietari.cta1.title1}{" "}
<span className="text-indigo-600">
{t.proprietari.cta1.title2}
</span>
</h3>
<p className="mt-3 leading-relaxed text-gray-500">
{t.proprietari.cta1.desc}
</p>
<Link
className="mt-5 inline-flex items-center rounded-full bg-indigo-50 px-4 py-2 font-medium text-indigo-600"
href="/contatti"
>
{t.proprietari.contattaci}
<ArrowRight className="ml-1 h-5 w-5 duration-150" />
</Link>
</div>
<div className="mx-auto mt-5 flex-1 sm:w-9/12 md:mt-0 md:w-auto">
<Image
src="/rent_0.webp"
alt=""
className="w-full rounded-md object-cover"
width={1400}
height={1050}
/>
</div>
</section>
</div>
</main>
</>

View file

@ -45,8 +45,8 @@ const Proprietari: NextPage = () => {
src="/rent_0.webp"
alt=""
className="w-full rounded-md object-cover"
width={800}
height={300}
width={1400}
height={1050}
/>
</div>
</section>
@ -66,8 +66,8 @@ const Proprietari: NextPage = () => {
src="/rent_2.webp"
alt=""
className="w-full rounded-md object-cover"
width={800}
height={300}
width={1400}
height={1050}
/>
</div>
<div className="max-w-lg flex-1 py-5 sm:mx-auto sm:text-center md:max-w-max md:text-left">