# CLAUDE.md — netork-website

This is the official marketing website for **netOrk**, a self-hosted Network
Orchestration Platform. The goal is a fast, visually striking single-page (or
multi-page) site that communicates what netOrk does, who it is for, and how to
get started.

---

## Project Purpose

Potential users land here and need to answer three questions in under 10 seconds:
1. What is this? — Control instead of drift: define the desired state once,
   netOrk finds every deviation and puts it back.
2. Is it for me? — IT departments in small and mid-sized companies with mixed
   hardware (service providers and IT support are secondary).
3. What does it cost? — netOrk is free; a licence adds vulnerability data and
   updates (`/pricing`).

Everything on the site should serve those three questions.

---

## Infrastruktur ändert man woanders — und vorher

Diese Anwendung läuft auf einer Infrastruktur, die sie sich mit anderen Projekten teilt:
Netz, Datenbankcluster, öffentlicher Eingang und Backup gehören keinem Projekt allein.
Dokumentiert ist sie in **`git.netork.io/christianmanivong/infrastructure`**, und dort
steht in `CLAUDE.md` auch die verbindliche Regel.

**Kurz: erst dort dokumentieren, ausdrücklich genehmigen lassen, dann ändern.** Nicht
umgekehrt, und „ja mach mal" zu einer früheren Frage deckt die nächste Änderung nicht mit
ab.

Betroffen ist alles, was über dieses Repo hinausreicht — Hosts, Netze, Firewall-Regeln,
der Patroni-Cluster samt `pg_hba` und DCS-Parametern, pgBackRest, BunkerWeb-Hosts, DNS,
CI-Runner, alles, was eine Anwendung auf den geteilten Datenbankcluster umzieht.
**Nicht** betroffen: Anwendungscode, Abhängigkeiten und Migrationen innerhalb der eigenen
Datenbank.

Der Grund für die Reihenfolge ist nicht Bürokratie. Die meisten Zwischenfälle dort waren
nicht falsche Werte, sondern richtige Werte in der falschen Reihenfolge — und das fällt
beim Aufschreiben auf, nicht beim Tippen. Im Zweifel dorthin.

## Content & Design Source of Truth

All product content (features, copy, page structure) is in `docs/`:

| File | Purpose |
|---|---|
| `docs/PRODUCT.md` | Product description, target audience, value propositions, feature list |
| `docs/DESIGN.md` | Visual identity — exact Tailwind colors, typography, component patterns |
| `docs/PAGES.md` | Page-by-page content plan with section headings and copy drafts |

**Read these files before writing any code or copy.** They are the source of
truth. The design file in particular defines exact class names — use them.

---

## Tech Stack

Mirror the netOrk UI exactly so the design language carries over:

| Layer | Choice |
|---|---|
| Framework | React 18 + TypeScript |
| Build | Vite |
| Styling | Tailwind CSS v3 |
| Routing | React Router v6 (or static if single page) |
| Icons | Heroicons (inline SVG, same as netOrk UI) |
| Animation | Tailwind transitions only — no GSAP, Framer, etc. |

**No external component libraries.** Build everything from Tailwind primitives,
exactly as netOrk's `ui/src/components/ui.tsx` does.

---

## Design Rules (summary — full detail in docs/DESIGN.md)

- **Light pages, dark product.** Pages are `paper` with `ink`; the only dark
  surfaces are real netOrk screenshots and code, on the `night` stage.
- One accent, `accent` (sky-700), for links, eyebrows and focus. Buttons are ink.
- Font: Inter Variable, self-hosted via `@fontsource-variable/inter`. No Google
  Fonts, no request to any other origin.
- Layout from `src/components/ui.tsx`: split sections, ruled lists, numbered
  steps, bands. No card grids, no icon tiles, no centred text blocks.
- Motion: `transition-colors` only — no layout shifts.
- **Screenshots are real.** Taken from the anonymised demo copy with
  `scripts/screenshots/capture.py`, cropped to what the text talks about, at most
  four on the site. No mockups, no edited data, no clicks that fake a state.
- **Less text.** Word budgets per page are in docs/PAGES.md and checked by
  `scripts/check/site.py`.

---

## File Naming

```
netork-website/
├── CLAUDE.md               ← this file
├── docs/
│   ├── PRODUCT.md
│   ├── DESIGN.md
│   └── PAGES.md
├── public/
│   └── screenshots/        ← actual app screenshots go here
├── src/
│   ├── components/
│   ├── pages/
│   └── main.tsx
├── index.html
├── package.json
└── tailwind.config.js
```

---

## Tone of Voice

- Direct and technical — audience is the admins of an IT department, not executives.
- One message: control instead of drift. Everything else supports it.
- No marketing fluff ("revolutionize", "empower", "seamless").
- Show, don't tell — a real screenshot beats three sentences of prose.
- Website copy exists in **English and German** (German addresses readers with
  "ihr"); the language follows the browser until the visitor chooses.