mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
b4e6ee5fb7
The kit's Hero drew a centred column of its own at 768px. It hands its crumb, badge, title, line and actions to the shared fold now, so it keeps the bar's measure, and fills the window with a preview beside it where a page gives one: every course walks its syllabus week by week, and the University index its courses. A course's trail starts at University rather than Models.
780 lines
35 KiB
TypeScript
780 lines
35 KiB
TypeScript
'use client'
|
||
|
||
import React from 'react'
|
||
import Link from 'next/link'
|
||
import { Hero } from '@/components/models/kit'
|
||
import { Steps } from '@/components/preview/steps'
|
||
import { Band, Card, Head } from '@/components/marketing/band'
|
||
import { Box, Text, XStack, YStack, View } from '@/components/ui'
|
||
import { Action, Title, Lede, Line, Eyebrow, Chip } from '@hanzo/ui/marketing'
|
||
import { Grid } from '@hanzo/ui/grid'
|
||
import { checkoutUrl } from '@hanzo/app/lib/pay'
|
||
|
||
const ENROLL_URL = checkoutUrl('course-eng-100', 'https://hanzo.ai/university/agentic-coding')
|
||
import {
|
||
Code2,
|
||
Brain,
|
||
Check,
|
||
ArrowRight,
|
||
Zap,
|
||
Award,
|
||
BookOpen,
|
||
Scale,
|
||
ShieldCheck,
|
||
ChevronLeft,
|
||
Coins,
|
||
GitBranch,
|
||
Terminal,
|
||
Cpu,
|
||
Layers,
|
||
GraduationCap,
|
||
FileCode,
|
||
Lock,
|
||
Binary,
|
||
CheckCircle2,
|
||
} from 'lucide-react'
|
||
import { phrase } from '@hanzo/i18n'
|
||
import { useI18n } from '@hanzo/i18n/react'
|
||
|
||
const SYLLABUS_WEEKS = [
|
||
{
|
||
week: phrase('Week 1'),
|
||
code: 'ENG 100.1',
|
||
title: phrase('Runtime Virtualization, Ephemeral Sandboxes & Zero-Copy ZAP RPC'),
|
||
summary:
|
||
phrase('Analyze the systems boundary of autonomous code execution. Configure local high-throughput quantized serving for Zen 6 (27.3B) and Zen 6 Flash. Engineer Hanzo Visor user-space kernel virtualization with ephemeral lease lifecycles and zero-copy Cap’n Proto RPC channels.'),
|
||
lectures: [
|
||
phrase('Zen 6 architecture: quantized GGUF/AWQ local inference on Apple Silicon (Metal) and Linux (CUDA)'),
|
||
phrase('The 4-surface boundary contract: unified ergonomics across CLI, SDKs, HTTP REST, and MCP sockets'),
|
||
phrase('ZAP Zero-Copy RPC over Cap’n Proto: replacing high-overhead JSON serialization with microsecond IPC'),
|
||
phrase('User-space container virtualization: Hanzo Visor / runsc process boundaries and ephemeral rootfs mounts'),
|
||
],
|
||
readings: [
|
||
'Google Engineering: Container Isolation through User-Space Kernel Virtualization (Hanzo Visor Architecture)',
|
||
'Kent: Cap’n Proto Serialization and RPC Protocol Specification',
|
||
],
|
||
lab: phrase('Lab 1: Provision an isolated multi-process execution jail with ZAP IPC socket bridge and evaluate inter-process latency.'),
|
||
},
|
||
{
|
||
week: phrase('Week 2'),
|
||
code: 'ENG 100.2',
|
||
title: phrase('Abstract Syntax Trees, Context Distillation & Dual-Index Retrieval'),
|
||
summary:
|
||
phrase('Train agents to navigate 100,000+ line repositories without exceeding token context boundaries. Extract AST symbol graphs using tree-sitter grammars and synthesize dual-index retrieval combining BM25 keyword matching with dense vector embeddings.'),
|
||
lectures: [
|
||
phrase('AST-based symbol extraction using tree-sitter across Python, TypeScript, Go, and Rust codebases'),
|
||
phrase('Dual-index code retrieval: combining BM25 exact keyword inverted indexes with dense vector embeddings'),
|
||
phrase('Context compression algorithms: distilling 50-file call chains into a 4k-token working memory scratchpad'),
|
||
phrase('Three-tier memory hierarchy: immediate scratchpad, thread history log, and long-term vector stores'),
|
||
],
|
||
readings: [
|
||
'Bruns et al.: Tree-sitter: An Incremental Parsing System for Programming Tools',
|
||
'Robertson et al.: The Probabilistic Relevance Framework: BM25 and Beyond',
|
||
],
|
||
lab: phrase('Lab 2: Implement an autonomous AST file scout that isolates defect locations across a 100k-line repo in < 3 tool hops.'),
|
||
},
|
||
{
|
||
week: phrase('Week 3'),
|
||
code: 'ENG 100.3',
|
||
title: phrase('Test-Driven Self-Healing & Finite-State Kai Verification'),
|
||
summary:
|
||
phrase('Close the autonomous execution feedback loop. Engineer agents that parse natural-language issue tickets, synthesize minimal reproducible failing tests, generate syntax-safe AST patches, and verify state transitions with Kai zero-token heuristics.'),
|
||
lectures: [
|
||
phrase('Automated reproduction synthesis: generating failing pytest / cargo test cases directly from GitHub issues'),
|
||
phrase('AST diff validation: guaranteeing generated patches introduce zero syntax regressions or unused symbols'),
|
||
phrase('Kai finite-state decision checkpoints: zero-token verification scoring, completion heuristics, and state branching'),
|
||
phrase('Micro-USD economic governance: enforcing hard pre-call cost ceilings and handling in-band budget refusals'),
|
||
],
|
||
readings: [
|
||
'Hanzo Research: Finite-State Decision Models: Zero-Token Control in Autonomous Software Construction',
|
||
'Monperrus: Automatic Software Repair: A Survey on Principles, Benchmarks, and Verification',
|
||
],
|
||
lab: phrase('Lab 3: Build an autonomous test runner that iterates on AST patches in an isolated pod until test exit code 0.'),
|
||
},
|
||
{
|
||
week: phrase('Week 4'),
|
||
code: 'ENG 100.4',
|
||
title: phrase('Coordinator-Worker Swarms & SWE-bench Capstone Defense'),
|
||
summary:
|
||
phrase('Deploy multi-agent coordinator-executor pairs to resolve authentic defects from Princeton SWE-bench Lite. Submit your agent harness to the automated Hanzo cleanroom grader pod for adversarial evaluation and credential issuance.'),
|
||
lectures: [
|
||
phrase('Coordinator-Worker topology: formal architectural decoupling of high-level planning from atomic file editing'),
|
||
phrase('Git branch management: automated branch isolation, semantic commit hygiene, and pull request generation'),
|
||
phrase('Distributed telemetry & audit trails: streaming full Cap’n Proto agent trajectories to ClickHouse O11y'),
|
||
phrase('W3C Verifiable Credential issuance: on-chain cryptographic proofs and dynamic GitHub SVG verification badges'),
|
||
],
|
||
readings: [
|
||
'Jimenez et al. (Princeton NLP): SWE-bench: Can Language Models Resolve Real-World GitHub Issues?',
|
||
'W3C Recommendation: Verifiable Credentials Data Model v2.0',
|
||
],
|
||
lab: phrase('Capstone Project: Autonomously resolve 5 SWE-bench benchmark issues with 100% test pass rate and < $0.50 spend per issue.'),
|
||
},
|
||
]
|
||
|
||
export default function AgenticCodingCoursePage() {
|
||
const { t } = useI18n()
|
||
return (
|
||
<Box minH="100vh" bg="$background" $platform-web={{ color: 'var(--foreground)' }}>
|
||
{/* ── Breadcrumb & Hero ── */}
|
||
<Hero
|
||
crumb={phrase('ENG 100: Agentic Coding Systems')}
|
||
trail={[{ label: phrase('University'), href: '/university' }, { label: 'ENG 100' }]}
|
||
preview={<Steps title="ENG 100" steps={SYLLABUS_WEEKS.map((w) => ({ title: w.title, body: w.summary }))} />}
|
||
badge={phrase('Course ENG 100 · Units: 4.0 · Credential: HACE')}
|
||
title={phrase('Agentic Coding Systems with Hanzo Dev & Zen 6')}
|
||
lede={
|
||
<>
|
||
{t('The definitive systems curriculum for autonomous software engineering. Learn to architect production-grade coding agents that inspect repositories, reproduce failing test cases, synthesize syntax-safe AST diffs, and self-heal in isolated Hanzo Visor sandboxes under strict micro-USD budget ceilings.')}
|
||
</>
|
||
}
|
||
>
|
||
<Action href={ENROLL_URL} fill>
|
||
{t('Enroll in ENG 100 — $199 USD (+$50 Credit Rebate)')}
|
||
</Action>
|
||
<Action href="/university/portal">
|
||
{t('Preview Enrolled Student Portal →')}
|
||
</Action>
|
||
<Action href="/university">
|
||
{t('← Catalog')}
|
||
</Action>
|
||
</Hero>
|
||
|
||
{/* ── Course Specification Matrix & Tuition Card ── */}
|
||
<Band pad="$10" measure={1152}>
|
||
<Grid columns={{ min: 340, max: 2 }} gap={24}>
|
||
{/* Academic Specifications Card */}
|
||
<Card p="$6" display="flex" flexDirection="column" justify="space-between">
|
||
<YStack gap="$5">
|
||
<XStack items="center" justify="space-between">
|
||
<Text fontSize="$1" fontFamily="$mono" color="var(--white-60)" letterSpacing={1}>
|
||
{t('Academic specifications')}
|
||
</Text>
|
||
<Chip px={10} py={2} fontSize="$1" fontFamily="$mono">
|
||
{t('ENG 100 · 4.0 UNITS')}
|
||
</Chip>
|
||
</XStack>
|
||
|
||
{/* Clean 2x2 Grid with individual padded cells to prevent text crowding */}
|
||
<Grid columns={{ min: 140, max: 2 }} gap={16}>
|
||
<YStack
|
||
gap="$1"
|
||
p="$3"
|
||
rounded="var(--radius-lg)"
|
||
bg="var(--pure-black)"
|
||
borderWidth={1}
|
||
borderColor="var(--border)"
|
||
>
|
||
<Text
|
||
fontFamily="$mono"
|
||
fontSize="$1"
|
||
color="var(--muted-foreground)"
|
||
letterSpacing={0.5}
|
||
>
|
||
{t('Duration')}
|
||
</Text>
|
||
<Text fontSize="$3" fontWeight="700" color="var(--white)">
|
||
{t('4 Weeks')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)">
|
||
{t('Self-Paced Intensive')}
|
||
</Text>
|
||
</YStack>
|
||
|
||
<YStack
|
||
gap="$1"
|
||
p="$3"
|
||
rounded="var(--radius-lg)"
|
||
bg="var(--pure-black)"
|
||
borderWidth={1}
|
||
borderColor="var(--border)"
|
||
>
|
||
<Text
|
||
fontFamily="$mono"
|
||
fontSize="$1"
|
||
color="var(--muted-foreground)"
|
||
letterSpacing={0.5}
|
||
>
|
||
{t('Estimated effort')}
|
||
</Text>
|
||
<Text fontSize="$3" fontWeight="700" color="var(--white)">
|
||
{t('{range} Hours', { range: '8–10' })}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)">
|
||
{t('Per Week (Lectures & Labs)')}
|
||
</Text>
|
||
</YStack>
|
||
|
||
<YStack
|
||
gap="$1"
|
||
p="$3"
|
||
rounded="var(--radius-lg)"
|
||
bg="var(--pure-black)"
|
||
borderWidth={1}
|
||
borderColor="var(--border)"
|
||
>
|
||
<Text
|
||
fontFamily="$mono"
|
||
fontSize="$1"
|
||
color="var(--muted-foreground)"
|
||
letterSpacing={0.5}
|
||
>
|
||
{t('Prerequisites')}
|
||
</Text>
|
||
<Text fontSize="$3" fontWeight="700" color="var(--white)">
|
||
{t('Python or Rust / Git')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)">
|
||
{t('Systems Programming Assumed')}
|
||
</Text>
|
||
</YStack>
|
||
|
||
<YStack
|
||
gap="$1"
|
||
p="$3"
|
||
rounded="var(--radius-lg)"
|
||
bg="var(--pure-black)"
|
||
borderWidth={1}
|
||
borderColor="var(--border)"
|
||
>
|
||
<Text
|
||
fontFamily="$mono"
|
||
fontSize="$1"
|
||
color="var(--muted-foreground)"
|
||
letterSpacing={0.5}
|
||
>
|
||
{t('Evaluation method')}
|
||
</Text>
|
||
<Text fontSize="$3" fontWeight="700" color="var(--white)">
|
||
{t('SWE-bench Grader')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)">
|
||
{t('Automated Cleanroom CI')}
|
||
</Text>
|
||
</YStack>
|
||
</Grid>
|
||
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t('All laboratory coursework executes in ephemeral Hanzo Dev sandboxes running Zen 6 local serving, tree-sitter AST parsers, and automated cleanroom CI test runners.')}
|
||
</Text>
|
||
</YStack>
|
||
</Card>
|
||
|
||
{/* Tuition & Cloud Fellowship Card */}
|
||
<Card
|
||
p="$6"
|
||
borderWidth={1}
|
||
borderColor="var(--border)"
|
||
bg="$panel"
|
||
display="flex"
|
||
flexDirection="column"
|
||
justify="space-between"
|
||
>
|
||
<YStack gap="$4">
|
||
<XStack items="center" justify="space-between">
|
||
<Text fontSize="$1" fontFamily="$mono" color="var(--muted-foreground)" letterSpacing={1}>
|
||
{t('Course tuition & fellowship')}
|
||
</Text>
|
||
<Chip px={10} py={2} fontSize="$1" fontFamily="$mono" fontWeight="700">
|
||
{t('Credential: HACE')}
|
||
</Chip>
|
||
</XStack>
|
||
|
||
{/* Tuition Price and Rebate Breakdown */}
|
||
<YStack
|
||
gap="$3"
|
||
p="$5"
|
||
bg="var(--pure-black)"
|
||
rounded="var(--radius-lg)"
|
||
borderWidth={1}
|
||
borderColor="var(--border)"
|
||
>
|
||
<XStack items="baseline" justify="space-between">
|
||
<YStack>
|
||
<Text fontSize="$1" fontFamily="$mono" color="var(--muted-foreground)">
|
||
{t('Total tuition')}
|
||
</Text>
|
||
<XStack items="baseline" gap="$1">
|
||
<Text fontSize="$6" fontWeight="700" color="var(--white)">
|
||
$199
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)">
|
||
USD
|
||
</Text>
|
||
</XStack>
|
||
</YStack>
|
||
<Chip px={10} py={4} fontSize="$1" fontFamily="$mono" color="var(--state-success)">
|
||
{t('+$50 CREDITS (25% REBATE)')}
|
||
</Chip>
|
||
</XStack>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$1">
|
||
{t('Guaranteed compute allocation deposited immediately on enrollment. Subsidizes Zen 6 inference and Hanzo Visor sandbox runtimes.')}
|
||
</Text>
|
||
</YStack>
|
||
|
||
{/* Primary Enrollment CTA Button */}
|
||
<YStack gap="$2">
|
||
<Action
|
||
href={ENROLL_URL}
|
||
fill
|
||
fontSize="$3"
|
||
$platform-web={{
|
||
textAlign: 'center',
|
||
padding: '16px 24px',
|
||
fontWeight: 700,
|
||
}}
|
||
>
|
||
{t('Enroll in ENG 100 — $199 USD →')}
|
||
</Action>
|
||
<Text
|
||
fontSize="$1"
|
||
color="var(--muted-foreground)"
|
||
$platform-web={{ textAlign: 'center' }}
|
||
>
|
||
{t('Have a coupon code or fellowship grant? Enter it during checkout.')}
|
||
</Text>
|
||
</YStack>
|
||
|
||
{/* Fellowship Rebate Highlight Box */}
|
||
<Card p="$4" bg="var(--pure-black)" borderWidth={1} borderColor="var(--border)">
|
||
<XStack items="center" justify="space-between" mb="$2">
|
||
<XStack items="center" gap="$2">
|
||
<Coins size={16} color="var(--state-success)" />
|
||
<Text fontSize="$1" fontFamily="$mono" color="var(--white)" fontWeight="700">
|
||
{t('Cloud Fellowship Credit Rebate:')}
|
||
</Text>
|
||
</XStack>
|
||
<Text fontSize="$2" fontFamily="$mono" fontWeight="700" color="var(--state-success)">
|
||
{t('+$50 USD (25%)')}
|
||
</Text>
|
||
</XStack>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t('25% of tuition (rounded up) is immediately deposited into your Hanzo Cloud compute balance on day one. Fully subsidizes your Hanzo Visor sandbox container leases and Zen 6 inference hours throughout the course.')}
|
||
</Text>
|
||
</Card>
|
||
|
||
{/* Direct Portal Preview Link */}
|
||
<XStack items="center" justify="center" gap="$2" pt="$1">
|
||
<Text fontSize="$1" color="var(--muted-foreground)">
|
||
{t('Already enrolled?')}
|
||
</Text>
|
||
<Text
|
||
render="a"
|
||
{...{ href: '/university/portal' }}
|
||
color="var(--white)"
|
||
fontSize="$1"
|
||
fontWeight="600"
|
||
textDecorationLine="underline"
|
||
>
|
||
{t('Enter Enrolled Student Portal →')}
|
||
</Text>
|
||
</XStack>
|
||
</YStack>
|
||
</Card>
|
||
</Grid>
|
||
</Band>
|
||
|
||
{/* ── Laboratory Cleanroom Infrastructure Section ── */}
|
||
<Band pad="$11" measure={1152} ground="var(--pure-black)">
|
||
<Head
|
||
eyebrow={phrase('Laboratory Infrastructure')}
|
||
title={t('The cleanroom execution environment')}
|
||
lede={t('Autonomous agents cannot be evaluated on unconstrained local machines. Every student is provisioned an isolated execution pod with strict kernel virtualization and zero-copy IPC.')}
|
||
/>
|
||
|
||
<Grid columns={{ min: 380, max: 2 }} gap={32} items="center">
|
||
{/* Black and White Editorial Photography */}
|
||
<Box
|
||
rounded="var(--radius-2xl)"
|
||
overflow="hidden"
|
||
borderWidth={1}
|
||
borderColor="var(--neutral-800)"
|
||
bg="var(--pure-black)"
|
||
>
|
||
<Box px="$4" py="$3" borderBottomWidth={1} borderColor="var(--border)">
|
||
<Text fontFamily="$mono" fontSize="$1" color="var(--white-60)">
|
||
{t('LABORATORY TERMINAL · ISOLATED RUNSC BOUNDARY')}
|
||
</Text>
|
||
</Box>
|
||
<Box
|
||
render="img"
|
||
{...{
|
||
src: '/university/developer-terminal.jpg',
|
||
alt: t('Close-up of developer hands on mechanical keyboard in front of terminal debugger and autonomous agent test harness'),
|
||
}}
|
||
width="100%"
|
||
display="block"
|
||
$platform-web={{ height: 'auto', objectFit: 'cover', filter: 'contrast(1.05)' }}
|
||
/>
|
||
<Box px="$4" py="$3" borderTopWidth={1} borderColor="var(--border)">
|
||
<Text fontSize="$1" color="var(--muted-foreground)">
|
||
{t('Real-time terminal feedback: students inspect agent AST diffs, Cap’n Proto trace records, and micro-USD budget meters.')}
|
||
</Text>
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* Infrastructure Specifications List */}
|
||
<YStack gap="$4" flex={1} minW={0}>
|
||
<Card p="$5" bg="$panel" width="100%" minW={0}>
|
||
<XStack items="flex-start" gap="$4">
|
||
<Box mt={2} shrink={0}><ShieldCheck size={20} color="var(--white)" /></Box>
|
||
<YStack gap="$2" flex={1} minW={0}>
|
||
<Text fontSize="$2" fontWeight="700" color="var(--white)">
|
||
{t('Hanzo Visor (`runsc`) User-Space Kernel Isolation')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$3" $platform-web={{ whiteSpace: 'normal', wordBreak: 'normal', overflowWrap: 'break-word' }}>
|
||
{t('Every agent turn runs inside an unprivileged sandbox pod with virtualized syscalls, seccomp filtering, and read-only host mounts.')}
|
||
</Text>
|
||
</YStack>
|
||
</XStack>
|
||
</Card>
|
||
|
||
<Card p="$5" bg="$panel" width="100%" minW={0}>
|
||
<XStack items="flex-start" gap="$4">
|
||
<Box mt={2} shrink={0}><Zap size={20} color="var(--white)" /></Box>
|
||
<YStack gap="$2" flex={1} minW={0}>
|
||
<Text fontSize="$2" fontWeight="700" color="var(--white)">
|
||
{t('Zero-Copy ZAP IPC Protocol')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$3" $platform-web={{ whiteSpace: 'normal', wordBreak: 'normal', overflowWrap: 'break-word' }}>
|
||
{t('Multi-agent communication traverses Cap’n Proto zero-copy serialization over Unix domain sockets, reducing message dispatch latency from 180ms to < 2ms.')}
|
||
</Text>
|
||
</YStack>
|
||
</XStack>
|
||
</Card>
|
||
|
||
<Card p="$5" bg="$panel" width="100%" minW={0}>
|
||
<XStack items="flex-start" gap="$4">
|
||
<Box mt={2} shrink={0}><Cpu size={20} color="var(--white)" /></Box>
|
||
<YStack gap="$2" flex={1} minW={0}>
|
||
<Text fontSize="$2" fontWeight="700" color="var(--white)">
|
||
{t('Zen 6 High-Throughput Model Serving')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$3" $platform-web={{ whiteSpace: 'normal', wordBreak: 'normal', overflowWrap: 'break-word' }}>
|
||
{t('Access quantized GGUF/AWQ builds of Zen 6 (27.3B) and Zen 6 Flash with continuous token streaming, structured JSON tool schemas, and KV-cache reuse.')}
|
||
</Text>
|
||
</YStack>
|
||
</XStack>
|
||
</Card>
|
||
|
||
<Card p="$5" bg="$panel" width="100%" minW={0}>
|
||
<XStack items="flex-start" gap="$4">
|
||
<Box mt={2} shrink={0}><Scale size={20} color="var(--white)" /></Box>
|
||
<YStack gap="$2" flex={1} minW={0}>
|
||
<Text fontSize="$2" fontWeight="700" color="var(--white)">
|
||
{t('Micro-USD Financial Governance')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$3" $platform-web={{ whiteSpace: 'normal', wordBreak: 'normal', overflowWrap: 'break-word' }}>
|
||
{t('Every test execution is bound to an exact integer micro-USD budget ceiling ($0.50 per defect). Exceeding the ceiling triggers in-band refusal and automatic grading failure.')}
|
||
</Text>
|
||
</YStack>
|
||
</XStack>
|
||
</Card>
|
||
</YStack>
|
||
</Grid>
|
||
</Band>
|
||
|
||
{/* ── 4-Week Comprehensive Academic Syllabus ── */}
|
||
<Band pad="$12" measure={1152}>
|
||
<Head
|
||
eyebrow={phrase('Academic Syllabus')}
|
||
title={t('Weekly Lecture & Laboratory Curriculum')}
|
||
lede={t('Modeled on elite graduate computer science systems curricula. Each week integrates foundational systems theory, primary literature readings, terminal laboratory assignments, and milestone grading.')}
|
||
/>
|
||
|
||
<YStack gap="$8">
|
||
{SYLLABUS_WEEKS.map((module, idx) => (
|
||
<Card
|
||
key={idx}
|
||
p="$6"
|
||
borderColor="var(--neutral-800)"
|
||
bg="$panel"
|
||
display="flex"
|
||
flexDirection="column"
|
||
gap="$5"
|
||
>
|
||
{/* Header: Module Code & Acronym */}
|
||
<XStack items="center" justify="space-between">
|
||
<XStack items="center" gap="$2">
|
||
<Chip px={10} py={3} fontSize="$1" fontFamily="$mono" fontWeight="700">
|
||
{module.code}
|
||
</Chip>
|
||
<Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
|
||
{t(module.week)}
|
||
</Text>
|
||
</XStack>
|
||
<Text fontFamily="$mono" fontSize="$1" color="var(--white-60)">
|
||
{t('Module {n} of {total}', { n: idx + 1, total: SYLLABUS_WEEKS.length })}
|
||
</Text>
|
||
</XStack>
|
||
|
||
{/* Title & Theoretical Summary */}
|
||
<YStack gap="$2">
|
||
<Text fontSize="$5" fontWeight="700" color="var(--white)">
|
||
{t(module.title)}
|
||
</Text>
|
||
<Text fontSize="$2" color="var(--muted-foreground)" lineHeight="$3">
|
||
{t(module.summary)}
|
||
</Text>
|
||
</YStack>
|
||
|
||
{/* Lecture Topics */}
|
||
<YStack gap="$2">
|
||
<Text fontSize="$1" fontFamily="$mono" color="var(--white-60)" letterSpacing={0.5}>
|
||
{t('LECTURE TOPICS & SYSTEMS PRINCIPLES:')}
|
||
</Text>
|
||
<YStack gap="$2" pl="$1">
|
||
{module.lectures.map((item, i) => (
|
||
<XStack key={i} items="flex-start" gap="$2">
|
||
<Box mt={4} shrink={0}><Check size={14} color="var(--white)" /></Box>
|
||
<Text fontSize="$1" color="var(--white-80)" lineHeight="$2">
|
||
{t(item)}
|
||
</Text>
|
||
</XStack>
|
||
))}
|
||
</YStack>
|
||
</YStack>
|
||
|
||
{/* Primary Literature Readings */}
|
||
<Box
|
||
p="$3"
|
||
rounded="var(--radius-lg)"
|
||
bg="var(--pure-black)"
|
||
borderWidth={1}
|
||
borderColor="var(--border)"
|
||
>
|
||
<Text fontSize="$1" fontFamily="$mono" color="var(--white-60)" mb="$1">
|
||
{t('REQUIRED READING:')}
|
||
</Text>
|
||
{module.readings.map((reading, rIdx) => (
|
||
<Text key={rIdx} fontSize="$1" color="var(--muted-foreground)" fontStyle="italic" lineHeight="$1">
|
||
• {reading}
|
||
</Text>
|
||
))}
|
||
</Box>
|
||
|
||
{/* Laboratory Assignment */}
|
||
<Card p="$4" bg="var(--pure-black)" borderColor="var(--neutral-800)">
|
||
<XStack items="flex-start" gap="$3">
|
||
<Box mt={2} shrink={0}><Terminal size={16} color="var(--white)" /></Box>
|
||
<YStack gap="$1" flex={1} minW={0}>
|
||
<Text fontSize="$1" fontFamily="$mono" color="var(--white)" fontWeight="700">
|
||
{t('GRADED LABORATORY ASSIGNMENT:')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t(module.lab)}
|
||
</Text>
|
||
</YStack>
|
||
</XStack>
|
||
</Card>
|
||
</Card>
|
||
))}
|
||
</YStack>
|
||
</Band>
|
||
|
||
{/* ── Academic Grading Rubric & Examination Policy ── */}
|
||
<Band pad="$11" measure={1080} ground="var(--pure-black)">
|
||
<Head
|
||
eyebrow={phrase('Evaluation Standards')}
|
||
title={t('Grading Rubric & Automated Evaluation Policy')}
|
||
lede={t('To earn the Hanzo Certified Agentic Coding Engineer (HACE) credential, candidates must satisfy rigorous machine-evaluated benchmarks. All grading is conducted via synthetic fault injection in isolated cleanrooms.')}
|
||
/>
|
||
|
||
<Grid columns={{ min: 240, max: 4 }} gap={16} mb="$6">
|
||
<Card p="$5" bg="$panel">
|
||
<YStack gap="$2">
|
||
<Text fontSize="$5" fontWeight="700" color="var(--white)">
|
||
40%
|
||
</Text>
|
||
<Text fontSize="$2" fontWeight="700" color="var(--white)">
|
||
{t('Test Suite Pass Rate')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t('100% of pre-existing unit test suites and student-synthesized reproduction tests must pass with exit code 0.')}
|
||
</Text>
|
||
</YStack>
|
||
</Card>
|
||
|
||
<Card p="$5" bg="$panel">
|
||
<YStack gap="$2">
|
||
<Text fontSize="$5" fontWeight="700" color="var(--white)">
|
||
20%
|
||
</Text>
|
||
<Text fontSize="$2" fontWeight="700" color="var(--white)">
|
||
{t('AST & Type Cleanliness')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t('Patches must pass strict AST verification, linters, and typecheckers without introducing formatting errors or dead imports.')}
|
||
</Text>
|
||
</YStack>
|
||
</Card>
|
||
|
||
<Card p="$5" bg="$panel">
|
||
<YStack gap="$2">
|
||
<Text fontSize="$5" fontWeight="700" color="var(--white)">
|
||
20%
|
||
</Text>
|
||
<Text fontSize="$2" fontWeight="700" color="var(--white)">
|
||
{t('Micro-USD Budget Ceilings')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t('The agent must resolve each defect within a strict 500,000 micro-USD ($0.50) ceiling. Exceeding the ceiling triggers instant failure.')}
|
||
</Text>
|
||
</YStack>
|
||
</Card>
|
||
|
||
<Card p="$5" bg="$panel">
|
||
<YStack gap="$2">
|
||
<Text fontSize="$5" fontWeight="700" color="var(--white)">
|
||
20%
|
||
</Text>
|
||
<Text fontSize="$2" fontWeight="700" color="var(--white)">
|
||
{t('Telemetry & Audit Fidelity')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t('Full Cap’n Proto trace records, tool invocation timestamps, and Kai state probabilities must be emitted to ClickHouse O11y.')}
|
||
</Text>
|
||
</YStack>
|
||
</Card>
|
||
</Grid>
|
||
|
||
{/* Academic Cleanroom Testing Standards Card */}
|
||
<Card p="$6" bg="var(--pure-black)" borderColor="var(--neutral-800)">
|
||
<XStack items="center" gap="$3" mb="$3">
|
||
<Scale size={20} color="var(--white)" />
|
||
<Text fontSize="$2" fontWeight="700" color="var(--white)">
|
||
{t('The Cleanroom Fault-Injection Policy')}
|
||
</Text>
|
||
</XStack>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$3">
|
||
{t('To prevent students from hardcoding solutions to known SWE-bench issue IDs, the Hanzo Grader Pod executes synthetic fault injections: renaming test assertions, injecting subtle dependency regressions, and scrambling directory paths during test execution. Passing requires a truly generalized autonomous reasoning and repair harness.')}
|
||
</Text>
|
||
</Card>
|
||
</Band>
|
||
|
||
{/* ── Official W3C Credential Specification ── */}
|
||
<Band pad="$11" measure={1080}>
|
||
<Head
|
||
eyebrow={phrase('Credential Verification')}
|
||
title={t('The HACE Professional Credential')}
|
||
lede={t('Unlike static PDF diplomas, the Hanzo Certified Agentic Coding Engineer credential is an immutable, machine-verifiable cryptographic proof.')}
|
||
/>
|
||
|
||
<Grid columns={{ min: 320, max: 3 }} gap={20}>
|
||
<Card p="$6">
|
||
<YStack gap="$3">
|
||
<ShieldCheck size={22} color="var(--white)" />
|
||
<Text fontSize="$3" fontWeight="700" color="var(--white)">
|
||
{t('W3C Verifiable Credential')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t('Issued under the W3C Verifiable Credentials Data Model v2.0 standard, cryptographically signed by the Hanzo Trust Root (`did:hanzo:trust`).')}
|
||
</Text>
|
||
</YStack>
|
||
</Card>
|
||
|
||
<Card p="$6">
|
||
<YStack gap="$3">
|
||
<Binary size={22} color="var(--white)" />
|
||
<Text fontSize="$3" fontWeight="700" color="var(--white)">
|
||
{t('Immutable On-Chain Proof')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t('Every issued certificate is permanently anchored with an on-chain cryptographic commitment, preventing credential forgery or revocation tampering.')}
|
||
</Text>
|
||
</YStack>
|
||
</Card>
|
||
|
||
<Card p="$6">
|
||
<YStack gap="$3">
|
||
<GitBranch size={22} color="var(--white)" />
|
||
<Text fontSize="$3" fontWeight="700" color="var(--white)">
|
||
{t('Dynamic GitHub SVG Badges')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t('Embed a real-time verified SVG badge into your GitHub profile and READMEs. Click-throughs link directly to your passing CI benchmark runs.')}
|
||
</Text>
|
||
</YStack>
|
||
</Card>
|
||
</Grid>
|
||
</Band>
|
||
|
||
{/* ── Instruction Team & Office Hours ── */}
|
||
<Band pad="$11" measure={960} ground="var(--pure-black)">
|
||
<Head
|
||
eyebrow={phrase('Instruction & Support')}
|
||
title={t('Faculty, Preceptors & Grader Pods')}
|
||
lede={t('Continuous asynchronous grading backed by live developer preceptorials and active technical office hours.')}
|
||
/>
|
||
|
||
<Grid columns={{ min: 280, max: 3 }} gap={20}>
|
||
<Card p="$5" bg="$panel">
|
||
<YStack gap="$2">
|
||
<GraduationCap size={20} color="var(--white)" />
|
||
<Text fontSize="$2" fontWeight="700" color="var(--white)">
|
||
{t('Systems Faculty')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t('Curriculum designed by the core Hanzo AI systems architects who build Zen 6, Enso, and the ZAP RPC runtime.')}
|
||
</Text>
|
||
</YStack>
|
||
</Card>
|
||
|
||
<Card p="$5" bg="$panel">
|
||
<YStack gap="$2">
|
||
<Terminal size={20} color="var(--white)" />
|
||
<Text fontSize="$2" fontWeight="700" color="var(--white)">
|
||
{t('Automated Grader Fleet')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t('`hanzo-grader` pods run 24/7. Submit your repository at any hour and receive comprehensive test traces within 90 seconds.')}
|
||
</Text>
|
||
</YStack>
|
||
</Card>
|
||
|
||
<Card p="$5" bg="$panel">
|
||
<YStack gap="$2">
|
||
<BookOpen size={20} color="var(--white)" />
|
||
<Text fontSize="$2" fontWeight="700" color="var(--white)">
|
||
{t('Developer Preceptorials')}
|
||
</Text>
|
||
<Text fontSize="$1" color="var(--muted-foreground)" lineHeight="$2">
|
||
{t('Join private Discord channels and weekly architecture reviews with fellow systems engineers and teaching assistants.')}
|
||
</Text>
|
||
</YStack>
|
||
</Card>
|
||
</Grid>
|
||
</Band>
|
||
|
||
{/* ── Final Enrollment Call to Action ── */}
|
||
<Band pad="$12" measure={880}>
|
||
<Card
|
||
p="$8"
|
||
bg="$panel"
|
||
borderColor="var(--white-20)"
|
||
$platform-web={{ textAlign: 'center' }}
|
||
>
|
||
<Eyebrow mb="$2">{t('Enrollment Open · Term 2026')}</Eyebrow>
|
||
<Title quiet={false} mb="$3">
|
||
{t('Enroll in ENG 100: Agentic Coding Systems')}
|
||
</Title>
|
||
<Lede mx="auto" maxW={640} mb="$6">
|
||
{t('Join the elite systems engineers mastering autonomous code generation. Claim your $50 usage credit rebate immediately upon registration to fund all laboratory sandboxes.')}
|
||
</Lede>
|
||
|
||
<XStack justify="center" gap="$4" flexWrap="wrap">
|
||
<Action href={ENROLL_URL} fill>
|
||
{t('Enroll Now — $199 USD (+$50 Credit Rebate)')}
|
||
</Action>
|
||
<Action href="/university/portal">
|
||
{t('Preview Student Portal →')}
|
||
</Action>
|
||
<Action href="/university">
|
||
{t('Explore All 6 University Tracks')}
|
||
</Action>
|
||
</XStack>
|
||
</Card>
|
||
</Band>
|
||
</Box>
|
||
)
|
||
}
|