# 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?
2. Is it for me?
3. How do I try it?

Everything on the site should serve those three questions.

---

## 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)

- **Dark theme only.** Background `bg-slate-950`. Cards `bg-slate-900`.
- **Accent color:** `sky-500` / `sky-600` for CTAs, links, highlights.
- **No light mode toggle.** Ever.
- Font stack: system default (Tailwind sans). No Google Fonts.
- All interactive elements use `transition-colors` — no layout shifts.
- Screenshots/mockups of the actual app use a `border border-slate-700 rounded-xl
  overflow-hidden` wrapper to frame them against the dark background.

---

## 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 engineers, not executives.
- No marketing fluff ("revolutionize", "empower", "seamless").
- Show, don't tell — a screenshot or code block beats three sentences of prose.
- German is fine for internal docs; the website copy is in **English**.