Christian ManivongandClaude Sonnet 4.6
00c483c2a2
Establishes the documentation foundation for the netOrk website: - CLAUDE.md — tech stack (React 18/Vite/Tailwind), design rules, tone of voice, and file structure guidance for the implementation instance - docs/PRODUCT.md — one-liner, elevator pitch, target audience, value props, full feature list, driver table, architecture summary - docs/DESIGN.md — exact Tailwind classes for colors, typography, spacing, and all reusable component patterns (cards, buttons, screenshot frames, badges, nav) lifted directly from the product UI - docs/PAGES.md — page-by-page content plan with route, purpose, section structure, and draft copy for every page No code yet — that follows in a separate instance. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
94 lines
2.8 KiB
Markdown
94 lines
2.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?
|
|
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**.
|