# Website-Erweiterung: Neue Services & Spezialeffekte

**Datum:** 2026-04-02  
**Status:** Genehmigt  

---

## Überblick

Die bestehende MBO-Tech-IT-Website (Next.js + Tailwind CSS, dunkles Design) wird um drei neue Leistungsbereiche und drei Spezialeffekte erweitert. Zwei neue Services kommen als Karten ins bestehende Grid; DSGVO/GoBD mit Paperless erhält eine eigene Sektion.

---

## 1. Neue Service-Karten im Grid

Das Services-Grid wächst von 6 auf 8 Karten. Die zwei neuen Karten werden am Ende des Arrays in `components/Services.tsx` hinzugefügt.

### Karte 1: WLAN & Netzwerk
- **Accent:** orange
- **Titel:** WLAN & Netzwerk
- **Beschreibung:** Professionelle WLAN-Planung, Installation und Troubleshooting für Privat- und Gewerbekunden. Mesh-Netzwerke, Access Points und Netzwerkprobleme — auch in schwierigen Gebäuden.
- **Features:** WLAN-Planung & Installation, Mesh-Netzwerke, Netzwerk-Troubleshooting, Privat- & Gewerbekunden
- **Icon:** WiFi-Symbol (SVG)

### Karte 2: Individuelle Webanwendungen
- **Accent:** blue
- **Titel:** Individuelle Webanwendungen
- **Beschreibung:** Maßgeschneiderte Web-Apps für spezielle Geschäftsanforderungen. Von Kundenportalen über interne Tools bis zu Buchungssystemen — entwickelt auf Ihre Prozesse zugeschnitten.
- **Features:** Maßgeschneiderte Entwicklung, Kundenportale & Tools, API-Integrationen, Moderne Tech-Stack
- **Icon:** Code/Browser-Symbol (SVG)

---

## 2. Neue Sektion: DSGVO & GoBD mit Paperless

**Datei:** `components/PaperlessSection.tsx` (neu)  
**Position in `app/page.tsx`:** Nach `<Services />`, vor `<DataSovereignty />`

### Struktur
1. **Header** — Label "Compliance & Dokumentenmanagement", Überschrift mit Gradient, Untertitel
2. **Was ist Paperless-ngx?** — Erklärungsblock: Open-Source DMS, DSGVO-konform, GoBD-tauglich, kein US-Cloud-Risiko
3. **Anforderungen-Grid** (3 Karten):
   - DSGVO-konforme Archivierung (Daten bleiben lokal/EU)
   - GoBD-Anforderungen (revisionssichere, unveränderliche Ablage)
   - Selbstgehostet auf eigenem Server oder Hetzner
4. **Leistungsumfang** (4 Punkte als horizontale Feature-Liste):
   - Installation & Konfiguration von Paperless-ngx
   - Einrichtung automatischer Dokumentenerkennung (OCR)
   - Migration bestehender Dokumentenarchive
   - Schulung & Dokumentation für Ihr Team
5. **CTA-Banner** — "Jetzt Compliance-Beratung anfragen" → `#contact`

### Design
- Hintergrund: `#111925` (wie DataSovereignty)
- Akzentfarbe: orange (Anforderungen) + grün (#22c55e) für "DSGVO-konform"-Badges
- Gleiche Card-Styles wie bestehende Sektionen

---

## 3. Spezialeffekte

### A: Scroll-Reveal
**Implementierung:** Intersection Observer API (kein externes Package)  
**Datei:** `components/ScrollReveal.tsx` — wiederverwendbare Wrapper-Komponente  

```tsx
// Verwendung:
<ScrollReveal>
  <ServiceCard ... />
</ScrollReveal>
```

- Animation: `opacity: 0 → 1` + `translateY(24px → 0)`, Dauer 500ms, ease-out
- Delay-Prop für gestaffelte Karten: `delay={index * 75}ms`
- Kein Re-Trigger nach erstem Einblenden (`once: true`)
- Angewendet auf: alle Service-Karten, PaperlessSection-Blöcke, DataSovereignty-Karten, About-Bereich

### B: Typewriter im Hero
**Implementierung:** Custom Hook `useTypewriter` in `hooks/useTypewriter.ts`  
**Datei:** Änderung in `components/Hero.tsx`

- Wörter-Rotation: `["Professionell.", "DSGVO-konform.", "Zuverlässig.", "Skalierbar."]`
- Tipp-Geschwindigkeit: 80ms pro Zeichen
- Lösch-Geschwindigkeit: 40ms pro Zeichen
- Pause nach vollständigem Wort: 2000ms
- Cursor: blinkender `|` via CSS-Animation (bereits in globals.css vorhanden)
- Ersetzt den statischen `<span className="text-gradient">Professionell.</span>` im Hero

### D: Counter-Statistiken
**Implementierung:** Intersection Observer + `requestAnimationFrame` in `components/StatsBar.tsx` (neu)  
**Position in `app/page.tsx`:** Zwischen `<TaglineBanner />` und `<Services />`

Statistiken:
| Wert | Label |
|------|-------|
| 50+ | Abgeschlossene Projekte |
| 99% | Server-Uptime |
| 5+ | Jahre Erfahrung |
| 24h | Support-Reaktionszeit |

> **Hinweis:** Diese Zahlen sind Vorschläge — bitte vor der Umsetzung bestätigen oder anpassen.

- Zählt von 0 auf Zielwert wenn ins Viewport gescrollt
- Suffix (`+`, `%`, `h`) wird statisch nach dem Zähler angezeigt
- Design: 4 Blöcke horizontal, orange/blaue Akzente, dunkel-grauer Hintergrund

---

## Seitenstruktur nach Umsetzung

```
<Header />
<Hero />                    ← Typewriter-Effekt
<TaglineBanner />
<StatsBar />                ← NEU (Counter)
<Services />                ← 8 Karten (+ WLAN, + WebApps) + ScrollReveal
<TaglineBanner />
<PaperlessSection />        ← NEU (DSGVO & GoBD)
<DataSovereignty />         ← ScrollReveal
<TaglineBanner />
<Technologies />
<About />                   ← ScrollReveal
<TaglineBanner />
<Contact />
<Footer />
```

---

## Technische Randbedingungen

- Kein externes Animations-Package (Framer Motion o.ä.) — alles mit Web APIs & CSS
- `"use client"` nur wo nötig (Hooks, Intersection Observer)
- Bestehende Farbpalette beibehalten: orange `#f97316`, blau `#2563eb`, dark `#18212f`
- Alle neuen Komponenten folgen dem bestehenden Muster (Tailwind, keine inline styles)