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

117 lines
4.1 KiB
TypeScript
Raw Normal View History

import { Telescope } from "lucide-react";
2025-08-04 17:45:44 +02:00
import type { NextPage } from "next";
import Head from "next/head";
2025-08-04 17:45:44 +02:00
import Link from "next/link";
import { AccordionComp } from "~/components/accordionComp";
import { AnniversaryBanner } from "~/components/banners";
2025-08-28 18:27:07 +02:00
import { CodiceBox } from "~/components/codiceRicerca";
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";
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
/**
* Pagina principale: /
*/
2025-08-04 17:45:44 +02:00
const Home: NextPage = () => {
2025-08-28 18:27:07 +02:00
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!";
2025-08-28 18:27:07 +02:00
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-8">
<main className="mx-auto mb-4 max-w-8xl 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-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]">
<HeroSvg />
</div>
2025-08-28 18:27:07 +02:00
</div>
2025-08-04 17:45:44 +02:00
<TrovaCasaCTA testi={t} />
</div>
</main>
<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">
<ComeFunziona />
</div>
<AccordionComp
className="w-full max-w-5xl"
texts={t.index.accordion_minifaq}
/>
2025-08-04 17:45:44 +02:00
<PricingChoice />
</div>
2025-08-28 18:27:07 +02:00
</div>
</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 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
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
<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"
inputId="index-search"
2025-08-29 16:18:32 +02:00
key={"codiceBox"}
optionBoxClassName="left-0"
2025-08-28 18:27:07 +02:00
/>
2025-11-25 09:57:31 +01:00
{/* <div className="pointer-events-none absolute h-full w-full overflow-clip rounded-lg">
<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"
id="animationDiv"
/>
2025-11-25 09:57:31 +01:00
</div> */}
2025-08-28 18:27:07 +02:00
</div>
</div>
<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
};