tractatus/docs/outreach/HOMEPAGE-IMPLEMENTATION-GUIDE.md

# Homepage Implementation Guide - Phase 2 Cultural DNA Revision

**Date**: October 28, 2025
**Task**: Phase 2.5 - Implement All Homepage Changes
**Status**: Ready for implementation
**Files to modify**: public/index.html, public/js/translations/en.js

---

## Executive Summary

**What**: Implement cultural DNA compliance across homepage
**Why**: Increase compliance from 58% to 92% - integrate plural moral values positioning
**Impact**: ~60 line changes (15% of homepage)
**Time**: 30-45 minutes

### Changes Summary:
1. **Hero Section**: New title + subtitle with "one approach" and plural moral values framing
2. **Feature Section**: Add intro paragraph + update 2 service descriptions
3. **Problem Statement**: Complete rewrite with amoral AI vs plural moral values contrast

---

## Change #1: Hero Section (Lines 65-66)

### CURRENT:
```html
<h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight" class="text-shadow-md" data-i18n="hero.title">
  Tractatus AI Safety Framework
</h1>
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto" class="text-shadow-sm" data-i18n="hero.subtitle">
  Structural constraints that require AI systems to preserve human agency<br>
  for values decisions—tested on Claude Code
</p>
```

### REPLACE WITH:
```html
<h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight" class="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" class="text-shadow-sm" data-i18n="hero.subtitle">
  One architectural approach to governing AI at the coalface where decisions are made.<br>
  Not amoral AI systems, but plural moral values—enabling organizations to navigate<br>
  value conflicts thoughtfully. Tested on Claude Code.
</p>
```

**Compliance improvement**: 3/10 → 9.2/10

---

## Change #2: Feature Section Intro (After Line 253)

### CURRENT:
```html
<h2 class="text-3xl font-bold text-center text-gray-900 mb-12 animate-on-scroll"
    data-i18n="capabilities.heading" data-animation="fade-in">
  Framework Capabilities
</h2>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  <!-- Service cards -->
</div>
```

### REPLACE WITH:
```html
<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">
  <!-- Service cards -->
</div>
```

**Note**: Change h2 `mb-12` to `mb-4` to accommodate intro paragraph

**Compliance improvement**: Adds plural moral values connection

---

## Change #3: Boundary Enforcement Description (Lines 287-290)

### CURRENT:
```html
<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
</p>
```

### REPLACE WITH:
```html
<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
</p>
```

**Compliance improvement**: Explicit plural moral values connection

---

## Change #4: Pluralistic Deliberation Description (Lines 323-326)

### CURRENT:
```html
<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">
  Multi-stakeholder values deliberation without hierarchy - facilitates human decision-making
  for incommensurable values
</p>
```

### REPLACE WITH:
```html
<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 or other incommensurable values
</p>
```

**Compliance improvement**: Strategic terminology + concrete example

---

## Change #5: Problem Statement / Value Proposition (Lines 87-95)

### CURRENT:
```html
<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">
      A Starting Point
    </h2>
    <p class="text-amber-800 text-lg" data-i18n-html="value_prop.text">
      Aligning advanced AI with human values is among the most consequential challenges we face.
      As capability growth accelerates under big tech momentum, we confront a categorical imperative:
      preserve human agency over values decisions, or risk ceding control entirely.<br><br>

      Instead of hoping AI systems <em>"behave correctly,"</em> we propose <strong>structural
      constraints</strong> where certain decision types <strong>require human judgment</strong>.
      These architectural boundaries can adapt to individual, organizational, and societal
      norms—creating a foundation for bounded AI operation that may scale more safely with
      capability growth.<br><br>

      If this approach can work at scale, Tractatus may represent a turning point—a path where
      AI enhances human capability without compromising human sovereignty. Explore the framework
      through the lens that resonates with your work.
    </p>
  </div>
</section>
```

### REPLACE WITH:
```html
<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>
```

**Compliance improvement**: 4.2/10 → 9.8/10 (CRITICAL transformation)

---

## Translation File Updates

**File**: `public/js/translations/en.js`

### Find and update these keys:

```javascript
// HERO SECTION
hero: {
  title: "Tractatus: Architecture for Plural Moral Values",
  subtitle: "One architectural approach to governing AI at the coalface where decisions are made.<br>Not amoral AI systems, but plural moral values—enabling organizations to navigate<br>value conflicts thoughtfully. Tested on Claude Code.",
  cta_architecture: "System Architecture",
  cta_docs: "Read Documentation",
  cta_faq: "FAQ"
},

// VALUE PROPOSITION
value_prop: {
  heading: "The Choice: Amoral AI or Plural Moral Values",
  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."
},

// CAPABILITIES SECTION
capabilities: {
  heading: "Framework Capabilities",
  intro: "Six architectural services that enable plural moral values by preserving human judgment at the coalface where AI operates.",
  items: [
    {
      title: "Instruction Classification",
      description: "Quadrant-based classification (STR/OPS/TAC/SYS/STO) with time-persistence metadata tagging"
    },
    {
      title: "Cross-Reference Validation",
      description: "Validates AI actions against explicit user instructions to prevent pattern-based overrides"
    },
    {
      title: "Boundary Enforcement",
      description: "Implements Tractatus 12.1-12.7 boundaries—values decisions architecturally require humans, enabling plural moral values rather than imposed frameworks"
    },
    {
      title: "Pressure Monitoring",
      description: "Detects degraded operating conditions (token pressure, errors, complexity) and adjusts verification"
    },
    {
      title: "Metacognitive Verification",
      description: "AI self-checks alignment, coherence, safety before execution - structural pause-and-verify"
    },
    {
      title: "Pluralistic Deliberation",
      description: "Handles plural moral values without imposing hierarchy—facilitates human judgment when efficiency conflicts with safety or other incommensurable values"
    }
  ]
}
```

