From 5094255b65730950a2792008eb436121aed90316 Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Tue, 24 Feb 2026 11:36:26 +0100
Subject: [PATCH] refactor: enhance styling and layout for various components,
 including Accordion and Pricing sections

---
 .../src/components/IconComponents.tsx         |   4 +-
 .../src/components/accordionComp.tsx          |   3 +-
 apps/infoalloggi/src/components/prezzi.tsx    |   6 +-
 .../servizio/servizio_annunci_accordions.tsx  |   5 +-
 apps/infoalloggi/src/pages/annuncio/[cod].tsx |   5 +-
 apps/infoalloggi/src/pages/chi-siamo.tsx      |   2 +-
 apps/infoalloggi/src/pages/guida.tsx          |   5 +-
 apps/infoalloggi/src/pages/prezzi.tsx         | 117 ++++++++++--------
 8 files changed, 81 insertions(+), 66 deletions(-)

diff --git a/apps/infoalloggi/src/components/IconComponents.tsx b/apps/infoalloggi/src/components/IconComponents.tsx
index c3149ab..a4ea66b 100644
--- a/apps/infoalloggi/src/components/IconComponents.tsx
+++ b/apps/infoalloggi/src/components/IconComponents.tsx
@@ -390,10 +390,10 @@ export const Moon2 = ({ className }: { className?: string }) => (
 	>
 		<title>Moon</title>
 		<path
-			clip-rule="evenodd"
+			clipRule="evenodd"
 			d="M2.89998 0.499976C2.89998 0.279062 2.72089 0.0999756 2.49998 0.0999756C2.27906 0.0999756 2.09998 0.279062 2.09998 0.499976V1.09998H1.49998C1.27906 1.09998 1.09998 1.27906 1.09998 1.49998C1.09998 1.72089 1.27906 1.89998 1.49998 1.89998H2.09998V2.49998C2.09998 2.72089 2.27906 2.89998 2.49998 2.89998C2.72089 2.89998 2.89998 2.72089 2.89998 2.49998V1.89998H3.49998C3.72089 1.89998 3.89998 1.72089 3.89998 1.49998C3.89998 1.27906 3.72089 1.09998 3.49998 1.09998H2.89998V0.499976ZM5.89998 3.49998C5.89998 3.27906 5.72089 3.09998 5.49998 3.09998C5.27906 3.09998 5.09998 3.27906 5.09998 3.49998V4.09998H4.49998C4.27906 4.09998 4.09998 4.27906 4.09998 4.49998C4.09998 4.72089 4.27906 4.89998 4.49998 4.89998H5.09998V5.49998C5.09998 5.72089 5.27906 5.89998 5.49998 5.89998C5.72089 5.89998 5.89998 5.72089 5.89998 5.49998V4.89998H6.49998C6.72089 4.89998 6.89998 4.72089 6.89998 4.49998C6.89998 4.27906 6.72089 4.09998 6.49998 4.09998H5.89998V3.49998ZM1.89998 6.49998C1.89998 6.27906 1.72089 6.09998 1.49998 6.09998C1.27906 6.09998 1.09998 6.27906 1.09998 6.49998V7.09998H0.499976C0.279062 7.09998 0.0999756 7.27906 0.0999756 7.49998C0.0999756 7.72089 0.279062 7.89998 0.499976 7.89998H1.09998V8.49998C1.09998 8.72089 1.27906 8.89997 1.49998 8.89997C1.72089 8.89997 1.89998 8.72089 1.89998 8.49998V7.89998H2.49998C2.72089 7.89998 2.89998 7.72089 2.89998 7.49998C2.89998 7.27906 2.72089 7.09998 2.49998 7.09998H1.89998V6.49998ZM8.54406 0.98184L8.24618 0.941586C8.03275 0.917676 7.90692 1.1655 8.02936 1.34194C8.17013 1.54479 8.29981 1.75592 8.41754 1.97445C8.91878 2.90485 9.20322 3.96932 9.20322 5.10022C9.20322 8.37201 6.82247 11.0878 3.69887 11.6097C3.45736 11.65 3.20988 11.6772 2.96008 11.6906C2.74563 11.702 2.62729 11.9535 2.77721 12.1072C2.84551 12.1773 2.91535 12.2458 2.98667 12.3128L3.05883 12.3795L3.31883 12.6045L3.50684 12.7532L3.62796 12.8433L3.81491 12.9742L3.99079 13.089C4.11175 13.1651 4.23536 13.2375 4.36157 13.3059L4.62496 13.4412L4.88553 13.5607L5.18837 13.6828L5.43169 13.7686C5.56564 13.8128 5.70149 13.8529 5.83857 13.8885C5.94262 13.9155 6.04767 13.9401 6.15405 13.9622C6.27993 13.9883 6.40713 14.0109 6.53544 14.0298L6.85241 14.0685L7.11934 14.0892C7.24637 14.0965 7.37436 14.1002 7.50322 14.1002C11.1483 14.1002 14.1032 11.1453 14.1032 7.50023C14.1032 7.25044 14.0893 7.00389 14.0623 6.76131L14.0255 6.48407C13.991 6.26083 13.9453 6.04129 13.8891 5.82642C13.8213 5.56709 13.7382 5.31398 13.6409 5.06881L13.5279 4.80132L13.4507 4.63542L13.3766 4.48666C13.2178 4.17773 13.0353 3.88295 12.8312 3.60423L12.6782 3.40352L12.4793 3.16432L12.3157 2.98361L12.1961 2.85951L12.0355 2.70246L11.8134 2.50184L11.4925 2.24191L11.2483 2.06498L10.9562 1.87446L10.6346 1.68894L10.3073 1.52378L10.1938 1.47176L9.95488 1.3706L9.67791 1.2669L9.42566 1.1846L9.10075 1.09489L8.83599 1.03486L8.54406 0.98184ZM10.4032 5.30023C10.4032 4.27588 10.2002 3.29829 9.83244 2.40604C11.7623 3.28995 13.1032 5.23862 13.1032 7.50023C13.1032 10.593 10.596 13.1002 7.50322 13.1002C6.63646 13.1002 5.81597 12.9036 5.08355 12.5522C6.5419 12.0941 7.81081 11.2082 8.74322 10.0416C8.87963 10.2284 9.10028 10.3497 9.34928 10.3497C9.76349 10.3497 10.0993 10.0139 10.0993 9.59971C10.0993 9.24256 9.84965 8.94373 9.51535 8.86816C9.57741 8.75165 9.63653 8.63334 9.6926 8.51332C9.88358 8.63163 10.1088 8.69993 10.35 8.69993C11.0403 8.69993 11.6 8.14028 11.6 7.44993C11.6 6.75976 11.0406 6.20024 10.3505 6.19993C10.3853 5.90487 10.4032 5.60464 10.4032 5.30023Z"
 			fill="currentColor"
-			fill-rule="evenodd"
+			fillRule="evenodd"
 		></path>
 	</svg>
 );
