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>
126 lines
4.8 KiB
Markdown
126 lines
4.8 KiB
Markdown
# 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.
|