feat(certification): Proof-of-Trust of a certified integrator in the hero

app/[locale]/certification/page.tsx

@@ -3,7 +3,9 @@ import { getTranslations, setRequestLocale } from "next-intl/server";
 import { faBuilding, faBuildingShield, faUser, faUserGraduate } from "@fortawesome/free-solid-svg-icons";
 import CertifiedIntegrators from "./CertifiedIntegrators";
 import CertificationPath from "@/app/components/CertificationPath";
-import { ButtonLink, Card, CardTitle, CtaBand, Feature, PageHero, Section, Steps } from "@/app/components/ui";
+import CertifiedProof from "@/app/components/CertifiedProof";
+import HeroMark from "@/app/components/HeroMark";
+import { ButtonLink, Card, CardTitle, CtaBand, Eyebrow, Feature, Section, Steps } from "@/app/components/ui";
 import { alternates, pageLocale, type PageParams } from "@/app/lib/seo";
 import { LINKS } from "@/app/lib/site";
 
@@ -20,9 +22,22 @@ export default async function Page({ params }: { params: Promise<PageParams> })
   const tracks = t.raw("curriculum.tracks") as { title: string; body: string }[];
   return (
     <>
-      <PageHero eyebrow={t("hero.eyebrow")} title={t("hero.title")} lead={t("hero.lead")}>
-        <ButtonLink href="/contact?topic=certification" variant="primary">{t("hero.cta")}</ButtonLink>
-      </PageHero>
+      <div className="ground">
+        <HeroMark />
+        <section className="hero container-x">
+          <div className="hero-grid">
+            <div>
+              <Eyebrow>{t("hero.eyebrow")}</Eyebrow>
+              <h1 className="mt-3">{t("hero.title")}</h1>
+              <p className="lead">{t("hero.lead")}</p>
+              <div className="ctas">
+                <ButtonLink href="/contact?topic=certification" variant="primary">{t("hero.cta")}</ButtonLink>
+              </div>
+            </div>
+            <CertifiedProof />
+          </div>
+        </section>
+      </div>
 
       <Section eyebrow={t("why.eyebrow")} lead={t("why.lead")} />
 

app/components/CertifiedProof.tsx

@@ -0,0 +1,51 @@
+import { getTranslations } from "next-intl/server";
+
+/**
+ * Certification hero: what a customer's wallet shows when it meets a
+ * certified integrator. The company's DID resolving, its organization and
+ * service credentials, and the Verana Certified Integrator line highlighted,
+ * issued by Mobiera and valid; a chip ties it to the directory generated from
+ * the Trust Graph. Example data, labelled as such. Reuses the Proof-of-Trust
+ * panel styles (.panel, .pot-*) plus .cert-proof in globals.css. Design C of
+ * 12 September 2026.
+ */
+export default async function CertifiedProof() {
+  const t = await getTranslations("certification.proof");
+  const rows = t.raw("rows") as { label: string; detail: string; hi?: boolean }[];
+  return (
+    <figure className="proof-stage">
+      <div className="panel cert-proof" role="img" aria-label={t("ariaLabel")}>
+        <div className="panel-head">
+          <b>{t("title")}</b>
+          <span className="eyebrow">{t("tag")}</span>
+        </div>
+        <div className="pot-did">
+          <span className="eyebrow">{t("resolving")}</span>
+          <code>did:webvh:…:acme-integrators.example</code>
+          <span className="pot-org">{t("org")}</span>
+        </div>
+        <ul className="pot-rows">
+          {rows.map((r) => (
+            <li key={r.label} className={r.hi ? "hi" : undefined}>
+              <span className="pot-check" aria-hidden="true">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+              </span>
+              <span className="pot-label">{r.label}</span>
+              <span className="pot-detail">{r.detail}</span>
+            </li>
+          ))}
+        </ul>
+        <div className="pot-foot">
+          <span className="eyebrow">{t("score")}</span>
+          <span className="pot-score" aria-label={t("scoreAria")}><i /><i /><i /><i /><i className="off" /></span>
+          <span className="pot-verdict">{t("verdict")}</span>
+        </div>
+        <div className="pot-dir" aria-hidden="true">
+          <i />
+          <div><b>{t("dir.title")}</b><small>{t("dir.body")}</small></div>
+        </div>
+      </div>
+      <figcaption className="eyebrow proof-cap">{t("caption")}</figcaption>
+    </figure>
+  );
+}

app/globals.css

@@ -318,6 +318,17 @@ a { color: inherit; }
 .pot-score i { width: 10px; height: 10px; border-radius: 2px; background: var(--green); display: inline-block; }
 .pot-score i.off { background: var(--rule); }
 .pot-verdict { margin-left: auto; font-family: var(--font-display); font-weight: 600; color: var(--green-ink); }
+/* Certification hero: the Proof-of-Trust of a certified integrator */
+.proof-stage { margin: 0; display: grid; gap: 44px; justify-items: center; }
+.panel.cert-proof { position: relative; width: 100%; max-width: 440px; padding-bottom: 44px; }
+.cert-proof .pot-rows li.hi { background: var(--violet-soft); margin: 4px -10px 0; padding: 10px; border-radius: 8px; border-bottom: 0; }
+.cert-proof .pot-rows li.hi .pot-label { color: var(--violet-ink); }
+.pot-dir { position: absolute; right: -14px; bottom: -20px; z-index: 2; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; font-size: 0.8rem; }
+.pot-dir > i { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #063d2e, #1fb57a); flex: none; }
+.pot-dir b { font-family: var(--font-display); font-weight: 600; display: block; line-height: 1.2; }
+.pot-dir small { color: var(--muted); font-size: 0.72rem; }
+.proof-cap { text-align: center; }
+@media (max-width: 900px) { .proof-stage { margin-top: 28px; } .pot-dir { right: 8px; } }
 
 /* Verana lockups (marks and wordmarks as on the sister sites) ------------ */
 .lockup { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--ink); line-height: 1; }

messages/en/certification.json

@@ -21,14 +21,38 @@
     "eyebrow": "The curriculum",
     "title": "Eight tracks, one exam each",
     "tracks": [
-      { "title": "Verana foundations", "body": "The three parts (trust ecosystems, verifiable identity, the Trust Graph), the public registry, the standards." },
-      { "title": "Business wallets", "body": "Deploying and operating VS-Agent: DIDs, credentials and Linked Verifiable Presentations, key custody, upgrades." },
-      { "title": "Ecosystems", "body": "Credential schemas, the participant tree, permission modes, business models, a governance framework from the Council's template, onboarding participants." },
-      { "title": "Hosting services for customers", "body": "Issuers, verifiers and AI agents as Verifiable Services; operations, monitoring, backups, security." },
-      { "title": "Personal wallets", "body": "Integrating and customizing wallets with Verana, DIDComm and OpenID4VC flows, interoperability on the Playground." },
-      { "title": "Selling Verana-based services", "body": "The value proposition, ecosystem business models, the pitch to a customer." },
-      { "title": "The Verana community", "body": "The Foundation's working groups, how to take part and how to promote them." },
-      { "title": "The Verana brand", "body": "Usage rules and recommendations: what an integrator may claim, and how to present it." }
+      {
+        "title": "Verana foundations",
+        "body": "The three parts (trust ecosystems, verifiable identity, the Trust Graph), the public registry, the standards."
+      },
+      {
+        "title": "Business wallets",
+        "body": "Deploying and operating VS-Agent: DIDs, credentials and Linked Verifiable Presentations, key custody, upgrades."
+      },
+      {
+        "title": "Ecosystems",
+        "body": "Credential schemas, the participant tree, permission modes, business models, a governance framework from the Council's template, onboarding participants."
+      },
+      {
+        "title": "Hosting services for customers",
+        "body": "Issuers, verifiers and AI agents as Verifiable Services; operations, monitoring, backups, security."
+      },
+      {
+        "title": "Personal wallets",
+        "body": "Integrating and customizing wallets with Verana, DIDComm and OpenID4VC flows, interoperability on the Playground."
+      },
+      {
+        "title": "Selling Verana-based services",
+        "body": "The value proposition, ecosystem business models, the pitch to a customer."
+      },
+      {
+        "title": "The Verana community",
+        "body": "The Foundation's working groups, how to take part and how to promote them."
+      },
+      {
+        "title": "The Verana brand",
+        "body": "Usage rules and recommendations: what an integrator may claim, and how to present it."
+      }
     ]
   },
   "exams": {
@@ -41,14 +65,26 @@
   },
   "prerequisites": {
     "eyebrow": "Prerequisites",
-    "professionals": { "title": "Professionals", "body": "A Contributor member of the Verana Foundation. Contributor membership is free and open to individuals." },
-    "companies": { "title": "Companies", "body": "A Contributor or Associate member of the Verana Foundation." },
+    "professionals": {
+      "title": "Professionals",
+      "body": "A Contributor member of the Verana Foundation. Contributor membership is free and open to individuals."
+    },
+    "companies": {
+      "title": "Companies",
+      "body": "A Contributor or Associate member of the Verana Foundation."
+    },
     "join": "Join the Foundation"
   },
   "levels": {
     "eyebrow": "Two levels of recognition",
-    "professional": { "title": "Verana Certified Professional", "body": "By exam, valid two years. Issued as a certificate and as a Verifiable Credential to the professional's personal wallet." },
-    "integrator": { "title": "Verana Certified Integrator", "body": "A company with two certified professionals and one delivered project, or a public Playground use case published on its own infrastructure. Issued as a Verifiable Credential to the company's business wallet." }
+    "professional": {
+      "title": "Verana Certified Professional",
+      "body": "By exam, valid two years. Issued as a certificate and as a Verifiable Credential to the professional's personal wallet."
+    },
+    "integrator": {
+      "title": "Verana Certified Integrator",
+      "body": "A company with two certified professionals and one delivered project, or a public Playground use case published on its own infrastructure. Issued as a Verifiable Credential to the company's business wallet."
+    }
   },
   "integrators": {
     "eyebrow": "Certified integrators",
@@ -78,5 +114,35 @@
     "title": "Enroll",
     "lead": "Tell us who you are, how many people, and when. We answer within two business days.",
     "label": "Enroll"
+  },
+  "proof": {
+    "ariaLabel": "Example Proof-of-Trust of a certified integrator: its organization and service credentials, and the Verana Certified Integrator credential issued by Mobiera, all verified",
+    "title": "Proof-of-Trust",
+    "tag": "Verana testnet · example",
+    "resolving": "Resolving",
+    "org": "Acme Integrators SAS · Bogotá, CO",
+    "rows": [
+      {
+        "label": "Organization credential",
+        "detail": "Business Registry"
+      },
+      {
+        "label": "Service credential",
+        "detail": "self-issued · verified"
+      },
+      {
+        "label": "Verana Certified Integrator",
+        "detail": "issued by Mobiera · valid to 2028",
+        "hi": true
+      }
+    ],
+    "score": "Trust score",
+    "scoreAria": "Trust score 4 of 5",
+    "verdict": "Verified. Connect.",
+    "dir": {
+      "title": "Listed in the directory",
+      "body": "generated from the Trust Graph"
+    },
+    "caption": "Example resolution"
   }
 }

