fix(i18n): add missing data-i18n-html attributes to homepage Alexander section

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>
This commit is contained in:
TheFlow 2025-10-30 23:20:55 +13:00
parent 9a3af5b0f3
commit dd89c2cd0e

View file

@ -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>