feat: rebuild /pakete as service overview with tiles

This commit is contained in:
MBO-Tech-IT 2026-06-29 17:02:27 +02:00
parent 9a0677226c
commit 43f5476f3f
1 changed files with 64 additions and 278 deletions

View File

@ -3,13 +3,13 @@ import Link from "next/link";
import Logo from "@/components/Logo"; import Logo from "@/components/Logo";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Pakete & Preise", title: "Pakete & Preise | MBO-Tech-IT",
description: description:
"Nextcloud + Paperless-ngx auf Docker, Kubernetes oder Proxmox: Installation, Hosting und Wartung in Crailsheim. Individuelle Angebote auf Anfrage.", "Unsere IT-Dienstleistungen auf einen Blick: Nextcloud + Paperless-ngx Cloud-Lösungen und Zero-Trust-VPN für sicheren Fernzugriff. Individuelle Angebote aus Crailsheim.",
openGraph: { openGraph: {
title: "Pakete & Preise | MBO-Tech-IT", title: "Pakete & Preise | MBO-Tech-IT",
description: description:
"Nextcloud + Paperless-ngx auf Docker, Kubernetes oder Proxmox: Installation, Hosting und Wartung in Crailsheim.", "Nextcloud, Paperless-ngx und Zero-Trust-VPN — IT-Lösungen aus Crailsheim.",
url: "https://mbo-tech-it.de/pakete", url: "https://mbo-tech-it.de/pakete",
}, },
alternates: { alternates: {
@ -17,145 +17,33 @@ export const metadata: Metadata = {
}, },
}; };
const packages = [ const services = [
{ {
name: "Starter", href: "/pakete/nextcloud",
subtitle: "Nextcloud + Paperless", icon: (
tag: "Docker auf Hetzner CX22", <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
price: "174", <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" />
setup: "Einmalig", </svg>
monthly: "ab 12", ),
highlight: false, iconBg: "bg-blue-500/10 text-blue-400",
specs: { label: "Nextcloud + Paperless-ngx",
server: "Hetzner CX22 (2 vCPU, 4 GB RAM)", description:
storage: "40 GB SSD + optionale Storage Box", "Eigene Cloud & digitales Dokumentenarchiv auf Ihrem Server — DSGVO-konform, selbst gehostet auf Hetzner Cloud.",
os: "Ubuntu 24.04 LTS", tag: "Einmalige Installation ab Anfrage",
stack: "Docker + Docker Compose",
},
includes: [
"Nextcloud Installation & Konfiguration",
"Paperless-ngx Dokumentenmanagement",
"PostgreSQL Datenbank (Docker)",
"Redis Cache (Docker)",
"Traefik Reverse Proxy + SSL (Let's Encrypt)",
"Automatische Backups (Hetzner Snapshot)",
"Basis-Monitoring",
"1 Monat Support inklusive",
],
monthly_costs: [
{ label: "Hetzner CX22 Server", price: "4,35 €" },
{ label: "20 GB Snapshot-Backup", price: "0,60 €" },
{ label: "Gesamt Serverkosten", price: "~5 €" },
],
}, },
{ {
name: "Professional", href: "/pakete/vpn",
subtitle: "Nextcloud + Paperless", icon: (
tag: "Docker + Traefik auf Hetzner CAX21", <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
price: "384", <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" />
setup: "Einmalig", </svg>
monthly: "ab 22", ),
highlight: true, iconBg: "bg-orange-500/10 text-orange-400",
specs: { label: "Zero-Trust-VPN",
server: "Hetzner CAX21 ARM64 (4 vCPU, 8 GB RAM)", description:
storage: "80 GB SSD + BX21 Storage Box (1 TB)", "Sicherer Fernzugriff für alle Mitarbeiter. Managed Netbird mit WireGuard — Server in Deutschland, feste Monatspauschale.",
os: "Ubuntu 24.04 LTS", tag: "NEU · ab 89 €/Monat",
stack: "Docker Compose + Watchtower (Auto-Updates)", isNew: true,
},
includes: [
"Alles aus Starter-Paket",
"Nextcloud All-in-One Instanz",
"Nextcloud Office (Collabora/OnlyOffice)",
"Paperless-ngx mit OCR (deutsch & englisch)",
"Nextcloud Talk (Videokommunikation)",
"Externe Storage Box für Dokumente (1 TB)",
"Automatische Nextcloud-Updates via Watchtower",
"E-Mail-Benachrichtigungen bei Systemereignissen",
"SMTP-Integration für Nextcloud",
"3 Monate Support inklusive",
],
monthly_costs: [
{ label: "Hetzner CAX21 Server", price: "7,69 €" },
{ label: "BX21 Storage Box (1 TB)", price: "3,20 €" },
{ label: "Backup-Snapshot", price: "0,80 €" },
{ label: "Gesamt Serverkosten", price: "~12 €" },
],
},
{
name: "Enterprise",
subtitle: "Nextcloud + Paperless Cluster",
tag: "Kubernetes auf Proxmox / Hetzner CAX41",
price: "1.049",
setup: "Einmalig",
monthly: "ab 55",
highlight: false,
specs: {
server: "Hetzner CAX41 (16 vCPU, 32 GB RAM) oder Proxmox Cluster",
storage: "160 GB SSD + BX31 Storage Box (5 TB)",
os: "Ubuntu 24.04 LTS / Proxmox VE 8",
stack: "Kubernetes (k3s) + Helm Charts + Longhorn Storage",
},
includes: [
"Alles aus Professional-Paket",
"Kubernetes Cluster (k3s) Setup",
"Helm-basiertes Nextcloud-Deployment",
"Horizontal Pod Autoscaling",
"Longhorn Distributed Storage",
"Grafana + Prometheus Monitoring",
"Zentrales Logging (Loki)",
"GitLab CI/CD Pipeline für Updates",
"Hochverfügbarkeit (HA) Konfiguration",
"SLA: 99,9% Uptime-Garantie",
"12 Monate Priority-Support inklusive",
],
monthly_costs: [
{ label: "Hetzner CAX41 Server", price: "30,99 €" },
{ label: "BX31 Storage Box (5 TB)", price: "10,90 €" },
{ label: "Load Balancer", price: "5,54 €" },
{ label: "Monitoring-Stack", price: "~8 €" },
{ label: "Gesamt Serverkosten", price: "~55 €" },
],
},
];
const maintenancePlans = [
{
name: "Basic Wartung",
price: "27",
interval: "/ Monat",
features: [
"Monatliche System-Updates",
"Docker-Image Updates",
"Backup-Kontrolle",
"E-Mail-Support (5 Werktage Reaktionszeit)",
],
},
{
name: "Standard Wartung",
price: "62",
interval: "/ Monat",
features: [
"Wöchentliche Updates & Patches",
"Sicherheits-Monitoring 24/7",
"Performance-Checks",
"Telefon- & E-Mail-Support (2 Werktage)",
"Monatlicher Status-Report",
"1 Std. Anpassungen inklusive",
],
},
{
name: "Premium Wartung",
price: "132",
interval: "/ Monat",
features: [
"Tägliche Updates & Monitoring",
"Sofortiger Incident-Response",
"Proaktive Performance-Optimierung",
"Priority-Support (4 Std. Reaktionszeit)",
"Wöchentlicher Status-Report",
"3 Std. Anpassungen inklusive",
"Quartalsweise Sicherheits-Audits",
],
}, },
]; ];
@ -193,161 +81,59 @@ export default function PaketePage() {
{/* Hero */} {/* Hero */}
<div className="text-center mb-16"> <div className="text-center mb-16">
<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 Unsere Leistungen
</span> </span>
<h1 className="text-4xl sm:text-5xl font-black text-slate-900 dark: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 Pakete & Preise
</h1> </h1>
<p className="text-slate-600 dark: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 Wählen Sie Ihre Lösung wir installieren, betreiben und warten.
digitales Dokumentenarchiv mit Paperless-ngx &ndash; sicher selbst gehostet Alles aus einer Hand, aus Crailsheim.
auf Hetzner Cloud.
</p> </p>
</div> </div>
{/* What is it */} {/* Service-Kacheln */}
<div className="grid md:grid-cols-2 gap-6 mb-16"> <div className="grid sm:grid-cols-2 gap-6 max-w-3xl mx-auto mb-16">
<div className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800"> {services.map((service) => (
<div className="w-12 h-12 rounded-xl bg-blue-500/10 text-blue-400 flex items-center justify-center mb-4"> <Link
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> key={service.href}
<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" /> href={service.href}
</svg> className="group relative p-6 rounded-2xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 hover:border-orange-500/50 hover:shadow-lg hover:shadow-orange-500/5 transition-all duration-300 flex flex-col"
</div>
<h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">Nextcloud</h3>
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
Die freie Alternative zu Dropbox & Google Drive. Dateien, Kalender,
Kontakte, Videokonferenzen und Office-Dokumente &ndash; alles auf Ihrem
eigenen Server. Volle DSGVO-Konformität, keine Drittanbieter.
</p>
</div>
<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">
<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" />
</svg>
</div>
<h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">Paperless-ngx</h3>
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
Digitales Dokumentenmanagementsystem mit OCR-Texterkennung. Rechnungen,
Verträge, Briefe &ndash; alles durchsuchbar archiviert. Automatische
Klassifizierung und Tagging von Dokumenten.
</p>
</div>
</div>
{/* Packages */}
<h2 className="text-3xl font-black text-slate-900 dark:text-white mb-8 text-center">
Installations-Pakete
</h2>
<div className="grid lg:grid-cols-3 gap-6 mb-20">
{packages.map((pkg) => (
<div
key={pkg.name}
className={`relative rounded-2xl p-6 border transition-all duration-300 ${
pkg.highlight
? "bg-orange-500/5 border-orange-500/50 shadow-lg shadow-orange-500/10"
: "bg-white dark:bg-gray-900 border-slate-200 dark:border-gray-800"
}`}
> >
{pkg.highlight && ( {service.isNew && (
<div className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-orange-500 rounded-full text-white text-xs font-black tracking-wider"> <span className="absolute top-4 right-4 px-2 py-0.5 bg-orange-500 rounded-full text-white text-[10px] font-black tracking-wider">
EMPFOHLEN NEU
</div> </span>
)} )}
<div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-4 ${service.iconBg}`}>
<div className="mb-5"> {service.icon}
<span className="text-orange-400 text-xs font-bold tracking-widest uppercase">{pkg.tag}</span>
<h3 className="text-2xl font-black text-slate-900 dark:text-white mt-1">{pkg.name}</h3>
<p className="text-slate-600 dark:text-slate-400 text-sm">{pkg.subtitle}</p>
</div> </div>
<h2 className="text-lg font-black text-slate-900 dark:text-white mb-2">
{/* Price on request */} {service.label}
<div className="mb-6"> </h2>
<span className="text-3xl font-black text-orange-400">Auf Anfrage</span> <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed flex-1">
<p className="text-slate-500 text-xs mt-1">Individuelles Angebot nach Beratungsgespräch</p> {service.description}
</p>
<div className="mt-4 flex items-center justify-between">
<span className="text-orange-400 text-xs font-bold">{service.tag}</span>
<svg
className="w-4 h-4 text-slate-400 group-hover:text-orange-400 group-hover:translate-x-1 transition-all"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</div> </div>
</Link>
{/* Server specs */}
<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-600 dark:text-slate-400 font-mono">{pkg.specs.server}</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-600 dark:text-slate-400 font-mono">Stack: {pkg.specs.stack}</p>
</div>
{/* Monthly costs breakdown */}
<div className="mb-5">
<p className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-2">Laufende Serverkosten</p>
{pkg.monthly_costs.map((c) => (
<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-600 dark:text-slate-400">{c.label}</span>
<span className={c.label.startsWith("Gesamt") ? "text-orange-400 font-bold" : "text-slate-600 dark:text-slate-400"}>
{c.price}
</span>
</div>
))}
</div>
{/* Includes */}
<ul className="space-y-2 mb-6">
{pkg.includes.map((item) => (
<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">
<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" />
</svg>
</span>
{item}
</li>
))}
</ul>
<Link
href="/#contact"
className={`block w-full py-3 rounded-xl text-center font-bold text-sm transition-colors ${
pkg.highlight
? "bg-orange-500 hover:bg-orange-600 text-white"
: "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
</Link>
</div>
))} ))}
</div> </div>
{/* Maintenance */} {/* CTA */}
<h2 className="text-3xl font-black text-slate-900 dark:text-white mb-3 text-center">Wartungsvertrag</h2>
<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.
Wir kümmern uns um Updates, Sicherheit und Betrieb.
</p>
<div className="grid md:grid-cols-3 gap-6 mb-16">
{maintenancePlans.map((plan) => (
<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-slate-800 dark:text-white font-bold text-lg mb-1">{plan.name}</h3>
<div className="mb-4">
<span className="text-3xl font-black text-orange-400">Auf Anfrage</span>
<p className="text-slate-500 text-xs mt-1">Individuelles Angebot nach Beratungsgespräch</p>
</div>
<ul className="space-y-2">
{plan.features.map((f) => (
<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" />
{f}
</li>
))}
</ul>
</div>
))}
</div>
{/* 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-600 dark:text-slate-400 text-sm"> <p className="text-slate-600 dark:text-slate-400 text-sm">
<strong className="text-slate-900 dark:text-white">Hinweis:</strong> Die Serverkosten bei Hetzner werden <strong className="text-slate-900 dark:text-white">Nicht sicher, was passt?</strong>{" "}
direkt von Ihnen bezahlt &ndash; wir installieren und warten, Sie behalten die volle Kostenlose Erstberatung vor Ort kein Risiko, kein Kleingedrucktes.
Kontrolle. Alle Preise zzgl. gesetzl. MwSt. Individuelle Angebote auf Anfrage.
</p> </p>
<Link <Link
href="/#contact" href="/#contact"