jonny
/
MBO-Tech-IT-Webseite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: apply light mode classes to Services, PaperlessSection, DataSovereignty, About 

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MBO-Tech-IT 2026-04-26 19:45:47 +02:00
parent 87b634b9c3
commit 0186e3c191
4 changed files with 46 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/About.tsx
View File

@ -31,17 +31,17 @@ export default function About() {
<span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
Über uns
</span>
<h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-6 leading-tight">
<h2 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-6 leading-tight">
IT-Expertise,{" "}
<span className="text-gradient">die Sie weiterbringt</span>
</h2>
<p className="text-slate-400 text-lg leading-relaxed mb-6">
MBO-Tech-IT steht für über <strong className="text-white">30 Jahre IT-Erfahrung</strong> &mdash;
<p className="text-slate-600 dark:text-slate-400 text-lg leading-relaxed mb-6">
MBO-Tech-IT steht für über <strong className="text-slate-900 dark:text-white">30 Jahre IT-Erfahrung</strong> &mdash;
angefangen bei der einfachen Hardware-Wartung, über den Aufbau großer
Client-Server-Netzwerke, bis hin zu mehr als 20 Jahren Spezialisierung
in der <strong className="text-white">IT-Security</strong>.
in der <strong className="text-slate-900 dark:text-white">IT-Security</strong>.
</p>
<p className="text-slate-400 text-lg leading-relaxed mb-8">
<p className="text-slate-600 dark:text-slate-400 text-lg leading-relaxed mb-8">
Heute liegt der Fokus auf modernen Container-Technologien, Cloud-nativer
Infrastruktur und Virtualisierung. Dieses breite Fundament ermöglicht es,
Lösungen zu entwickeln, die nicht nur funktionieren &mdash; sondern auch
@ -53,7 +53,7 @@ export default function About() {
<p className="text-orange-400 font-black text-sm tracking-[0.2em] uppercase">
Digital Denken. Lokal Handeln.
</p>
<p className="text-slate-400 text-sm mt-1">
<p className="text-slate-600 dark:text-slate-400 text-sm mt-1">
Globales Know-how &mdash; persönlicher Service.
</p>
</div>
@ -72,7 +72,7 @@ export default function About() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg>
</div>
<span className="text-slate-300 text-sm">{point}</span>
<span className="text-slate-700 dark:text-slate-300 text-sm">{point}</span>
</div>
))}
</div>
@ -83,14 +83,14 @@ export default function About() {
{highlights.map((item) => (
<div
key={item.title}
className="flex gap-5 p-6 rounded-2xl bg-gray-900 border border-gray-800 hover:border-orange-500/30 transition-all duration-300"
className="flex gap-5 p-6 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 hover:border-orange-500/30 transition-all duration-300"
>
<div className="flex-shrink-0 w-12 h-12 rounded-xl bg-orange-500/10 border border-orange-500/20 flex items-center justify-center">
<span className="font-mono text-orange-400 font-black text-sm">{item.icon}</span>
</div>
<div>
<h3 className="text-white font-bold text-lg mb-2">{item.title}</h3>
<p className="text-slate-400 text-sm leading-relaxed">{item.description}</p>
<h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">{item.title}</h3>
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{item.description}</p>
</div>
</div>
))}

30
components/DataSovereignty.tsx
View File

@ -70,7 +70,7 @@ const icons: Record<string, ReactElement> = {
export default function DataSovereignty() {
return (
<section id="datensouveraenitaet" 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-[#e8eef4] dark:bg-[#111925]" />
<div className="absolute inset-0 bg-grid opacity-30" />
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,rgba(239,68,68,0.04)_0%,transparent_60%)]" />
@ -81,11 +81,11 @@ export default function DataSovereignty() {
<span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
Datenschutz & Souveraenitaet
</span>
<h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-4">
<h2 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-4">
Ihre Daten gehoeren{" "}
<span className="text-gradient">Ihnen</span>
</h2>
<p className="text-slate-400 text-lg max-w-2xl mx-auto">
<p className="text-slate-600 dark:text-slate-400 text-lg max-w-2xl mx-auto">
US Cloud Act, DSGVO und Datensouveraenitaet &mdash; warum die Wahl
Ihrer IT-Infrastruktur ueber mehr als Kosten entscheidet.
</p>
@ -100,8 +100,8 @@ export default function DataSovereignty() {
</div>
<div>
<p className="text-red-400 font-bold text-sm mb-1">Wichtig fuer deutsche Unternehmen</p>
<p className="text-slate-400 text-sm leading-relaxed">
Wer Daten bei US-amerikanischen Anbietern wie Microsoft Azure, Google Cloud oder AWS speichert, kann sich nicht sicher sein, dass diese Daten nicht auf Anordnung US-amerikanischer Behoerden herausgegeben werden &mdash; auch wenn die Server physisch in Deutschland stehen. Der <strong className="text-white">US Cloud Act</strong> hebelt den geografischen Serverstandort als Schutzargument vollstaendig aus.
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
Wer Daten bei US-amerikanischen Anbietern wie Microsoft Azure, Google Cloud oder AWS speichert, kann sich nicht sicher sein, dass diese Daten nicht auf Anordnung US-amerikanischer Behoerden herausgegeben werden &mdash; auch wenn die Server physisch in Deutschland stehen. Der <strong className="text-slate-900 dark:text-white">US Cloud Act</strong> hebelt den geografischen Serverstandort als Schutzargument vollstaendig aus.
</p>
</div>
</div>
@ -109,35 +109,35 @@ export default function DataSovereignty() {
{/* Risks */}
<div className="grid md:grid-cols-3 gap-6 mb-16">
{risks.map((risk) => (
<div key={risk.title} className="p-6 rounded-2xl bg-gray-900 border border-red-500/20 hover:border-red-500/40 transition-all duration-300">
<div key={risk.title} className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-red-500/20 hover:border-red-500/40 transition-all duration-300">
<div className="flex items-center gap-3 mb-4">
<div className="w-2 h-2 rounded-full bg-red-400 flex-shrink-0" />
<h3 className="text-white font-bold text-base">{risk.title}</h3>
<h3 className="text-slate-800 dark:text-white font-bold text-base">{risk.title}</h3>
</div>
<p className="text-slate-400 text-sm leading-relaxed">{risk.text}</p>
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{risk.text}</p>
</div>
))}
</div>
{/* Divider with CTA */}
<div className="flex items-center gap-6 mb-16">
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent" />
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-slate-300 dark: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">
Unsere Loesung
</div>
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent" />
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-slate-300 dark:via-gray-700 to-transparent" />
</div>
{/* Solutions */}
<div className="grid md:grid-cols-2 gap-6 mb-16">
{solutions.map((sol) => (
<div key={sol.title} className="flex gap-5 p-6 rounded-2xl bg-gray-900 border border-orange-500/20 hover:border-orange-500/40 transition-all duration-300 hover:-translate-y-0.5">
<div key={sol.title} className="flex gap-5 p-6 rounded-2xl bg-white dark:bg-gray-900 border border-orange-500/20 hover:border-orange-500/40 transition-all duration-300 hover:-translate-y-0.5">
<div className="flex-shrink-0 w-12 h-12 rounded-xl bg-orange-500/10 text-orange-400 flex items-center justify-center">
{icons[sol.icon]}
</div>
<div>
<h3 className="text-white font-bold text-base mb-2">{sol.title}</h3>
<p className="text-slate-400 text-sm leading-relaxed">{sol.text}</p>
<h3 className="text-slate-800 dark:text-white font-bold text-base mb-2">{sol.title}</h3>
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{sol.text}</p>
</div>
</div>
))}
@ -148,10 +148,10 @@ export default function DataSovereignty() {
<p className="text-orange-400 font-black text-sm tracking-[0.2em] uppercase mb-2">
Digital Denken. Lokal Handeln.
</p>
<p className="text-white text-xl font-bold mb-2">
<p className="text-slate-900 dark:text-white text-xl font-bold mb-2">
Europaeische Infrastruktur. Volle Kontrolle. Echter Datenschutz.
</p>
<p className="text-slate-400 text-sm max-w-xl mx-auto mb-6">
<p className="text-slate-600 dark:text-slate-400 text-sm max-w-xl mx-auto mb-6">
Mit MBO-Tech-IT erhalten Sie IT-Infrastruktur, die nicht nur
funktioniert, sondern auch rechtssicher und souveraen ist. Keine
Abhaengigkeit von US-Konzernen, kein Cloud Act-Risiko.

30
components/PaperlessSection.tsx
View File

@ -42,7 +42,7 @@ const colorMap = {
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-[#e8eef4] dark: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%)]" />
@ -54,11 +54,11 @@ export default function PaperlessSection() {
<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">
<h2 className="text-4xl sm:text-5xl font-black text-slate-900 dark: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">
<p className="text-slate-600 dark: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>
@ -67,15 +67,15 @@ export default function PaperlessSection() {
{/* 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="mb-12 p-6 rounded-2xl bg-white dark: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">
<h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">Was ist Paperless-ngx?</h3>
<p className="text-slate-600 dark: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.
@ -97,10 +97,10 @@ export default function PaperlessSection() {
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={`p-6 rounded-2xl bg-white dark: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>
<h3 className="text-slate-800 dark:text-white font-bold text-base mb-3">{req.title}</h3>
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{req.text}</p>
</div>
</ScrollReveal>
);
@ -109,24 +109,24 @@ export default function PaperlessSection() {
{/* 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="flex-1 h-px bg-gradient-to-r from-transparent via-slate-300 dark: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 className="flex-1 h-px bg-gradient-to-r from-transparent via-slate-300 dark: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 key={item} className="flex items-center gap-3 p-4 rounded-xl bg-white dark:bg-gray-900 border border-slate-200 dark: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>
<span className="text-slate-700 dark:text-slate-300 text-sm">{item}</span>
</div>
))}
</div>
@ -138,10 +138,10 @@ export default function PaperlessSection() {
<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">
<p className="text-slate-900 dark: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">
<p className="text-slate-600 dark: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.

12
components/Services.tsx
View File

@ -127,10 +127,10 @@ export default function Services() {
<span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
Leistungen
</span>
<h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-4">
<h2 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-4">
Unsere Services
</h2>
<p className="text-slate-400 text-lg max-w-2xl mx-auto">
<p className="text-slate-600 dark:text-slate-400 text-lg max-w-2xl mx-auto">
Professionelle IT-Lösungen für moderne Infrastruktur &mdash; von
der Containerisierung bis zur vollständigen Cloud-Migration.
</p>
@ -143,16 +143,16 @@ export default function Services() {
return (
<ScrollReveal key={service.title} delay={index * 75}>
<div
className={`group p-6 rounded-2xl bg-gray-900 border ${c.border} transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${c.shadow}`}
className={`group p-6 rounded-2xl bg-white dark:bg-gray-900 border ${c.border} transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${c.shadow}`}
>
<div className={`w-14 h-14 rounded-xl ${c.iconBg} ${c.icon} flex items-center justify-center mb-5`}>
{service.icon}
</div>
<h3 className="text-xl font-bold text-white mb-3">{service.title}</h3>
<p className="text-slate-400 text-sm leading-relaxed mb-5">{service.description}</p>
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-3">{service.title}</h3>
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-5">{service.description}</p>
<ul className="space-y-2">
{service.features.map((feature) => (
<li key={feature} className="flex items-center gap-2 text-sm text-slate-300">
<li key={feature} className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
<span className={`w-1.5 h-1.5 rounded-full ${c.dot} flex-shrink-0`} />
{feature}
</li>