170 lines
5.6 KiB
TypeScript
170 lines
5.6 KiB
TypeScript
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"
|
|
inputId="index-search"
|
|
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>
|
|
);
|
|
};
|