Christian ManivongandClaude Opus 5.5
f70fec496a
The site felt old, unfocused and bloated: 11 pages, a features page of 171 bullets, a homepage of 830 words in card grids around seven mockup-style screenshots, and no single thing it wanted a visitor to understand. - Message: control instead of drift. Audience: IT departments in small and mid-sized companies. Goal: buy a licence — netOrk itself is free, the licence adds vulnerability data and image updates. - Home is under 400 words: the drift comparison of a real access point, three steps, the hardware it runs on, vulnerabilities with a licence, what else is in the box, one closing band. Features, Drivers and Roadmap are gone; their URLs redirect (router and nginx 301). - New Pricing page: the free core, Starter / Pro / Enterprise on request with the plan differences from the licence server, four questions; buttons go to the licence portal. The unit-less KB request limit is left out. - Persona pages are one template; NIS2 and Plugins are cut to half or less. Impressum and Datenschutz exist as marked placeholders; the unsupported "MIT licence" claim is gone from the footer. - Look: light paper and ink, the dark product on a stage, Inter self-hosted, split sections and ruled lists instead of cards. Four real, cropped screenshots replace eight full-window ones. - Language follows the browser until someone chooses; <html lang> is set. Scroll-to-top on navigation, a catch-all route, no dead /docs/architecture. - CLAUDE.md, DESIGN.md, PAGES.md and PRODUCT.md describe the new rules. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
4.8 KiB
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:
- What is this? — Control instead of drift: define the desired state once, netOrk finds every deviation and puts it back.
- Is it for me? — IT departments in small and mid-sized companies with mixed hardware (service providers and IT support are secondary).
- 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
paperwithink; the only dark surfaces are real netOrk screenshots and code, on thenightstage. - 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-colorsonly — 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.