From 307dcce2ffcc2cb9fb1c58e95e0755e643b93232 Mon Sep 17 00:00:00 2001
From: Guido Jansen <x@gui.do>
Date: Tue, 15 Sep 2026 14:14:17 +0200
Subject: [PATCH] Add ragged-circle checkmark badge to verify page and homepage
 teaser

---
 src/components/VerifyBadge.astro      | 39 +++++++++++++++++++++++++++
 src/components/pages/HomePage.astro   |  7 +++++
 src/components/pages/VerifyPage.astro | 23 +++++++++++++---
 3 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 src/components/VerifyBadge.astro

diff --git a/src/components/VerifyBadge.astro b/src/components/VerifyBadge.astro
new file mode 100644
index 0000000..46a62b9
--- /dev/null
+++ b/src/components/VerifyBadge.astro
@@ -0,0 +1,39 @@
+---
+// The mu/Eurosky trusted verifier checkmark: a check inside a ragged (scalloped) circle.
+// Based on the mu Trusted Verifier Program badge design.
+interface Props {
+  size?: number;
+  class?: string;
+}
+const { size = 24, class: className = '' } = Astro.props;
+---
+
+<svg
+  class={`verify-badge ${className}`}
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  aria-hidden="true"
+>
+  <path
+    d="M12 1.5l1.6 1.8 2.3-.6.5 2.4 2.2.9-1 2.2 1 2.2-2.2.9-.5 2.4-2.3-.6-1.6 1.8-1.6-1.8-2.3.6-.5-2.4-2.2-.9 1-2.2-1-2.2 2.2-.9.5-2.4 2.3.6z"
+    fill="var(--accent)"
+  />
+  <path
+    d="M8.5 12.2l2.3 2.3 4.7-4.7"
+    stroke="var(--on-accent)"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+</svg>
+
+<style>
+  .verify-badge {
+    display: inline-block;
+    flex: none;
+    vertical-align: middle;
+  }
+</style>
diff --git a/src/components/pages/HomePage.astro b/src/components/pages/HomePage.astro
index aa1e7c5..c3ac3c4 100644
--- a/src/components/pages/HomePage.astro
+++ b/src/components/pages/HomePage.astro
@@ -5,6 +5,7 @@ import PostCard from '../PostCard.astro';
 import LinkedEventCard from '../LinkedEventCard.astro';
 import CalendarEventCard from '../CalendarEventCard.astro';
 import LocalityMap from '../LocalityMap.astro';
+import VerifyBadge from '../VerifyBadge.astro';
 import { matchNlCity } from '../../data/nl-cities';
 import { useTranslations, type Lang } from '../../i18n/ui';
 import { getCommunity } from '../../lib/atproto/home';
@@ -165,6 +166,7 @@ const avatarMembers = members.filter((m) => m.avatar).slice(0, 24);
   <section class="section verify-teaser">
     <div class="verify-teaser-inner">
       <div class="verify-teaser-text">
+        <VerifyBadge size={24} />
         <span class="verify-teaser-label">{t('verify.cta.teaser')}</span>
       </div>
       <a class="btn" href={`${p}/verify`}>{t('verify.cta.teaser.btn')}</a>
@@ -242,6 +244,11 @@ const avatarMembers = members.filter((m) => m.avatar).slice(0, 24);
     border-radius: var(--radius-surface);
     padding: var(--space-6) var(--space-8);
   }
+  .verify-teaser-text {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
   .verify-teaser-label {
     font-family: var(--mono);
     font-size: 1.0625rem;
diff --git a/src/components/pages/VerifyPage.astro b/src/components/pages/VerifyPage.astro
index 7b625f6..c4dc9ca 100644
--- a/src/components/pages/VerifyPage.astro
+++ b/src/components/pages/VerifyPage.astro
@@ -1,5 +1,6 @@
 ---
 import Base from '../../layouts/Base.astro';
+import VerifyBadge from '../VerifyBadge.astro';
 import { useTranslations, type Lang } from '../../i18n/ui';
 import { getScope, resolveScopeId } from '../../config/scopes';
 
@@ -14,14 +15,20 @@ const verifyHref = `${p}/verify`;
 
 <Base lang={lang} title={t('verify.title')} description={t('verify.intro')}>
   <section class="hero">
-    <h1 class="display page-title">{t('verify.title')}</h1>
+    <h1 class="display page-title verify-hero-title">
+      <VerifyBadge size={36} />
+      {t('verify.title')}
+    </h1>
     <p>{t('verify.intro')}</p>
   </section>
 
   {!isAggregate && (
     <>
       <section class="section">
-        <h2>{t('verify.checkmark.h')}</h2>
+        <h2 class="verify-badge-heading">
+          <VerifyBadge size={28} />
+          {t('verify.checkmark.h')}
+        </h2>
         <p>{t('verify.checkmark.intro')}</p>
         <div class="verify-features">
           <div class="verify-feature">
@@ -136,7 +143,7 @@ const verifyHref = `${p}/verify`;
         <h2>{t('verify.getverified.h')}</h2>
         <p>{t('verify.getverified.intro')}</p>
         <p class="join-cta">
-          <a class="btn" href={`${p}/countries`}>{t('events.viewAll')}</a>
+          <a class="btn" href={`${p}/stats`}>{t('events.viewAll')}</a>
         </p>
       </section>
 
@@ -222,4 +229,14 @@ const verifyHref = `${p}/verify`;
     font-size: 0.9375rem;
     line-height: 1.6;
   }
+  .verify-hero-title {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+  .verify-badge-heading {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
 </style>
-- 
2.54.0