Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

refactor: enhance styling and layout for various components, including Accordion and Pricing sections

Browse source
This commit is contained in:
Marco Pedone 2026-02-24 11:36:26 +01:00
parent 055fcc230e
commit 5094255b65
8 changed files with 81 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/infoalloggi/src/components/IconComponents.tsx
View file

@ -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>
);

3
apps/infoalloggi/src/components/accordionComp.tsx
View file

@ -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">

6
apps/infoalloggi/src/components/prezzi.tsx
View file

@ -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">

5
apps/infoalloggi/src/components/servizio/servizio_annunci_accordions.tsx
View file

@ -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>

5
apps/infoalloggi/src/pages/annuncio/[cod].tsx
View file

@ -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]) => {

2
apps/infoalloggi/src/pages/chi-siamo.tsx
View file

@ -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}

5
apps/infoalloggi/src/pages/guida.tsx
View file

@ -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>

117
apps/infoalloggi/src/pages/prezzi.tsx
View file

@ -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>
);
};