2026-01-20 18:38:17 +01:00
import { Telescope } from "lucide-react" ;
2025-08-04 17:45:44 +02:00
import type { NextPage } from "next" ;
2025-10-07 18:07:57 +02:00
import Head from "next/head" ;
2025-08-04 17:45:44 +02:00
import Link from "next/link" ;
import { AccordionComp } from "~/components/accordionComp" ;
2026-03-24 12:03:31 +01:00
import { AnniversaryBanner } from "~/components/banners" ;
2025-08-28 18:27:07 +02:00
import { CodiceBox } from "~/components/codiceRicerca" ;
2026-01-12 16:00:53 +01:00
import { ComeFunziona } from "~/components/expand_guida" ;
2025-08-04 17:45:44 +02:00
import { PricingChoice } from "~/components/prezzi" ;
2025-08-28 18:27:07 +02:00
import { HeroSvg , LogoSvg } from "~/components/svgs" ;
2025-10-20 16:22:20 +02:00
import { env } from "~/env" ;
2025-08-28 18:27:07 +02:00
import type { LangDict } from "~/i18n/locales" ;
import { useTranslation } from "~/providers/I18nProvider" ;
2025-08-04 17:45:44 +02:00
2026-03-09 17:33:02 +01:00
/ * *
* Pagina principale : /
* /
2025-08-04 17:45:44 +02:00
const Home : NextPage = ( ) = > {
2025-08-28 18:27:07 +02:00
const { t } = useTranslation ( ) ;
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!" ;
2025-08-28 18:27:07 +02:00
return (
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 >
2026-01-20 18:38:17 +01:00
< div className = "mx-5 mt-0 mb-12 sm:mt-8" >
2025-11-12 15:52:04 +01:00
< main className = "mx-auto mb-4 max-w-8xl space-y-5 lg:mb-20" >
2025-10-07 18:07:57 +02:00
< div className = "flex flex-col items-center justify-center lg:flex-row lg:justify-around" >
2026-05-05 15:07:38 +02:00
< div className = "-mt-2 xs:mt-5 flex h-68 max-w-full items-center justify-center min-[22rem]:h-66 min-[25rem]:h-82 min-[27rem]:h-104" >
< div className = "flex scale-50 xxs:scale-[0.5] items-center justify-center drop-shadow-xl sm:scale-100 md:max-h-92 min-[22rem]:scale-[0.48] min-[25rem]:scale-[0.6]" >
2025-10-07 18:07:57 +02:00
< HeroSvg / >
< / div >
2025-08-28 18:27:07 +02:00
< / div >
2025-08-04 17:45:44 +02:00
2025-10-07 18:07:57 +02:00
< TrovaCasaCTA testi = { t } / >
< / div >
< / main >
2026-03-24 12:03:31 +01:00
< div className = "flex w-full flex-col gap-y-4 md:gap-y-6" >
< AnniversaryBanner / >
{ /* <FrequentSearches /> */ }
< div className = "mx-auto w-full max-w-5xl" >
2026-01-12 16:00:53 +01:00
< ComeFunziona / >
< / div >
2025-10-07 18:07:57 +02:00
< AccordionComp
2026-03-24 12:03:31 +01:00
className = "w-full max-w-5xl"
2025-10-07 18:07:57 +02:00
texts = { t . index . accordion_minifaq }
/ >
2025-08-04 17:45:44 +02:00
2025-10-07 18:07:57 +02:00
< PricingChoice / >
< / div >
2025-08-28 18:27:07 +02:00
< / div >
2025-10-07 18:07:57 +02:00
< / main >
2025-08-28 18:27:07 +02:00
) ;
2025-08-04 17:45:44 +02:00
} ;
export default Home ;
const TrovaCasaCTA = ( props : { testi : LangDict } ) = > {
2025-08-28 18:27:07 +02:00
const { testi } = props ;
return (
2026-05-05 15:07:38 +02:00
< div className = "z-10 flex flex-col justify-center gap-4 text-center sm:p-6 lg:max-w-lg" >
< div className = "flex flex-col items-center text-center" >
< h1 className = "font-bold text-[2.5rem] leading-none sm:text-6xl min-[26rem]:text-5xl" >
{ testi . index . titolo_1 }
< span className = "text-[#fb2c36]" > { testi . index . titolo_2 } < / span > { " " }
{ testi . index . titolo_3 }
< / h1 >
< LogoSvg className = "h-12 w-auto sm:h-16 md:h-20" / >
< / div >
2025-08-04 17:45:44 +02:00
2025-08-28 18:27:07 +02:00
< div className = "flex flex-col space-y-4 lg:justify-start" >
< Link
2025-11-14 17:21:21 +01:00
className = "flex h-14 items-center justify-center gap-2 rounded-md bg-destructive px-8 py-3 font-semibold text-lg text-white"
2025-08-29 16:18:32 +02:00
href = "/annunci"
2025-08-28 18:27:07 +02:00
>
{ testi . index . CTA_Annunci } < Telescope className = "ml-2 size-6" / >
< / Link >
2025-08-04 17:45:44 +02:00
2025-11-14 17:21:21 +01:00
< div className = "relative mx-auto flex w-full items-center justify-center gap-2 py-1 [&:has(#searchOptionsBox)]:[&_#animationDiv]:invisible" >
2025-08-28 18:27:07 +02:00
< CodiceBox
2025-10-10 16:18:43 +02:00
className = "rounded-md placeholder:text-center"
2025-10-20 11:56:54 +02:00
inputId = "index-search"
2025-08-29 16:18:32 +02:00
key = { "codiceBox" }
2025-08-29 09:58:44 +02:00
optionBoxClassName = "left-0"
2025-08-28 18:27:07 +02:00
/ >
2025-11-25 09:57:31 +01:00
{ / * < d i v c l a s s N a m e = " p o i n t e r - e v e n t s - n o n e a b s o l u t e h - f u l l w - f u l l o v e r f l o w - c l i p r o u n d e d - l g " >
2025-08-29 15:03:57 +02:00
< div
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"
2025-08-29 15:03:57 +02:00
id = "animationDiv"
/ >
2025-11-25 09:57:31 +01:00
< / div > * / }
2025-08-28 18:27:07 +02:00
< / div >
< / div >
2026-05-05 15:07:38 +02:00
< h1 className = "font-bold text-xl sm:text-2xl" >
Visita garantita o < u > ti rimborsiamo < / u > !
< / h1 >
2025-08-28 18:27:07 +02:00
< / div >
) ;
2025-08-04 17:45:44 +02:00
} ;