diff --git a/docs/PAGES.md b/docs/PAGES.md
index 996a65e..9f69854 100644
--- a/docs/PAGES.md
+++ b/docs/PAGES.md
@@ -399,25 +399,67 @@ expanded into a readable overview with the architecture diagram (ASCII or SVG).
---
+## `/for/*` — Persona Pages
+
+**Purpose:** Answer "is this for me?" from the perspective of a specific
+buyer/user, instead of one generic homepage pitch. Reachable via the "Für
+wen" / "Who it's for" nav dropdown.
+
+**Shared layout:** hero (icon + heading + sub) → "Your day today" pain-point
+cards (persona-specific, concrete workflow friction) → feature-callout cards
+(only shipped capabilities, cited from `docs/PRODUCT.md`) → CTA block linking
+to `/docs/getting-started`. Same card/section classes as `/plugins`.
+
+- **`/for/it-department`** — core admin/engineer audience. Pain points:
+ per-vendor admin UIs, no single inventory view, undocumented config
+ changes, manual SSH just to check state. Features: Device Management,
+ config drift + one-click fix, Git-backed config history, Ansible
+ automation, VM Provisioning, Dashboards. Plus a short supported-drivers
+ strip linking to `/drivers`.
+- **`/for/it-support`** — day-to-day operators, less config depth. Pain
+ points: "is it up right now?", repeated manual reboots, no change record,
+ full admin access for one ticket. Features: warning system + dashboard
+ widget, one-click Ack, Wake-on-LAN, scheduled reboots/updates, filterable
+ audit log + export, roles scoped below engineer level.
+- **`/for/msp`** — managed service providers, strongest standalone buying
+ case. Pain points: unreachable client sites, no cross-client view, proving
+ what was done, client data in someone else's cloud. Features: Satellite
+ Deployments, automatic routing around unreachable sites (with the honest
+ caveat that SNMP metrics + WebSSH still need direct reach), audit trail as
+ client-facing evidence, per-technician custom roles (**not** phrased as
+ per-site RBAC — netOrk's roles are global permission sets, not
+ site-scoped), self-hosted/no per-seat SaaS.
+
+The existing `/nis2` page (security/compliance persona) is linked from the
+same dropdown rather than duplicated.
+
+---
+
## Global Layout
### Navigation (all pages)
```
-[ netOrk ] Features Drivers Docs ▾ Plugins [ Get started ]
+[ netOrk ] Features Drivers Docs ▾ Für wen ▾ Plugins Roadmap [ Get started ]
```
-`Docs` is a dropdown: Getting Started / Architecture
+`Docs ▾`: Getting Started / Architecture / NIS2 Compliance / Glossary
+`Für wen ▾`: IT Department / IT Support / MSP / NIS2 Compliance (reuses the Docs dropdown's NIS2 link/label)
### Footer
```
netOrk — self-hosted network orchestration
-Links: Resources: Legal:
-Features Getting Started MIT License
-Drivers Architecture Privacy (none collected)
+Links: Resources: Legal:
+Features Getting Started MIT License
+Drivers Architecture Privacy (none collected)
Plugins Changelog
+Roadmap NIS2
+ Glossary
+ For IT Departments
+ For IT Support
+ For MSPs
```
Footer background: `bg-slate-900 border-t border-slate-800`
diff --git a/src/App.tsx b/src/App.tsx
index 30fbabf..3aeac62 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,9 @@ import Roadmap from './pages/Roadmap'
import Nis2 from './pages/Nis2'
import Plugins from './pages/Plugins'
import Glossary from './pages/Glossary'
+import ForItDepartment from './pages/ForItDepartment'
+import ForItSupport from './pages/ForItSupport'
+import ForMsp from './pages/ForMsp'
export default function App() {
return (
@@ -25,6 +28,9 @@ export default function App() {
} />
} />
} />
+ } />
+ } />
+ } />
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 3b5659b..2577673 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -36,6 +36,9 @@ export default function Footer() {
{t.footer.changelog}
{t.footer.nis2}
{t.footer.glossary}
+ {t.footer.forItDepartment}
+ {t.footer.forItSupport}
+ {t.footer.forMsp}
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 25e8968..1fec9d6 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,19 +1,29 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, type ReactNode } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { ChevronDownIcon } from '@heroicons/react/24/outline'
import { useLang } from '../context/LangContext'
import type { Lang } from '../i18n/translations'
-export default function Nav() {
- const [docsOpen, setDocsOpen] = useState(false)
+const dropdownItemCls =
+ 'block px-4 py-2 text-sm text-slate-400 hover:text-slate-100 hover:bg-slate-800 transition-colors'
+
+function NavDropdown({
+ label,
+ active,
+ children,
+}: {
+ label: string
+ active: boolean
+ children: ReactNode
+}) {
+ const [open, setOpen] = useState(false)
const location = useLocation()
- const dropdownRef = useRef
(null)
- const { lang, setLang, t } = useLang()
+ const ref = useRef(null)
useEffect(() => {
function handleClickOutside(e: MouseEvent) {
- if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
- setDocsOpen(false)
+ if (ref.current && !ref.current.contains(e.target as Node)) {
+ setOpen(false)
}
}
document.addEventListener('mousedown', handleClickOutside)
@@ -21,9 +31,33 @@ export default function Nav() {
}, [])
useEffect(() => {
- setDocsOpen(false)
+ setOpen(false)
}, [location.pathname])
+ return (
+
+
+ {open && (
+
+ {children}
+
+ )}
+
+ )
+}
+
+export default function Nav() {
+ const location = useLocation()
+ const { lang, setLang, t } = useLang()
+
const linkCls = (path: string) =>
`text-sm transition-colors ${
location.pathname === path
@@ -33,6 +67,7 @@ export default function Nav() {
const isDocsActive =
location.pathname.startsWith('/docs') || location.pathname === '/nis2' || location.pathname === '/glossary'
+ const isForActive = location.pathname.startsWith('/for/') || location.pathname === '/nis2'
return (