2025-08-28 18:27:07 +02:00
import { ArrowRight , 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" ;
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-08-04 17:45:44 +02:00
import { Button } from "~/components/ui/button" ;
import { Card , CardContent , CardHeader , CardTitle } from "~/components/ui/card" ;
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
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 >
< div className = "mx-5 mt-0 mb-12 sm:mt-[2rem]" >
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" >
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]" >
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 >
< div className = "w-full space-y-10 md:space-y-20" >
2026-01-12 16:00:53 +01:00
< div className = "mx-auto max-w-4xl px-1 sm:px-0" >
< ComeFunziona / >
< / div >
2025-10-07 18:07:57 +02:00
< FrequentSearches / >
2025-08-04 17:45:44 +02:00
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 }
/ >
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 (
< div className = "z-10 flex flex-col justify-center text-center sm:p-6 lg:max-w-lg" >
2025-10-10 16:18:43 +02:00
< h1 className = "font-bold text-[2.5rem] leading-none sm:text-6xl min-[26rem]:text-5xl" >
2025-08-28 18:27:07 +02:00
{ testi . index . titolo_1 }
2025-11-14 17:21:21 +01:00
< span className = "text-destructive" > { testi . index . titolo_2 } < / span > { " " }
2025-08-28 18:27:07 +02:00
{ testi . index . titolo_3 }
< / h1 >
2025-11-14 17:21:21 +01:00
< LogoSvg className = "h-[3rem] w-auto sm:h-[4rem] md:h-[5rem]" / >
2025-08-28 18:27:07 +02:00
< br / >
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 >
< / div >
) ;
2025-08-04 17:45:44 +02:00
} ;
const FrequentSearches = ( ) = > {
2025-08-28 18:27:07 +02:00
const { locale } = useTranslation ( ) ;
return (
2025-11-14 17:21:21 +01:00
< Card className = "mx-auto mb-4 max-w-4xl gap-4 border-0 bg-secondary shadow-none" >
2025-08-28 18:27:07 +02:00
< CardHeader >
2025-11-14 17:21:21 +01:00
< CardTitle className = "text-center font-bold text-3xl sm:text-2xl" >
2025-08-28 18:27:07 +02:00
{ locale === "en" ? "Frequent Searches" : "Ricerche frequenti" }
< / CardTitle >
< / CardHeader >
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
2025-11-14 17:21:21 +01:00
className = "flex items-center gap-1 border-2 border-transitorio bg-transitorio text-black text-lg"
2025-08-29 09:58:44 +02:00
size = "lg"
variant = "flat"
>
Transitori
2025-08-28 18:27:07 +02:00
< ArrowRight / >
< / Button >
< / Link >
2025-08-29 09:58:44 +02:00
< Link href = "/annunci?tipo=Stabile" >
< Button
2025-11-14 17:21:21 +01:00
className = "flex items-center gap-1 border-2 border-stabile bg-stabile text-black text-lg"
2025-08-29 09:58:44 +02:00
size = "lg"
variant = "flat"
>
Stabili
2025-08-28 18:27:07 +02:00
< ArrowRight / >
< / Button >
< / Link >
2025-08-29 09:58:44 +02:00
< Link href = "/annunci?comune=Bassano+del+Grappa" >
< Button
2025-11-14 17:21:21 +01:00
className = "flex items-center gap-1 border-2 border-primary text-lg"
2025-08-29 16:18:32 +02:00
size = "lg"
2025-08-29 09:58:44 +02:00
>
Bassano del Grappa
2025-08-28 18:27:07 +02:00
< ArrowRight / >
< / Button >
< / Link >
2025-08-29 09:58:44 +02:00
< Link href = "/annunci?comune=Bassano+del+Grappa&tipo=Transitorio" >
< Button
2025-11-14 17:21:21 +01:00
className = "flex items-center gap-1 border-2 border-transitorio bg-transitorio text-black text-lg"
2025-08-29 09:58:44 +02:00
size = "lg"
variant = "flat"
>
Transitori Bassano
2025-08-28 18:27:07 +02:00
< ArrowRight / >
< / Button >
< / Link >
2025-08-29 09:58:44 +02:00
2025-08-28 18:27:07 +02:00
< Link href = "/annunci?comune=Marostica" >
2025-08-29 09:58:44 +02:00
< Button
2025-11-14 17:21:21 +01:00
className = "flex items-center gap-1 border-2 border-primary text-lg"
2025-08-29 16:18:32 +02:00
size = "lg"
2025-08-29 09:58:44 +02:00
>
Marostica
2025-08-28 18:27:07 +02:00
< ArrowRight / >
< / Button >
< / Link >
< / CardContent >
< / Card >
) ;
2025-08-04 17:45:44 +02:00
} ;
