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"> <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
Über uns Über uns
</span> </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,{" "} IT-Expertise,{" "}
<span className="text-gradient">die Sie weiterbringt</span> <span className="text-gradient">die Sie weiterbringt</span>
</h2> </h2>
<p className="text-slate-400 text-lg leading-relaxed mb-6"> <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-white">30 Jahre IT-Erfahrung</strong> &mdash; 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 angefangen bei der einfachen Hardware-Wartung, über den Aufbau großer
Client-Server-Netzwerke, bis hin zu mehr als 20 Jahren Spezialisierung 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>
<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 Heute liegt der Fokus auf modernen Container-Technologien, Cloud-nativer
Infrastruktur und Virtualisierung. Dieses breite Fundament ermöglicht es, Infrastruktur und Virtualisierung. Dieses breite Fundament ermöglicht es,
Lösungen zu entwickeln, die nicht nur funktionieren &mdash; sondern auch 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"> <p className="text-orange-400 font-black text-sm tracking-[0.2em] uppercase">
Digital Denken. Lokal Handeln. Digital Denken. Lokal Handeln.
</p> </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. Globales Know-how &mdash; persönlicher Service.
</p> </p>
</div> </div>
@ -72,7 +72,7 @@ export default function About() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg> </svg>
</div> </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>
))} ))}
</div> </div>
@ -83,14 +83,14 @@ export default function About() {
{highlights.map((item) => ( {highlights.map((item) => (
<div <div
key={item.title} 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"> <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> <span className="font-mono text-orange-400 font-black text-sm">{item.icon}</span>
</div> </div>
<div> <div>
<h3 className="text-white font-bold text-lg mb-2">{item.title}</h3> <h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">{item.title}</h3>
<p className="text-slate-400 text-sm leading-relaxed">{item.description}</p> <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{item.description}</p>
</div> </div>
</div> </div>
))} ))}

30
components/DataSovereignty.tsx
View File

@ -70,7 +70,7 @@ const icons: Record<string, ReactElement> = {
export default function DataSovereignty() { export default function DataSovereignty() {
return ( return (
<section id="datensouveraenitaet" className="py-24 px-4 sm:px-6 lg:px-8 relative"> <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-grid opacity-30" />
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,rgba(239,68,68,0.04)_0%,transparent_60%)]" /> <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"> <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
Datenschutz & Souveraenitaet Datenschutz & Souveraenitaet
</span> </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{" "} Ihre Daten gehoeren{" "}
<span className="text-gradient">Ihnen</span> <span className="text-gradient">Ihnen</span>
</h2> </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 US Cloud Act, DSGVO und Datensouveraenitaet &mdash; warum die Wahl
Ihrer IT-Infrastruktur ueber mehr als Kosten entscheidet. Ihrer IT-Infrastruktur ueber mehr als Kosten entscheidet.
</p> </p>
@ -100,8 +100,8 @@ export default function DataSovereignty() {
</div> </div>
<div> <div>
<p className="text-red-400 font-bold text-sm mb-1">Wichtig fuer deutsche Unternehmen</p> <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"> <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-white">US Cloud Act</strong> hebelt den geografischen Serverstandort als Schutzargument vollstaendig aus. 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> </p>
</div> </div>
</div> </div>
@ -109,35 +109,35 @@ export default function DataSovereignty() {
{/* Risks */} {/* Risks */}
<div className="grid md:grid-cols-3 gap-6 mb-16"> <div className="grid md:grid-cols-3 gap-6 mb-16">
{risks.map((risk) => ( {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="flex items-center gap-3 mb-4">
<div className="w-2 h-2 rounded-full bg-red-400 flex-shrink-0" /> <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> </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>
))} ))}
</div> </div>
{/* Divider with CTA */} {/* Divider with CTA */}
<div className="flex items-center gap-6 mb-16"> <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"> <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 Unsere Loesung
</div> </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> </div>
{/* Solutions */} {/* Solutions */}
<div className="grid md:grid-cols-2 gap-6 mb-16"> <div className="grid md:grid-cols-2 gap-6 mb-16">
{solutions.map((sol) => ( {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"> <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]} {icons[sol.icon]}
</div> </div>
<div> <div>
<h3 className="text-white font-bold text-base mb-2">{sol.title}</h3> <h3 className="text-slate-800 dark:text-white font-bold text-base mb-2">{sol.title}</h3>
<p className="text-slate-400 text-sm leading-relaxed">{sol.text}</p> <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{sol.text}</p>
</div> </div>
</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"> <p className="text-orange-400 font-black text-sm tracking-[0.2em] uppercase mb-2">
Digital Denken. Lokal Handeln. Digital Denken. Lokal Handeln.
</p> </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. Europaeische Infrastruktur. Volle Kontrolle. Echter Datenschutz.
</p> </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 Mit MBO-Tech-IT erhalten Sie IT-Infrastruktur, die nicht nur
funktioniert, sondern auch rechtssicher und souveraen ist. Keine funktioniert, sondern auch rechtssicher und souveraen ist. Keine
Abhaengigkeit von US-Konzernen, kein Cloud Act-Risiko. Abhaengigkeit von US-Konzernen, kein Cloud Act-Risiko.

30
components/PaperlessSection.tsx
View File

@ -42,7 +42,7 @@ const colorMap = {
export default function PaperlessSection() { export default function PaperlessSection() {
return ( return (
<section id="paperless" className="py-24 px-4 sm:px-6 lg:px-8 relative"> <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-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="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"> <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
Compliance & Dokumentenmanagement Compliance & Dokumentenmanagement
</span> </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{" "} DSGVO & GoBD mit{" "}
<span className="text-gradient-orange">Paperless-ngx</span> <span className="text-gradient-orange">Paperless-ngx</span>
</h2> </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, Digitale Dokumentenverwaltung, die rechtssicher ist — DSGVO-konform,
GoBD-tauglich, selbstgehostet. Kein Abo, keine US-Cloud, volle Kontrolle. GoBD-tauglich, selbstgehostet. Kein Abo, keine US-Cloud, volle Kontrolle.
</p> </p>
@ -67,15 +67,15 @@ export default function PaperlessSection() {
{/* What is Paperless */} {/* What is Paperless */}
<ScrollReveal delay={100}> <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"> <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"> <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" /> <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> </svg>
</div> </div>
<div> <div>
<h3 className="text-white font-bold text-lg mb-2">Was ist Paperless-ngx?</h3> <h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">Was ist Paperless-ngx?</h3>
<p className="text-slate-400 text-sm leading-relaxed"> <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 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 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. 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]; const c = colorMap[req.accent as keyof typeof colorMap];
return ( return (
<ScrollReveal key={req.title} delay={index * 100}> <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`} /> <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> <h3 className="text-slate-800 dark:text-white font-bold text-base mb-3">{req.title}</h3>
<p className="text-slate-400 text-sm leading-relaxed">{req.text}</p> <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{req.text}</p>
</div> </div>
</ScrollReveal> </ScrollReveal>
); );
@ -109,24 +109,24 @@ export default function PaperlessSection() {
{/* Divider */} {/* Divider */}
<div className="flex items-center gap-6 mb-12"> <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"> <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 Unser Leistungsumfang
</div> </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> </div>
{/* Services list */} {/* Services list */}
<ScrollReveal delay={100}> <ScrollReveal delay={100}>
<div className="grid sm:grid-cols-2 gap-4 mb-16"> <div className="grid sm:grid-cols-2 gap-4 mb-16">
{services.map((item) => ( {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"> <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"> <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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg> </svg>
</div> </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>
))} ))}
</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"> <p className="text-orange-400 font-black text-sm tracking-[0.2em] uppercase mb-2">
Compliance leicht gemacht Compliance leicht gemacht
</p> </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. DSGVO & GoBD — ohne Kompromisse.
</p> </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 Wir richten Paperless-ngx auf Ihrer Infrastruktur ein, migrieren
Ihre bestehenden Dokumente und schulen Ihr Team. Rechtssicher, Ihre bestehenden Dokumente und schulen Ihr Team. Rechtssicher,
selbstgehostet, dauerhaft unter Ihrer Kontrolle. 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"> <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
Leistungen Leistungen
</span> </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 Unsere Services
</h2> </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 Professionelle IT-Lösungen für moderne Infrastruktur &mdash; von
der Containerisierung bis zur vollständigen Cloud-Migration. der Containerisierung bis zur vollständigen Cloud-Migration.
</p> </p>
@ -143,16 +143,16 @@ export default function Services() {
return ( return (
<ScrollReveal key={service.title} delay={index * 75}> <ScrollReveal key={service.title} delay={index * 75}>
<div <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`}> <div className={`w-14 h-14 rounded-xl ${c.iconBg} ${c.icon} flex items-center justify-center mb-5`}>
{service.icon} {service.icon}
</div> </div>
<h3 className="text-xl font-bold text-white mb-3">{service.title}</h3> <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-3">{service.title}</h3>
<p className="text-slate-400 text-sm leading-relaxed mb-5">{service.description}</p> <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-5">{service.description}</p>
<ul className="space-y-2"> <ul className="space-y-2">
{service.features.map((feature) => ( {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`} /> <span className={`w-1.5 h-1.5 rounded-full ${c.dot} flex-shrink-0`} />
{feature} {feature}
</li> </li>