infoalloggi-monorepo/apps/infoalloggi/src/pages/guida.tsx

import type { NextPage } from "next";
import Head from "next/head";
import HowItWorks from "~/components/how-it-works";
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "~/components/ui/accordion";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import { useTranslation } from "~/providers/I18nProvider";

/**
 * Pagina guida: /guida
 */
const Guida: NextPage = () => {
	const { t } = useTranslation();
	//todo translation
	const features = [
		{
			title: "Esplora gli annunci",
			description:
				"In base a località, tipologia, prezzo, data di disponibilità e molte altre caratteristiche.",
			colors: {
				bg: "bg-orange-50 dark:bg-orange-500/10",
				text: "text-orange-500 dark:text-orange-400",
				border: "border-orange-100 dark:border-orange-500/20",
			},
		},
		{
			title: "Attiva il servizio",
			description:
				"Richiedi il servizio, ti invieremo un collegamento per completare la ricerca che abbiamo creato per te e acquistare il servizio.",
			colors: {
				bg: "bg-blue-50 dark:bg-blue-500/10",
				text: "text-blue-600 dark:text-blue-400",
				border: "border-blue-100 dark:border-blue-500/20",
			},
		},
		{
			title: "Visita le case",
			description:
				"Fissa appuntamenti direttamente con i proprietari per una visita. La trattativa è tra voi privati. Non c'è mediazione.",
			colors: {
				bg: "bg-purple-50 dark:bg-purple-500/10",
				text: "text-purple-600 dark:text-purple-400",
				border: "border-purple-100 dark:border-purple-500/20",
			},
		},
		{
			title: "Contratto di affitto",
			description:
				"Procederemo alla stesura del contratto di locazione in base agli accordi che hai trovato con il propritario.",
			colors: {
				bg: "bg-green-50 dark:bg-green-500/10",
				text: "text-green-500 dark:text-green-400",
				border: "border-green-100 dark:border-green-500/20",
			},
		},
	];

	return (
		<>
			<Head>
				<title>{t.heads.guida_titolo}</title>
				<meta content={t.heads.main_description} name="description" />
			</Head>
			<main className="mx-auto flex w-full max-w-8xl flex-col px-2 py-5 md:px-8">
				<Badge className="bg-muted py-1 text-foreground text-sm outline outline-muted-foreground">
					{t.guida}
				</Badge>

				{/* <ComeFunziona /> */}
				<HowItWorks features={features} />
				<FAQSection />
			</main>
		</>
	);
};
export default Guida;

