From 0889a86405564c3de3cae3fbc158862077f4cd8f Mon Sep 17 00:00:00 2001 From: MBO-Tech-IT Date: Mon, 29 Jun 2026 16:06:10 +0200 Subject: [PATCH] docs: add implementation plan for Pakete overview + VPN page --- .../plans/2026-06-29-pakete-vpn.md | 571 ++++++++++++++++++ 1 file changed, 571 insertions(+) create mode 100644 docs/superpowers/plans/2026-06-29-pakete-vpn.md diff --git a/docs/superpowers/plans/2026-06-29-pakete-vpn.md b/docs/superpowers/plans/2026-06-29-pakete-vpn.md new file mode 100644 index 0000000..7ee408d --- /dev/null +++ b/docs/superpowers/plans/2026-06-29-pakete-vpn.md @@ -0,0 +1,571 @@ +# Pakete & Preise — Service-Übersicht + Zero-Trust-VPN + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Die `/pakete`-Seite zur Service-Übersicht mit 2 klickbaren Kacheln umbauen; bestehenden Nextcloud-Inhalt auf `/pakete/nextcloud` verschieben; neue VPN-Seite `/pakete/vpn` anlegen. + +**Architecture:** Drei Next.js Server Components. `/pakete` wird zur Übersichtsseite, die zwei Unterseiten per `` verknüpft. Kein Client-State nötig. Bestehende Design-Token (`bg-[#18212f]`, `text-orange-400`, `.btn-primary`) und Layout-Muster aus der aktuellen Pakete-Seite werden übernommen. + +**Tech Stack:** Next.js 15 App Router, TypeScript (strict), Tailwind CSS, `next/link`, `next/navigation` + +## Global Constraints + +- Kein `"use client"` — alle drei Seiten sind Server Components +- Importpfade via `@/`-Alias (z. B. `@/components/Logo`) +- `ReactElement` statt `JSX.Element` (Next.js 15 / React 19) +- Alle Preise zzgl. MwSt., Link für CTAs immer `/#contact` +- `npm run build` muss fehlerfrei durchlaufen +- Nach jedem Task: `npx tsc --noEmit` grün + +--- + +## Datei-Übersicht + +| Datei | Aktion | +|---|---| +| `app/pakete/page.tsx` | Umbau: wird zur Übersichtsseite | +| `app/pakete/nextcloud/page.tsx` | Neu: bestehender Pakete-Inhalt | +| `app/pakete/vpn/page.tsx` | Neu: Zero-Trust-VPN Seite | + +--- + +### Task 1: Nextcloud-Unterseite anlegen + +**Files:** +- Create: `app/pakete/nextcloud/page.tsx` +- Modify: `app/pakete/page.tsx` (Zurück-Link anpassen, Inhalt entfernen — in Task 3) + +**Interfaces:** +- Produces: Route `/pakete/nextcloud` — vollständige Nextcloud + Paperless Pakete-Seite + +- [ ] **Step 1: Datei anlegen — Inhalt aus aktuellem `/pakete/page.tsx` kopieren** + +Erstelle `app/pakete/nextcloud/page.tsx` mit exakt dem Inhalt von `app/pakete/page.tsx`, aber mit diesen zwei Änderungen: + +1. Metadata anpassen: +```tsx +export const metadata: Metadata = { + title: "Nextcloud + Paperless | Pakete & Preise", + description: + "Nextcloud + Paperless-ngx auf Docker, Kubernetes oder Proxmox: Installation, Hosting und Wartung in Crailsheim. Individuelle Angebote auf Anfrage.", + openGraph: { + title: "Nextcloud + Paperless | MBO-Tech-IT", + description: + "Nextcloud + Paperless-ngx auf Docker, Kubernetes oder Proxmox: Installation, Hosting und Wartung in Crailsheim.", + url: "https://mbo-tech-it.de/pakete/nextcloud", + }, + alternates: { + canonical: "https://mbo-tech-it.de/pakete/nextcloud", + }, +}; +``` + +2. „← Zurück"-Link zeigt auf `/pakete` statt `/`: +```tsx + + + + + Zurück + +``` + +Die Funktion heißt `NextcloudPage` statt `PaketePage`: +```tsx +export default function NextcloudPage() { +``` + +- [ ] **Step 2: TypeScript prüfen** + +```bash +npx tsc --noEmit +``` + +Erwartet: keine Fehler + +- [ ] **Step 3: Im Browser prüfen** + +```bash +npm run dev +``` + +Öffne `http://localhost:3000/pakete/nextcloud` — Seite muss identisch mit dem alten `/pakete` aussehen. Zurück-Button führt zu `/pakete` (404 noch ok, kommt in Task 3). + +- [ ] **Step 4: Commit** + +```bash +git add app/pakete/nextcloud/page.tsx +git commit -m "feat: move Nextcloud packages to /pakete/nextcloud" +``` + +--- + +### Task 2: VPN-Unterseite anlegen + +**Files:** +- Create: `app/pakete/vpn/page.tsx` + +**Interfaces:** +- Produces: Route `/pakete/vpn` — Zero-Trust-VPN Detailseite mit 3 Preiskarten + +- [ ] **Step 1: Datei `app/pakete/vpn/page.tsx` erstellen** + +```tsx +import type { Metadata } from "next"; +import Link from "next/link"; +import Logo from "@/components/Logo"; + +export const metadata: 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 €.", + openGraph: { + title: "Zero-Trust-VPN | MBO-Tech-IT", + description: + "Managed Netbird VPN mit WireGuard — sicherer Fernzugriff, DSGVO-konform, Server in Deutschland. Ab 89 €/Monat.", + url: "https://mbo-tech-it.de/pakete/vpn", + }, + alternates: { + canonical: "https://mbo-tech-it.de/pakete/vpn", + }, +}; + +const vpnPackages = [ + { + name: "Starter", + users: "bis 5 Nutzer", + devices: "15 Geräte", + price: "89", + setup: "490", + highlight: false, + includes: [ + "Einrichtung & Client-Rollout", + "Sicherer Fernzugriff (WireGuard)", + "Monitoring & Updates", + "E-Mail-Support", + ], + }, + { + name: "Business", + users: "bis 20 Nutzer", + devices: "50 Geräte", + price: "149", + setup: "790", + highlight: true, + includes: [ + "Alles aus Starter", + "Mehrere Standorte", + "Zugriffs-Protokollierung", + "Telefon-Support", + ], + }, + { + name: "Professional", + users: "bis 50 Nutzer", + devices: "150 Geräte", + price: "249", + setup: "1.290", + highlight: false, + includes: [ + "Alles aus Business", + "SLA 4h Reaktionszeit", + "NIS2-Dokumentation", + "Hochverfügbarkeit", + ], + }, +]; + +export default function VpnPage() { + return ( +
+ {/* Header */} +
+
+ + +
+ + MBO-TECH-IT + + + Digital Denken. Lokal Handeln. + +
+ + + + + + Zurück + +
+
+ +
+ + {/* Hero */} +
+ + NEU: Zero-Trust-VPN + +

