refactor: update styling and layout for Input, Textarea, ChiSiamo, and Contatto components

apps/infoalloggi/src/components/custom_ui/input.tsx

@@ -11,7 +11,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 				type={type}
 				{...props}
 				className={cn(
-					`w-full rounded-lg border border-border bg-background px-3 py-2 font-medium text-primary shadow-xs outline-hidden transition-all duration-200 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:bg-input/50`,
+					`w-full rounded-lg border border-border bg-background px-3 py-2 font-medium text-primary shadow-xs outline-hidden transition-all duration-200 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:border-muted-foreground dark:hover:bg-input/50`,
 					className,
 				)}
 			/>

apps/infoalloggi/src/components/custom_ui/textarea.tsx

@@ -8,7 +8,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
 		return (
 			<textarea
 				className={cn(
-					`flex min-h-20 w-full rounded-lg border border-border bg-background px-3 py-2 shadow-sm outline-hidden transition-all duration-200 hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-500 dark:focus:border-transparent dark:hover:border-neutral-400 dark:placeholder:text-neutral-400`,
+					`flex min-h-20 w-full rounded-lg border border-border bg-background px-3 py-2 shadow-sm outline-hidden transition-all duration-200 hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:border-muted-foreground dark:hover:bg-input/50 dark:placeholder:text-neutral-400`,
 					className,
 				)}
 				ref={ref}

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

@@ -12,54 +12,40 @@ const ChiSiamo: NextPage = () => {
 				<title>{t.heads.chi_siamo_titolo}</title>
 				<meta content={t.heads.main_description} name="description" />
 			</Head>
-			<main className="mx-auto w-full max-w-8xl space-y-5 px-2 py-5 md:px-8">
+			<main className="mx-auto w-full max-w-8xl space-y-5 px-4 py-5 md:px-8">
 				<Badge className="bg-muted py-1 text-foreground text-sm outline outline-muted-foreground">
 					{t.chi_siamo.title}
 				</Badge>
-				<div className="mx-auto w-full max-w-6xl space-y-5 sm:space-y-14">
+				<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">
-					<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=""
+						alt="Ufficio"
-								className="w-full rounded-md object-cover"
+						className="w-full rounded-lg object-cover"
 						height={1050}
 						src="/ufficio.webp"
 						width={1400}
 					/>
-						</div>
+					<div className="flex w-full flex-1 flex-col items-center justify-center rounded-lg bg-neutral-200 p-4 sm:mx-auto sm:text-center md:max-w-max md:text-left dark:bg-neutral-800">
-						<div className="max-w-lg flex-1 py-5 sm:mx-auto sm:text-center md:max-w-max md:text-left">
+						<h3 className="font-semibold text-3xl text-foreground md:text-4xl">
-							<h3 className="font-semibold text-3xl text-gray-800 md:text-4xl">
 							{t.chi_siamo.cta.title1}
-								<span className="text-indigo-600">
+							<span className="text-indigo-600">{t.chi_siamo.cta.title2}</span>
-									{t.chi_siamo.cta.title2}
-								</span>
 						</h3>
-							<p className="mt-3 text-gray-500 leading-relaxed">
+						<p className="mt-3 leading-relaxed">{t.chi_siamo.cta.desc}</p>
-								{t.chi_siamo.cta.desc}
-							</p>
 					</div>
-					</section>
+					<div className="w-full space-y-2 rounded-lg bg-neutral-200 p-4 dark:bg-neutral-800">
-
-					<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="w-full basis-1/2 space-y-2 rounded-lg border border-border p-4 hover:bg-neutral-100">
 						<h3 className="font-bold text-xl">{t.chi_siamo.mission}</h3>
 						<p>{t.chi_siamo.mission_desc}</p>
 					</div>
-							<div className="w-full basis-1/2 space-y-2 rounded-lg border border-border p-4 hover:bg-neutral-100">
+					<div className="w-full space-y-2 rounded-lg bg-neutral-200 p-4 dark:bg-neutral-800">
 						<h3 className="font-bold text-xl">{t.chi_siamo.vision}</h3>
 						<p>{t.chi_siamo.vision_desc}</p>
 					</div>
-						</div>
+					<div className="w-full space-y-2 rounded-lg bg-neutral-200 p-4 sm:col-span-2 dark:bg-neutral-800">
-						<div className="w-full space-y-2 rounded-lg border border-border p-4 hover:bg-neutral-100">
 						<h3 className="font-bold text-xl">{t.chi_siamo.progetto}</h3>
 						<p>{t.chi_siamo.progetto_desc}</p>
 					</div>
-					</div>
+					<div className="p-2 text-center sm:col-span-2">
-
-					<section className="text-center">
 						<p className="text-lg">{t.chi_siamo.indirizzo}</p>
-					</section>
+					</div>
 				</div>
 			</main>
 		</>

apps/infoalloggi/src/pages/contatti.tsx

@@ -74,7 +74,7 @@ const Contatto: NextPage = () => {
 					{t.contatti}
 				</Badge>
 
-				<div className="mx-auto max-w-screen-xl px-4 md:px-8">
+				<div className="mx-auto max-w-7xl px-4 md:px-8">
 					<div className="mx-auto max-w-lg space-y-3 sm:text-center">
 						<p className="font-semibold text-4xl text-accent-foreground">
 							{t.contact_form.titolo}
@@ -185,7 +185,7 @@ const Contatto: NextPage = () => {
 													<FormMessage />
 												</div>
 												<FormControl>
-													<Textarea className="min-h-[150px]" {...field} />
+													<Textarea className="min-h-37.5" {...field} />
 												</FormControl>
 											</FormItem>
 										)}
@@ -202,7 +202,7 @@ const Contatto: NextPage = () => {
 
 												<FormControl>
 													<Checkbox
-														checked={field.value}
+														defaultChecked={field.value}
 														id="checkbox"
 														onCheckedChange={field.onChange}
 													/>