const FAQSection = () => {
	const { t } = useTranslation();

	const handleScroll = (id: string) => {
		document.getElementById(id)?.scrollIntoView({
			behavior: "smooth",
		});
		window.history.replaceState({}, "", `${window.location.pathname}#${id}`);
	};

	if (!t.faq?.domande) {
		return null; // Ensure translations are loaded before rendering
	}

	return (
		<section className="px-4 py-8 sm:py-12 md:px-6" id="faq">
			<div className="mx-auto grid max-w-5xl items-center gap-6">
				<div className="flex flex-col justify-center space-y-4">
					<div className="space-y-2">
						<h2 className="font-bold text-3xl tracking-tighter md:text-4xl">
							{t.faq.titolo}
						</h2>
						<p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
							{t.faq.descrizione}
						</p>
					</div>
				</div>

				<div className="flex w-full max-w-6xl justify-between gap-5">
					<div className="hidden flex-col gap-5 md:flex">
						{t.faq.domande.map((item) => (
							<Button
								className="justify-start font-semibold text-lg"
								key={item.id}
								onClick={() => handleScroll(`faq-${item.id}`)}
								variant="ghost"
							>
								{item.label}
							</Button>
						))}
					</div>
					<div className="flex w-full flex-col gap-5">
						{t.faq.domande.map((item) => (
							<Accordion
								className="relative w-full rounded-lg bg-muted p-4"
								collapsible
								key={`accordion-${item.id}`}
								//defaultValue="0"
								type="single"
							>
								<div className="absolute -top-16" id={`faq-${item.id}`} />
								<h3 className="font-semibold text-2xl">{item.label}</h3>
								<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}-${
												// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
												i
											}`}
											value={i.toString()}
										>
											<AccordionTrigger className="cursor-pointer text-left">
												{f.title}
											</AccordionTrigger>
											<AccordionContent>
												<p className="leading-relaxed">{f.description}</p>
											</AccordionContent>
										</AccordionItem>
									))}
								</div>
							</Accordion>
						))}
					</div>
				</div>
			</div>
		</section>
	);
};
init 2025-08-04 17:45:44 +02:00			`import type { NextPage } from "next";`
			`import Head from "next/head";`
new guida 2026-05-12 16:10:01 +02:00			`import HowItWorks from "~/components/how-it-works";`
init 2025-08-04 17:45:44 +02:00			`import {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`Accordion,`
			`AccordionContent,`
			`AccordionItem,`
			`AccordionTrigger,`
init 2025-08-04 17:45:44 +02:00			`} from "~/components/ui/accordion";`
feat: Update UI components and styles across multiple pages - Enhanced the CardInfos component in [cod].tsx with improved styling and added TrafficCone icon for status indication. - Increased dialog content width in prezziario.tsx and testi-stringhe.tsx for better layout. - Replaced static badge elements with the Badge component in chi-siamo.tsx, contatti.tsx, guida.tsx, prezzi.tsx, and proprietari.tsx for consistent styling. - Updated button components to use the Button component in contatti.tsx and proprietari.tsx for improved accessibility and styling. - Modified the TrovaCasaCTA and FrequentSearches components in index.tsx for better visual consistency and updated color usage. - Refactored global CSS variables for improved color management and added new color variables for better theme support. - Implemented dynamic loading for the KabanExample component in test.tsx to enhance performance. 2025-11-14 17:21:21 +01:00			`import { Badge } from "~/components/ui/badge";`
eslint migration biome 2025-08-28 18:27:07 +02:00			`import { Button } from "~/components/ui/button";`
			`import { useTranslation } from "~/providers/I18nProvider";`
init 2025-08-04 17:45:44 +02:00
Add documentation comments for admin and user-facing pages - Added descriptive comments for various admin management pages including announcements, banners, blacklist, chats, and more. - Documented user-facing pages such as chat, communications, dashboard, and profile. - Included comments for authentication-related pages like password reset and invite acceptance. - Enhanced clarity on the purpose and routing of each page in the application. 2026-03-09 17:33:02 +01:00			`/**`
			`* Pagina guida: /guida`
			`*/`
init 2025-08-04 17:45:44 +02:00			`const Guida: NextPage = () => {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`const { t } = useTranslation();`
new guida 2026-05-12 16:10:01 +02:00			`//todo translation`
			`const features = [`
			`{`
			`title: "Esplora gli annunci",`
			`description:`
			`"In base a località, tipologia, prezzo, data di disponibilità e molte altre caratteristiche.",`
			`colors: {`
			`bg: "bg-orange-50 dark:bg-orange-500/10",`
			`text: "text-orange-500 dark:text-orange-400",`
			`border: "border-orange-100 dark:border-orange-500/20",`
			`},`
			`},`
			`{`
			`title: "Attiva il servizio",`
			`description:`
			`"Richiedi il servizio, ti invieremo un collegamento per completare la ricerca che abbiamo creato per te e acquistare il servizio.",`
			`colors: {`
			`bg: "bg-blue-50 dark:bg-blue-500/10",`
			`text: "text-blue-600 dark:text-blue-400",`
			`border: "border-blue-100 dark:border-blue-500/20",`
			`},`
			`},`
			`{`
			`title: "Visita le case",`
			`description:`
			`"Fissa appuntamenti direttamente con i proprietari per una visita. La trattativa è tra voi privati. Non c'è mediazione.",`
			`colors: {`
			`bg: "bg-purple-50 dark:bg-purple-500/10",`
			`text: "text-purple-600 dark:text-purple-400",`
			`border: "border-purple-100 dark:border-purple-500/20",`
			`},`
			`},`
			`{`
			`title: "Contratto di affitto",`
			`description:`
			`"Procederemo alla stesura del contratto di locazione in base agli accordi che hai trovato con il propritario.",`
			`colors: {`
			`bg: "bg-green-50 dark:bg-green-500/10",`
			`text: "text-green-500 dark:text-green-400",`
			`border: "border-green-100 dark:border-green-500/20",`
			`},`
			`},`
			`];`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`return (`
			`<>`
			`<Head>`
			`<title>{t.heads.guida_titolo}</title>`
formatt 2025-08-29 16:18:32 +02:00			`<meta content={t.heads.main_description} name="description" />`
eslint migration biome 2025-08-28 18:27:07 +02:00			`</Head>`
new guida 2026-05-12 16:10:01 +02:00			`<main className="mx-auto flex w-full max-w-8xl flex-col px-2 py-5 md:px-8">`
refactor: update Badge styling across multiple pages for improved visual consistency 2025-11-17 19:21:40 +01:00			`<Badge className="bg-muted py-1 text-foreground text-sm outline outline-muted-foreground">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`{t.guida}`
feat: Update UI components and styles across multiple pages - Enhanced the CardInfos component in [cod].tsx with improved styling and added TrafficCone icon for status indication. - Increased dialog content width in prezziario.tsx and testi-stringhe.tsx for better layout. - Replaced static badge elements with the Badge component in chi-siamo.tsx, contatti.tsx, guida.tsx, prezzi.tsx, and proprietari.tsx for consistent styling. - Updated button components to use the Button component in contatti.tsx and proprietari.tsx for improved accessibility and styling. - Modified the TrovaCasaCTA and FrequentSearches components in index.tsx for better visual consistency and updated color usage. - Refactored global CSS variables for improved color management and added new color variables for better theme support. - Implemented dynamic loading for the KabanExample component in test.tsx to enhance performance. 2025-11-14 17:21:21 +01:00			`</Badge>`
init 2025-08-04 17:45:44 +02:00
new guida 2026-05-12 16:10:01 +02:00			`{/* <ComeFunziona /> */}`
			`<HowItWorks features={features} />`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<FAQSection />`
			`</main>`
			`</>`
			`);`
init 2025-08-04 17:45:44 +02:00			`};`
			`export default Guida;`

			`const FAQSection = () => {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`const { t } = useTranslation();`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`const handleScroll = (id: string) => {`
			`document.getElementById(id)?.scrollIntoView({`
			`behavior: "smooth",`
			`});`
			window.history.replaceState({}, "", `${window.location.pathname}#${id}`);
			`};`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`if (!t.faq?.domande) {`
			`return null; // Ensure translations are loaded before rendering`
			`}`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`return (`
new guida 2026-05-12 16:10:01 +02:00			`<section className="px-4 py-8 sm:py-12 md:px-6" id="faq">`
			`<div className="mx-auto grid max-w-5xl items-center gap-6">`
feat: Update UI components and styles across multiple pages - Enhanced the CardInfos component in [cod].tsx with improved styling and added TrafficCone icon for status indication. - Increased dialog content width in prezziario.tsx and testi-stringhe.tsx for better layout. - Replaced static badge elements with the Badge component in chi-siamo.tsx, contatti.tsx, guida.tsx, prezzi.tsx, and proprietari.tsx for consistent styling. - Updated button components to use the Button component in contatti.tsx and proprietari.tsx for improved accessibility and styling. - Modified the TrovaCasaCTA and FrequentSearches components in index.tsx for better visual consistency and updated color usage. - Refactored global CSS variables for improved color management and added new color variables for better theme support. - Implemented dynamic loading for the KabanExample component in test.tsx to enhance performance. 2025-11-14 17:21:21 +01:00			`<div className="flex flex-col justify-center space-y-4">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<div className="space-y-2">`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`<h2 className="font-bold text-3xl tracking-tighter md:text-4xl">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`{t.faq.titolo}`
			`</h2>`
refactor: enhance styling and layout for various components, including Accordion and Pricing sections 2026-02-24 11:36:26 +01:00			`<p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`{t.faq.descrizione}`
			`</p>`
			`</div>`
			`</div>`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`<div className="flex w-full max-w-6xl justify-between gap-5">`
			`<div className="hidden flex-col gap-5 md:flex">`
chore: update biome schema and dependencies, refactor key usage in components - Updated biome schema version from 2.2.2 to 2.3.1 in biome.json. - Removed experimentalScannerIgnores from files section and replaced with ignore patterns. - Added CSS parser configuration for Tailwind directives. - Updated linter rules for better code quality. - Refactored key usage in various components to use unique identifiers instead of array indices. - Updated package-lock.json and package.json to reflect new biome version. - General code cleanup and improvements across multiple components for better maintainability. 2025-10-28 11:55:01 +01:00			`{t.faq.domande.map((item) => (`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<Button`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`className="justify-start font-semibold text-lg"`
chore: update biome schema and dependencies, refactor key usage in components - Updated biome schema version from 2.2.2 to 2.3.1 in biome.json. - Removed experimentalScannerIgnores from files section and replaced with ignore patterns. - Added CSS parser configuration for Tailwind directives. - Updated linter rules for better code quality. - Refactored key usage in various components to use unique identifiers instead of array indices. - Updated package-lock.json and package.json to reflect new biome version. - General code cleanup and improvements across multiple components for better maintainability. 2025-10-28 11:55:01 +01:00			`key={item.id}`
eslint migration biome 2025-08-28 18:27:07 +02:00			onClick={() => handleScroll(`faq-${item.id}`)}
formatt 2025-08-29 16:18:32 +02:00			`variant="ghost"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`>`
			`{item.label}`
			`</Button>`
			`))}`
			`</div>`
			`<div className="flex w-full flex-col gap-5">`
chore: update biome schema and dependencies, refactor key usage in components - Updated biome schema version from 2.2.2 to 2.3.1 in biome.json. - Removed experimentalScannerIgnores from files section and replaced with ignore patterns. - Added CSS parser configuration for Tailwind directives. - Updated linter rules for better code quality. - Refactored key usage in various components to use unique identifiers instead of array indices. - Updated package-lock.json and package.json to reflect new biome version. - General code cleanup and improvements across multiple components for better maintainability. 2025-10-28 11:55:01 +01:00			`{t.faq.domande.map((item) => (`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<Accordion`
feat: Update UI components and styles across multiple pages - Enhanced the CardInfos component in [cod].tsx with improved styling and added TrafficCone icon for status indication. - Increased dialog content width in prezziario.tsx and testi-stringhe.tsx for better layout. - Replaced static badge elements with the Badge component in chi-siamo.tsx, contatti.tsx, guida.tsx, prezzi.tsx, and proprietari.tsx for consistent styling. - Updated button components to use the Button component in contatti.tsx and proprietari.tsx for improved accessibility and styling. - Modified the TrovaCasaCTA and FrequentSearches components in index.tsx for better visual consistency and updated color usage. - Refactored global CSS variables for improved color management and added new color variables for better theme support. - Implemented dynamic loading for the KabanExample component in test.tsx to enhance performance. 2025-11-14 17:21:21 +01:00			`className="relative w-full rounded-lg bg-muted p-4"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`collapsible`
fix: update accordion item keys for improved uniqueness in FAQSection 2025-12-12 11:37:44 +01:00			key={`accordion-${item.id}`}
eslint migration biome 2025-08-28 18:27:07 +02:00			`//defaultValue="0"`
formatt 2025-08-29 16:18:32 +02:00			`type="single"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`>`
chore: update biome schema version and refactor code style - Updated biome schema version from 2.3.1 to 2.3.11 in biome.json. - Refactored package.json for better readability and updated dependencies. - Adjusted class names in InformationBubble, ChatAttachments, ChatBubble, FileUpload, Loading, and other components for consistent styling. - Changed height classes from fixed pixel values to relative values for better responsiveness. - Removed unnecessary comments and unused variables in user.controller.ts. 2026-01-14 14:21:57 +01:00			<div className="absolute -top-16" id={`faq-${item.id}`} />
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`<h3 className="font-semibold text-2xl">{item.label}</h3>`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<div className="flex flex-col gap-1">`
			`{item.qas.map((f, i) => (`
fix: update accordion item keys for improved uniqueness in FAQSection 2025-12-12 11:37:44 +01:00			`<AccordionItem`
refactor: enhance styling and layout for various components, including Accordion and Pricing sections 2026-02-24 11:36:26 +01:00			`className="border-b dark:border-muted-foreground/50"`
feat: add order editing form and payment processing pages - Implemented FormEditOrder component for editing orders with validation and submission handling. - Created SchedaAnnuncioPage for displaying printable announcement details. - Added BonificoManualePage for manual bank transfer payment instructions. - Developed PagamentoPage for Stripe payment processing with PaymentIntent creation. - Introduced PreviewPurchasePage for preparing payment with service details. - Added pagamenti.controller for handling payment preparation and retrieval of payment data. 2026-03-08 01:02:57 +01:00			key={`accordion-item-${item.id}-${
			`// biome-ignore lint/suspicious/noArrayIndexKey: <ok>`
			`i`
			}`}
fix: update accordion item keys for improved uniqueness in FAQSection 2025-12-12 11:37:44 +01:00			`value={i.toString()}`
			`>`
refactor: enhance styling and layout for various components, including Accordion and Pricing sections 2026-02-24 11:36:26 +01:00			`<AccordionTrigger className="cursor-pointer text-left">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`{f.title}`
			`</AccordionTrigger>`
			`<AccordionContent>`
			`<p className="leading-relaxed">{f.description}</p>`
			`</AccordionContent>`
			`</AccordionItem>`
			`))}`
			`</div>`
			`</Accordion>`
			`))}`
			`</div>`
			`</div>`
			`</div>`
			`</section>`
			`);`
init 2025-08-04 17:45:44 +02:00			`};`