messages/es/certification.json

@@ -21,14 +21,38 @@
     "eyebrow": "El plan de estudios",
     "title": "Ocho módulos, un examen cada uno",
     "tracks": [
-      { "title": "Fundamentos de Verana", "body": "Las tres partes (ecosistemas de confianza, identidad verificable, el Trust Graph), el registro público, los estándares." },
-      { "title": "Billeteras empresariales", "body": "Despliegue y operación de VS-Agent: DIDs, credenciales y Linked Verifiable Presentations, custodia de llaves, actualizaciones." },
-      { "title": "Ecosistemas", "body": "Esquemas de credenciales, el árbol de participantes, modos de permiso, modelos de negocio, un marco de gobernanza a partir de la plantilla del Council, incorporación de participantes." },
-      { "title": "Alojamiento de servicios para clientes", "body": "Emisores, verificadores y agentes de IA como Servicios Verificables; operación, monitoreo, respaldos, seguridad." },
-      { "title": "Billeteras personales", "body": "Integración y personalización de billeteras con Verana, flujos DIDComm y OpenID4VC, interoperabilidad en el Playground." },
-      { "title": "Venta de servicios basados en Verana", "body": "La propuesta de valor, los modelos de negocio de los ecosistemas, la presentación a un cliente." },
-      { "title": "La comunidad Verana", "body": "Los grupos de trabajo de la Foundation, cómo participar y cómo promoverlos." },
-      { "title": "La marca Verana", "body": "Reglas de uso y recomendaciones: qué puede afirmar un integrador y cómo presentarlo." }
+      {
+        "title": "Fundamentos de Verana",
+        "body": "Las tres partes (ecosistemas de confianza, identidad verificable, el Trust Graph), el registro público, los estándares."
+      },
+      {
+        "title": "Billeteras empresariales",
+        "body": "Despliegue y operación de VS-Agent: DIDs, credenciales y Linked Verifiable Presentations, custodia de llaves, actualizaciones."
+      },
+      {
+        "title": "Ecosistemas",
+        "body": "Esquemas de credenciales, el árbol de participantes, modos de permiso, modelos de negocio, un marco de gobernanza a partir de la plantilla del Council, incorporación de participantes."
+      },
+      {
+        "title": "Alojamiento de servicios para clientes",
+        "body": "Emisores, verificadores y agentes de IA como Servicios Verificables; operación, monitoreo, respaldos, seguridad."
+      },
+      {
+        "title": "Billeteras personales",
+        "body": "Integración y personalización de billeteras con Verana, flujos DIDComm y OpenID4VC, interoperabilidad en el Playground."
+      },
+      {
+        "title": "Venta de servicios basados en Verana",
+        "body": "La propuesta de valor, los modelos de negocio de los ecosistemas, la presentación a un cliente."
+      },
+      {
+        "title": "La comunidad Verana",
+        "body": "Los grupos de trabajo de la Foundation, cómo participar y cómo promoverlos."
+      },
+      {
+        "title": "La marca Verana",
+        "body": "Reglas de uso y recomendaciones: qué puede afirmar un integrador y cómo presentarlo."
+      }
     ]
   },
   "exams": {
@@ -41,14 +65,26 @@
   },
   "prerequisites": {
     "eyebrow": "Requisitos",
-    "professionals": { "title": "Profesionales", "body": "Ser miembro Contributor de la Verana Foundation. La membresía Contributor es gratuita y abierta a personas naturales." },
-    "companies": { "title": "Empresas", "body": "Ser miembro Contributor o Associate de la Verana Foundation." },
+    "professionals": {
+      "title": "Profesionales",
+      "body": "Ser miembro Contributor de la Verana Foundation. La membresía Contributor es gratuita y abierta a personas naturales."
+    },
+    "companies": {
+      "title": "Empresas",
+      "body": "Ser miembro Contributor o Associate de la Verana Foundation."
+    },
     "join": "Únase a la Foundation"
   },
   "levels": {
     "eyebrow": "Dos niveles de reconocimiento",
-    "professional": { "title": "Verana Certified Professional", "body": "Por examen, válida dos años. Se emite como certificado y como Credencial Verificable a la billetera personal del profesional." },
-    "integrator": { "title": "Verana Certified Integrator", "body": "Una empresa con dos profesionales certificados y un proyecto entregado, o un caso de uso público en el Playground publicado sobre su propia infraestructura. Se emite como Credencial Verificable a la billetera empresarial de la empresa." }
+    "professional": {
+      "title": "Verana Certified Professional",
+      "body": "Por examen, válida dos años. Se emite como certificado y como Credencial Verificable a la billetera personal del profesional."
+    },
+    "integrator": {
+      "title": "Verana Certified Integrator",
+      "body": "Una empresa con dos profesionales certificados y un proyecto entregado, o un caso de uso público en el Playground publicado sobre su propia infraestructura. Se emite como Credencial Verificable a la billetera empresarial de la empresa."
+    }
   },
   "integrators": {
     "eyebrow": "Integradores certificados",
@@ -78,5 +114,35 @@
     "title": "Inscríbase",
     "lead": "Cuéntenos quién es, cuántas personas y cuándo. Respondemos en dos días hábiles.",
     "label": "Inscríbase"
+  },
+  "proof": {
+    "ariaLabel": "Proof-of-Trust de ejemplo de un integrador certificado: sus credenciales de organización y de servicio, y la credencial Verana Certified Integrator emitida por Mobiera, todas verificadas",
+    "title": "Proof-of-Trust",
+    "tag": "Testnet de Verana · ejemplo",
+    "resolving": "Resolviendo",
+    "org": "Acme Integrators SAS · Bogotá, CO",
+    "rows": [
+      {
+        "label": "Credencial de organización",
+        "detail": "Registro Mercantil"
+      },
+      {
+        "label": "Credencial de servicio",
+        "detail": "autoemitida · verificada"
+      },
+      {
+        "label": "Verana Certified Integrator",
+        "detail": "emitida por Mobiera · vigente hasta 2028",
+        "hi": true
+      }
+    ],
+    "score": "Puntaje de confianza",
+    "scoreAria": "Puntaje de confianza 4 de 5",
+    "verdict": "Verificado. Conectar.",
+    "dir": {
+      "title": "En el directorio",
+      "body": "generado desde el Trust Graph"
+    },
+    "caption": "Resolución de ejemplo"
   }
 }