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

feat: apply light mode classes to Hero, StatsBar, Footer 

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MBO-Tech-IT 2026-04-26 16:45:38 +02:00
parent 7f8160596c
commit 9c7cd0bfec
3 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/Footer.tsx
View File

@ -33,11 +33,11 @@ export default function Footer() {
const year = new Date().getFullYear(); const year = new Date().getFullYear();
return ( return (
<footer className="bg-[#111925] border-t border-gray-800"> <footer className="bg-[#e8eef4] dark:bg-[#111925] border-t border-slate-200 dark:border-gray-800">
{/* Tagline strip */} {/* Tagline strip */}
<div className="border-b border-gray-800 py-6 px-4"> <div className="border-b border-slate-200 dark:border-gray-800 py-6 px-4">
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4"> <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
<p className="text-2xl sm:text-3xl font-black text-white tracking-tight"> <p className="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white tracking-tight">
<span className="text-orange-400">DIGITAL DENKEN.</span>{" "} <span className="text-orange-400">DIGITAL DENKEN.</span>{" "}
<span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">LOKAL HANDELN.</span> <span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">LOKAL HANDELN.</span>
</p> </p>
@ -57,12 +57,12 @@ export default function Footer() {
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<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-<span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">TECH-IT</span> MBO-<span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">TECH-IT</span>
</span> </span>
</div> </div>
</div> </div>
<p className="text-slate-500 text-sm leading-relaxed mb-4"> <p className="text-slate-600 dark:text-slate-500 text-sm leading-relaxed mb-4">
Ihr Spezialist für Docker, Kubernetes, Proxmox und Hetzner Cloud &mdash; Ihr Spezialist für Docker, Kubernetes, Proxmox und Hetzner Cloud &mdash;
professionelle IT-Infrastruktur für Ihr Business. professionelle IT-Infrastruktur für Ihr Business.
</p> </p>
@ -74,13 +74,13 @@ export default function Footer() {
{/* Links */} {/* Links */}
{footerLinks.map((group) => ( {footerLinks.map((group) => (
<div key={group.title}> <div key={group.title}>
<h4 className="text-white font-bold text-sm mb-4 tracking-wide">{group.title}</h4> <h4 className="text-slate-800 dark:text-white font-bold text-sm mb-4 tracking-wide">{group.title}</h4>
<ul className="space-y-2"> <ul className="space-y-2">
{group.links.map((link) => ( {group.links.map((link) => (
<li key={link.label}> <li key={link.label}>
<Link <Link
href={link.href} href={link.href}
className="text-slate-500 hover:text-orange-400 transition-colors text-sm" className="text-slate-600 dark:text-slate-500 hover:text-orange-400 transition-colors text-sm"
> >
{link.label} {link.label}
</Link> </Link>
@ -92,11 +92,11 @@ export default function Footer() {
</div> </div>
{/* Bottom bar */} {/* Bottom bar */}
<div className="pt-8 border-t border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4"> <div className="pt-8 border-t border-slate-200 dark:border-gray-800 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; {year} MBO-Tech-IT. Alle Rechte vorbehalten. &copy; {year} MBO-Tech-IT. Alle Rechte vorbehalten.
</p> </p>
<div className="flex items-center gap-4 text-slate-600 text-sm"> <div className="flex items-center gap-4 text-slate-500 dark:text-slate-600 text-sm">
<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>
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">

6
components/Hero.tsx
View File

@ -28,7 +28,7 @@ export default function Hero() {
</div> </div>
{/* Headline */} {/* Headline */}
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-black text-white leading-tight mb-6 tracking-tight"> <h1 className="text-5xl sm:text-6xl lg:text-7xl font-black text-slate-900 dark:text-white leading-tight mb-6 tracking-tight">
Ihre IT-Infrastruktur.{" "} Ihre IT-Infrastruktur.{" "}
<span className="text-gradient"> <span className="text-gradient">
{typed} {typed}
@ -39,7 +39,7 @@ export default function Hero() {
</h1> </h1>
{/* Subheadline */} {/* Subheadline */}
<p className="text-xl sm:text-2xl text-slate-400 max-w-3xl mx-auto mb-4 leading-relaxed"> <p className="text-xl sm:text-2xl text-slate-600 dark:text-slate-400 max-w-3xl mx-auto mb-4 leading-relaxed">
Von Docker-Containern über Kubernetes-Cluster bis hin zu Von Docker-Containern über Kubernetes-Cluster bis hin zu
Proxmox-Virtualisierung auf Hetzner Cloud &mdash; wir bringen Ihre Proxmox-Virtualisierung auf Hetzner Cloud &mdash; wir bringen Ihre
IT auf das nächste Level. IT auf das nächste Level.
@ -50,7 +50,7 @@ export default function Hero() {
{["Docker", "Kubernetes", "Proxmox", "Hetzner Cloud", "Linux"].map((tech) => ( {["Docker", "Kubernetes", "Proxmox", "Hetzner Cloud", "Linux"].map((tech) => (
<span <span
key={tech} key={tech}
className="px-3 py-1 rounded-md bg-gray-900 border border-gray-700 text-slate-300 text-sm font-mono" className="px-3 py-1 rounded-md bg-slate-100 dark:bg-gray-900 border border-slate-200 dark:border-gray-700 text-slate-700 dark:text-slate-300 text-sm font-mono"
> >
{tech} {tech}
</span> </span>

2
components/StatsBar.tsx
View File

@ -56,7 +56,7 @@ function Counter({ value, suffix, accent }: { value: number; suffix: string; acc
export default function StatsBar() { export default function StatsBar() {
return ( return (
<section className="py-12 px-4 sm:px-6 lg:px-8 relative"> <section className="py-12 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="max-w-7xl mx-auto relative"> <div className="max-w-7xl mx-auto relative">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
{stats.map((stat) => ( {stats.map((stat) => (