136 lines
5.1 KiB
Markdown
136 lines
5.1 KiB
Markdown
# 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)
|