versione 1.0

clinica-app/client/src/components/LegalPageLayout.tsx

@@ -0,0 +1,83 @@
+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>
+  );
+}