diff --git a/docs/superpowers/specs/2026-06-29-pakete-vpn-design.md b/docs/superpowers/specs/2026-06-29-pakete-vpn-design.md new file mode 100644 index 0000000..52f6fda --- /dev/null +++ b/docs/superpowers/specs/2026-06-29-pakete-vpn-design.md @@ -0,0 +1,80 @@ +# Design: Pakete & Preise — Service-Übersicht + Zero-Trust-VPN + +**Datum:** 2026-06-29 +**Status:** Approved + +## Ziel + +Die `/pakete`-Seite wird zur Service-Übersicht mit klickbaren Kacheln umgebaut. Der bestehende Nextcloud + Paperless-Inhalt zieht auf `/pakete/nextcloud` um. Neu hinzu kommt `/pakete/vpn` mit dem Zero-Trust-VPN-Angebot aus dem MBO-Netbird-PDF. + +## Architektur + +``` +app/pakete/ + page.tsx ← neue Übersichtsseite mit 2 Service-Kacheln + nextcloud/ + page.tsx ← bestehender Inhalt verschoben + vpn/ + page.tsx ← neue VPN-Detailseite +``` + +Alle drei Seiten sind React Server Components (kein `"use client"` nötig). + +## 1. `/pakete/page.tsx` — Übersichtsseite + +**Aufbau:** +- Header (identisch mit bestehender Seite) +- Hero: „Pakete & Preise" + kurze Intro-Zeile +- 2-Spalten-Grid mit kompakten Kacheln (Icon + Titel + Kurzbeschreibung + Link-Pfeil) + - **Nextcloud + Paperless** — Cloud-Icon, Beschreibung: „Eigene Cloud & digitales Dokumentenarchiv auf Ihrem Server", Link → `/pakete/nextcloud` + - **Zero-Trust-VPN** — Schloss-Icon, Beschreibung: „Sicherer Fernzugriff für alle Mitarbeiter. Managed Netbird mit WireGuard — Server in Deutschland", Link → `/pakete/vpn` +- Kleiner CTA unten: „Kostenloses Erstgespräch anfragen" → `/#contact` + +**Style:** Gleicher Seitenchrome wie bisherige Pakete-Seite (`bg-[#f0f4f8] dark:bg-[#18212f]`). Kacheln sind anklickbare ``-Elemente mit Hover-Effekt (`hover:border-orange-500/50`). + +## 2. `/pakete/nextcloud/page.tsx` — Nextcloud-Detailseite + +Identischer Inhalt aus dem aktuellen `/pakete/page.tsx`. Einzige Änderung: „← Zurück"-Link zeigt auf `/pakete` statt `/`. + +Metadata: Titel und Description unverändert. + +## 3. `/pakete/vpn/page.tsx` — VPN-Detailseite + +Gleicher Seitenchrome wie Nextcloud-Seite. Inhalt aus `docs/MBO-Netbird.pdf`. + +**Aufbau:** + +1. **Hero** + - Label: `NEU: ZERO-TRUST-VPN` + - H1: „Ihre Mitarbeiter. Überall. Sicher verbunden." + - Subtext: „Kein offener Port. Kein VPN-Konzentrator. Keine Fritzbox-Bastelei. Von uns eingerichtet, betrieben und überwacht." + +2. **Was ist das? (2 Info-Karten)** + - *Zero Trust* — Jeder Mitarbeiter sieht nur, was er darf. Granulare Rechteverwaltung statt „einmal drin = alles sehen". + - *WireGuard* — Modernes VPN-Protokoll: schneller und sicherer als klassisches IPSec/OpenVPN. Militärgrade-Verschlüsselung. + +3. **Pakete (3 Preiskarten)** + + | Paket | Monatlich | Einrichtung | Nutzer | Geräte | Highlight | + |---|---|---|---|---|---| + | Starter | 89 €/Monat | 490 € einmalig | bis 5 | bis 15 | — | + | Business | 149 €/Monat | 790 € einmalig | bis 20 | bis 50 | ⭐ Empfohlen | + | Professional | 249 €/Monat | 1.290 € einmalig | bis 50 | bis 150 | — | + + **Starter umfasst:** Einrichtung & Client-Rollout, Sicherer Fernzugriff, Monitoring & Updates, E-Mail-Support + **Business umfasst:** Alles aus Starter, Mehrere Standorte, Zugriffs-Protokollierung, Telefon-Support + **Professional umfasst:** Alles aus Business, SLA 4h Reaktionszeit, NIS2-Dokumentation, Hochverfügbarkeit + +4. **Hinweis-Box** — „Alle Preise zzgl. gesetzl. MwSt. Individuelle Angebote auf Anfrage." + +5. **CTA** — „Kostenloses Erstgespräch anfragen" → `/#contact` + +**Metadata:** +- Title: `Zero-Trust-VPN | MBO-Tech-IT` +- Description: `Managed Netbird VPN mit WireGuard für Ihr Unternehmen — sicherer Fernzugriff, DSGVO-konform, Server in Deutschland. Feste Monatspauschale ab 89 €.` + +## Nicht im Scope + +- Keine Änderung an der Startseite (`app/page.tsx`) +- Kein Umbau der Wartungsplan-Sektion (bleibt bei Nextcloud) +- Kein dynamisches CMS für die neuen Seiten