Dev -> QA

core/views.py

@@ -1170,6 +1170,49 @@ def get_context_data(self, **kwargs):
                 {"value": "networking", "label": "Networking"},
             ]
         )
+        badge_img = f"{settings.STATIC_URL}img/v3/badges"
+        context["badge_icon_srcs"] = [
+            f"{badge_img}/badge-first-place.png",
+            f"{badge_img}/badge-second-place.png",
+            f"{badge_img}/badge-bronze.png",
+            f"{badge_img}/badge-gold-medal.png",
+            f"{badge_img}/badge-military-star.png",
+        ]
+        context["demo_badges"] = [
+            {
+                "icon_src": f"{badge_img}/badge-first-place.png",
+                "name": "Patch Wizard",
+                "earned_date": "08/08/2025",
+            },
+            {
+                "icon_src": f"{badge_img}/badge-gold-medal.png",
+                "name": "Standard Bearer",
+                "earned_date": "03/07/2025",
+            },
+            {
+                "icon_src": f"{badge_img}/badge-military-star.png",
+                "name": "Review Hawk",
+                "earned_date": "03/06/2025",
+            },
+            {
+                "icon_src": f"{badge_img}/badge-second-place.png",
+                "name": "Library Alchemist",
+                "earned_date": "03/04/2025",
+            },
+            {
+                "icon_src": f"{badge_img}/badge-first-place.png",
+                "name": "Bug Catcher",
+                "earned_date": "02/04/2025",
+            },
+            {
+                "icon_src": f"{badge_img}/badge-bronze.png",
+                "name": "Code Whisperer",
+                "earned_date": "01/01/2025",
+            },
+        ]
+
+        context["demo_badges_few"] = context["demo_badges"][:2]
+
         context["create_account_card_preview_url"] = (
             f"{settings.STATIC_URL}img/checker.png"
         )

libraries/utils.py

@@ -495,7 +495,12 @@ def get_avatar(user):
             return url
         return getattr(user.commitauthor, "avatar_url", "") or ""
 
-    medals = ["🥇", "🥈", "🥉"]
+    badge_img = f"{settings.STATIC_URL}img/v3/badges"
+    medals = [
+        f"{badge_img}/badge-first-place.png",
+        f"{badge_img}/badge-second-place.png",
+        f"{badge_img}/badge-bronze.png",
+    ]
 
     author_dicts = []
     for user in combined:
@@ -504,7 +509,7 @@ def get_avatar(user):
                 "name": user.display_name or user.get_full_name(),
                 "role": roles[user.id],
                 "avatar_url": get_avatar(user),
