5.1 KiB

Raw Blame History

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

Header — Label "Compliance & Dokumentenmanagement", Überschrift mit Gradient, Untertitel
Was ist Paperless-ngx? — Erklärungsblock: Open-Source DMS, DSGVO-konform, GoBD-tauglich, kein US-Cloud-Risiko
Anforderungen-Grid (3 Karten):
- DSGVO-konforme Archivierung (Daten bleiben lokal/EU)
- GoBD-Anforderungen (revisionssichere, unveränderliche Ablage)
- Selbstgehostet auf eigenem Server oder Hetzner
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
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

// 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)

5.1 KiB Raw Blame History