From dd89c2cd0eaa4898eac07099d2876c408bac6a59 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Thu, 30 Oct 2025 23:20:55 +1300
Subject: [PATCH] fix(i18n): add missing data-i18n-html attributes to homepage
 Alexander section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous commit added i18n attributes only to titles but missed
the descriptions. This adds data-i18n-html attributes to all 19
Alexander principles content blocks:

- Section heading & subtitle
- 5 principle descriptions (with HTML formatting)
- CTA card description & links
- Enforcement distinction paragraphs

French and German translations now properly display for all content.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/index.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/public/index.html b/public/index.html
index 411d9e58..1462cc2e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -95,10 +95,10 @@
 
       <!-- Section Header -->
       <div class="text-center mb-12 animate-on-scroll" data-animation="fade-in">
-        <h2 class="text-4xl font-bold text-gray-900 mb-4">
+        <h2 class="text-4xl font-bold text-gray-900 mb-4" data-i18n="alexander_principles.heading">
           Built on Living Systems Principles
         </h2>
-        <p class="text-xl text-gray-700 max-w-3xl mx-auto">
+        <p class="text-xl text-gray-700 max-w-3xl mx-auto" data-i18n-html="alexander_principles.subtitle">
           Governance that evolves with your organization—not compliance theatre, but <strong>architectural enforcement</strong> woven into deployment.
         </p>
       </div>
@@ -114,7 +114,7 @@
             </div>
             <h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.deep_interlock.title">Deep Interlock</h3>
           </div>
-          <p class="text-gray-700 text-sm leading-relaxed">
+          <p class="text-gray-700 text-sm leading-relaxed" data-i18n-html="alexander_principles.principles.deep_interlock.description">
             Six governance services <strong>coordinate</strong>, not operate in silos. When one detects an issue, others reinforce—creating resilient enforcement through mutual validation.
           </p>
         </div>
@@ -127,7 +127,7 @@
             </div>
             <h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.structure_preserving.title">Structure-Preserving</h3>
           </div>
-          <p class="text-gray-700 text-sm leading-relaxed">
+          <p class="text-gray-700 text-sm leading-relaxed" data-i18n-html="alexander_principles.principles.structure_preserving.description">
             Framework changes <strong>enhance without breaking</strong>. Audit logs remain interpretable, governance decisions stay valid—institutional memory preserved across evolution.
           </p>
         </div>
@@ -140,7 +140,7 @@
             </div>
             <h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.gradients.title">Gradients Not Binary</h3>
           </div>
-          <p class="text-gray-700 text-sm leading-relaxed">
+          <p class="text-gray-700 text-sm leading-relaxed" data-i18n-html="alexander_principles.principles.gradients.description">
             Governance operates on <strong>intensity levels</strong> (NORMAL/ELEVATED/HIGH/CRITICAL), not yes/no switches. Nuanced response to risk—avoiding alert fatigue and mechanical enforcement.
           </p>
         </div>
@@ -153,7 +153,7 @@
             </div>
             <h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.living_process.title">Living Process</h3>
           </div>
-          <p class="text-gray-700 text-sm leading-relaxed">
+          <p class="text-gray-700 text-sm leading-relaxed" data-i18n-html="alexander_principles.principles.living_process.description">
             Framework <strong>evolves from real failures</strong>, not predetermined plans. Grows smarter through operational experience—adaptive resilience, not static rulebook.
           </p>
         </div>
@@ -166,7 +166,7 @@
             </div>
             <h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.not_separateness.title">Not-Separateness</h3>
           </div>
-          <p class="text-gray-700 text-sm leading-relaxed">
+          <p class="text-gray-700 text-sm leading-relaxed" data-i18n-html="alexander_principles.principles.not_separateness.description">
             Governance <strong>woven into deployment architecture</strong>, not bolted on. Enforcement is structural, happening in the critical execution path before actions execute—bypasses require explicit flags and are logged.
           </p>
         </div>
@@ -175,16 +175,16 @@
         <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-all animate-on-scroll flex flex-col justify-between" data-animation="slide-up" data-stagger="600">
           <div>
             <h3 class="text-lg font-bold text-white mb-3" data-i18n="alexander_principles.cta_card.title">Architectural Principles</h3>
-            <p class="text-gray-300 text-sm leading-relaxed mb-4">
+            <p class="text-gray-300 text-sm leading-relaxed mb-4" data-i18n-html="alexander_principles.cta_card.description">
               These principles guide every framework change—ensuring coherence, adaptability, and structural enforcement rather than compliance theatre.
             </p>
           </div>
           <div class="space-y-2">
             <a href="/architecture.html" class="block text-center bg-white text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors text-sm">
-              See Technical Architecture →
+              <span data-i18n="alexander_principles.cta_card.architecture_link">See Technical Architecture →</span>
             </a>
             <a href="/values.html" class="block text-center bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold hover:bg-gray-600 transition-colors text-sm">
-              Values & Principles →
+              <span data-i18n="alexander_principles.cta_card.values_link">Values & Principles →</span>
             </a>
           </div>
         </div>
@@ -200,13 +200,13 @@
             </div>
           </div>
           <div class="flex-1">
-            <h3 class="text-2xl font-bold text-gray-900 mb-3">
+            <h3 class="text-2xl font-bold text-gray-900 mb-3" data-i18n="alexander_principles.enforcement_distinction.heading">
               Architectural Enforcement vs Compliance Theatre
             </h3>
-            <p class="text-gray-700 leading-relaxed mb-4">
+            <p class="text-gray-700 leading-relaxed mb-4" data-i18n-html="alexander_principles.enforcement_distinction.compliance_theatre">
               <strong>Compliance theatre</strong>: Documented policies AI can bypass, post-execution monitoring, voluntary adherence.
             </p>
-            <p class="text-gray-700 leading-relaxed">
+            <p class="text-gray-700 leading-relaxed" data-i18n-html="alexander_principles.enforcement_distinction.architectural_enforcement">
               <strong>Architectural enforcement</strong> (Tractatus): Governance services intercept actions <em>before execution</em> in the critical path. Services coordinate in real-time, blocking non-compliant operations at the architectural level—bypasses require explicit --no-verify flags and are logged.
             </p>
           </div>