diff --git a/app/[locale]/certification/page.tsx b/app/[locale]/certification/page.tsx index 7f01434..c5b3184 100644 --- a/app/[locale]/certification/page.tsx +++ b/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 }) const tracks = t.raw("curriculum.tracks") as { title: string; body: string }[]; return ( <> - - {t("hero.cta")} - +
+ +
+
+
+ {t("hero.eyebrow")} +

{t("hero.title")}

+

{t("hero.lead")}

+
+ {t("hero.cta")} +
+
+ +
+
+
diff --git a/app/components/CertifiedProof.tsx b/app/components/CertifiedProof.tsx new file mode 100644 index 0000000..d640e74 --- /dev/null +++ b/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 ( +
+
+
+ {t("title")} + {t("tag")} +
+
+ {t("resolving")} + did:webvh:…:acme-integrators.example + {t("org")} +
+
    + {rows.map((r) => ( +
  • + + {r.label} + {r.detail} +
    • + ))} +
+
+ {t("score")} + + {t("verdict")} +
+ +
+
{t("caption")}
+
+ ); +} diff --git a/app/globals.css b/app/globals.css index ef8a8f6..fbdd22c 100644 --- a/app/globals.css +++ b/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; } diff --git a/messages/en/certification.json b/messages/en/certification.json index e6754d1..d5b752b 100644 --- a/messages/en/certification.json +++ b/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" } } diff --git a/messages/es/certification.json b/messages/es/certification.json index 763d8bf..75950ea 100644 --- a/messages/es/certification.json +++ b/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" } }