---

## Implementation Checklist

### Pre-Implementation:
- [ ] Read all three draft documents (HERO-SECTION-DRAFT.md, FEATURE-SECTION-DRAFT.md, PROBLEM-STATEMENT-DRAFT.md)
- [ ] Ensure local dev server running (npm start on port 9000)
- [ ] Create backup of public/index.html
- [ ] Create backup of public/js/translations/en.js

### HTML Changes (public/index.html):
- [ ] Change #1: Hero section title and subtitle (lines 65-66)
- [ ] Change #2: Feature section - add intro paragraph, modify h2 margin (after line 253)
- [ ] Change #3: Boundary Enforcement description (lines 287-290)
- [ ] Change #4: Pluralistic Deliberation description (lines 323-326)
- [ ] Change #5: Problem statement complete rewrite (lines 87-95)

### Translation Changes (public/js/translations/en.js):
- [ ] Update hero.title
- [ ] Update hero.subtitle
- [ ] Update value_prop.heading
- [ ] Update value_prop.text
- [ ] Add capabilities.intro (NEW KEY)
- [ ] Update capabilities.items[2].description (Boundary Enforcement)
- [ ] Update capabilities.items[5].description (Pluralistic Deliberation)

### Testing:
- [ ] Load http://localhost:9000 in browser
- [ ] Verify hero section displays correctly (responsive on mobile)
- [ ] Verify feature section intro paragraph displays
- [ ] Verify value proposition box displays (amber background)
- [ ] Check for JavaScript console errors
- [ ] Test responsive design (mobile, tablet, desktop)
- [ ] Verify no layout breaks or text overflow

### Validation:
- [ ] Run cultural DNA validator: `node scripts/hook-validators/validate-cultural-dna.js public/index.html`
- [ ] Check for prohibited terms: inst_085 abstract language
- [ ] Verify "plural moral values" appears multiple times
- [ ] Verify "amoral AI" appears in problem statement
- [ ] Verify "one approach" framing present

### Deployment:
- [ ] Commit changes with descriptive message
- [ ] Push to repository
- [ ] Deploy using: `./scripts/deploy.sh --frontend-only`
- [ ] Verify production deployment
- [ ] Monitor for errors

---

## Expected Cultural DNA Compliance After Implementation

| Section | Current | After | Improvement |
|---------|---------|-------|-------------|
| Hero Section | 3/10 | 9.2/10 | +207% |
| Feature Section | 7/10 | 9/10 | +29% |
| Problem Statement | 4.2/10 | 9.8/10 | +133% |
| **Overall Homepage** | **5.8/10 (58%)** | **9.2/10 (92%)** | **+59%** |

---

## Risk Assessment

### LOW RISK:
- All HTML structure preserved
- All CSS classes maintained
- Translation system handles text updates
- No changes to JavaScript functionality
- Responsive design intact

### MEDIUM ATTENTION:
- Title change to "The Choice: Amoral AI or Plural Moral Values" is significant semantic shift
- Longer subtitle in hero (test mobile overflow)
- Monitor user reactions to "amoral AI" language (intentional for awakening)

### MITIGATION:
- Test thoroughly on mobile devices
- Monitor analytics after deployment
- Gather user feedback
- Can revert easily if issues arise

---

## Rollback Plan (If Needed)

If issues arise post-deployment:

1. **Git revert**: `git revert <commit-hash>`
2. **Redeploy**: `./scripts/deploy.sh --frontend-only`
3. **Document issues** in HOMEPAGE-IMPLEMENTATION-ISSUES.md
4. **Iterate on drafts** based on feedback

---

## Success Metrics

### Immediate (Technical):
- ✅ No console errors
- ✅ Cultural DNA validator passes
- ✅ Responsive design works
- ✅ Translation system functional

### Short-term (1-2 weeks):
- Bounce rate on homepage (monitor for increase/decrease)
- Time on page (should increase with clearer positioning)
- Click-through to documentation (should increase)
- Qualitative feedback from users

### Long-term (1-3 months):
- SEO impact of title changes
- Brand recognition for "plural moral values"
- User understanding of positioning (surveys)

---

## Post-Implementation Tasks

After successful deployment:

1. **Update Phase 2 status** in CULTURAL-DNA-IMPLEMENTATION-PLAN.md
2. **Create Phase 2 completion summary**
3. **Proceed to Phase 3** (Launch Plan Revision)
   - Task 3.1: Audit current launch plan
   - Task 3.2: Redefine target audience
   - Task 3.3: Revise editorial submission strategy
   - Task 3.4: Rewrite article variation angles (incorporate amoral vs plural moral values)
   - Task 3.5: Update social media strategy
   - Task 3.6: Finalize revised launch plan

---

## Quick Reference: All Changes at a Glance

**Total HTML changes**: 5 sections, ~60 lines
**Total translation changes**: 7 keys
**Estimated time**: 30-45 minutes
**Cultural DNA impact**: 58% → 92% compliance
**Strategic impact**: Transforms homepage from abstract philosophy to operational positioning

---

**Status**: ✅ READY FOR IMPLEMENTATION
**Recommended approach**: Implement all changes in single session
**Next action**: Execute changes following checklist above

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

Co-Authored-By: Claude <noreply@anthropic.com>