diff --git a/apps/infoalloggi/src/components/accordionComp.tsx b/apps/infoalloggi/src/components/accordionComp.tsx
index 4654d27..d7155f0 100644
--- a/apps/infoalloggi/src/components/accordionComp.tsx
+++ b/apps/infoalloggi/src/components/accordionComp.tsx
@@ -49,11 +49,12 @@ export const AccordionComp = forwardRef<HTMLDivElement, AccordionCompProps>(
 				>
 					{texts.map((text, index) => (
 						<AccordionItem
+							className="border-b dark:border-muted-foreground/50"
 							// biome-ignore lint/suspicious/noArrayIndexKey: <index is safe here>
 							key={`ac-item-${index}`}
 							value={`item-${index}`}
 						>
-							<AccordionTrigger className="cursor-pointer gap-4 text-left text-md">
+							<AccordionTrigger className="cursor-pointer gap-4 border-natural-200 text-left text-md">
 								{text.title}
 							</AccordionTrigger>
 							<AccordionContent className="text-base">
diff --git a/apps/infoalloggi/src/components/prezzi.tsx b/apps/infoalloggi/src/components/prezzi.tsx
index 9c8b710..6e83670 100644
--- a/apps/infoalloggi/src/components/prezzi.tsx
+++ b/apps/infoalloggi/src/components/prezzi.tsx
@@ -270,16 +270,16 @@ export const PricingComponentConsulenza = ({
 	};
 
 	return (
-		<Card className={cn("w-full max-w-xl", className)}>
+		<Card className={cn("w-full max-w-xl gap-2 py-2 sm:gap-4", className)}>
 			<CardHeader className="p-3 px-5">
-				<CardTitle className="pt-1 text-center font-semibold text-3xl">
+				<CardTitle className="text-center font-semibold text-3xl sm:pt-1">
 					{title}
 				</CardTitle>
 				<CardDescription className="sr-only">
 					Prezzo del servizio
 				</CardDescription>
 			</CardHeader>
-			<CardContent className="flex flex-col items-center justify-center gap-8 p-0 px-2 xs:px-6 pt-4 pb-4">
+			<CardContent className="flex flex-col items-center justify-center gap-8 p-0 px-2 xs:px-6 pb-4 sm:pt-4">
 				<div className="flex w-full items-center justify-center gap-0 xs:gap-4">
 					<div className="flex flex-col items-center gap-2">
 						<p className="font-semibold text-3xl xs:text-6xl">
diff --git a/apps/infoalloggi/src/components/servizio/servizio_annunci_accordions.tsx b/apps/infoalloggi/src/components/servizio/servizio_annunci_accordions.tsx
index c5f781d..605a9e2 100644
--- a/apps/infoalloggi/src/components/servizio/servizio_annunci_accordions.tsx
+++ b/apps/infoalloggi/src/components/servizio/servizio_annunci_accordions.tsx
@@ -29,7 +29,10 @@ export const AnnunciRichiesti = ({ userId }: { userId: UsersId }) => {
 
 	return (
 		<Accordion collapsible type="single">
-			<AccordionItem className="space-y-4" value="compatibili">
+			<AccordionItem
+				className="space-y-4 border-b dark:border-muted-foreground/50"
+				value="compatibili"
+			>
 				<AccordionTrigger className="cursor-pointer rounded-md border-2 border-pink-500 bg-muted p-2">
 					Annunci Richiesti dall'Utente ({data.length}):
 				</AccordionTrigger>
diff --git a/apps/infoalloggi/src/pages/annuncio/[cod].tsx b/apps/infoalloggi/src/pages/annuncio/[cod].tsx
index 932aae2..3ca12ba 100644
--- a/apps/infoalloggi/src/pages/annuncio/[cod].tsx
+++ b/apps/infoalloggi/src/pages/annuncio/[cod].tsx
@@ -418,7 +418,10 @@ const CaratteristicheAccordion = ({
 			defaultValue="altre-caratt"
 			type="single"
 		>
-			<AccordionItem value="altre-caratt">
+			<AccordionItem
+				className="border-b dark:border-muted-foreground/50"
+				value="altre-caratt"
+			>
 				<AccordionTrigger>Altre caratteristiche</AccordionTrigger>
 				<AccordionContent>
 					{Object.entries(filteredCaratt).map(([key, scheda_value]) => {
diff --git a/apps/infoalloggi/src/pages/chi-siamo.tsx b/apps/infoalloggi/src/pages/chi-siamo.tsx
index 4059ae7..619a073 100644
--- a/apps/infoalloggi/src/pages/chi-siamo.tsx
+++ b/apps/infoalloggi/src/pages/chi-siamo.tsx
@@ -19,7 +19,7 @@ const ChiSiamo: NextPage = () => {
 				<div className="mx-auto grid w-full max-w-6xl grid-flow-row grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
 					<Image
 						alt="Ufficio"
-						className="w-full rounded-lg object-cover"
+						className="w-full rounded-lg bg-neutral-200 object-cover dark:bg-neutral-800"
 						height={1050}
 						src="/ufficio.webp"
 						width={1400}
diff --git a/apps/infoalloggi/src/pages/guida.tsx b/apps/infoalloggi/src/pages/guida.tsx
index cd9b307..47af7ac 100644
--- a/apps/infoalloggi/src/pages/guida.tsx
+++ b/apps/infoalloggi/src/pages/guida.tsx
@@ -55,7 +55,7 @@ const FAQSection = () => {
 						<h2 className="font-bold text-3xl tracking-tighter md:text-4xl">
 							{t.faq.titolo}
 						</h2>
-						<p className="mx-auto max-w-150 text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+						<p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
 							{t.faq.descrizione}
 						</p>
 					</div>
@@ -88,10 +88,11 @@ const FAQSection = () => {
 								<div className="flex flex-col gap-1">
 									{item.qas.map((f, i) => (
 										<AccordionItem
+											className="border-b dark:border-muted-foreground/50"
 											key={`accordion-item-${item.id}-${i}`}
 											value={i.toString()}
 										>
-											<AccordionTrigger className="text-left">
+											<AccordionTrigger className="cursor-pointer text-left">
 												{f.title}
 											</AccordionTrigger>
 											<AccordionContent>
diff --git a/apps/infoalloggi/src/pages/prezzi.tsx b/apps/infoalloggi/src/pages/prezzi.tsx
index 1d80b63..e77e53b 100644
--- a/apps/infoalloggi/src/pages/prezzi.tsx
+++ b/apps/infoalloggi/src/pages/prezzi.tsx
@@ -1,7 +1,7 @@
 import type { NextPage } from "next";
 import Head from "next/head";
 import { AccordionComp } from "~/components/accordionComp";
-import { IconMatrix } from "~/components/IconComponents";
+import { IconMatrix, type IconType } from "~/components/IconComponents";
 import { LoadingPage } from "~/components/loading";
 import {
 	PricingComponent,
@@ -10,6 +10,7 @@ import {
 import { Status500 } from "~/components/status-page";
 import { Badge } from "~/components/ui/badge";
 import { Separator } from "~/components/ui/separator";
+import { cn } from "~/lib/utils";
 import { useTranslation } from "~/providers/I18nProvider";
 import TipologiaPosizioneEnum from "~/schemas/public/TipologiaPosizioneEnum";
 import { generateSSGHelper } from "~/server/utils/ssgHelper";
@@ -53,7 +54,7 @@ const Prezzi: NextPage = () => {
 						className="mx-auto flex max-w-5xl flex-col items-center gap-8"
 						id="transitorio"
 					>
-						<h1 className="font-semibold text-4xl">
+						<h1 className="text-center font-semibold text-4xl">
 							{t.prezzi.titolo_servizio_transitori}
 						</h1>
 						<PricingComponent
@@ -73,27 +74,17 @@ const Prezzi: NextPage = () => {
 						/>
 
 						<p>{t.prezzi.desc_transitori}</p>
-						<div className="my-5">
-							<ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2">
-								{t.prezzi.cta_transitori.map((item) => (
-									<li className="flex gap-x-4" key={item.titolo}>
-										<div className="flex size-12 flex-none items-center justify-center rounded-lg bg-transitorio/10 text-transitorio">
-											<IconMatrix type={item.icon} />
-										</div>
-										<div>
-											<h4 className="font-semibold text-[color-mix(in_oklch,var(--transitorio)80%,black)] text-lg dark:text-transitorio">
-												{item.titolo}
-											</h4>
-											<p className="mt-3">{item.desc}</p>
-										</div>
-									</li>
-								))}
-							</ul>
+						<div className="sm:my-5">
+							<GridTesti
+								iconClassName="bg-transitorio/10 text-transitorio"
+								testi={t.prezzi.cta_transitori}
+								titleClassName="text-[color-mix(in_oklch,var(--transitorio)80%,black)] dark:text-transitorio"
+							/>
 						</div>
 
 						{/* <ConsulenzaServizio data={prezziario.transitorio} /> */}
 						<AccordionComp
-							className="w-full max-w-full"
+							className="w-full max-w-full rounded-lg bg-muted px-4 py-2"
 							texts={t.prezzi.faq_transitori}
 						/>
 					</section>
@@ -102,7 +93,7 @@ const Prezzi: NextPage = () => {
 						className="mx-auto flex max-w-5xl flex-col items-center gap-8"
 						id="stabile"
 					>
-						<h1 className="font-semibold text-4xl">
+						<h1 className="text-center font-semibold text-4xl">
 							{t.prezzi.titolo_servizio_stabile}
 						</h1>
 						<PricingComponent
@@ -118,26 +109,16 @@ const Prezzi: NextPage = () => {
 							title={t.prezzi.titolo_stabile}
 						/>
 						<p>{t.prezzi.desc_stabile}</p>
-						<div className="my-5">
-							<ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2">
-								{t.prezzi.cta_stabile.map((item) => (
-									<li className="flex gap-x-4" key={item.titolo}>
-										<div className="flex size-12 flex-none items-center justify-center rounded-lg bg-stabile/10 text-stabile">
-											<IconMatrix type={item.icon} />
-										</div>
-										<div>
-											<h4 className="font-semibold text-[color-mix(in_oklch,var(--stabile)80%,black)] text-lg dark:text-stabile">
-												{item.titolo}
-											</h4>
-											<p className="mt-3">{item.desc}</p>
-										</div>
-									</li>
-								))}
-							</ul>
+						<div className="sm:my-5">
+							<GridTesti
+								iconClassName="bg-stabile/10 text-stabile"
+								testi={t.prezzi.cta_stabile}
+								titleClassName="text-[color-mix(in_oklch,var(--stabile)80%,black)] dark:text-stabile"
+							/>
 						</div>
 						{/* <ConsulenzaServizio data={prezziario.stabile} /> */}
 						<AccordionComp
-							className="w-full max-w-full"
+							className="w-full max-w-full rounded-lg bg-muted px-4 py-2"
 							texts={t.prezzi.faq_stabile}
 						/>
 					</section>
@@ -146,7 +127,7 @@ const Prezzi: NextPage = () => {
 						className="mx-auto flex max-w-5xl flex-col items-center gap-8"
 						id="contratti"
 					>
-						<h1 className="font-semibold text-4xl">
+						<h1 className="text-center font-semibold text-4xl">
 							{t.prezzi.titolo_servizio_contratti}
 						</h1>
 
@@ -165,26 +146,16 @@ const Prezzi: NextPage = () => {
 							title={t.prezzi.titolo_contratti}
 						/>
 						<p>{t.prezzi.desc_contratti}</p>
-						<div className="my-5">
-							<ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2">
-								{t.prezzi.cta_contratti.map((item) => (
-									<li className="flex gap-x-4" key={item.titolo}>
-										<div className="flex size-12 flex-none items-center justify-center rounded-lg bg-consulenza/10 text-consulenza">
-											<IconMatrix type={item.icon} />
-										</div>
-										<div>
-											<h4 className="font-semibold text-[color-mix(in_oklch,var(--consulenza)80%,black)] text-lg dark:text-consulenza">
-												{item.titolo}
-											</h4>
-											<p className="mt-3">{item.desc}</p>
-										</div>
-									</li>
-								))}
-							</ul>
+						<div className="sm:my-5">
+							<GridTesti
+								iconClassName="bg-consulenza/10 text-consulenza"
+								testi={t.prezzi.cta_contratti}
+								titleClassName="text-[color-mix(in_oklch,var(--consulenza)80%,black)] dark:text-consulenza"
+							/>
 						</div>
 						{/* <ConsulenzaTable data={prezziario.consulenza} /> */}
 						<AccordionComp
-							className="w-full max-w-full"
+							className="w-full max-w-full rounded-lg bg-muted px-4 py-2"
 							texts={t.prezzi.faq_contratti}
 						/>
 					</section>
@@ -204,3 +175,39 @@ export async function getServerSideProps() {
 }
 
 export default Prezzi;
+
+const GridTesti = ({
+	testi,
+	iconClassName,
+	titleClassName,
+}: {
+	testi: Array<{ titolo: string; desc: string; icon: IconType }>;
+	iconClassName: string;
+	titleClassName: string;
+}) => {
+	return (
+		<ul className="grid gap-4 sm:grid-cols-2 sm:gap-8 lg:grid-cols-2">
+			{testi.map((item) => (
+				<li
+					className="flex gap-x-4 rounded-lg p-2 dark:bg-muted"
+					key={item.titolo}
+				>
+					<div
+						className={cn(
+							"flex size-12 flex-none items-center justify-center rounded-lg",
+							iconClassName,
+						)}
+					>
+						<IconMatrix type={item.icon} />
+					</div>
+					<div>
+						<h4 className={cn("font-semibold text-lg", titleClassName)}>
+							{item.titolo}
+						</h4>
+						<p className="mt-3">{item.desc}</p>
+					</div>
+				</li>
+			))}
+		</ul>
+	);
+};