806 lines
56 KiB
HTML
806 lines
56 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
|
<meta http-equiv="Pragma" content="no-cache">
|
|
<meta http-equiv="Expires" content="0">
|
|
<title>Tractatus AI Safety Framework | Architectural Constraints for Human Agency</title>
|
|
<meta name="description" content="Production implementation of architectural AI safety constraints. Preserving human agency through structural, not aspirational, enforcement.">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://agenticgovernance.digital/">
|
|
<meta property="og:title" content="Tractatus AI Safety Framework">
|
|
<meta property="og:description" content="Architectural constraints for human agency. Five principles from living systems thinking enforced structurally, not aspirationally.">
|
|
<meta property="og:image" content="https://agenticgovernance.digital/images/social-preview.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta property="og:site_name" content="Tractatus Framework">
|
|
<meta property="og:see_also" content="https://www.facebook.com/agenticgovernance">
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:url" content="https://agenticgovernance.digital/">
|
|
<meta name="twitter:title" content="Tractatus AI Safety Framework">
|
|
<meta name="twitter:description" content="Architectural constraints for human agency. Five principles from living systems thinking enforced structurally, not aspirationally.">
|
|
<meta name="twitter:image" content="https://agenticgovernance.digital/images/social-preview.png">
|
|
|
|
<!-- PWA Manifest -->
|
|
<link rel="manifest" href="/manifest.json">
|
|
|
|
<!-- PWA Meta Tags -->
|
|
<meta name="theme-color" content="#0ea5e9">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="Tractatus">
|
|
<link rel="apple-touch-icon" href="/images/tractatus-icon-new.svg">
|
|
|
|
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="stylesheet" href="/css/fonts.css?v=0.1.2.1765255143694">
|
|
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.2.1765255143694">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.2.1765255143694">
|
|
<style>
|
|
.gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.hover-lift { transition: transform 0.2s; }
|
|
.hover-lift:hover { transform: translateY(-4px); }
|
|
.skip-link { position: absolute; left: -9999px; }
|
|
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
|
|
|
|
/* Accessibility: Focus indicators (WCAG 2.4.7) */
|
|
a:focus, button:focus, input:focus, select:focus, textarea:focus {
|
|
outline: 3px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
a:focus:not(:focus-visible) { outline: none; }
|
|
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
|
</style>
|
|
|
|
<!-- Privacy-Preserving Analytics (Umami - GDPR Compliant, No Cookies) -->
|
|
<script src="/js/components/umami-tracker.js"></script>
|
|
<!-- Auto-reload on service worker update -->
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Skip Link for Keyboard Navigation -->
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<!-- Navigation (injected by navbar.js) -->
|
|
<div id="navbar-placeholder" class="min-h-16"></div>
|
|
<script src="/js/components/navbar.js?v=0.1.2.1765255143694"></script>
|
|
|
|
<!-- Hero Section -->
|
|
<header role="banner">
|
|
<section class="text-white bg-gradient-tractatus">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
|
<div class="text-center">
|
|
<!-- Animated Brand Logo -->
|
|
<div class="flex justify-center mb-8">
|
|
<img src="/images/tractatus-icon-animated.svg"
|
|
alt="Tractatus Framework - Six Governance Services"
|
|
width="256" height="256" class="w-48 h-48 md:w-64 md:h-64"
|
|
loading="eager">
|
|
</div>
|
|
|
|
<h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight text-shadow-md" data-i18n="hero.title">Tractatus: Architecture for Plural Moral Values</h1>
|
|
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto leading-relaxed text-shadow-sm" data-i18n="hero.subtitle">
|
|
Some decisions require human judgment—architecturally enforced, not left to AI discretion, however well trained.<br>
|
|
Not amoral AI systems, but plural moral values—enabling organizations to navigate value conflicts thoughtfully.<br>
|
|
<span class="text-lg opacity-90">Now integrating with <a href="/integrations/agent-lightning.html" class="underline hover:text-purple-200 transition">Agent Lightning</a> for performance optimization.</span>
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/architecture.html"
|
|
class="inline-block px-8 py-3 rounded-lg font-semibold transition-all duration-300 bg-white text-blue-700 hover:shadow-lg hover:-translate-y-1"
|
|
data-i18n="hero.cta_architecture">System Architecture</a>
|
|
<a href="/docs.html"
|
|
class="btn-base btn-primary inline-block"
|
|
data-i18n="hero.cta_docs">Read Documentation</a>
|
|
<a href="/faq.html"
|
|
class="btn-base btn-validator inline-block"
|
|
data-i18n="hero.cta_faq">FAQ</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main id="main-content" role="main">
|
|
|
|
<!-- What's New: Agent Lightning Integration -->
|
|
<section class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-12 border-b-4 border-purple-800">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-col md:flex-row items-center gap-6">
|
|
<div class="flex-shrink-0 text-6xl">⚡</div>
|
|
<div class="flex-1 text-center md:text-left">
|
|
<div class="inline-block bg-purple-800 text-purple-200 px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide mb-2">
|
|
New Integration
|
|
</div>
|
|
<h2 class="text-3xl font-bold mb-2">Agent Lightning Integration</h2>
|
|
<p class="text-lg text-purple-100 mb-4">
|
|
Governance + Performance: Tractatus now integrates with Microsoft's Agent Lightning framework for reinforcement learning optimization while maintaining architectural constraints.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-3 justify-center md:justify-start">
|
|
<a href="/integrations/agent-lightning.html"
|
|
class="inline-block bg-white text-purple-700 px-6 py-3 rounded-lg font-semibold hover:bg-purple-50 transition-all shadow-lg hover:shadow-xl">
|
|
Learn More →
|
|
</a>
|
|
<a href="https://discord.gg/bVZtkceKsS"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-block bg-purple-800 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-900 transition-all border-2 border-purple-400">
|
|
Join AL Discord →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Built on Living Systems Principles -->
|
|
<section class="bg-gradient-to-br from-purple-50 via-blue-50 to-teal-50 py-16 border-y border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
<!-- 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" data-i18n="alexander_principles.heading">
|
|
Built on Living Systems Principles
|
|
</h2>
|
|
<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>
|
|
|
|
<!-- The 5 Principles Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
|
|
|
<!-- Principle 1: Deep Interlock -->
|
|
<div class="bg-white rounded-xl p-6 shadow-md border-l-4 border-purple-500 hover:shadow-lg transition-all animate-on-scroll" data-animation="slide-up" data-stagger="100">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center text-2xl mr-3">
|
|
🔗
|
|
</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" 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>
|
|
|
|
<!-- Principle 2: Structure-Preserving -->
|
|
<div class="bg-white rounded-xl p-6 shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-all animate-on-scroll" data-animation="slide-up" data-stagger="200">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-2xl mr-3">
|
|
🏛️
|
|
</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" 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>
|
|
|
|
<!-- Principle 3: Gradients Not Binary -->
|
|
<div class="bg-white rounded-xl p-6 shadow-md border-l-4 border-indigo-500 hover:shadow-lg transition-all animate-on-scroll" data-animation="slide-up" data-stagger="300">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center text-2xl mr-3">
|
|
📊
|
|
</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" 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>
|
|
|
|
<!-- Principle 4: Living Process -->
|
|
<div class="bg-white rounded-xl p-6 shadow-md border-l-4 border-teal-500 hover:shadow-lg transition-all animate-on-scroll" data-animation="slide-up" data-stagger="400">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-teal-500 to-teal-600 flex items-center justify-center text-2xl mr-3">
|
|
🌱
|
|
</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" 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>
|
|
|
|
<!-- Principle 5: Not-Separateness -->
|
|
<div class="bg-white rounded-xl p-6 shadow-md border-l-4 border-pink-500 hover:shadow-lg transition-all animate-on-scroll" data-animation="slide-up" data-stagger="500">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-pink-500 to-pink-600 flex items-center justify-center text-2xl mr-3">
|
|
⚙️
|
|
</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" 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>
|
|
|
|
<!-- Learn More CTA Card -->
|
|
<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" 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">
|
|
<span data-i18n="alexander_principles.cta_card.architecture_link">See Technical Architecture →</span>
|
|
</a>
|
|
<a href="/about/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">
|
|
<span data-i18n="alexander_principles.cta_card.values_link">Values & Principles →</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Key Distinction Callout -->
|
|
<div class="bg-white rounded-xl p-8 shadow-md border-t-4 border-blue-500 animate-on-scroll" data-animation="fade-in">
|
|
<div class="flex flex-col md:flex-row items-start gap-6">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-3xl">
|
|
⚡
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<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" 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" 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>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Value Proposition -->
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16" aria-labelledby="core-insight">
|
|
<div class="bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg animate-on-scroll" data-animation="slide-up">
|
|
<h2 id="core-insight" class="text-2xl font-bold text-amber-900 mb-3" data-i18n="value_prop.heading">The Choice: Amoral AI or Plural Moral Values</h2>
|
|
<p class="text-amber-800 text-lg" data-i18n-html="value_prop.text">
|
|
Organizations deploy AI at scale—Copilot writing code, agents handling decisions, systems operating autonomously. But current AI is amoral, making decisions without moral grounding. When efficiency conflicts with safety, these value conflicts are ignored or flattened to optimization metrics.<br><br>Tractatus provides one architectural approach for plural moral values. Not training approaches that hope AI will "behave correctly," but <strong>structural constraints at the coalface where AI operates</strong>. Organizations can navigate value conflicts based on their context—efficiency vs. safety, speed vs. thoroughness—without imposed frameworks from above.<br><br>If this architectural approach works at scale, it may represent a path where AI enhances organizational capability without flattening moral judgment to metrics. One possible approach among others—we're finding out if it scales.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Three Audience Paths -->
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4 pb-16">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
|
|
<!-- Researcher Path → CrossReferenceValidator (Purple) -->
|
|
<a href="/researcher.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-on-scroll border-l-service-validator" data-animation="scale-in" data-stagger="100">
|
|
<!-- Tooltip -->
|
|
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
|
|
<span data-i18n="paths.researcher.tooltip">For AI safety researchers, academics, and scientists investigating LLM failure modes and governance architectures</span>
|
|
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center space-x-4 mb-4">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" class="bg-gradient-service-validator">
|
|
🔬
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-purple-600 transition-colors" data-i18n="paths.researcher.title">Researcher</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="paths.researcher.subtitle">Academic & technical depth</p>
|
|
</div>
|
|
<span class="ml-auto bg-gradient-to-r from-purple-100 to-blue-100 text-purple-700 text-xs font-semibold px-3 py-1 rounded-full border border-purple-200">⚡ Now with AL</span>
|
|
</div>
|
|
|
|
<p class="text-gray-700 mb-6" data-i18n="paths.researcher.description">
|
|
Explore the theoretical foundations, architectural constraints, and scholarly context of the Tractatus framework.
|
|
</p>
|
|
|
|
<ul class="space-y-3 mb-6 text-sm">
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-validator" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.researcher.features.0">Technical specifications & proofs</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-validator" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.researcher.features.1">Academic research review</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-validator" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.researcher.features.2">Failure mode analysis</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-validator" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.researcher.features.3">Mathematical foundations</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200">
|
|
<span class="font-semibold group-hover:underline" class="text-service-validator" data-i18n="paths.researcher.cta">Explore Research →</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Implementer Path → InstructionPersistenceClassifier (Indigo) -->
|
|
<a href="/implementer.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-on-scroll border-l-service-instruction" data-animation="scale-in" data-stagger="200">
|
|
<!-- Tooltip -->
|
|
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
|
|
<span data-i18n="paths.implementer.tooltip">For software engineers, ML engineers, and technical teams building production AI systems</span>
|
|
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center space-x-4 mb-4">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" class="bg-gradient-service-instruction">
|
|
⚙️
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-indigo-600 transition-colors" data-i18n="paths.implementer.title">Implementer</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="paths.implementer.subtitle">Code & integration guides</p>
|
|
</div>
|
|
<span class="ml-auto bg-gradient-to-r from-purple-100 to-blue-100 text-purple-700 text-xs font-semibold px-3 py-1 rounded-full border border-purple-200">⚡ Now with AL</span>
|
|
</div>
|
|
|
|
<p class="text-gray-700 mb-6" data-i18n="paths.implementer.description">
|
|
Get hands-on with implementation guides, API documentation, and reference code examples.
|
|
</p>
|
|
|
|
<ul class="space-y-3 mb-6 text-sm">
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-instruction" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.implementer.features.0">Working code examples</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-instruction" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.implementer.features.1">API integration patterns</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-instruction" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.implementer.features.2">Service architecture diagrams</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-instruction" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.implementer.features.3">Deployment patterns & operational procedures</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200">
|
|
<span class="font-semibold group-hover:underline" class="text-service-instruction" data-i18n="paths.implementer.cta">View Implementation Guide →</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Leader Path → PluralisticDeliberationOrchestrator (Teal) -->
|
|
<a href="/leader.html" class="block bg-white rounded-xl shadow-lg border-l-4 overflow-visible hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 relative group animate-on-scroll border-l-service-deliberation" data-animation="scale-in" data-stagger="300">
|
|
<!-- Tooltip -->
|
|
<div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
|
|
<span data-i18n="paths.leader.tooltip">For AI executives, research directors, startup founders, and strategic decision makers setting AI safety policy</span>
|
|
<div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center space-x-4 mb-4">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center text-2xl" class="bg-gradient-service-deliberation">
|
|
💼
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-2xl font-bold text-gray-900 group-hover:text-teal-600 transition-colors" data-i18n="paths.leader.title">Leader</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="paths.leader.subtitle">Strategic AI Safety</p>
|
|
</div>
|
|
<span class="ml-auto bg-gradient-to-r from-purple-100 to-blue-100 text-purple-700 text-xs font-semibold px-3 py-1 rounded-full border border-purple-200">⚡ Now with AL</span>
|
|
</div>
|
|
|
|
<p class="text-gray-700 mb-6" data-i18n="paths.leader.description">
|
|
Navigate the business case, compliance requirements, and competitive advantages of structural AI safety.
|
|
</p>
|
|
|
|
<ul class="space-y-3 mb-6 text-sm">
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-deliberation" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.leader.features.0">Executive briefing & business case</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-deliberation" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.leader.features.1">Risk management & compliance (EU AI Act)</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-deliberation" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.leader.features.2">Implementation roadmap & operational metrics</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<svg aria-hidden="true" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" class="text-service-deliberation" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
|
|
<span class="text-gray-700" data-i18n="paths.leader.features.3">Competitive advantage analysis</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200">
|
|
<span class="font-semibold group-hover:underline" class="text-service-deliberation" data-i18n="paths.leader.cta">View Leadership Resources →</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Key Capabilities -->
|
|
<section class="bg-white py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-3xl font-bold text-center text-gray-900 mb-4 animate-on-scroll" data-i18n="capabilities.heading" data-animation="fade-in">Framework Capabilities</h2>
|
|
|
|
<p class="text-center text-gray-600 text-lg max-w-3xl mx-auto mb-12 animate-on-scroll" data-i18n="capabilities.intro" data-animation="fade-in">
|
|
Six architectural services that enable plural moral values by preserving human judgment at the coalface where AI operates.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
|
|
<div class="card-base card-interactive card-service instruction animate-on-scroll" data-animation="slide-up" data-stagger="100">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-instruction">
|
|
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.0.title">Instruction Classification</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.0.description">
|
|
Quadrant-based classification (STR/OPS/TAC/SYS/STO) with time-persistence metadata tagging
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-base card-interactive card-service validator animate-on-scroll" data-animation="slide-up" data-stagger="200">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-validator">
|
|
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.1.title">Cross-Reference Validation</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.1.description">
|
|
Validates AI actions against explicit user instructions to prevent pattern-based overrides. Creates compliance audit trail for demonstrating governance in regulatory contexts.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-base card-interactive card-service boundary animate-on-scroll" data-animation="slide-up" data-stagger="300">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-boundary">
|
|
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.2.title">Boundary Enforcement</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.2.description">
|
|
Implements Tractatus 12.1-12.7 boundaries—values decisions architecturally require humans, enabling plural moral values rather than imposed frameworks. Prevents AI from exposing credentials or PII, providing GDPR compliance evidence through audit trails.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-base card-interactive card-service pressure animate-on-scroll" data-animation="slide-up" data-stagger="400">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-pressure">
|
|
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.3.title">Pressure Monitoring</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.3.description">
|
|
Detects degraded operating conditions (token pressure, errors, complexity) and adjusts verification
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-base card-interactive card-service metacognitive animate-on-scroll" data-animation="slide-up" data-stagger="500">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-metacognitive">
|
|
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.4.title">Metacognitive Verification</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.4.description">
|
|
AI self-checks alignment, coherence, safety before execution - structural pause-and-verify
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card-base card-interactive card-service deliberation animate-on-scroll" data-animation="slide-up" data-stagger="600">
|
|
<div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-deliberation">
|
|
<svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="capabilities.items.5.title">Pluralistic Deliberation</h3>
|
|
<p class="text-gray-600 text-sm" data-i18n="capabilities.items.5.description">
|
|
Handles plural moral values without imposing hierarchy—facilitates human judgment when efficiency conflicts with safety, data utility conflicts with privacy, or other incommensurable values arise
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Real-World Validation Section -->
|
|
<section class="bg-gray-50 py-16" aria-labelledby="validation">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 id="validation" class="text-3xl font-bold text-gray-900 mb-4" data-i18n="validation.heading">Real-World Validation</h2>
|
|
</div>
|
|
|
|
<!-- Performance & Reliability Evidence -->
|
|
<div class="bg-gradient-to-r from-green-50 to-teal-50 rounded-xl border-2 border-green-200 p-8 mb-8">
|
|
<div class="flex items-start gap-4 mb-4">
|
|
<div class="flex-shrink-0">
|
|
<svg class="w-12 h-12 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-3" data-i18n="validation.performance_evidence.heading">Preliminary Evidence: Safety and Performance May Be Aligned</h3>
|
|
<p class="text-gray-700 mb-4 leading-relaxed" data-i18n-html="validation.performance_evidence.paragraph_1">
|
|
Early production evidence suggests an unexpected pattern may be emerging: <strong>structural constraints appear to prevent degraded operating conditions rather than constrain capability</strong>. Users report completing in one governed session what previously required 3-5 attempts with ungoverned Claude Code—achieving lower error rates and higher-quality outputs. If validated through controlled experiments, this would challenge assumptions about governance costs.
|
|
</p>
|
|
<p class="text-gray-700 mb-4 leading-relaxed" data-i18n-html="validation.performance_evidence.paragraph_2">
|
|
The hypothesized mechanism: <strong>prevention of degraded operating conditions</strong> before they compound. Architectural boundaries stop context pressure failures, instruction drift, and pattern-based overrides—maintaining operational integrity throughout long interactions. Whether this pattern holds at scale requires validation.
|
|
</p>
|
|
<p class="text-gray-700 leading-relaxed" data-i18n-html="validation.performance_evidence.paragraph_3">
|
|
<strong>If validated at scale</strong>, this pattern could challenge a core assumption—that governance trades performance for safety. Early evidence suggests structural constraints might enable <em>both</em> safer <em>and</em> more capable AI systems, but controlled experiments are needed to test whether qualitative reports hold under measurement. Statistical validation is ongoing.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white bg-opacity-60 rounded-lg p-4 border border-green-300">
|
|
<p class="text-sm text-gray-800" data-i18n-html="validation.performance_evidence.methodology_note">
|
|
<strong>Methodology note:</strong> Findings based on qualitative user reports from production deployment. Controlled experiments and quantitative metrics collection scheduled for validation phase.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Village Platform & Home AI - Production Evidence -->
|
|
<section class="bg-gradient-to-r from-teal-600 to-emerald-600 text-white py-16 border-b-4 border-teal-800" style="background: linear-gradient(90deg, #0d9488 0%, #059669 100%); color: #000000;">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
<!-- Main Header -->
|
|
<div class="text-center mb-12">
|
|
<div style="display: inline-block; background: #000000; color: #ffffff; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem;" data-i18n="village_section.badge">
|
|
Production Evidence
|
|
</div>
|
|
<h2 style="font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; color: #000000;" data-i18n="village_section.heading">Tractatus in Production: The Village Platform</h2>
|
|
<p style="font-size: 1.25rem; color: #000000; max-width: 48rem; margin: 0 auto;" data-i18n="village_section.subheading">
|
|
Our research has produced a practical outcome. Home AI applies all six Tractatus governance services to every user interaction in a live community platform.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
|
|
|
<!-- Home AI Card -->
|
|
<div style="background: rgba(255,255,255,0.9); border-radius: 0.75rem; padding: 2rem; border: 1px solid #e5e7eb;">
|
|
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
|
|
<div style="width: 4rem; height: 4rem; border-radius: 0.75rem; background: #14b8a6; display: flex; align-items: center; justify-content: center; font-size: 1.875rem;">
|
|
🏠
|
|
</div>
|
|
<div>
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; color: #000000;" data-i18n="village_section.home_ai.title">Home AI</h3>
|
|
<p style="color: #000000;" data-i18n="village_section.home_ai.subtitle">Six Services Per Response</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="color: #000000; margin-bottom: 1.5rem; line-height: 1.625;" data-i18n="village_section.home_ai.description">
|
|
Every Home AI response passes through the complete Tractatus governance stack before reaching the user. BoundaryEnforcer blocks values judgments, CrossReferenceValidator prevents prompt injection, ContextPressureMonitor tracks session health.
|
|
</p>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
|
|
<div style="background: #f3f4f6; border-radius: 0.5rem; padding: 1rem; text-align: center;">
|
|
<div style="font-size: 1.875rem; font-weight: 700; color: #000000;">6</div>
|
|
<div style="font-size: 0.875rem; color: #000000;" data-i18n="village_section.home_ai.stat_services">Governance services per response</div>
|
|
</div>
|
|
<div style="background: #f3f4f6; border-radius: 0.5rem; padding: 1rem; text-align: center;">
|
|
<div style="font-size: 1.875rem; font-weight: 700; color: #000000;">11+</div>
|
|
<div style="font-size: 0.875rem; color: #000000;" data-i18n="village_section.home_ai.stat_months">Months in production</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="font-size: 0.875rem; color: #000000; font-style: italic;" data-i18n="village_section.home_ai.disclaimer">
|
|
These figures reflect single-tenant deployment. Multi-tenant validation pending.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Governed Features Card -->
|
|
<div style="background: rgba(255,255,255,0.9); border-radius: 0.75rem; padding: 2rem; border: 1px solid #e5e7eb;">
|
|
<h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; color: #000000;" data-i18n="village_section.features.title">Governance-Protected Features</h3>
|
|
|
|
<ul style="list-style: none; padding: 0; margin: 0;">
|
|
<li style="display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem;">
|
|
<div style="width: 2rem; height: 2rem; border-radius: 0.5rem; background: #14b8a6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white;">✓</div>
|
|
<div>
|
|
<div style="font-weight: 600; color: #000000;" data-i18n="village_section.features.rag_help.title">RAG-Based Help Centre</div>
|
|
<div style="font-size: 0.875rem; color: #000000;" data-i18n="village_section.features.rag_help.description">Vector search with permission-aware retrieval</div>
|
|
</div>
|
|
</li>
|
|
<li style="display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem;">
|
|
<div style="width: 2rem; height: 2rem; border-radius: 0.5rem; background: #14b8a6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white;">✓</div>
|
|
<div>
|
|
<div style="font-weight: 600; color: #000000;" data-i18n="village_section.features.document_ocr.title">Document OCR</div>
|
|
<div style="font-size: 0.875rem; color: #000000;" data-i18n="village_section.features.document_ocr.description">Automated text extraction under consent controls</div>
|
|
</div>
|
|
</li>
|
|
<li style="display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem;">
|
|
<div style="width: 2rem; height: 2rem; border-radius: 0.5rem; background: #14b8a6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white;">✓</div>
|
|
<div>
|
|
<div style="font-weight: 600; color: #000000;" data-i18n="village_section.features.story_assistance.title">Story Assistance</div>
|
|
<div style="font-size: 0.875rem; color: #000000;" data-i18n="village_section.features.story_assistance.description">Content suggestions filtered through BoundaryEnforcer</div>
|
|
</div>
|
|
</li>
|
|
<li style="display: flex; align-items: flex-start; gap: 0.75rem;">
|
|
<div style="width: 2rem; height: 2rem; border-radius: 0.5rem; background: #14b8a6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white;">✓</div>
|
|
<div>
|
|
<div style="font-weight: 600; color: #000000;" data-i18n="village_section.features.ai_memory.title">AI Memory Transparency</div>
|
|
<div style="font-size: 0.875rem; color: #000000;" data-i18n="village_section.features.ai_memory.description">User-controlled summarisation with audit dashboard</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Row -->
|
|
<div style="display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem;">
|
|
<a href="https://mysovereignty.digital"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style="display: inline-block; background: #ffffff; color: #0f766e; padding: 0.75rem 2rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center;"
|
|
data-i18n="village_section.cta_explore">
|
|
Explore the Village →
|
|
</a>
|
|
<a href="/village-case-study.html"
|
|
style="display: inline-block; background: #115e59; color: #ffffff; padding: 0.75rem 2rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; border: 2px solid #2dd4bf; text-align: center;"
|
|
data-i18n="village_section.cta_case_study">
|
|
Technical Case Study →
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Honest Limitations -->
|
|
<div style="margin-top: 2rem; background: #fef3c7; border: 2px solid #f59e0b; border-radius: 0.5rem; padding: 1rem; text-align: center;">
|
|
<p style="font-size: 0.875rem; color: #78350f; margin: 0;">
|
|
<strong data-i18n="village_section.limitations_label">Limitations:</strong> <span data-i18n="village_section.limitations">Single implementation, self-reported metrics, operator-developer overlap.
|
|
Independent audit and multi-site validation scheduled for 2026.</span>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Share CTA -->
|
|
<section class="bg-gray-100 py-12">
|
|
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
|
|
<h2 class="text-2xl font-semibold text-gray-900 mb-3" data-i18n="share_cta.heading">
|
|
Help us reach the right people.
|
|
</h2>
|
|
<p class="text-gray-700 mb-6" data-i18n="share_cta.description">
|
|
If you know researchers, implementers, or leaders who need structural AI governance solutions, share this with them.
|
|
</p>
|
|
<div class="flex flex-wrap gap-3">
|
|
<button
|
|
data-action="copy-link"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors shadow-sm"
|
|
data-i18n="share_cta.copy_link">
|
|
Copy Link
|
|
</button>
|
|
<button
|
|
data-action="email-share"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors shadow-sm"
|
|
data-i18n="share_cta.email">
|
|
Email
|
|
</button>
|
|
<button
|
|
data-action="linkedin-share"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors shadow-sm"
|
|
data-i18n="share_cta.linkedin">
|
|
LinkedIn
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Community Section -->
|
|
<section class="mb-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="bg-gradient-to-br from-purple-600 to-indigo-700 rounded-2xl p-8 md:p-12 text-white shadow-2xl">
|
|
<div class="text-center mb-10">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4" data-i18n="community.heading">Join the Community</h2>
|
|
<p class="text-xl text-purple-100 max-w-3xl mx-auto" data-i18n="community.intro">
|
|
Connect with researchers, implementers, and leaders exploring agentic AI governance and Agent Lightning integration.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
|
<!-- Tractatus Discord -->
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 hover:bg-white/15 transition-all">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<svg class="w-12 h-12 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
|
|
</svg>
|
|
<div>
|
|
<h3 class="text-xl font-bold" data-i18n="community.tractatus_discord.title">Tractatus Discord</h3>
|
|
<p class="text-sm text-purple-100" data-i18n="community.tractatus_discord.subtitle">Governance-focused discussions</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-white/90 text-sm mb-4" data-i18n="community.tractatus_discord.description">
|
|
Explore architectural constraints, research gaps, and governance frameworks for agentic AI systems.
|
|
</p>
|
|
<a href="https://discord.gg/Dkke2ADu4E" target="_blank" rel="noopener noreferrer"
|
|
class="inline-block w-full text-center bg-white text-purple-700 font-bold px-6 py-3 rounded-lg hover:bg-purple-50 transition-all shadow-md"
|
|
data-i18n="community.tractatus_discord.cta">
|
|
Join Tractatus Server →
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Agent Lightning Discord -->
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 hover:bg-white/15 transition-all">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<svg class="w-12 h-12 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
|
|
</svg>
|
|
<div>
|
|
<h3 class="text-xl font-bold" data-i18n="community.agent_lightning_discord.title">Agent Lightning Discord</h3>
|
|
<p class="text-sm text-purple-100" data-i18n="community.agent_lightning_discord.subtitle">Technical implementation help</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-white/90 text-sm mb-4" data-i18n="community.agent_lightning_discord.description">
|
|
Get support for Agent Lightning integration, RL optimization, and performance tuning questions.
|
|
</p>
|
|
<a href="https://discord.gg/bVZtkceKsS" target="_blank" rel="noopener noreferrer"
|
|
class="inline-block w-full text-center bg-white text-purple-700 font-bold px-6 py-3 rounded-lg hover:bg-purple-50 transition-all shadow-md"
|
|
data-i18n="community.agent_lightning_discord.cta">
|
|
Join Agent Lightning Server →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 text-center bg-white/10 backdrop-blur-sm rounded-lg py-4 px-6">
|
|
<p class="text-base text-gray-900 font-medium" data-i18n="community.welcome_message">
|
|
Both communities welcome researchers, implementers, and leaders at all experience levels.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
|
|
<!-- Version Management & PWA -->
|
|
<script src="/js/version-manager.js?v=0.1.2.1765255143694"></script>
|
|
|
|
<!-- Share CTA functionality -->
|
|
<script src="/js/share-cta.js?v=0.1.2.1765255143694"></script>
|
|
|
|
<!-- Internationalization -->
|
|
<script src="/js/i18n-simple.js?v=0.1.2.1765255143694"></script>
|
|
<script src="/js/components/language-selector.js?v=0.1.2.1765255143694"></script>
|
|
|
|
<!-- Scroll Animations (Phase 3) -->
|
|
<script src="/js/scroll-animations.js?v=0.1.2.1765255143694"></script>
|
|
|
|
<!-- Page Transitions (Phase 3) -->
|
|
<script src="/js/page-transitions.js?v=0.1.2.1765255143694"></script>
|
|
|
|
<!-- Footer Component -->
|
|
<script src="/js/components/footer.js?v=0.1.2.1765255143694"></script>
|
|
|
|
<!-- Feedback System (Governed by Tractatus + Agent Lightning) -->
|
|
<script src="/js/components/feedback.js?v=0.1.2.1765255143694"></script>
|
|
|
|
<!-- Newsletter Subscription Modal -->
|
|
<script src="/js/components/newsletter.js?v=0.1.2.1765255143694"></script>
|
|
|
|
</body>
|
|
</html>
|