84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import Footer from "@/components/Footer";
|
|
import { ArrowLeft } from "lucide-react";
|
|
import type { ReactNode } from "react";
|
|
|
|
type LegalPageLayoutProps = {
|
|
eyebrow: string;
|
|
title: string;
|
|
intro: string;
|
|
updatedAt: string;
|
|
children: ReactNode;
|
|
};
|
|
|
|
export default function LegalPageLayout({
|
|
eyebrow,
|
|
title,
|
|
intro,
|
|
updatedAt,
|
|
children,
|
|
}: LegalPageLayoutProps) {
|
|
return (
|
|
<div className="min-h-screen bg-[#F8F4EC] text-[#18364A]">
|
|
<header className="border-b border-[#d8cec0] bg-white/95 backdrop-blur">
|
|
<div className="container flex items-center justify-between py-4">
|
|
<a href="/" className="inline-flex items-center gap-2 text-sm font-semibold text-[#1B4F72] hover:text-[#4ECDC4] transition-colors">
|
|
<ArrowLeft size={16} />
|
|
Torna alla home
|
|
</a>
|
|
<div className="text-right">
|
|
<div
|
|
className="leading-tight text-[#1B4F72]"
|
|
style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: "1rem", fontWeight: 700 }}
|
|
>
|
|
Clinica Veterinaria
|
|
</div>
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-[#4ECDC4]">
|
|
Formiginese
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section className="border-b border-[#e4d8c9] bg-white">
|
|
<div className="container py-14 md:py-18">
|
|
<div className="mb-4 flex items-center gap-3">
|
|
<div className="h-0.5 w-12 bg-[#4ECDC4]" />
|
|
<span className="text-sm font-semibold uppercase tracking-widest text-[#4ECDC4]">
|
|
{eyebrow}
|
|
</span>
|
|
</div>
|
|
<div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)] lg:items-end">
|
|
<div>
|
|
<h1
|
|
className="text-[#1B4F72]"
|
|
style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: "clamp(2.2rem, 5vw, 4rem)", fontWeight: 600, lineHeight: 1.06 }}
|
|
>
|
|
{title}
|
|
</h1>
|
|
<p className="mt-5 max-w-3xl text-base leading-relaxed text-gray-600">
|
|
{intro}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-[#e6ddcf] bg-[#F8F4EC] px-5 py-4 text-sm text-gray-600 shadow-sm">
|
|
<p className="font-semibold text-[#1B4F72]">Ultimo aggiornamento</p>
|
|
<p className="mt-1">{updatedAt}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="container py-12 md:py-16">
|
|
<div className="rounded-[28px] border border-[#e9dece] bg-white px-6 py-8 shadow-sm md:px-10 md:py-10">
|
|
<div className="legal-content prose prose-slate max-w-none prose-headings:text-[#1B4F72] prose-headings:font-semibold prose-p:text-gray-600 prose-li:text-gray-600 prose-strong:text-[#1B4F72]">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|