+ Ihre Mitarbeiter. Überall.
Sicher verbunden. +

+

+ Kein offener Port. Kein VPN-Konzentrator. Keine Fritzbox-Bastelei. + Von uns eingerichtet, betrieben und überwacht. +

+
+ + {/* Was ist das? */} +
+
+
+ + + +
+

Zero Trust

+

+ Jeder Mitarbeiter sieht nur, was er darf — Buchhalter kommt nicht ans Lager, + Monteur nicht in die Buchhaltung. Granulare Rechteverwaltung statt + „einmal drin = alles sehen" wie beim klassischen VPN. +

+
+
+
+ + + +
+

WireGuard

+

+ Modernes VPN-Protokoll der nächsten Generation: schneller und sicherer als + klassisches IPSec oder OpenVPN. Militärgrade-Verschlüsselung, + kein Datenverkehr über fremde Server, DSGVO-konform mit + Server-Standort Deutschland. +

+
+
+ + {/* Pakete */} +

+ Unsere Pakete +

+

+ Monatliche Pauschale, keine versteckten Kosten — egal wie viele Mitarbeiter + sich einwählen. +

+
+ {vpnPackages.map((pkg) => ( +
+ {pkg.highlight && ( +
+ EMPFOHLEN +
+ )} + +
+ + {pkg.users} · {pkg.devices} + +

{pkg.name}

+
+ + {/* Preis */} +
+
+ {pkg.price} € + /Monat +
+

+ Einrichtung: {pkg.setup} € einmalig +

+
+ + {/* Leistungen */} +
    + {pkg.includes.map((item) => ( +
  • + + + + + + {item} +
    • + ))} +
+ + + Paket anfragen + +
+ ))} +
+ + {/* Hinweis + CTA */} +
+

+ Hinweis: Alle Preise zzgl. + gesetzl. MwSt. Individuelle Angebote auf Anfrage. Kostenlose Erstberatung vor Ort — + kein Risiko, kein Kleingedrucktes. +

