159 lines
7.2 KiB
TypeScript
159 lines
7.2 KiB
TypeScript
// components/PaperlessSection.tsx
|
|
import ScrollReveal from "@/components/ScrollReveal";
|
|
|
|
const requirements = [
|
|
{
|
|
accent: "orange",
|
|
title: "DSGVO-konforme Archivierung",
|
|
text: "Alle Dokumente bleiben auf Ihrer eigenen Infrastruktur — in Deutschland oder bei Hetzner. Kein Zugriff durch Drittanbieter, keine US-Cloud. Vollständig DSGVO-konform.",
|
|
},
|
|
{
|
|
accent: "blue",
|
|
title: "GoBD-Anforderungen erfüllt",
|
|
text: "Revisionssichere, unveränderliche Ablage steuerrelevanter Belege. Paperless-ngx protokolliert alle Änderungen und erfüllt die Anforderungen der GoBD an die digitale Buchführung.",
|
|
},
|
|
{
|
|
accent: "orange",
|
|
title: "Selbstgehostet & unter Kontrolle",
|
|
text: "Betrieb auf Ihrem eigenen Server oder auf einem deutschen Hetzner-VPS. Sie haben die volle Kontrolle über Ihre Daten — heute, morgen und in 10 Jahren.",
|
|
},
|
|
];
|
|
|
|
const services = [
|
|
"Installation & Konfiguration von Paperless-ngx",
|
|
"Einrichtung automatischer Dokumentenerkennung (OCR)",
|
|
"Migration bestehender Dokumentenarchive",
|
|
"Schulung & Dokumentation für Ihr Team",
|
|
];
|
|
|
|
const colorMap = {
|
|
orange: {
|
|
border: "border-orange-500/20 hover:border-orange-500/50",
|
|
dot: "bg-orange-400",
|
|
dotBg: "bg-orange-500/10",
|
|
},
|
|
blue: {
|
|
border: "border-blue-500/20 hover:border-blue-500/50",
|
|
dot: "bg-blue-400",
|
|
dotBg: "bg-blue-500/10",
|
|
},
|
|
};
|
|
|
|
export default function PaperlessSection() {
|
|
return (
|
|
<section id="paperless" className="py-24 px-4 sm:px-6 lg:px-8 relative">
|
|
<div className="absolute inset-0 bg-[#111925]" />
|
|
<div className="absolute inset-0 bg-grid opacity-20" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(34,197,94,0.04)_0%,transparent_60%)]" />
|
|
|
|
<div className="max-w-7xl mx-auto relative">
|
|
|
|
{/* Header */}
|
|
<ScrollReveal>
|
|
<div className="text-center mb-16">
|
|
<span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
|
|
Compliance & Dokumentenmanagement
|
|
</span>
|
|
<h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-4">
|
|
DSGVO & GoBD mit{" "}
|
|
<span className="text-gradient-orange">Paperless-ngx</span>
|
|
</h2>
|
|
<p className="text-slate-400 text-lg max-w-2xl mx-auto">
|
|
Digitale Dokumentenverwaltung, die rechtssicher ist — DSGVO-konform,
|
|
GoBD-tauglich, selbstgehostet. Kein Abo, keine US-Cloud, volle Kontrolle.
|
|
</p>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* What is Paperless */}
|
|
<ScrollReveal delay={100}>
|
|
<div className="mb-12 p-6 rounded-2xl bg-gray-900 border border-orange-500/20 flex flex-col md:flex-row gap-6 items-start">
|
|
<div className="flex-shrink-0 w-14 h-14 rounded-xl bg-orange-500/10 text-orange-400 flex items-center justify-center">
|
|
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-white font-bold text-lg mb-2">Was ist Paperless-ngx?</h3>
|
|
<p className="text-slate-400 text-sm leading-relaxed">
|
|
Paperless-ngx ist ein Open-Source Dokumentenmanagementsystem (DMS), das Ihre Papierflut digitalisiert
|
|
und durchsuchbar macht. Rechnungen, Verträge, Briefe — automatisch per OCR erkannt, kategorisiert und
|
|
archiviert. Betrieben auf Ihrer eigenen Infrastruktur, ohne Abhängigkeit von Cloud-Anbietern.
|
|
</p>
|
|
<div className="flex flex-wrap gap-2 mt-3">
|
|
{["Open Source", "Self-Hosted", "OCR", "Volltextsuche", "Automatische Tags"].map((tag) => (
|
|
<span key={tag} className="px-3 py-1 rounded-full bg-orange-500/10 border border-orange-500/20 text-orange-400 text-xs font-mono">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* Requirements grid */}
|
|
<div className="grid md:grid-cols-3 gap-6 mb-16">
|
|
{requirements.map((req, index) => {
|
|
const c = colorMap[req.accent as keyof typeof colorMap];
|
|
return (
|
|
<ScrollReveal key={req.title} delay={index * 100}>
|
|
<div className={`p-6 rounded-2xl bg-gray-900 border ${c.border} transition-all duration-300 h-full`}>
|
|
<div className={`w-2 h-2 rounded-full ${c.dot} mb-4`} />
|
|
<h3 className="text-white font-bold text-base mb-3">{req.title}</h3>
|
|
<p className="text-slate-400 text-sm leading-relaxed">{req.text}</p>
|
|
</div>
|
|
</ScrollReveal>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="flex items-center gap-6 mb-12">
|
|
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent" />
|
|
<div className="px-6 py-2 rounded-full border border-orange-500/40 bg-orange-500/5 text-orange-400 text-sm font-black tracking-wider whitespace-nowrap">
|
|
Unser Leistungsumfang
|
|
</div>
|
|
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent" />
|
|
</div>
|
|
|
|
{/* Services list */}
|
|
<ScrollReveal delay={100}>
|
|
<div className="grid sm:grid-cols-2 gap-4 mb-16">
|
|
{services.map((item) => (
|
|
<div key={item} className="flex items-center gap-3 p-4 rounded-xl bg-gray-900 border border-gray-800">
|
|
<div className="w-5 h-5 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0">
|
|
<svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<span className="text-slate-300 text-sm">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* CTA */}
|
|
<ScrollReveal delay={150}>
|
|
<div className="p-8 rounded-2xl border border-orange-500/30 bg-orange-500/5 text-center">
|
|
<p className="text-orange-400 font-black text-sm tracking-[0.2em] uppercase mb-2">
|
|
Compliance leicht gemacht
|
|
</p>
|
|
<p className="text-white text-xl font-bold mb-2">
|
|
DSGVO & GoBD — ohne Kompromisse.
|
|
</p>
|
|
<p className="text-slate-400 text-sm max-w-xl mx-auto mb-6">
|
|
Wir richten Paperless-ngx auf Ihrer Infrastruktur ein, migrieren
|
|
Ihre bestehenden Dokumente und schulen Ihr Team. Rechtssicher,
|
|
selbstgehostet, dauerhaft unter Ihrer Kontrolle.
|
|
</p>
|
|
<a href="#contact" className="btn-primary inline-flex px-8 py-3 text-sm">
|
|
Jetzt Beratung anfragen
|
|
</a>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|