From 146ebd7d91be2e0b923a32021333db1710c59b96 Mon Sep 17 00:00:00 2001
From: MBO-Tech-IT <jonny@mbo-tech-it.de>
Date: Tue, 28 Apr 2026 09:26:44 +0200
Subject: [PATCH] feat: reorder services, replace package prices with "Auf
 Anfrage"

- Services: WLAN & Netzwerk und Individuelle Webanwendungen direkt nach
  Hardware & Software einsortiert
- Pakete: Installations-Preise durch "Auf Anfrage" ersetzt,
  Metadata-Description aktualisiert

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/pakete/page.tsx     | 14 +++++-------
 components/Services.tsx | 48 ++++++++++++++++++++---------------------
 2 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/app/pakete/page.tsx b/app/pakete/page.tsx
index 57c3e67..798d78b 100644
--- a/app/pakete/page.tsx
+++ b/app/pakete/page.tsx
@@ -5,7 +5,7 @@ import Logo from "@/components/Logo";
 export const metadata: Metadata = {
   title: "Pakete & Preise | MBO-Tech-IT",
   description:
-    "Konkrete IT-Pakete: Nextcloud + Paperless-ngx auf Docker/Kubernetes/Proxmox – inkl. Preise für Installation, Hosting und Wartung.",
+    "Konkrete IT-Pakete: Nextcloud + Paperless-ngx auf Docker/Kubernetes/Proxmox – Installation, Hosting und Wartung. Preise auf Anfrage.",
 };
 
 const packages = [
@@ -252,15 +252,11 @@ export default function PaketePage() {
                 <p className="text-slate-600 dark:text-slate-400 text-sm">{pkg.subtitle}</p>
               </div>
 
-              {/* Setup price */}
-              <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-4xl font-black text-slate-900 dark:text-white">{pkg.price} €</span>
-                <span className="text-slate-400 text-sm">{pkg.setup}</span>
+              {/* Price on request */}
+              <div className="mb-6">
+                <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>
-              <p className="text-slate-500 text-xs mb-6">
-                + Serverkosten {pkg.monthly} €/Monat (Hetzner direkt)
-              </p>
 
               {/* Server specs */}
               <div className="p-3 rounded-xl bg-slate-100 dark:bg-[#111925] mb-5 space-y-1">
diff --git a/components/Services.tsx b/components/Services.tsx
index 47db587..0902d3c 100644
--- a/components/Services.tsx
+++ b/components/Services.tsx
@@ -13,6 +13,30 @@ const services = [
     features: ["Hardware-Beratung", "Software-Lizenzierung", "System-Konfiguration", "IT-Support"],
     accent: "orange",
   },
+  {
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
+        <path d="M1 6l5 4-5 4V6zm7 0h14v2H8V6zm0 5h14v2H8v-2zm0 5h14v2H8v-2z" />
+      </svg>
+    ),
+    title: "WLAN & Netzwerk",
+    description:
+      "Professionelle WLAN-Planung, Installation und Troubleshooting für Privat- und Gewerbekunden. Mesh-Netzwerke, Access Points und hartnäckige Netzwerkprobleme — auch in schwierigen Gebäuden.",
+    features: ["WLAN-Planung & Installation", "Mesh-Netzwerke", "Netzwerk-Troubleshooting", "Privat- & Gewerbekunden"],
+    accent: "blue",
+  },
+  {
+    icon: (
+      <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
+        <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
+      </svg>
+    ),
+    title: "Individuelle Webanwendungen",
+    description:
+      "Maßgeschneiderte Web-Apps für spezielle Geschäftsanforderungen. Von Kundenportalen über interne Tools bis zu Buchungssystemen — entwickelt auf Ihre Prozesse zugeschnitten.",
+    features: ["Maßgeschneiderte Entwicklung", "Kundenportale & Tools", "API-Integrationen", "Moderner Tech-Stack"],
+    accent: "orange",
+  },
   {
     icon: (
       <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
@@ -73,30 +97,6 @@ const services = [
     features: ["Cluster-Setup", "Helm Charts", "Auto-Scaling", "Monitoring & Logging"],
     accent: "blue",
   },
-  {
-    icon: (
-      <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
-        <path d="M1 6l5 4-5 4V6zm7 0h14v2H8V6zm0 5h14v2H8v-2zm0 5h14v2H8v-2z" />
-      </svg>
-    ),
-    title: "WLAN & Netzwerk",
-    description:
-      "Professionelle WLAN-Planung, Installation und Troubleshooting für Privat- und Gewerbekunden. Mesh-Netzwerke, Access Points und hartnäckige Netzwerkprobleme — auch in schwierigen Gebäuden.",
-    features: ["WLAN-Planung & Installation", "Mesh-Netzwerke", "Netzwerk-Troubleshooting", "Privat- & Gewerbekunden"],
-    accent: "orange",
-  },
-  {
-    icon: (
-      <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
-        <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
-      </svg>
-    ),
-    title: "Individuelle Webanwendungen",
-    description:
-      "Maßgeschneiderte Web-Apps für spezielle Geschäftsanforderungen. Von Kundenportalen über interne Tools bis zu Buchungssystemen — entwickelt auf Ihre Prozesse zugeschnitten.",
-    features: ["Maßgeschneiderte Entwicklung", "Kundenportale & Tools", "API-Integrationen", "Moderner Tech-Stack"],
-    accent: "blue",
-  },
 ];
 
 const colorMap = {