-                "badge": (
+                "badge_url": (
                     medals[len(author_dicts)] if len(author_dicts) < len(medals) else ""
                 ),
                 "bio": "",
@@ -516,7 +521,7 @@ def get_avatar(user):
                 "name": ca.display_name,
                 "role": "Contributor",
                 "avatar_url": ca.avatar_url or "",
-                "badge": (
+                "badge_url": (
                     medals[len(author_dicts)] if len(author_dicts) < len(medals) else ""
                 ),
                 "bio": "",

static/css/v3/badges-card.css

@@ -0,0 +1,86 @@
+.badges-card {
+  box-sizing: border-box;
+  max-width: 696px;
+  padding: var(--space-large, 16px) 0;
+}
+
+/* Filled state — 3-column badge grid */
+.badges-card__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-large, 16px);
+  padding: 0 var(--space-large, 16px);
+  margin: 0;
+  list-style: none;
+}
+
+.badges-card__entry {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-default, 8px);
+}
+
+.badges-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.badges-card__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  min-width: 0;
+}
+
+.badges-card__name {
+  color: var(--color-text-primary, #050816);
+  font-size: var(--font-size-base, 16px);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-default, 1.2);
+}
+
+.badges-card__date {
+  color: var(--color-text-secondary, #585a64);
+  font-size: var(--font-size-small, 14px);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-default, 1.2);
+}
+
+/* Empty state */
+.badges-card__empty {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-medium);
+  padding: 0 var(--space-large, 16px);
+}
+
+.badges-card__icon-row {
+  display: flex;
+  gap: var(--space-default, 8px);
+}
+
+.badges-card__description {
+  margin: 0;
+  padding: var(--space-medium);
+  padding-left: 0;
+  padding-bottom: 0;
+  color: var(--color-text-secondary, #585a64);
+  font-size: var(--font-size-base, 16px);
+  font-weight: var(--font-weight-semibold, 600);
+  line-height: var(--line-height-default, 1.2);
+  letter-spacing: -0.01em;
+}
+
+.badges-card .btn-row {
+  padding: 0 var(--space-large, 16px);
+}
+
+/* Responsive — 2-column grid on mobile */
+@media (max-width: 696px) {
+  .badges-card__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

static/css/v3/components.css

@@ -21,6 +21,7 @@
 @import "./wysiwyg-editor.css";
 @import "./search-card.css";
 @import "./create-account-card.css";
+@import "./badges-card.css";
 @import "./privacy-policy.css";
 @import "./library-intro-card.css";
 @import "./learn-cards.css";

static/css/v3/v3-examples-section.css

@@ -20,12 +20,22 @@
   margin-bottom: 0;
 }
 
-.v3-examples-section__block .block-title {
+.v3-examples-section__block > h3 {
   font-size: var(--font-size-base, 16px);
   font-weight: var(--font-weight-medium, 500);
   margin-bottom: var(--space-default, 8px);
 }
 
+.v3-examples-section__anchor-link {
+  margin-left: var(--space-s, 4px);
+  color: var(--color-text-secondary);
+  vertical-align: middle;
+}
+
+.v3-examples-section__anchor-link:hover {
+  color: var(--color-text-primary);
+}
+
 .v3-examples-section__example-box {
   box-sizing: border-box;
   width: 100%;
@@ -218,3 +228,100 @@ html.dark .v3-examples-section__example-box {
   font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
 }
+
+/* ── Table of contents ─────────────────────────── */
+
+.v3-examples-section__toc {
+  margin-bottom: var(--space-xl, 32px);
+  padding: var(--space-large, 16px) var(--space-xl, 32px);
+  background: var(--color-surface-weak);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-l, 8px);
+}
+
+html.dark .v3-examples-section__toc {
+  background: var(--color-surface-mid);
+}
+
+.v3-examples-section__toc-heading {
+  font-size: var(--font-size-base, 16px);
+  font-weight: var(--font-weight-medium, 500);
+  margin: 0 0 var(--space-default, 8px);
+  color: var(--color-text-primary);
+}
+
+.v3-examples-section__toc-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  gap: var(--space-s, 4px) var(--space-xl, 32px);
+}
+
+.v3-examples-section__toc-link {
+  display: inline-block;
+  padding: var(--space-s, 4px) 0;
+  font-size: var(--font-size-small, 14px);
+  color: var(--color-text-link-accent);
+  text-decoration: none;
+}
+
+.v3-examples-section__toc-link:hover {
+  text-decoration: underline;
+}
+
+/* ── Scroll offset for anchor links ────────────── */
+
+.v3-examples-section__block[id] {
+  scroll-margin-top: var(--space-xl, 32px);
+}
+
+/* ── Fixed dark mode toggle ────────────────────── */
+
+.v3-examples-section__theme-toggle {
+  position: fixed;
+  bottom: var(--space-xl, 32px);
+  right: var(--space-xl, 32px);
+  z-index: 100;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  padding: 0 var(--space-l, 16px);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-xl, 12px);
+  background: var(--color-surface-brand-accent-hovered);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
+}
+
+.v3-examples-section__theme-toggle:hover {
+  background: var(--color-navigation-hover);
+}
+
+.v3-examples-section__theme-toggle-sun,
+.v3-examples-section__theme-toggle-moon {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Light mode: show moon (switch to dark) */
+.v3-examples-section__theme-toggle-sun {
+  display: none;
+}
+
+.v3-examples-section__theme-toggle-moon {
+  display: inline-flex;
+}
+
+/* Dark mode: show sun (switch to light) */
+html.dark .v3-examples-section__theme-toggle-sun {
+  display: inline-flex;
+}
+
+html.dark .v3-examples-section__theme-toggle-moon {
+  display: none;
+}