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

feat: apply light mode classes to Contact, Technologies, LegalLayout 

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

32
components/Contact.tsx
View File

@ -62,7 +62,7 @@ export default function Contact() {
return ( return (
<section id="contact" className="py-24 px-4 sm:px-6 lg:px-8 relative"> <section id="contact" 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-40" /> <div className="absolute inset-0 bg-grid opacity-40" />
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(249,115,22,0.07)_0%,transparent_70%)]" /> <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(249,115,22,0.07)_0%,transparent_70%)]" />
@ -72,16 +72,16 @@ export default function Contact() {
<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">
Kontakt Kontakt
</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">
Projekt anfragen Projekt anfragen
</h2> </h2>
<p className="text-slate-400 text-lg max-w-xl mx-auto"> <p className="text-slate-600 dark:text-slate-400 text-lg max-w-xl mx-auto">
Sie haben ein IT-Projekt oder eine Frage? Schreiben Sie uns &mdash; Sie haben ein IT-Projekt oder eine Frage? Schreiben Sie uns &mdash;
wir melden uns schnellstmöglich bei Ihnen. wir melden uns schnellstmöglich bei Ihnen.
</p> </p>
</div> </div>
<div className="bg-gray-900 border border-gray-800 rounded-3xl p-8 sm:p-10"> <div className="bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 rounded-3xl p-8 sm:p-10">
{status === "success" ? ( {status === "success" ? (
<div className="flex flex-col items-center justify-center py-10 text-center"> <div className="flex flex-col items-center justify-center py-10 text-center">
<div className="w-16 h-16 rounded-full bg-orange-500/10 border border-orange-500/30 flex items-center justify-center mb-6"> <div className="w-16 h-16 rounded-full bg-orange-500/10 border border-orange-500/30 flex items-center justify-center mb-6">
@ -89,8 +89,8 @@ export default function Contact() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg> </svg>
</div> </div>
<h3 className="text-2xl font-bold text-white mb-2">Anfrage gesendet!</h3> <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">Anfrage gesendet!</h3>
<p className="text-slate-400 mb-8"> <p className="text-slate-600 dark:text-slate-400 mb-8">
Wir haben Ihre Nachricht erhalten und melden uns schnellstmöglich bei Ihnen. Wir haben Ihre Nachricht erhalten und melden uns schnellstmöglich bei Ihnen.
</p> </p>
<button <button
@ -110,25 +110,25 @@ export default function Contact() {
<form className="space-y-6" onSubmit={handleSubmit}> <form className="space-y-6" onSubmit={handleSubmit}>
<div className="grid sm:grid-cols-2 gap-6"> <div className="grid sm:grid-cols-2 gap-6">
<div> <div>
<label className="block text-sm font-medium text-slate-300 mb-2">Name</label> <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Name</label>
<input <input
type="text" type="text"
required required
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
placeholder="Max Mustermann" placeholder="Max Mustermann"
className="w-full px-4 py-3 rounded-xl bg-[#111925] border border-gray-700 text-white placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors" className="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-[#111925] border border-slate-300 dark:border-gray-700 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-slate-300 mb-2">E-Mail</label> <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">E-Mail</label>
<input <input
type="email" type="email"
required required
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="max@beispiel.de" placeholder="max@beispiel.de"
className="w-full px-4 py-3 rounded-xl bg-[#111925] border border-gray-700 text-white placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors" className="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-[#111925] border border-slate-300 dark:border-gray-700 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors"
/> />
</div> </div>
</div> </div>
@ -139,7 +139,7 @@ export default function Contact() {
required required
value={betreff} value={betreff}
onChange={(e) => setBetreff(e.target.value)} onChange={(e) => setBetreff(e.target.value)}
className="w-full px-4 py-3 rounded-xl bg-[#111925] border border-gray-700 text-white focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors appearance-none" className="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-[#111925] border border-slate-300 dark:border-gray-700 text-slate-900 dark:text-white focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors appearance-none"
> >
<option value="">Thema auswählen...</option> <option value="">Thema auswählen...</option>
<option value="docker">Docker Installation</option> <option value="docker">Docker Installation</option>
@ -158,7 +158,7 @@ export default function Contact() {
value={nachricht} value={nachricht}
onChange={(e) => setNachricht(e.target.value)} onChange={(e) => setNachricht(e.target.value)}
placeholder="Beschreiben Sie Ihr Projekt oder Ihre Anfrage..." placeholder="Beschreiben Sie Ihr Projekt oder Ihre Anfrage..."
className="w-full px-4 py-3 rounded-xl bg-[#111925] border border-gray-700 text-white placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors resize-none" className="w-full px-4 py-3 rounded-xl bg-slate-50 dark:bg-[#111925] border border-slate-300 dark:border-gray-700 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors resize-none"
/> />
</div> </div>
@ -197,9 +197,9 @@ export default function Contact() {
{/* Divider */} {/* Divider */}
<div className="flex items-center gap-4 my-8"> <div className="flex items-center gap-4 my-8">
<div className="flex-1 h-px bg-gray-800" /> <div className="flex-1 h-px bg-slate-200 dark:bg-gray-800" />
<span className="text-slate-600 text-sm">oder direkt</span> <span className="text-slate-400 dark:text-slate-600 text-sm">oder direkt</span>
<div className="flex-1 h-px bg-gray-800" /> <div className="flex-1 h-px bg-slate-200 dark:bg-gray-800" />
</div> </div>
{/* Contact info */} {/* Contact info */}
@ -208,7 +208,7 @@ export default function Contact() {
<a <a
key={item.label} key={item.label}
href={item.href} href={item.href}
className="flex items-center gap-3 text-slate-300 hover:text-orange-400 transition-colors duration-200 group" className="flex items-center gap-3 text-slate-700 dark:text-slate-300 hover:text-orange-400 transition-colors duration-200 group"
> >
<span className="w-10 h-10 rounded-lg bg-orange-500/10 border border-orange-500/20 flex items-center justify-center text-orange-400 group-hover:bg-orange-500/20 transition-colors duration-200"> <span className="w-10 h-10 rounded-lg bg-orange-500/10 border border-orange-500/20 flex items-center justify-center text-orange-400 group-hover:bg-orange-500/20 transition-colors duration-200">
{item.icon} {item.icon}

26
components/LegalLayout.tsx
View File

@ -9,7 +9,7 @@ interface LegalLayoutProps {
export default function LegalLayout({ title, children }: LegalLayoutProps) { export default function LegalLayout({ title, children }: LegalLayoutProps) {
return ( return (
<div className="min-h-screen bg-[#18212f]"> <div className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
{/* Top tagline bar */} {/* Top tagline bar */}
<div className="bg-orange-500 py-2 px-4 text-center"> <div className="bg-orange-500 py-2 px-4 text-center">
<span className="text-white text-xs font-black tracking-[0.2em] uppercase"> <span className="text-white text-xs font-black tracking-[0.2em] uppercase">
@ -18,13 +18,13 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
</div> </div>
{/* Header – matches main site */} {/* Header – matches main site */}
<header className="bg-[#111925] border-b border-gray-800 sticky top-0 z-50"> <header className="bg-white dark:bg-[#111925] border-b border-slate-200 dark:border-gray-800 sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16"> <div className="flex items-center justify-between h-16">
<Link href="/" className="flex items-center gap-3 group"> <Link href="/" className="flex items-center gap-3 group">
<Logo className="h-8 w-auto" /> <Logo className="h-8 w-auto" />
<div className="flex flex-col leading-tight"> <div className="flex flex-col leading-tight">
<span className="font-black text-white text-base tracking-wider uppercase"> <span className="font-black text-slate-900 dark:text-white text-base tracking-wider uppercase">
MBO- MBO-
<span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent"> <span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">
TECH-IT TECH-IT
@ -37,7 +37,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
</Link> </Link>
<div className="flex items-center gap-6"> <div className="flex items-center gap-6">
<Link href="/pakete" className="text-slate-400 hover:text-blue-400 transition-colors text-sm font-medium hidden sm:block"> <Link href="/pakete" className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm font-medium hidden sm:block">
Pakete & Preise Pakete & Preise
</Link> </Link>
<Link href="/#contact" className="btn-nav"> <Link href="/#contact" className="btn-nav">
@ -58,7 +58,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
</header> </header>
{/* Page hero */} {/* Page hero */}
<div className="relative bg-[#111925] border-b border-gray-800 overflow-hidden"> <div className="relative bg-[#e8eef4] dark:bg-[#111925] border-b border-slate-200 dark:border-gray-800 overflow-hidden">
<div className="absolute inset-0 bg-grid opacity-40" /> <div className="absolute inset-0 bg-grid opacity-40" />
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(249,115,22,0.08)_0%,transparent_60%)]" /> <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(249,115,22,0.08)_0%,transparent_60%)]" />
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative">
@ -67,7 +67,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
<span>/</span> <span>/</span>
<span className="text-orange-400">{title}</span> <span className="text-orange-400">{title}</span>
</div> </div>
<h1 className="text-4xl sm:text-5xl font-black text-white">{title}</h1> <h1 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white">{title}</h1>
<div className="w-16 h-1 bg-orange-500 rounded mt-4" /> <div className="w-16 h-1 bg-orange-500 rounded mt-4" />
</div> </div>
</div> </div>
@ -81,7 +81,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
<p className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Rechtliches</p> <p className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Rechtliches</p>
<Link <Link
href="/impressum" href="/impressum"
className="flex items-center gap-2 px-4 py-3 rounded-xl bg-gray-900 border border-gray-800 hover:border-orange-500/40 text-slate-300 hover:text-orange-400 transition-all text-sm font-medium group" className="flex items-center gap-2 px-4 py-3 rounded-xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 hover:border-orange-500/40 text-slate-600 dark:text-slate-300 hover:text-orange-400 transition-all text-sm font-medium group"
> >
<svg className="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
@ -90,7 +90,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
</Link> </Link>
<Link <Link
href="/datenschutz" href="/datenschutz"
className="flex items-center gap-2 px-4 py-3 rounded-xl bg-gray-900 border border-gray-800 hover:border-orange-500/40 text-slate-300 hover:text-orange-400 transition-all text-sm font-medium group" className="flex items-center gap-2 px-4 py-3 rounded-xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 hover:border-orange-500/40 text-slate-600 dark:text-slate-300 hover:text-orange-400 transition-all text-sm font-medium group"
> >
<svg className="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
@ -98,7 +98,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
Datenschutz Datenschutz
</Link> </Link>
<div className="mt-6 p-4 rounded-xl bg-orange-500/5 border border-orange-500/20"> <div className="mt-6 p-4 rounded-xl bg-orange-500/5 border border-orange-500/20">
<p className="text-xs text-slate-400 leading-relaxed"> <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
Fragen zu Datenschutz oder rechtlichen Themen? Fragen zu Datenschutz oder rechtlichen Themen?
</p> </p>
<Link href="/#contact" className="text-xs text-orange-400 font-bold mt-2 block hover:text-orange-300 transition-colors"> <Link href="/#contact" className="text-xs text-orange-400 font-bold mt-2 block hover:text-orange-300 transition-colors">
@ -110,7 +110,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
{/* Main content */} {/* Main content */}
<div className="lg:col-span-3"> <div className="lg:col-span-3">
<div className="bg-gray-900 border border-gray-800 rounded-2xl p-8 sm:p-10 legal-content"> <div className="bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 rounded-2xl p-8 sm:p-10 legal-content">
{children} {children}
</div> </div>
</div> </div>
@ -118,12 +118,12 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
</main> </main>
{/* Footer */} {/* Footer */}
<footer className="bg-[#111925] border-t border-gray-800 mt-8"> <footer className="bg-[#e8eef4] dark:bg-[#111925] border-t border-slate-200 dark:border-gray-800 mt-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col sm:flex-row items-center justify-between gap-4"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col sm:flex-row items-center justify-between gap-4">
<p className="text-slate-600 text-sm"> <p className="text-slate-500 dark:text-slate-600 text-sm">
&copy; {new Date().getFullYear()} MBO-Tech-IT &mdash; Digital Denken. Lokal Handeln. &copy; {new Date().getFullYear()} MBO-Tech-IT &mdash; Digital Denken. Lokal Handeln.
</p> </p>
<div className="flex gap-6 text-sm text-slate-600"> <div className="flex gap-6 text-sm text-slate-500 dark:text-slate-600">
<Link href="/impressum" className="hover:text-orange-400 transition-colors">Impressum</Link> <Link href="/impressum" className="hover:text-orange-400 transition-colors">Impressum</Link>
<Link href="/datenschutz" className="hover:text-orange-400 transition-colors">Datenschutz</Link> <Link href="/datenschutz" className="hover:text-orange-400 transition-colors">Datenschutz</Link>
<Link href="/" className="hover:text-orange-400 transition-colors">Startseite</Link> <Link href="/" className="hover:text-orange-400 transition-colors">Startseite</Link>

24
components/Technologies.tsx
View File

@ -102,7 +102,7 @@ export default function Technologies() {
return ( return (
<section id="technologies" className="py-24 px-4 sm:px-6 lg:px-8 relative"> <section id="technologies" 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-40" /> <div className="absolute inset-0 bg-grid opacity-40" />
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(249,115,22,0.06)_0%,transparent_70%)]" /> <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(249,115,22,0.06)_0%,transparent_70%)]" />
@ -112,10 +112,10 @@ export default function Technologies() {
<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">
Tech-Stack Tech-Stack
</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 Technologien Unsere Technologien
</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">
Klicken Sie auf eine Technologie und erhalten Sie eine Klicken Sie auf eine Technologie und erhalten Sie eine
verstandliche Erklarung - ganz ohne Fachwissen. verstandliche Erklarung - ganz ohne Fachwissen.
</p> </p>
@ -127,10 +127,10 @@ export default function Technologies() {
<button <button
key={tech.name} key={tech.name}
onClick={() => setActive(tech.name)} onClick={() => setActive(tech.name)}
className="group flex flex-col items-center gap-2 p-4 rounded-xl border bg-gray-900 border-gray-800 hover:border-orange-500/50 hover:-translate-y-1 transition-all duration-300 w-full" className="group flex flex-col items-center gap-2 p-4 rounded-xl border bg-white dark:bg-gray-900 border-slate-200 dark:border-gray-800 hover:border-orange-500/50 hover:-translate-y-1 transition-all duration-300 w-full"
> >
<span className="text-xs text-orange-500/70 font-mono">{tech.category}</span> <span className="text-xs text-orange-500/70 font-mono">{tech.category}</span>
<span className="font-semibold text-sm text-center text-white group-hover:text-orange-400 transition-colors"> <span className="font-semibold text-sm text-center text-slate-900 dark:text-white group-hover:text-orange-400 transition-colors">
{tech.name} {tech.name}
</span> </span>
<span className="text-[10px] text-slate-600 font-medium mt-0.5">Details</span> <span className="text-[10px] text-slate-600 font-medium mt-0.5">Details</span>
@ -143,10 +143,10 @@ export default function Technologies() {
{stats.map((stat) => ( {stats.map((stat) => (
<div <div
key={stat.label} key={stat.label}
className="text-center p-6 rounded-2xl bg-gray-900 border border-gray-800" className="text-center p-6 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800"
> >
<div className="text-4xl font-black text-orange-400 mb-2">{stat.value}</div> <div className="text-4xl font-black text-orange-400 mb-2">{stat.value}</div>
<div className="text-slate-400 text-sm">{stat.label}</div> <div className="text-slate-600 dark:text-slate-400 text-sm">{stat.label}</div>
</div> </div>
))} ))}
</div> </div>
@ -163,13 +163,13 @@ export default function Technologies() {
{/* Modal */} {/* Modal */}
<div <div
className="relative z-10 w-full max-w-lg bg-[#1a2535] border border-orange-500/30 rounded-2xl shadow-2xl shadow-black/60 p-8" className="relative z-10 w-full max-w-lg bg-[#dde4ed] dark:bg-[#1a2535] border border-orange-500/30 rounded-2xl shadow-2xl shadow-black/60 p-8"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
{/* Close button */} {/* Close button */}
<button <button
onClick={() => setActive(null)} onClick={() => setActive(null)}
className="absolute top-4 right-4 w-8 h-8 rounded-lg bg-gray-800 hover:bg-gray-700 text-slate-400 hover:text-white transition-all flex items-center justify-center text-sm font-bold" className="absolute top-4 right-4 w-8 h-8 rounded-lg bg-slate-200 dark:bg-gray-800 hover:bg-slate-300 dark:hover:bg-gray-700 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-all flex items-center justify-center text-sm font-bold"
aria-label="Schliessen" aria-label="Schliessen"
> >
x x
@ -180,17 +180,17 @@ export default function Technologies() {
<span className="text-orange-400 font-mono text-xs tracking-widest uppercase"> <span className="text-orange-400 font-mono text-xs tracking-widest uppercase">
{activeTech.category} {activeTech.category}
</span> </span>
<h3 className="text-2xl font-black text-white mt-1">{activeTech.name}</h3> <h3 className="text-2xl font-black text-slate-900 dark:text-white mt-1">{activeTech.name}</h3>
<div className="w-10 h-0.5 bg-orange-500 rounded mt-3" /> <div className="w-10 h-0.5 bg-orange-500 rounded mt-3" />
</div> </div>
{/* Description */} {/* Description */}
<p className="text-slate-300 text-base leading-relaxed"> <p className="text-slate-700 dark:text-slate-300 text-base leading-relaxed">
{activeTech.description} {activeTech.description}
</p> </p>
{/* Footer hint */} {/* Footer hint */}
<p className="text-slate-600 text-xs mt-6 text-center"> <p className="text-slate-500 dark:text-slate-600 text-xs mt-6 text-center">
Klick ausserhalb oder x zum Schliessen Klick ausserhalb oder x zum Schliessen
</p> </p>
</div> </div>