194 lines
6 KiB
TypeScript
194 lines
6 KiB
TypeScript
import type { NextPage } from "next";
|
|
import Head from "next/head";
|
|
import { AccordionComp } from "~/components/accordionComp";
|
|
import { IconMatrix } from "~/components/IconComponents";
|
|
import { LoadingPage } from "~/components/loading";
|
|
import {
|
|
PricingComponent,
|
|
PricingComponentConsulenza,
|
|
} from "~/components/prezzi";
|
|
import { Status500 } from "~/components/status-page";
|
|
import { Separator } from "~/components/ui/separator";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
import TipologiaPosizioneEnum from "~/schemas/public/TipologiaPosizioneEnum";
|
|
import { api } from "~/utils/api";
|
|
|
|
const Prezzi: NextPage = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const { data: prezziario, isLoading } =
|
|
api.prezziario.getPrezziPerTipologiaAll.useQuery();
|
|
|
|
if (isLoading) {
|
|
return <LoadingPage />;
|
|
}
|
|
if (!prezziario) {
|
|
return <Status500 />;
|
|
}
|
|
|
|
const pricingTransitorio = prezziario.transitorio.saldi.map((s) => ({
|
|
downPayment: prezziario.transitorio.acconto.prezzo_cent / 100,
|
|
secondPayment: s.prezzo_cent / 100,
|
|
}));
|
|
|
|
const pricingStabile = prezziario.stabile.saldi.map((s) => ({
|
|
downPayment: prezziario.stabile.acconto.prezzo_cent / 100,
|
|
secondPayment: s.prezzo_cent / 100,
|
|
}));
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{t.heads.prezzi_titolo}</title>
|
|
<meta content={t.heads.prezzi_description} name="description" />
|
|
</Head>
|
|
<section className="mx-auto max-w-7xl px-2 py-5 md:px-8">
|
|
<div className="bg-primary/10 text-primary inline-block rounded-md px-3 py-1 text-sm">
|
|
{t.prezzi_titolo}
|
|
</div>
|
|
<div className="mt-5 space-y-14">
|
|
<section
|
|
className="mx-auto flex max-w-5xl flex-col items-center gap-8"
|
|
id="transitorio"
|
|
>
|
|
<h1 className="text-4xl font-semibold">
|
|
{t.prezzi.titolo_servizio_transitori}
|
|
</h1>
|
|
<PricingComponent
|
|
className="border-transitorio bg-transitorio"
|
|
cta={t.pricing_cmp.cta_breve}
|
|
opzioni={[
|
|
t.pricing_cmp.breve_option1,
|
|
t.pricing_cmp.breve_option2,
|
|
t.pricing_cmp.breve_option3,
|
|
t.pricing_cmp.breve_option4,
|
|
t.pricing_cmp.breve_option5,
|
|
]}
|
|
pricingData={pricingTransitorio}
|
|
statico
|
|
tipo={TipologiaPosizioneEnum.Transitorio}
|
|
title={t.prezzi.titolo_transitori}
|
|
/>
|
|
|
|
<p>{t.prezzi.desc_transitori}</p>
|
|
<div className="my-5">
|
|
<ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2">
|
|
{t.prezzi.cta_transitori.map((item, idx) => (
|
|
<li className="flex gap-x-4" key={idx}>
|
|
<div className="flex size-12 flex-none items-center justify-center rounded-lg bg-sky-50 text-sky-600">
|
|
<IconMatrix type={item.icon} />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-gray-800">
|
|
{item.titolo}
|
|
</h4>
|
|
<p className="mt-3">{item.desc}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* <ConsulenzaServizio data={prezziario.transitorio} /> */}
|
|
<AccordionComp
|
|
className="w-full max-w-full"
|
|
texts={t.prezzi.faq_transitori}
|
|
/>
|
|
</section>
|
|
<Separator className="my-5" />
|
|
<section
|
|
className="mx-auto flex max-w-5xl flex-col items-center gap-8"
|
|
id="stabile"
|
|
>
|
|
<h1 className="text-4xl font-semibold">
|
|
{t.prezzi.titolo_servizio_stabile}
|
|
</h1>
|
|
<PricingComponent
|
|
className="border-stabile bg-stabile"
|
|
cta={t.pricing_cmp.cta_stabile}
|
|
opzioni={[
|
|
t.pricing_cmp.stabile_option1,
|
|
t.pricing_cmp.stabile_option2,
|
|
]}
|
|
pricingData={pricingStabile}
|
|
statico
|
|
tipo={TipologiaPosizioneEnum.Stabile}
|
|
title={t.prezzi.titolo_stabile}
|
|
/>
|
|
<p>{t.prezzi.desc_stabile}</p>
|
|
<div className="my-5">
|
|
<ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2">
|
|
{t.prezzi.cta_stabile.map((item, idx) => (
|
|
<li className="flex gap-x-4" key={idx}>
|
|
<div className="flex size-12 flex-none items-center justify-center rounded-lg bg-orange-50 text-orange-600">
|
|
<IconMatrix type={item.icon} />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-gray-800">
|
|
{item.titolo}
|
|
</h4>
|
|
<p className="mt-3">{item.desc}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
{/* <ConsulenzaServizio data={prezziario.stabile} /> */}
|
|
<AccordionComp
|
|
className="w-full max-w-full"
|
|
texts={t.prezzi.faq_stabile}
|
|
/>
|
|
</section>
|
|
<Separator className="my-5" />
|
|
<section
|
|
className="mx-auto flex max-w-5xl flex-col items-center gap-8"
|
|
id="contratti"
|
|
>
|
|
<h1 className="text-4xl font-semibold">
|
|
{t.prezzi.titolo_servizio_contratti}
|
|
</h1>
|
|
|
|
<PricingComponentConsulenza
|
|
className="border-green-400 bg-green-400"
|
|
cta={t.pricing_cmp.cta_consulenza}
|
|
opzioni={[
|
|
"Libero (4 + 4 anni)",
|
|
"Agevolato (3 + 2 anni)",
|
|
"Commerciale",
|
|
]}
|
|
pricingData={
|
|
prezziario.consulenza?.map((s) => s.prezzo_cent / 100) || []
|
|
}
|
|
statico
|
|
title={t.prezzi.titolo_contratti}
|
|
/>
|
|
<p>{t.prezzi.desc_contratti}</p>
|
|
<div className="my-5">
|
|
<ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2">
|
|
{t.prezzi.cta_contratti.map((item, idx) => (
|
|
<li className="flex gap-x-4" key={idx}>
|
|
<div className="flex size-12 flex-none items-center justify-center rounded-lg bg-green-50 text-green-600">
|
|
<IconMatrix type={item.icon} />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-gray-800">
|
|
{item.titolo}
|
|
</h4>
|
|
<p className="mt-3">{item.desc}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
{/* <ConsulenzaTable data={prezziario.consulenza} /> */}
|
|
<AccordionComp
|
|
className="w-full max-w-full"
|
|
texts={t.prezzi.faq_contratti}
|
|
/>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
};
|
|
export default Prezzi;
|