From dec6aff651666df77d714c4a1fec069cf7260eb0 Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Mon, 12 Jan 2026 17:08:27 +0100
Subject: [PATCH] feat: replace Accordion with Collapsible for pricing
 component; improve UI interaction

---
 apps/infoalloggi/src/components/prezzi.tsx    |  2 +-
 apps/infoalloggi/src/pages/annuncio/[cod].tsx | 58 +++++++++++--------
 2 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/apps/infoalloggi/src/components/prezzi.tsx b/apps/infoalloggi/src/components/prezzi.tsx
index 96727e8..6c60068 100644
--- a/apps/infoalloggi/src/components/prezzi.tsx
+++ b/apps/infoalloggi/src/components/prezzi.tsx
@@ -138,7 +138,7 @@ export const PricingComponent = ({
 	};
 
 	return (
-		<Card className={cn("w-full max-w-xl gap-4 py-4", className)}>
+		<Card className={cn("w-full max-w-xl gap-4 rounded-md py-4", className)}>
 			<CardHeader className="py-2">
 				<CardTitle className="pt-1 text-center font-semibold text-3xl">
 					{title}
diff --git a/apps/infoalloggi/src/pages/annuncio/[cod].tsx b/apps/infoalloggi/src/pages/annuncio/[cod].tsx
index 2dc9d9a..3fb1b29 100644
--- a/apps/infoalloggi/src/pages/annuncio/[cod].tsx
+++ b/apps/infoalloggi/src/pages/annuncio/[cod].tsx
@@ -38,6 +38,11 @@ import {
 } from "~/components/ui/accordion";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "~/components/ui/collapsible";
 import {
 	Dialog,
 	DialogContent,
@@ -329,31 +334,38 @@ const Pricing = ({
 		);
 	}
 	return (
-		<Accordion className="w-full" collapsible type="single">
-			<AccordionItem value="item-1">
-				<AccordionTrigger className="items-center">
-					<div className="items-cernter flex justify-start gap-2 px-1 font-semibold text-xl">
-						<BadgeEuro />
+		<Collapsible className="w-full">
+			<CollapsibleTrigger asChild>
+				<Button
+					className={cn(
+						"w-full text-white",
+						tipologia === TipologiaPosizioneEnum.Transitorio
+							? "bg-transitorio"
+							: "bg-stabile",
+					)}
+				>
+					<div className="flex items-center gap-2">
+						<BadgeEuro className="size-5" />
 						<span>{t.pricing_cmp.cta_costo}</span>
 					</div>
-				</AccordionTrigger>
-				<AccordionContent className="flex justify-center">
-					<PricingComponent
-						className={cn(style)}
-						cta={cta}
-						opzioni={opzioni}
-						pricingData={pricing}
-						statico={true}
-						tipo={tipologia}
-						title={
-							tipologia === TipologiaPosizioneEnum.Transitorio
-								? t.prezzi.titolo_transitori
-								: t.prezzi.titolo_stabile
-						}
-					/>
-				</AccordionContent>
-			</AccordionItem>
-		</Accordion>
+				</Button>
+			</CollapsibleTrigger>
+			<CollapsibleContent className="mt-2">
+				<PricingComponent
+					className={cn(style)}
+					cta={cta}
+					opzioni={opzioni}
+					pricingData={pricing}
+					statico={true}
+					tipo={tipologia}
+					title={
+						tipologia === TipologiaPosizioneEnum.Transitorio
+							? t.prezzi.titolo_transitori
+							: t.prezzi.titolo_stabile
+					}
+				/>
+			</CollapsibleContent>
+		</Collapsible>
 	);
 };