feat: tier names + per-tier prices on offer cards, unified admin UI

- offer editor: per-tier name input (mirrors public_name/internal_name)
- offer list cards: show 3-tier services total + manual public price
- shared PageHeader component, full-width layout across all admin pages
- UI-RULES.md design conventions doc

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/admin/projects/page.tsx

@@ -1,23 +1,25 @@
 import { getAllProjectsWithPayments } from "@/lib/admin-queries";
 import { ProjectRow } from "@/components/admin/ProjectRow";
 import Link from "next/link";
+import { PageHeader } from "@/components/admin/PageHeader";
 
 export const revalidate = 0;
 
 export default async function ProjectsPage() {
   const projects = await getAllProjectsWithPayments();
 
+  const projectiAction = (
+    <Link
+      href="/admin/projects/new"
+      className="text-sm bg-[#1A463C] text-white px-4 py-2 rounded-lg hover:bg-[#1A463C]/90 transition-colors"
+    >
+      + Nuovo Progetto
+    </Link>
+  );
+
   return (
-    <div>
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-[#1a1a1a]">Progetti</h1>
-        <Link
-          href="/admin/projects/new"
-          className="text-sm bg-[#1A463C] text-white px-4 py-2 rounded-lg hover:bg-[#1A463C]/90 transition-colors"
-        >
-          + Nuovo Progetto
-        </Link>
-      </div>
+    <div className="space-y-6">
+      <PageHeader title="Progetti" action={projectiAction} />
 
       {projects.length === 0 ? (
         <div className="bg-white rounded-xl border border-[#e5e7eb] p-12 text-center">