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

import { ArrowRight, Telescope } from "lucide-react";
import type { NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { AccordionComp } from "~/components/accordionComp";
import { CodiceBox } from "~/components/codiceRicerca";
import { PricingChoice } from "~/components/prezzi";
import { HeroSvg, LogoSvg } from "~/components/svgs";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { env } from "~/env.mjs";
import type { LangDict } from "~/i18n/locales";
import { useTranslation } from "~/providers/I18nProvider";

const Home: NextPage = () => {
	const { t } = useTranslation();
	const description =
		"Infoalloggi.it - Trova il tuo alloggio ideale in modo semplice e veloce. Annunci di case, appartamenti e stanze in affitto per studenti, lavoratori e famiglie. Scopri ora gli annunci!";
	return (
		<main>
			<Head>
				<meta content={description} property="description" />
				<meta content={env.NEXT_PUBLIC_BASE_URL} property="og:url" />
				<meta content="website" property="og:type" />
				<meta content="Infoalloggi.it" property="og:title" />
				<meta content={description} property="og:description" />
				<meta
					content={`${env.NEXT_PUBLIC_BASE_URL}/og.jpg`}
					property="og:image"
				/>
				<meta content="1200" property="og:image:width" />
				<meta content="630" property="og:image:height" />
				<meta
					content={`${env.NEXT_PUBLIC_BASE_URL}/Infoalloggi.png`}
					property="og:logo"
				/>
				<meta content="Infoalloggi.it" property="og:site_name" />
			</Head>
			<div className="mx-5 mt-0 mb-12 sm:mt-[2rem]">
				<main className="mx-auto mb-4 max-w-7xl space-y-5 lg:mb-20">
					<div className="flex flex-col items-center justify-center lg:flex-row lg:justify-around">
						<div className="-mt-2 xs:mt-5 flex h-[19rem] max-w-full items-center justify-center min-[22rem]:h-[23rem] min-[25rem]:h-[26rem]">
							<div className="flex scale-50 items-center justify-center drop-shadow-xl sm:scale-100 md:max-h-96 min-[20rem]:scale-[0.6] min-[22rem]:scale-[0.7] min-[25rem]:scale-[0.8]">
								<HeroSvg />
							</div>
						</div>

						<TrovaCasaCTA testi={t} />
					</div>
				</main>
				<div className="w-full space-y-10 md:space-y-20">
					<FrequentSearches />

					<AccordionComp
						className="mb-4 max-w-4xl py-4 md:py-8"
						texts={t.index.accordion_minifaq}
					/>

					<PricingChoice />
				</div>
			</div>
		</main>
	);
};

export default Home;

const TrovaCasaCTA = (props: { testi: LangDict }) => {
	const { testi } = props;
	return (
		<div className="z-10 flex flex-col justify-center text-center sm:p-6 lg:max-w-lg">
			<h1 className="font-bold text-[2.5rem] leading-none sm:text-6xl min-[26rem]:text-5xl">
				{testi.index.titolo_1}
				<span className="text-red-500"> {testi.index.titolo_2}</span>{" "}
				{testi.index.titolo_3}
			</h1>
			<LogoSvg className="h-[3rem] w-auto sm:h-[4rem] md:h-[5rem] [&>g]:fill-red-500 [&>text]:fill-primary [&>text]:stroke-primary" />
			<br />

			<div className="flex flex-col space-y-4 lg:justify-start">
				<Link
					className="flex h-14 items-center justify-center gap-2 rounded-md bg-red-500 px-8 py-3 font-semibold text-lg text-white"
					href="/annunci"
				>
					{testi.index.CTA_Annunci} <Telescope className="ml-2 size-6" />
				</Link>

				<div className="relative mx-auto flex w-full items-center justify-center gap-2 p-1 [&:has(#searchOptionsBox)]:[&_#animationDiv]:invisible">
					<CodiceBox
						className="rounded-md placeholder:text-center"
						key={"codiceBox"}
						optionBoxClassName="left-0"
					/>
					<div className="pointer-events-none absolute h-full w-full overflow-clip rounded-lg">
						<div
							className="pointer-events-none h-full w-full animate-[ping_1.5s_cubic-bezier(0,0,.2,1)_infinite] bg-yellow-500"
							id="animationDiv"
						/>
					</div>
				</div>
			</div>
		</div>
	);
};

const FrequentSearches = () => {
	const { locale } = useTranslation();
	return (
		<Card className="mx-auto mb-4 max-w-4xl gap-4 border-0 shadow-none">
			<CardHeader>
				<CardTitle className="text-center font-bold text-3xl text-primary sm:text-2xl">
					{locale === "en" ? "Frequent Searches" : "Ricerche frequenti"}
				</CardTitle>
			</CardHeader>
			<CardContent className="mx-auto flex max-w-fit flex-wrap items-center justify-center gap-4 px-2 sm:px-6">
				<Link href="/annunci?tipo=Transitorio">
					<Button
						className="flex items-center gap-1 border-2 border-white bg-transitorio text-black text-lg"
						size="lg"
						variant="flat"
					>
						Transitori
						<ArrowRight />
					</Button>
				</Link>
				<Link href="/annunci?tipo=Stabile">
					<Button
						className="flex items-center gap-1 border-2 border-white border-whiteborder-2 bg-stabile text-black text-lg"
						size="lg"
						variant="flat"
					>
						Stabili
						<ArrowRight />
					</Button>
				</Link>
				<Link href="/annunci?comune=Bassano+del+Grappa">
					<Button
						className="flex items-center gap-1 border-2 border-white text-lg"
						size="lg"
					>
						Bassano del Grappa
						<ArrowRight />
					</Button>
				</Link>

				<Link href="/annunci?comune=Bassano+del+Grappa&tipo=Transitorio">
					<Button
						className="flex items-center gap-1 border-2 border-white bg-transitorio text-black text-lg"
						size="lg"
						variant="flat"
					>
						Transitori Bassano
						<ArrowRight />
					</Button>
				</Link>

				<Link href="/annunci?comune=Marostica">
					<Button
						className="flex items-center gap-1 border-2 border-white text-lg"
						size="lg"
					>
						Marostica
						<ArrowRight />
					</Button>
				</Link>
			</CardContent>
		</Card>
	);
};
eslint migration biome 2025-08-28 18:27:07 +02:00			`import { ArrowRight, Telescope } from "lucide-react";`
init 2025-08-04 17:45:44 +02:00			`import type { NextPage } from "next";`
Refactor code structure for improved readability and maintainability 2025-10-07 18:07:57 +02:00			`import Head from "next/head";`
init 2025-08-04 17:45:44 +02:00			`import Link from "next/link";`
			`import { AccordionComp } from "~/components/accordionComp";`
eslint migration biome 2025-08-28 18:27:07 +02:00			`import { CodiceBox } from "~/components/codiceRicerca";`
init 2025-08-04 17:45:44 +02:00			`import { PricingChoice } from "~/components/prezzi";`
eslint migration biome 2025-08-28 18:27:07 +02:00			`import { HeroSvg, LogoSvg } from "~/components/svgs";`
init 2025-08-04 17:45:44 +02:00			`import { Button } from "~/components/ui/button";`
			`import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";`
Refactor code structure for improved readability and maintainability 2025-10-07 18:07:57 +02:00			`import { env } from "~/env.mjs";`
eslint migration biome 2025-08-28 18:27:07 +02:00			`import type { LangDict } from "~/i18n/locales";`
			`import { useTranslation } from "~/providers/I18nProvider";`
init 2025-08-04 17:45:44 +02:00
			`const Home: NextPage = () => {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`const { t } = useTranslation();`
Refactor code structure for improved readability and maintainability 2025-10-07 18:07:57 +02:00			`const description =`
			`"Infoalloggi.it - Trova il tuo alloggio ideale in modo semplice e veloce. Annunci di case, appartamenti e stanze in affitto per studenti, lavoratori e famiglie. Scopri ora gli annunci!";`
eslint migration biome 2025-08-28 18:27:07 +02:00			`return (`
Refactor code structure for improved readability and maintainability 2025-10-07 18:07:57 +02:00			`<main>`
			`<Head>`
			`<meta content={description} property="description" />`
			`<meta content={env.NEXT_PUBLIC_BASE_URL} property="og:url" />`
			`<meta content="website" property="og:type" />`
			`<meta content="Infoalloggi.it" property="og:title" />`
			`<meta content={description} property="og:description" />`
			`<meta`
			content={`${env.NEXT_PUBLIC_BASE_URL}/og.jpg`}
			`property="og:image"`
			`/>`
			`<meta content="1200" property="og:image:width" />`
			`<meta content="630" property="og:image:height" />`
			`<meta`
			content={`${env.NEXT_PUBLIC_BASE_URL}/Infoalloggi.png`}
			`property="og:logo"`
			`/>`
			`<meta content="Infoalloggi.it" property="og:site_name" />`
			`</Head>`
			`<div className="mx-5 mt-0 mb-12 sm:mt-[2rem]">`
			`<main className="mx-auto mb-4 max-w-7xl space-y-5 lg:mb-20">`
			`<div className="flex flex-col items-center justify-center lg:flex-row lg:justify-around">`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`<div className="-mt-2 xs:mt-5 flex h-[19rem] max-w-full items-center justify-center min-[22rem]:h-[23rem] min-[25rem]:h-[26rem]">`
			`<div className="flex scale-50 items-center justify-center drop-shadow-xl sm:scale-100 md:max-h-96 min-[20rem]:scale-[0.6] min-[22rem]:scale-[0.7] min-[25rem]:scale-[0.8]">`
Refactor code structure for improved readability and maintainability 2025-10-07 18:07:57 +02:00			`<HeroSvg />`
			`</div>`
eslint migration biome 2025-08-28 18:27:07 +02:00			`</div>`
init 2025-08-04 17:45:44 +02:00
Refactor code structure for improved readability and maintainability 2025-10-07 18:07:57 +02:00			`<TrovaCasaCTA testi={t} />`
			`</div>`
			`</main>`
			`<div className="w-full space-y-10 md:space-y-20">`
			`<FrequentSearches />`
init 2025-08-04 17:45:44 +02:00
Refactor code structure for improved readability and maintainability 2025-10-07 18:07:57 +02:00			`<AccordionComp`
			`className="mb-4 max-w-4xl py-4 md:py-8"`
			`texts={t.index.accordion_minifaq}`
			`/>`
init 2025-08-04 17:45:44 +02:00
Refactor code structure for improved readability and maintainability 2025-10-07 18:07:57 +02:00			`<PricingChoice />`
			`</div>`
eslint migration biome 2025-08-28 18:27:07 +02:00			`</div>`
Refactor code structure for improved readability and maintainability 2025-10-07 18:07:57 +02:00			`</main>`
eslint migration biome 2025-08-28 18:27:07 +02:00			`);`
init 2025-08-04 17:45:44 +02:00			`};`

			`export default Home;`

			`const TrovaCasaCTA = (props: { testi: LangDict }) => {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`const { testi } = props;`
			`return (`
			`<div className="z-10 flex flex-col justify-center text-center sm:p-6 lg:max-w-lg">`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`<h1 className="font-bold text-[2.5rem] leading-none sm:text-6xl min-[26rem]:text-5xl">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`{testi.index.titolo_1}`
			`<span className="text-red-500"> {testi.index.titolo_2}</span>{" "}`
			`{testi.index.titolo_3}`
			`</h1>`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`<LogoSvg className="h-[3rem] w-auto sm:h-[4rem] md:h-[5rem] [&>g]:fill-red-500 [&>text]:fill-primary [&>text]:stroke-primary" />`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<br />`
init 2025-08-04 17:45:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`<div className="flex flex-col space-y-4 lg:justify-start">`
			`<Link`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`className="flex h-14 items-center justify-center gap-2 rounded-md bg-red-500 px-8 py-3 font-semibold text-lg text-white"`
formatt 2025-08-29 16:18:32 +02:00			`href="/annunci"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`>`
			`{testi.index.CTA_Annunci} <Telescope className="ml-2 size-6" />`
			`</Link>`
init 2025-08-04 17:45:44 +02:00
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`<div className="relative mx-auto flex w-full items-center justify-center gap-2 p-1 [&:has(#searchOptionsBox)]:[&_#animationDiv]:invisible">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<CodiceBox`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`className="rounded-md placeholder:text-center"`
formatt 2025-08-29 16:18:32 +02:00			`key={"codiceBox"}`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00			`optionBoxClassName="left-0"`
eslint migration biome 2025-08-28 18:27:07 +02:00			`/>`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`<div className="pointer-events-none absolute h-full w-full overflow-clip rounded-lg">`
feat: add IDs to search container and options box for improved accessibility and styling 2025-08-29 15:03:57 +02:00			`<div`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`className="pointer-events-none h-full w-full animate-[ping_1.5s_cubic-bezier(0,0,.2,1)_infinite] bg-yellow-500"`
feat: add IDs to search container and options box for improved accessibility and styling 2025-08-29 15:03:57 +02:00			`id="animationDiv"`
			`/>`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00			`</div>`
eslint migration biome 2025-08-28 18:27:07 +02:00			`</div>`
			`</div>`
			`</div>`
			`);`
init 2025-08-04 17:45:44 +02:00			`};`

			`const FrequentSearches = () => {`
eslint migration biome 2025-08-28 18:27:07 +02:00			`const { locale } = useTranslation();`
			`return (`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`<Card className="mx-auto mb-4 max-w-4xl gap-4 border-0 shadow-none">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<CardHeader>`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`<CardTitle className="text-center font-bold text-3xl text-primary sm:text-2xl">`
eslint migration biome 2025-08-28 18:27:07 +02:00			`{locale === "en" ? "Frequent Searches" : "Ricerche frequenti"}`
			`</CardTitle>`
			`</CardHeader>`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00			`<CardContent className="mx-auto flex max-w-fit flex-wrap items-center justify-center gap-4 px-2 sm:px-6">`
			`<Link href="/annunci?tipo=Transitorio">`
			`<Button`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`className="flex items-center gap-1 border-2 border-white bg-transitorio text-black text-lg"`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00			`size="lg"`
			`variant="flat"`
			`>`
			`Transitori`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<ArrowRight />`
			`</Button>`
			`</Link>`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00			`<Link href="/annunci?tipo=Stabile">`
			`<Button`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`className="flex items-center gap-1 border-2 border-white border-whiteborder-2 bg-stabile text-black text-lg"`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00			`size="lg"`
			`variant="flat"`
			`>`
			`Stabili`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<ArrowRight />`
			`</Button>`
			`</Link>`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00			`<Link href="/annunci?comune=Bassano+del+Grappa">`
			`<Button`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`className="flex items-center gap-1 border-2 border-white text-lg"`
formatt 2025-08-29 16:18:32 +02:00			`size="lg"`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00			`>`
			`Bassano del Grappa`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<ArrowRight />`
			`</Button>`
			`</Link>`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00
			`<Link href="/annunci?comune=Bassano+del+Grappa&tipo=Transitorio">`
			`<Button`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`className="flex items-center gap-1 border-2 border-white bg-transitorio text-black text-lg"`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00			`size="lg"`
			`variant="flat"`
			`>`
			`Transitori Bassano`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<ArrowRight />`
			`</Button>`
			`</Link>`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00
eslint migration biome 2025-08-28 18:27:07 +02:00			`<Link href="/annunci?comune=Marostica">`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00			`<Button`
sort classes rule and fix 2025-10-10 16:18:43 +02:00			`className="flex items-center gap-1 border-2 border-white text-lg"`
formatt 2025-08-29 16:18:32 +02:00			`size="lg"`
feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements 2025-08-29 09:58:44 +02:00			`>`
			`Marostica`
eslint migration biome 2025-08-28 18:27:07 +02:00			`<ArrowRight />`
			`</Button>`
			`</Link>`
			`</CardContent>`
			`</Card>`
			`);`
init 2025-08-04 17:45:44 +02:00			`};`