Implement public audit pages

2026-06-05 14:14:07 +02:00
parent 03cb65fde4
commit 47ee2c2d51
25 changed files with 1039 additions and 45 deletions
--- a/components/public-audit/public-audit-page.tsx
+++ b/components/public-audit/public-audit-page.tsx
@@ -0,0 +1,124 @@
+import { ArrowRight, CheckCircle2, ExternalLink } from "lucide-react";
+
+import type { PublicAuditRenderState } from "@/lib/audits/public-audit-types";
+import { PublicAuditScreenshot } from "./public-audit-screenshot";
+
+type PublicAuditPageProps = {
+  audit: Extract<PublicAuditRenderState, { kind: "published" }>["audit"];
+};
+
+export function PublicAuditPage({ audit }: PublicAuditPageProps) {
+  return (
+    <main className="min-h-dvh bg-slate-50 text-slate-950">
+      <section className="border-b border-slate-200 bg-white">
+        <div className="mx-auto grid min-h-[72dvh] w-full max-w-6xl content-center gap-10 px-6 py-14 md:grid-cols-[minmax(0,1.1fr)_minmax(320px,0.9fr)] md:px-8">
+          <div className="max-w-3xl">
+            <p className="text-sm font-semibold uppercase tracking-normal text-emerald-700">
+              Öffentliche Audit-Kurzfassung
+            </p>
+            <h1 className="mt-4 text-4xl font-semibold tracking-normal text-slate-950 md:text-5xl">
+              {audit.headline}
+            </h1>
+            <p className="mt-5 text-lg leading-8 text-slate-700">{audit.intro}</p>
+            <dl className="mt-8 grid gap-4 text-sm text-slate-700 sm:grid-cols-2">
+              <div>
+                <dt className="font-semibold text-slate-950">Unternehmen</dt>
+                <dd className="mt-1">{audit.companyName}</dd>
+              </div>
+              <div>
+                <dt className="font-semibold text-slate-950">Geprüfte Domain</dt>
+                <dd className="mt-1">{audit.domain}</dd>
+              </div>
+            </dl>
+          </div>
+
+          <aside className="self-end border-l-4 border-emerald-600 bg-emerald-50 px-5 py-4 text-sm leading-6 text-emerald-950">
+            Diese Fassung enthält nur freigegebene Beobachtungen und keine internen Scores,
+            Skills oder Rohdaten.
+          </aside>
+        </div>
+      </section>
+
+      <section className="mx-auto w-full max-w-6xl px-6 py-12 md:px-8">
+        <div className="grid gap-5">
+          {audit.observations.map((observation, index) => (
+            <article
+              key={`${observation.title}-${index}`}
+              className="rounded-lg border border-slate-200 bg-white p-6 shadow-sm"
+            >
+              <div className="flex items-start gap-3">
+                <CheckCircle2 className="mt-1 h-5 w-5 shrink-0 text-emerald-700" aria-hidden />
+                <div>
+                  <h2 className="text-xl font-semibold tracking-normal text-slate-950">
+                    {observation.title}
+                  </h2>
+                  <div className="mt-5 grid gap-5 md:grid-cols-3">
+                    <div>
+                      <h3 className="text-sm font-semibold text-slate-950">Beobachtung</h3>
+                      <p className="mt-2 text-sm leading-6 text-slate-700">
+                        {observation.observation}
+                      </p>
+                    </div>
+                    <div>
+                      <h3 className="text-sm font-semibold text-slate-950">Auswirkung</h3>
+                      <p className="mt-2 text-sm leading-6 text-slate-700">
+                        {observation.impact}
+                      </p>
+                    </div>
+                    <div>
+                      <h3 className="text-sm font-semibold text-slate-950">Vorschlag</h3>
+                      <p className="mt-2 text-sm leading-6 text-slate-700">
+                        {observation.suggestion}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      {audit.screenshots.length > 0 ? (
+        <section className="border-y border-slate-200 bg-white">
+          <div className="mx-auto w-full max-w-6xl px-6 py-12 md:px-8">
+            <h2 className="text-2xl font-semibold tracking-normal text-slate-950">
+              Screenshots aus der Prüfung
+            </h2>
+            <div className="mt-6 grid gap-5 md:grid-cols-2">
+              {audit.screenshots.map((screenshot) => (
+                <PublicAuditScreenshot key={screenshot.id} screenshot={screenshot} />
+              ))}
+            </div>
+          </div>
+        </section>
+      ) : null}
+
+      <section className="mx-auto w-full max-w-6xl px-6 py-12 md:px-8">
+        <div className="rounded-lg border border-slate-200 bg-white p-6 shadow-sm md:flex md:items-center md:justify-between md:gap-8">
+          <div>
+            <h2 className="text-2xl font-semibold tracking-normal text-slate-950">
+              Nächster sinnvoller Schritt
+            </h2>
+            <p className="mt-3 max-w-3xl text-sm leading-6 text-slate-700">
+              {audit.finalOffer.body}
+            </p>
+          </div>
+          {audit.finalOffer.ctaHref ? (
+            <a
+              href={audit.finalOffer.ctaHref}
+              className="mt-6 inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-slate-950 px-4 text-sm font-semibold text-white transition hover:bg-slate-800 md:mt-0"
+            >
+              {audit.finalOffer.ctaLabel ?? "Audit besprechen"}
+              {audit.finalOffer.ctaHref.startsWith("/") ? (
+                <ArrowRight className="h-4 w-4" aria-hidden />
+              ) : (
+                <ExternalLink className="h-4 w-4" aria-hidden />
+              )}
+            </a>
+          ) : null}
+        </div>
+      </section>
+    </main>
+  );
+}