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

feat: apply light mode classes to pakete page 

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MBO-Tech-IT 2026-04-26 19:52:27 +02:00
parent d5e88b58ab
commit 9339986d31
1 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
app/pakete/page.tsx
View File

@ -152,14 +152,14 @@ const maintenancePlans = [
export default function PaketePage() { export default function PaketePage() {
return ( return (
<div className="min-h-screen bg-[#18212f]"> <div className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
{/* Header */} {/* Header */}
<header className="bg-[#111925] border-b border-gray-800"> <header className="bg-white dark:bg-[#111925] border-b border-slate-200 dark:border-gray-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
<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-<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>
<span className="text-[9px] font-semibold tracking-[0.2em] text-orange-400/70 uppercase hidden sm:block"> <span className="text-[9px] font-semibold tracking-[0.2em] text-orange-400/70 uppercase hidden sm:block">
@ -169,7 +169,7 @@ export default function PaketePage() {
</Link> </Link>
<Link <Link
href="/" href="/"
className="flex items-center gap-2 text-slate-400 hover:text-orange-400 transition-colors text-sm font-medium" className="flex items-center gap-2 text-slate-600 dark:text-slate-400 hover:text-orange-400 transition-colors text-sm font-medium"
> >
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
@ -186,10 +186,10 @@ export default function PaketePage() {
<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">
Beispiel-Paket Beispiel-Paket
</span> </span>
<h1 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-4"> <h1 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-4">
Nextcloud + Paperless-ngx Nextcloud + Paperless-ngx
</h1> </h1>
<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">
Ihr persönliches Cloud-Büro: Datei-Management mit Nextcloud und Ihr persönliches Cloud-Büro: Datei-Management mit Nextcloud und
digitales Dokumentenarchiv mit Paperless-ngx &ndash; sicher selbst gehostet digitales Dokumentenarchiv mit Paperless-ngx &ndash; sicher selbst gehostet
auf Hetzner Cloud. auf Hetzner Cloud.
@ -198,27 +198,27 @@ export default function PaketePage() {
{/* What is it */} {/* What is it */}
<div className="grid md:grid-cols-2 gap-6 mb-16"> <div className="grid md:grid-cols-2 gap-6 mb-16">
<div className="p-6 rounded-2xl bg-gray-900 border border-gray-800"> <div className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800">
<div className="w-12 h-12 rounded-xl bg-blue-500/10 text-blue-400 flex items-center justify-center mb-4"> <div className="w-12 h-12 rounded-xl bg-blue-500/10 text-blue-400 flex items-center justify-center mb-4">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
</svg> </svg>
</div> </div>
<h3 className="text-white font-bold text-lg mb-2">Nextcloud</h3> <h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">Nextcloud</h3>
<p className="text-slate-400 text-sm leading-relaxed"> <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
Die freie Alternative zu Dropbox & Google Drive. Dateien, Kalender, Die freie Alternative zu Dropbox & Google Drive. Dateien, Kalender,
Kontakte, Videokonferenzen und Office-Dokumente &ndash; alles auf Ihrem Kontakte, Videokonferenzen und Office-Dokumente &ndash; alles auf Ihrem
eigenen Server. Volle DSGVO-Konformität, keine Drittanbieter. eigenen Server. Volle DSGVO-Konformität, keine Drittanbieter.
</p> </p>
</div> </div>
<div className="p-6 rounded-2xl bg-gray-900 border border-gray-800"> <div className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800">
<div className="w-12 h-12 rounded-xl bg-orange-500/10 text-orange-400 flex items-center justify-center mb-4"> <div className="w-12 h-12 rounded-xl bg-orange-500/10 text-orange-400 flex items-center justify-center mb-4">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6" 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>
<h3 className="text-white font-bold text-lg mb-2">Paperless-ngx</h3> <h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">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">
Digitales Dokumentenmanagementsystem mit OCR-Texterkennung. Rechnungen, Digitales Dokumentenmanagementsystem mit OCR-Texterkennung. Rechnungen,
Verträge, Briefe &ndash; alles durchsuchbar archiviert. Automatische Verträge, Briefe &ndash; alles durchsuchbar archiviert. Automatische
Klassifizierung und Tagging von Dokumenten. Klassifizierung und Tagging von Dokumenten.
@ -227,7 +227,7 @@ export default function PaketePage() {
</div> </div>
{/* Packages */} {/* Packages */}
<h2 className="text-3xl font-black text-white mb-8 text-center"> <h2 className="text-3xl font-black text-slate-900 dark:text-white mb-8 text-center">
Installations-Pakete Installations-Pakete
</h2> </h2>
<div className="grid lg:grid-cols-3 gap-6 mb-20"> <div className="grid lg:grid-cols-3 gap-6 mb-20">
@ -237,7 +237,7 @@ export default function PaketePage() {
className={`relative rounded-2xl p-6 border transition-all duration-300 ${ className={`relative rounded-2xl p-6 border transition-all duration-300 ${
pkg.highlight pkg.highlight
? "bg-orange-500/5 border-orange-500/50 shadow-lg shadow-orange-500/10" ? "bg-orange-500/5 border-orange-500/50 shadow-lg shadow-orange-500/10"
: "bg-gray-900 border-gray-800" : "bg-white dark:bg-gray-900 border-slate-200 dark:border-gray-800"
}`} }`}
> >
{pkg.highlight && ( {pkg.highlight && (
@ -248,14 +248,14 @@ export default function PaketePage() {
<div className="mb-5"> <div className="mb-5">
<span className="text-orange-400 text-xs font-bold tracking-widest uppercase">{pkg.tag}</span> <span className="text-orange-400 text-xs font-bold tracking-widest uppercase">{pkg.tag}</span>
<h3 className="text-2xl font-black text-white mt-1">{pkg.name}</h3> <h3 className="text-2xl font-black text-slate-900 dark:text-white mt-1">{pkg.name}</h3>
<p className="text-slate-400 text-sm">{pkg.subtitle}</p> <p className="text-slate-600 dark:text-slate-400 text-sm">{pkg.subtitle}</p>
</div> </div>
{/* Setup price */} {/* Setup price */}
<div className="mb-2 flex items-baseline gap-1.5"> <div className="mb-2 flex items-baseline gap-1.5">
<span className="text-xs text-slate-500 font-semibold tracking-wide">ab</span> <span className="text-xs text-slate-500 font-semibold tracking-wide">ab</span>
<span className="text-4xl font-black text-white">{pkg.price} €</span> <span className="text-4xl font-black text-slate-900 dark:text-white">{pkg.price} €</span>
<span className="text-slate-400 text-sm">{pkg.setup}</span> <span className="text-slate-400 text-sm">{pkg.setup}</span>
</div> </div>
<p className="text-slate-500 text-xs mb-6"> <p className="text-slate-500 text-xs mb-6">
@ -263,20 +263,20 @@ export default function PaketePage() {
</p> </p>
{/* Server specs */} {/* Server specs */}
<div className="p-3 rounded-xl bg-[#111925] mb-5 space-y-1"> <div className="p-3 rounded-xl bg-slate-100 dark:bg-[#111925] mb-5 space-y-1">
<p className="text-xs text-slate-500 font-mono"># Server-Konfiguration</p> <p className="text-xs text-slate-500 font-mono"># Server-Konfiguration</p>
<p className="text-xs text-slate-400 font-mono">{pkg.specs.server}</p> <p className="text-xs text-slate-600 dark:text-slate-400 font-mono">{pkg.specs.server}</p>
<p className="text-xs text-slate-400 font-mono">Storage: {pkg.specs.storage}</p> <p className="text-xs text-slate-600 dark:text-slate-400 font-mono">Storage: {pkg.specs.storage}</p>
<p className="text-xs text-slate-400 font-mono">Stack: {pkg.specs.stack}</p> <p className="text-xs text-slate-600 dark:text-slate-400 font-mono">Stack: {pkg.specs.stack}</p>
</div> </div>
{/* Monthly costs breakdown */} {/* Monthly costs breakdown */}
<div className="mb-5"> <div className="mb-5">
<p className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-2">Laufende Serverkosten</p> <p className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-2">Laufende Serverkosten</p>
{pkg.monthly_costs.map((c) => ( {pkg.monthly_costs.map((c) => (
<div key={c.label} className="flex justify-between text-xs py-1 border-b border-gray-800"> <div key={c.label} className="flex justify-between text-xs py-1 border-b border-slate-200 dark:border-gray-800">
<span className="text-slate-400">{c.label}</span> <span className="text-slate-600 dark:text-slate-400">{c.label}</span>
<span className={c.label.startsWith("Gesamt") ? "text-orange-400 font-bold" : "text-slate-400"}> <span className={c.label.startsWith("Gesamt") ? "text-orange-400 font-bold" : "text-slate-600 dark:text-slate-400"}>
{c.price} {c.price}
</span> </span>
</div> </div>
@ -286,7 +286,7 @@ export default function PaketePage() {
{/* Includes */} {/* Includes */}
<ul className="space-y-2 mb-6"> <ul className="space-y-2 mb-6">
{pkg.includes.map((item) => ( {pkg.includes.map((item) => (
<li key={item} className="flex items-start gap-2 text-sm text-slate-300"> <li key={item} className="flex items-start gap-2 text-sm text-slate-700 dark:text-slate-300">
<span className="w-4 h-4 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0 mt-0.5"> <span className="w-4 h-4 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0 mt-0.5">
<svg className="w-2.5 h-2.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-2.5 h-2.5 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" />
@ -302,7 +302,7 @@ export default function PaketePage() {
className={`block w-full py-3 rounded-xl text-center font-bold text-sm transition-colors ${ className={`block w-full py-3 rounded-xl text-center font-bold text-sm transition-colors ${
pkg.highlight pkg.highlight
? "bg-orange-500 hover:bg-orange-600 text-white" ? "bg-orange-500 hover:bg-orange-600 text-white"
: "bg-gray-800 hover:bg-gray-700 text-white border border-gray-700" : "bg-slate-100 dark:bg-gray-800 hover:bg-slate-200 dark:hover:bg-gray-700 text-slate-800 dark:text-white border border-slate-300 dark:border-gray-700"
}`} }`}
> >
Paket anfragen Paket anfragen
@ -312,23 +312,23 @@ export default function PaketePage() {
</div> </div>
{/* Maintenance */} {/* Maintenance */}
<h2 className="text-3xl font-black text-white mb-3 text-center">Wartungsvertrag</h2> <h2 className="text-3xl font-black text-slate-900 dark:text-white mb-3 text-center">Wartungsvertrag</h2>
<p className="text-slate-400 text-center mb-10 max-w-xl mx-auto"> <p className="text-slate-600 dark:text-slate-400 text-center mb-10 max-w-xl mx-auto">
Nach der Installation können Sie optional einen Wartungsvertrag abschließen. Nach der Installation können Sie optional einen Wartungsvertrag abschließen.
Wir kümmern uns um Updates, Sicherheit und Betrieb. Wir kümmern uns um Updates, Sicherheit und Betrieb.
</p> </p>
<div className="grid md:grid-cols-3 gap-6 mb-16"> <div className="grid md:grid-cols-3 gap-6 mb-16">
{maintenancePlans.map((plan) => ( {maintenancePlans.map((plan) => (
<div key={plan.name} className="p-6 rounded-2xl bg-gray-900 border border-gray-800 hover:border-orange-500/30 transition-all"> <div key={plan.name} className="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">
<h3 className="text-white font-bold text-lg mb-1">{plan.name}</h3> <h3 className="text-slate-800 dark:text-white font-bold text-lg mb-1">{plan.name}</h3>
<div className="mb-4 flex items-baseline gap-1.5"> <div className="mb-4 flex items-baseline gap-1.5">
<span className="text-xs text-slate-500 font-semibold tracking-wide">ab</span> <span className="text-xs text-slate-500 font-semibold tracking-wide">ab</span>
<span className="text-3xl font-black text-orange-400">{plan.price} €</span> <span className="text-3xl font-black text-orange-400">{plan.price} €</span>
<span className="text-slate-400 text-sm">{plan.interval}</span> <span className="text-slate-600 dark:text-slate-400 text-sm">{plan.interval}</span>
</div> </div>
<ul className="space-y-2"> <ul className="space-y-2">
{plan.features.map((f) => ( {plan.features.map((f) => (
<li key={f} className="flex items-start gap-2 text-sm text-slate-400"> <li key={f} className="flex items-start gap-2 text-sm text-slate-600 dark:text-slate-400">
<span className="w-1.5 h-1.5 rounded-full bg-orange-400 flex-shrink-0 mt-1.5" /> <span className="w-1.5 h-1.5 rounded-full bg-orange-400 flex-shrink-0 mt-1.5" />
{f} {f}
</li> </li>
@ -340,8 +340,8 @@ export default function PaketePage() {
{/* Note */} {/* Note */}
<div className="p-6 rounded-2xl border border-blue-500/20 bg-blue-500/5 text-center"> <div className="p-6 rounded-2xl border border-blue-500/20 bg-blue-500/5 text-center">
<p className="text-slate-400 text-sm"> <p className="text-slate-600 dark:text-slate-400 text-sm">
<strong className="text-white">Hinweis:</strong> Die Serverkosten bei Hetzner werden <strong className="text-slate-900 dark:text-white">Hinweis:</strong> Die Serverkosten bei Hetzner werden
direkt von Ihnen bezahlt &ndash; wir installieren und warten, Sie behalten die volle direkt von Ihnen bezahlt &ndash; wir installieren und warten, Sie behalten die volle
Kontrolle. Alle Preise zzgl. gesetzl. MwSt. Individuelle Angebote auf Anfrage. Kontrolle. Alle Preise zzgl. gesetzl. MwSt. Individuelle Angebote auf Anfrage.
</p> </p>