---
id: portfolio.ds.project-landing-page
name: "Project Landing Page"
type: template
status: active
relations: [{"type":"composes","target":"portfolio.ds.agent-ready-project-brief"},{"type":"composes","target":"portfolio.ds.project-about"},{"type":"composes","target":"portfolio.ds.project-header"},{"type":"composes","target":"portfolio.ds.related-projects"},{"type":"related_to","target":"portfolio.ds.project-changelog-page"}]
sources: ["apps/portfolio-site/src/design-system/docs/project-landing-page.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/AgentReadyProjectBrief.astro","packages/design-system/src/components/ProjectAbout.astro","packages/design-system/src/components/ProjectHeader.astro","packages/design-system/src/components/ProjectLandingPage.astro","packages/design-system/src/components/RelatedProjects.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/project-landing-page.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/project-landing-page.astro"]
---
# Project Landing Page

## Purpose
Concise project landing page designed for direct human scanning and AI-agent retrieval.

## Hook

Use when a visitor or agent opens one concrete project route.

## Experience Principle

The landing page is an interface to project context, not a shortened article.

- A person should identify the project, scan its six essential facts, and choose a next action within seconds.
- An AI agent should retrieve the same facts without interpreting layout, animation, or marketing copy.
- The visible brief and machine-readable representations must derive from the same content object.
- Detailed narrative is optional reading on `Project Story Page`; it is not required to understand the landing page.

## Contract
- Composes `Project Header`, `Project About`, `Agent Ready Project Brief`, and `Related Projects` in that order.
- Uses the header for title, summary, and project visual.
- Uses `Project About` for one short statement about what works now, the update date, version, and the primary access action.
- Uses the brief for Problem, System, Input, Output, Evidence, and Status.
- Keeps every brief field to one direct statement.
- Shows Open prototype in `Project About` when the project has `prototype_url`; otherwise shows Request a demo there as the primary project action.
- Shows the localized secondary changelog action beside the primary action only when `changelogHref` exists.
- Always shows Contact me as a separate action.
- Opens Request a demo and Contact me as prepared email drafts with project-specific subject and body copy.
- Links detailed narrative to the dedicated `Project Story Page`.
- Exposes equivalent project context through visible semantic HTML, clipboard Markdown, `/context.md`, and JSON-LD.
- Does not compose overview cards, process diagrams, decisions, examples, proof counters, outcomes, or a second CTA block.
- Composes `Related Projects` last when related items exist.
- Uses shared public `title` and `summary`; cards and detail headers do not diverge.
- Parent templates use all child components as-is.
- Receives localized child-component copy through `labels` and the locale-aware all-projects destination through `projectsHref`.

## Canonical Content Contract

| Field | Role |
| --- | --- |
| `title` | One public project name shared by cards, landing, and story. |
| `summary` | One public sentence shared by cards and headers. |
| `current_state.version` | Compact version metadata in `Project About`. |
| `current_state.last_updated` | Compact update metadata in `Project About`. |
| `agent_brief` | Canonical Problem, System, Input, Output, Evidence, and Status values. |
| `prototype_url` | Optional public prototype target; absence enables Request a demo. |
| `changelog` | Optional non-empty latest-first release history; presence enables the changelog route and secondary action. |

## Legacy Exclusions

The former overview, process, decision, example, proof, outcome, current-state, action, and detail-card experiments were removed from the active Design System after the agent-ready landing replaced them. Their history remains in the project log; do not restore them without an explicit architecture change from the owner.

## Use
- Rendering `/projects/[slug]/`.

## Do Not Use
- Rendering the full project narrative; use `Project Story Page`.
- Rendering notes, articles, or generic project pages.

## Machine-Readable Contract

- `/projects/[slug]/context.md` contains the brief, optional changelog URL, and full story.
- The HTML head links the Markdown representation with `rel="alternate"`.
- JSON-LD exposes the brief fields as `PropertyValue` records.

## Code Paths

- `packages/design-system/src/components/ProjectLandingPage.astro`
- `packages/design-system/src/components/ProjectHeader.astro`
- `packages/design-system/src/components/ProjectAbout.astro`
- `packages/design-system/src/components/AgentReadyProjectBrief.astro`
- `packages/design-system/src/components/RelatedProjects.astro`
- `apps/portfolio-site/src/pages/projects/[slug].astro`
- `apps/portfolio-site/src/pages/projects/[slug]/context.md.ts`

## Accessibility

Preserve applicable accessibility behavior of the implementation and verify changes in actual usage.

## Verification

- Confirm every source path in frontmatter resolves to current implementation or documentation.
- Run `scripts/design-system-graph --check --no-write`.
- Verify actual usage and documented Preview against the enabled package profiles before completion.