+ + Kostenloses Erstgespräch anfragen + +
+
+
+ ); +} +``` + +- [ ] **Step 2: TypeScript prüfen** + +```bash +npx tsc --noEmit +``` + +Erwartet: keine Fehler + +- [ ] **Step 3: Im Browser prüfen** + +Öffne `http://localhost:3000/pakete/vpn` +Erwartetes Ergebnis: +- Hero mit „Ihre Mitarbeiter. Überall. Sicher verbunden." +- 2 Info-Karten (Zero Trust / WireGuard) +- 3 Preiskarten: Starter 89 €, Business 149 € (EMPFOHLEN-Badge), Professional 249 € +- Hinweis-Box + CTA unten +- Zurück-Link führt zu `/pakete` + +- [ ] **Step 4: Commit** + +```bash +git add app/pakete/vpn/page.tsx +git commit -m "feat: add Zero-Trust-VPN detail page at /pakete/vpn" +``` + +--- + +### Task 3: Übersichtsseite `/pakete` umbauen + +**Files:** +- Modify: `app/pakete/page.tsx` — vollständiger Ersatz durch Übersichtsseite + +**Interfaces:** +- Consumes: `/pakete/nextcloud` (Task 1), `/pakete/vpn` (Task 2) +- Produces: `/pakete` — Übersichtsseite mit 2 Service-Kacheln + +- [ ] **Step 1: `app/pakete/page.tsx` vollständig ersetzen** + +```tsx +import type { Metadata } from "next"; +import Link from "next/link"; +import Logo from "@/components/Logo"; + +export const metadata: Metadata = { + title: "Pakete & Preise | MBO-Tech-IT", + description: + "Unsere IT-Dienstleistungen auf einen Blick: Nextcloud + Paperless-ngx Cloud-Lösungen und Zero-Trust-VPN für sicheren Fernzugriff. Individuelle Angebote aus Crailsheim.", + openGraph: { + title: "Pakete & Preise | MBO-Tech-IT", + description: + "Nextcloud, Paperless-ngx und Zero-Trust-VPN — IT-Lösungen aus Crailsheim.", + url: "https://mbo-tech-it.de/pakete", + }, + alternates: { + canonical: "https://mbo-tech-it.de/pakete", + }, +}; + +const services = [ + { + href: "/pakete/nextcloud", + icon: ( + + + + ), + iconBg: "bg-blue-500/10 text-blue-400", + label: "Nextcloud + Paperless-ngx", + description: + "Eigene Cloud & digitales Dokumentenarchiv auf Ihrem Server — DSGVO-konform, selbst gehostet auf Hetzner Cloud.", + tag: "Einmalige Installation ab Anfrage", + }, + { + href: "/pakete/vpn", + icon: ( + + + + ), + iconBg: "bg-orange-500/10 text-orange-400", + label: "Zero-Trust-VPN", + description: + "Sicherer Fernzugriff für alle Mitarbeiter. Managed Netbird mit WireGuard — Server in Deutschland, feste Monatspauschale.", + tag: "NEU · ab 89 €/Monat", + isNew: true, + }, +]; + +export default function PaketePage() { + return ( +
+ {/* Header */} +
+
+ + +
+ + MBO-TECH-IT + + + Digital Denken. Lokal Handeln. + +
+ + + + + + Zurück + +
+
+ +
+ + {/* Hero */} +
+ + Unsere Leistungen + +

+ Pakete & Preise +

+

+ Wählen Sie Ihre Lösung — wir installieren, betreiben und warten. + Alles aus einer Hand, aus Crailsheim. +

+
+ + {/* Service-Kacheln */} +
+ {services.map((service) => ( + + {service.isNew && ( + + NEU + + )} +
+ {service.icon} +
+

+ {service.label} +

+

+ {service.description} +

+
+ {service.tag} + + + +
+ + ))} +
+ + {/* CTA */} +
+

+ Nicht sicher, was passt?{" "} + Kostenlose Erstberatung vor Ort — kein Risiko, kein Kleingedrucktes. +

+ + Kostenloses Erstgespräch anfragen + +
+
+
+ ); +} +``` + +- [ ] **Step 2: TypeScript prüfen** + +```bash +npx tsc --noEmit +``` + +Erwartet: keine Fehler + +- [ ] **Step 3: Im Browser prüfen** + +Öffne `http://localhost:3000/pakete` +Erwartetes Ergebnis: +- Hero: „Pakete & Preise" +- 2 Kacheln: „Nextcloud + Paperless-ngx" (blau) und „Zero-Trust-VPN" (orange, NEU-Badge) +- Klick auf Nextcloud-Kachel → `/pakete/nextcloud` mit vollem Inhalt +- Klick auf VPN-Kachel → `/pakete/vpn` mit Preiskarten +- Zurück-Links auf den Unterseiten führen zurück zu `/pakete` + +- [ ] **Step 4: Produktions-Build prüfen** + +```bash +npm run build +``` + +Erwartet: Build läuft fehlerfrei durch, alle 3 Routen erscheinen in der Route-Übersicht: +- `/pakete` +- `/pakete/nextcloud` +- `/pakete/vpn` + +- [ ] **Step 5: Commit + Push** + +```bash +git add app/pakete/page.tsx +git commit -m "feat: rebuild /pakete as service overview with tiles" +git push +```