Bioscience QMS Work Order System — Website Content Plan
Classification: Internal — Strategy
Date: 2026-02-13
Version: 1.0
Purpose: Organize 56 artifacts into a navigable website for investors, advisors, engineers, and compliance officers
1. Site Architecture
1.1 Primary Navigation
CODITECT — Bioscience QMS Work Order System
│
├── Home (Landing)
│ ├── Hero: Value proposition + 3 key metrics
│ ├── Problem/Solution overview
│ ├── Interactive demo (embedded JSX)
│ └── CTA: Choose your path →
│
├── For Investors
│ ├── Executive Summary
│ ├── Market Opportunity
│ ├── Business Case & ROI
│ ├── Competitive Positioning
│ ├── Revenue Model
│ ├── Business Model & Unit Economics (60)
│ ├── One-Pager Brief (61)
│ └── Interactive Dashboards
│ ├── Executive Decision Brief (44)
│ ├── Market Impact Analyzer (47)
│ ├── Investor Pitch Dashboard (50)
│ └── Business Case Calculator (51)
│
├── For Engineers
│ ├── Quick Start Guide (1-2-3)
│ ├── System Architecture
│ │ ├── C4 Model (Context → Code)
│ │ ├── Data Model (ERD + Prisma)
│ │ ├── State Machine + Guards
│ │ └── Mermaid Diagrams
│ ├── API & Events
│ │ ├── API Endpoint Specification (71)
│ │ ├── Event Catalog (73)
│ │ └── Integration & API Strategy (67)
│ ├── Agent Orchestration
│ │ ├── 7-Node Architecture
│ │ ├── Message Contracts
│ │ └── Circuit Breakers
│ ├── Deployment & Operations
│ │ ├── Deployment Architecture (72)
│ │ ├── Testing Strategy (65)
│ │ ├── Versioning & Evolution (69)
│ │ └── Operational Readiness (66)
│ ├── Data & Security
│ │ ├── Data Architecture & Privacy (63)
│ │ └── Security Architecture (64)
│ ├── Technical Design Document
│ ├── Architecture Decision Records
│ └── Interactive Dashboards
│ ├── WO Unified System Dashboard (33)
│ ├── State Machine Visualizer (34)
│ ├── Data Model Explorer (35/36)
│ ├── Agent Orchestration Visualizer (39)
│ └── Implementation Planner (55)
│
├── For Compliance
│ ├── Regulatory Overview
│ ├── FDA 21 CFR Part 11 Mapping
│ ├── HIPAA Technical Safeguards
│ ├── SOC 2 Trust Service Criteria
│ ├── RBAC & SOD Rules
│ ├── E-Signature Architecture
│ ├── CAPA Workflow (74)
│ ├── Validation Protocols — IQ/OQ/PQ (70)
│ ├── Audit Readiness Guide (75)
│ └── Interactive Dashboards
│ ├── Comprehensive Compliance Dashboard (40)
│ ├── Compliance Value Chain (42)
│ ├── Compliance ROI Calculator (43)
│ └── Regulatory Tracker (41)
│
├── Product
│ ├── Product Roadmap
│ ├── Feature Overview
│ ├── User Experience & Journeys (68)
│ ├── CODITECT Integration
│ ├── Competitive Comparison
│ └── Interactive Dashboards
│ ├── Strategic Fit Dashboard (45)
│ ├── Competitive Comparison (54)
│ ├── Product Roadmap Visualizer (56)
│ └── CODITECT Impact Dashboard (52)
│
├── Reference
│ ├── Glossary (400+ terms)
│ ├── Document Inventory (81 artifacts)
│ ├── Key Metrics Cross-Reference
│ ├── Gap Closure Status (G01–G28)
│ ├── Impact Register & Checklist (78)
│ └── Version History
│
├── Build & Generate
│ ├── Competitive Analysis Prompt (76)
│ ├── GTM Strategy Prompt (77)
│ ├── Universal Document Generator (79)
│ ├── Website Build Prompts (57)
│ └── Gap Closure Prompts (58)
│
└── Contact / Get Started
├── Demo request
├── Technical deep-dive request
└── Investor inquiry
1.2 URL Structure
/ → Landing page
/investors/ → Investor hub
/investors/executive-summary → Doc 01/02
/investors/market-opportunity → Docs 05/06/07
/investors/business-case → Doc 03
/investors/competitive-position → Doc 08
/investors/revenue-model → Docs 09/10
/investors/dashboards/executive → JSX 44
/investors/dashboards/market → JSX 47
/investors/dashboards/pitch → JSX 50
/investors/dashboards/calculator → JSX 51
/engineers/ → Engineering hub
/engineers/quick-start → Doc 28
/engineers/architecture/c4 → Doc 14
/engineers/architecture/data-model → Doc 16
/engineers/architecture/state-machine → Docs 18/19
/engineers/architecture/diagrams → Doc 15
/engineers/agents/orchestration → Docs 24/25
/engineers/agents/messages → Doc 26
/engineers/tdd → Doc 13
/engineers/adrs → Doc 23
/engineers/dashboards/system → JSX 33
/engineers/dashboards/state-machine → JSX 34
/engineers/dashboards/data-model → JSX 35/36
/engineers/dashboards/agents → JSX 39
/engineers/dashboards/planner → JSX 55
/compliance/ → Compliance hub
/compliance/overview → Doc 20
/compliance/fda-part-11 → Part 11 section from docs 20/22
/compliance/hipaa → HIPAA section
/compliance/soc2 → SOC 2 section
/compliance/rbac → Docs 21/22
/compliance/e-signatures → Doc 17
/compliance/dashboards/comprehensive → JSX 40
/compliance/dashboards/value-chain → JSX 42
/compliance/dashboards/roi → JSX 43
/compliance/dashboards/tracker → JSX 41
/product/ → Product hub
/product/roadmap → Doc 11
/product/features → Feature extraction from all docs
/product/coditect-integration → Doc 27
/product/competitive → Doc 08
/product/dashboards/strategic-fit → JSX 45
/product/dashboards/comparison → JSX 54
/product/dashboards/roadmap → JSX 56
/product/dashboards/impact → JSX 52
/reference/glossary → Doc 29
/reference/inventory → Doc 30
/reference/metrics → Cross-reference table
2. Page Templates
2.1 Landing Page
Hero Section
- Headline: "Autonomous Change Control for Regulated Industries"
- Subhead: "The first AI platform where agents can execute compliant work orders — with human approval gates built in, not bolted on."
- Three stats: "$3.5B market" · "70-80% faster change cycles" · "60% token cost reduction"
- CTA buttons: "For Investors →" | "For Engineers →" | "For Compliance →"
Problem/Solution Grid
- 3 pain cards: Manual change control (15-45 days), CSV documentation burden (120-400 hours), AI locked out of regulated work
- 3 solution cards: 9-state machine with guards, 7 AI agents with human checkpoints, Part 11 e-signatures baked in
Interactive Demo
- Embedded WO State Machine Visualizer (JSX 34) with "Try the simulator →" CTA
- Alternative: Compliance Dashboard (JSX 40) overview tab showing audit readiness score ring
Social Proof / Credibility
- Google AI Accelerator badge
- Regulatory framework logos (FDA, HIPAA, SOC 2)
- Key architecture stats (20+ entities, 9 states, 7 agents, 235+ glossary terms)
2.2 Hub Pages (Investors/Engineers/Compliance/Product)
Each hub page follows this template:
- Hero — Role-specific headline and 2-3 key metrics
- Quick Navigation — Card grid linking to sub-pages
- Featured Dashboard — Embedded interactive JSX relevant to this audience
- Document List — Ordered reading path with time estimates
- Key Takeaways — 3-5 bullet summary of most important facts
2.3 Document Pages
Each markdown artifact renders as a documentation page:
- Breadcrumb — Home > Category > Document
- Title + Metadata — Document number, version, date, classification
- Table of Contents — Auto-generated from headers
- Content — Rendered markdown with syntax highlighting for code blocks
- Related Documents — Cross-references to other relevant artifacts
- Next/Previous — Sequential navigation within category
2.4 Dashboard Pages
Each JSX dashboard renders as a full-width interactive page:
- Breadcrumb — Home > Category > Dashboards > Dashboard Name
- Description — 2-3 sentence context for what this dashboard shows
- Full-Width Dashboard — Rendered JSX component
- Source Data — Link to underlying markdown artifacts
- Export Options — Download data as CSV/JSON (future)
3. Content Strategy
3.1 Content Hierarchy
| Priority | Content Type | Audience | Update Frequency |
|---|---|---|---|
| P0 | Executive Summary | All | Per milestone |
| P0 | Compliance Dashboards | Compliance, Investors | Per regulation change |
| P1 | Architecture Docs | Engineers | Per sprint |
| P1 | Market Analysis | Investors, Product | Quarterly |
| P2 | Quick Start Guide | Engineers | Per release |
| P2 | Glossary | All | Per artifact update |
| P3 | Competitive Analysis | Product, Investors | Quarterly |
| P3 | Roadmap | All | Monthly |
3.2 Key Narratives by Audience
Investors: "CODITECT occupies the only empty quadrant in regulated change control — high compliance + high AI capability. The $3.5B market is underserved by incumbents who can't add real AI and dev tools that can't add real compliance. Unit economics (LTV:CAC 18.7×, 78% GM, 7-month payback) validate the model."
Engineers: "The WO system is a 9-state FSM with composable TypeScript guards, a 20+ entity PostgreSQL data model with RLS multi-tenancy, and a 7-node agent orchestration graph with typed message contracts and circuit breakers. It's designed to be extended, not replaced."
Compliance Officers: "Every state transition maps to specific FDA, HIPAA, and SOC 2 requirements. Human approval at PENDING_REVIEW→APPROVED is architecturally non-negotiable — enforced at guard, DB, and API levels. Immutable audit trail captures both agent and human identity for every action."
Product/GTM: "Phase 1 targets mid-tier biotech ($8-15K/mo), Phase 2 expands to MedDev/CRO ($15-40K/mo), Phase 3 reaches Top-50 pharma + fintech ($40-150K/mo). The compliance moat (regulatory certification + agent-compliance integration) creates very strong switching costs ($200K-$2M)."
3.3 SEO / Discovery Keywords
Primary: autonomous change control, AI work order management, FDA 21 CFR Part 11 compliance software, regulated industry AI platform, bioscience QMS
Secondary: computer system validation automation, HIPAA compliant AI agents, SOC 2 change management, pharmaceutical work order system, medical device change control
Long-tail: AI agents for FDA regulated software, automated audit trail generation Part 11, separation of duties database enforcement, multi-agent orchestration regulated industries
4. Technical Implementation
4.1 Recommended Stack
| Layer | Technology | Rationale |
|---|---|---|
| Framework | Next.js 14+ (App Router) | SSR for SEO, React for JSX dashboards, file-based routing matches URL structure |
| Content | MDX | Render markdown artifacts with embedded React components |
| Styling | Tailwind CSS | Already used in all JSX dashboards — zero migration |
| Search | Algolia DocSearch or Pagefind | Full-text search across 56 documents + glossary |
| Hosting | Vercel or Cloudflare Pages | Edge deployment, preview deployments for content PRs |
| Analytics | Plausible or PostHog | Privacy-friendly, track reading paths and dashboard engagement |
| Auth | Clerk or NextAuth | Gate investor materials and engineering docs as needed |
4.2 Content Pipeline
/content
├── /docs ← Markdown artifacts (01-31)
│ ├── 01-executive-summary.md
│ ├── ...
│ └── 31-website-plan.md
├── /dashboards ← JSX artifacts (32-56)
│ ├── 32-tech-architecture-analyzer.jsx
│ ├── ...
│ └── 56-product-roadmap-visualizer.jsx
├── /config
│ ├── navigation.json ← Site navigation tree
│ ├── reading-paths.json ← Audience-specific paths
│ └── cross-references.json← Document relationships
└── /public
├── /images ← Architecture diagrams (exported)
└── /downloads ← PDF exports of key docs
4.3 MDX Page Template
// pages/engineers/architecture/state-machine.mdx
import StateMachineVisualizer from '@/dashboards/34-wo-state-machine-visualizer'
export const meta = {
number: 18,
title: 'State Machine Specification',
category: 'Architecture',
audience: ['engineers'],
readTime: '8 min',
related: [19, 34, 37]
}
# State Machine Specification
{/* Markdown content from artifact 18 */}
## Interactive Visualizer
<StateMachineVisualizer />
4.4 Dashboard Embedding
All JSX artifacts are already self-contained React components with default exports. Integration requires:
- Import as dynamic component (avoid SSR for interactive elements)
- Wrap in container with
max-w-6xl mx-auto(already in each component) - Add Lucide React icons package (already imported)
- Ensure Tailwind config includes all utility classes used
import dynamic from 'next/dynamic'
const Dashboard = dynamic(
() => import('@/dashboards/40-comprehensive-compliance-dashboard'),
{ ssr: false }
)
5. Phase Plan
Phase 1: Documentation Site (Week 1-2)
Scope: Static site with all markdown artifacts rendered, basic navigation, glossary search
Deliverables:
- Next.js project with MDX rendering
- All 31 markdown artifacts as pages
- Navigation tree matching URL structure
- Glossary with search functionality
- Reading path recommendations on each hub page
- Mobile-responsive layout
Phase 2: Interactive Dashboards (Week 3-4)
Scope: Embed all 25 JSX dashboards as interactive components
Deliverables:
- Dynamic imports for all dashboard components
- Dashboard gallery pages per category
- Full-width rendering with proper Tailwind support
- Print-friendly mode for dashboard screenshots
- Share/link functionality for specific dashboard tabs
Phase 3: Audience Personalization (Week 5-6)
Scope: Role-based navigation, gated content, analytics
Deliverables:
- Auth integration for investor access
- Role-based content filtering
- Reading progress tracking
- Engagement analytics dashboard
- Document feedback mechanism (thumbs up/down)
- PDF export for key documents
Phase 4: Living Documentation (Ongoing)
Scope: Automated updates as system evolves
Deliverables:
- GitHub/Git-based content workflow
- Preview deployments for content PRs
- Automated glossary term extraction
- Dashboard data refresh from live system
- Changelog page tracking document versions
- API for programmatic content access
6. Metrics & Success Criteria
| Metric | Target | Measurement |
|---|---|---|
| Time to first value (investor) | < 5 min to Executive Summary | Analytics |
| Time to first value (engineer) | < 15 min to running quick start | Analytics |
| Content coverage | 100% of 56 artifacts published | Inventory check |
| Dashboard engagement | > 60% of visitors interact with at least 1 dashboard | Analytics |
| Glossary lookups | > 50 unique terms accessed/week | Search analytics |
| Reading path completion | > 30% of visitors complete their role path | Progress tracking |
| Mobile accessibility | Score 95+ on Lighthouse | Automated testing |
| Search effectiveness | < 2 searches to find relevant content | Search analytics |
Last updated: 2026-02-13
Maintained by: AZ1.AI Inc. / CODITECT Platform Team