infoalloggi-monorepo/apps/infoalloggi/src/pages/proprietari.tsx
Marco Pedone d7bfd8fdf1 feat: Update UI components and styles across multiple pages
- Enhanced the CardInfos component in [cod].tsx with improved styling and added TrafficCone icon for status indication.
- Increased dialog content width in prezziario.tsx and testi-stringhe.tsx for better layout.
- Replaced static badge elements with the Badge component in chi-siamo.tsx, contatti.tsx, guida.tsx, prezzi.tsx, and proprietari.tsx for consistent styling.
- Updated button components to use the Button component in contatti.tsx and proprietari.tsx for improved accessibility and styling.
- Modified the TrovaCasaCTA and FrequentSearches components in index.tsx for better visual consistency and updated color usage.
- Refactored global CSS variables for improved color management and added new color variables for better theme support.
- Implemented dynamic loading for the KabanExample component in test.tsx to enhance performance.
2025-11-14 17:21:21 +01:00

94 lines
3.2 KiB
TypeScript

import { ArrowRight } from "lucide-react";
import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { AccordionComp } from "~/components/accordionComp";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import { Card, CardContent } from "~/components/ui/card";
import { useTranslation } from "~/providers/I18nProvider";
const Proprietari: NextPage = () => {
const { t } = useTranslation();
return (
<>
<Head>
<title>{t.proprietari.head}</title>
<meta content={t.proprietari.description} name="description" />
</Head>
<main className="mx-auto w-full max-w-8xl space-y-5 px-2 py-5 md:px-8">
<Badge className="bg-muted py-1 text-muted-foreground text-sm outline outline-muted-foreground">
{t.proprietari.titolo}
</Badge>
<div className="mx-auto w-full space-y-5 sm:space-y-14">
<section className="relative mx-auto flex max-w-6xl flex-col-reverse items-center justify-between gap-8 px-4 py-4 sm:flex-row sm:gap-20 md:px-8">
<div className="max-w-lg flex-1 py-5 sm:mx-auto sm:text-center md:max-w-max md:text-left">
<h3 className="font-semibold text-3xl md:text-4xl">
{t.proprietari.cta1.title1}{" "}
<span className="text-red-500">
{t.proprietari.cta1.title2}
</span>
</h3>
<p className="mt-3 leading-relaxed">{t.proprietari.cta1.desc}</p>
<Link href="/contatti">
<Button className="mt-5">
{t.proprietari.contattaci}
<ArrowRight className="ml-1 h-5 w-5 duration-150" />
</Button>
</Link>
</div>
<div className="mx-auto mt-5 flex-1 sm:w-9/12 md:mt-0 md:w-auto">
<Image
alt=""
className="w-full rounded-md object-cover"
height={1050}
src="/rent_0.webp"
width={1400}
/>
</div>
</section>
<Card className="mx-auto w-full max-w-4xl py-3">
<CardContent>
<AccordionComp
className="w-full max-w-full"
texts={t.proprietari.faq}
/>
</CardContent>
</Card>
<section className="relative mx-auto flex max-w-6xl flex-col items-center justify-between gap-8 px-4 py-4 sm:flex-row sm:gap-20 md:px-8">
<div className="mx-auto mt-5 flex-1 sm:w-9/12 md:mt-0 md:w-auto">
<Image
alt=""
className="w-full rounded-md object-cover"
height={1050}
src="/rent_2.webp"
width={1400}
/>
</div>
<div className="max-w-lg flex-1 py-5 sm:mx-auto sm:text-center md:max-w-max md:text-left">
<h3 className="font-semibold text-3xl md:text-4xl">
{t.proprietari.cta2.title1}{" "}
<span className="text-red-500">
{t.proprietari.cta2.title2}
</span>
{t.proprietari.cta2.title3}
</h3>
<p className="mt-3 leading-relaxed">{t.proprietari.cta2.desc}</p>
<Link href="/contatti">
<Button className="mt-5">
{t.proprietari.contattaci}
<ArrowRight className="ml-1 h-5 w-5 duration-150" />
</Button>
</Link>
</div>
</section>
</div>
</main>
</>
);
};
export default Proprietari;