feat: add Zero-Trust-VPN detail page at /pakete/vpn
This commit is contained in:
parent
b8abfae323
commit
9a0677226c
|
|
@ -0,0 +1,228 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Logo from "@/components/Logo";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Zero-Trust-VPN | MBO-Tech-IT",
|
||||||
|
description:
|
||||||
|
"Managed Netbird VPN mit WireGuard für Ihr Unternehmen — sicherer Fernzugriff, DSGVO-konform, Server in Deutschland. Feste Monatspauschale ab 89 €.",
|
||||||
|
openGraph: {
|
||||||
|
title: "Zero-Trust-VPN | MBO-Tech-IT",
|
||||||
|
description:
|
||||||
|
"Managed Netbird VPN mit WireGuard — sicherer Fernzugriff, DSGVO-konform, Server in Deutschland. Ab 89 €/Monat.",
|
||||||
|
url: "https://mbo-tech-it.de/pakete/vpn",
|
||||||
|
},
|
||||||
|
alternates: {
|
||||||
|
canonical: "https://mbo-tech-it.de/pakete/vpn",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const vpnPackages = [
|
||||||
|
{
|
||||||
|
name: "Starter",
|
||||||
|
users: "bis 5 Nutzer",
|
||||||
|
devices: "15 Geräte",
|
||||||
|
price: "89",
|
||||||
|
setup: "490",
|
||||||
|
highlight: false,
|
||||||
|
includes: [
|
||||||
|
"Einrichtung & Client-Rollout",
|
||||||
|
"Sicherer Fernzugriff (WireGuard)",
|
||||||
|
"Monitoring & Updates",
|
||||||
|
"E-Mail-Support",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Business",
|
||||||
|
users: "bis 20 Nutzer",
|
||||||
|
devices: "50 Geräte",
|
||||||
|
price: "149",
|
||||||
|
setup: "790",
|
||||||
|
highlight: true,
|
||||||
|
includes: [
|
||||||
|
"Alles aus Starter",
|
||||||
|
"Mehrere Standorte",
|
||||||
|
"Zugriffs-Protokollierung",
|
||||||
|
"Telefon-Support",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Professional",
|
||||||
|
users: "bis 50 Nutzer",
|
||||||
|
devices: "150 Geräte",
|
||||||
|
price: "249",
|
||||||
|
setup: "1.290",
|
||||||
|
highlight: false,
|
||||||
|
includes: [
|
||||||
|
"Alles aus Business",
|
||||||
|
"SLA 4h Reaktionszeit",
|
||||||
|
"NIS2-Dokumentation",
|
||||||
|
"Hochverfügbarkeit",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function VpnPage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
|
||||||
|
{/* Header */}
|
||||||
|
<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">
|
||||||
|
<Link href="/" className="flex items-center gap-3 group">
|
||||||
|
<Logo className="h-8 w-auto" />
|
||||||
|
<div className="flex flex-col leading-tight">
|
||||||
|
<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>
|
||||||
|
</span>
|
||||||
|
<span className="text-[9px] font-semibold tracking-[0.2em] text-orange-400/70 uppercase hidden sm:block">
|
||||||
|
Digital Denken. Lokal Handeln.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/pakete"
|
||||||
|
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">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||||
|
</svg>
|
||||||
|
Zurück
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||||
|
|
||||||
|
{/* Hero */}
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
|
||||||
|
NEU: Zero-Trust-VPN
|
||||||
|
</span>
|
||||||
|
<h1 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-4">
|
||||||
|
Ihre Mitarbeiter. Überall.<br className="hidden sm:block" /> Sicher verbunden.
|
||||||
|
</h1>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400 text-lg max-w-2xl mx-auto">
|
||||||
|
Kein offener Port. Kein VPN-Konzentrator. Keine Fritzbox-Bastelei.
|
||||||
|
Von uns eingerichtet, betrieben und überwacht.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Was ist das? */}
|
||||||
|
<div className="grid md:grid-cols-2 gap-6 mb-16">
|
||||||
|
<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 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" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">Zero Trust</h3>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
|
||||||
|
Jeder Mitarbeiter sieht nur, was er darf — Buchhalter kommt nicht ans Lager,
|
||||||
|
Monteur nicht in die Buchhaltung. Granulare Rechteverwaltung statt
|
||||||
|
„einmal drin = alles sehen" wie beim klassischen VPN.
|
||||||
|
</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-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">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-slate-800 dark:text-white font-bold text-lg mb-2">WireGuard</h3>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
|
||||||
|
Modernes VPN-Protokoll der nächsten Generation: schneller und sicherer als
|
||||||
|
klassisches IPSec oder OpenVPN. Militärgrade-Verschlüsselung,
|
||||||
|
kein Datenverkehr über fremde Server, DSGVO-konform mit
|
||||||
|
Server-Standort Deutschland.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pakete */}
|
||||||
|
<h2 className="text-3xl font-black text-slate-900 dark:text-white mb-3 text-center">
|
||||||
|
Unsere Pakete
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400 text-center mb-10 max-w-xl mx-auto">
|
||||||
|
Monatliche Pauschale, keine versteckten Kosten — egal wie viele Mitarbeiter
|
||||||
|
sich einwählen.
|
||||||
|
</p>
|
||||||
|
<div className="grid lg:grid-cols-3 gap-6 mb-16">
|
||||||
|
{vpnPackages.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 && (
|
||||||
|
<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">
|
||||||
|
EMPFOHLEN
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mb-5">
|
||||||
|
<span className="text-orange-400 text-xs font-bold tracking-widest uppercase">
|
||||||
|
{pkg.users} · {pkg.devices}
|
||||||
|
</span>
|
||||||
|
<h3 className="text-2xl font-black text-slate-900 dark:text-white mt-1">{pkg.name}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Preis */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex items-end gap-1">
|
||||||
|
<span className="text-4xl font-black text-orange-400">{pkg.price} €</span>
|
||||||
|
<span className="text-slate-500 text-sm mb-1">/Monat</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-500 text-xs mt-1">
|
||||||
|
Einrichtung: {pkg.setup} € einmalig
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Leistungen */}
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* Hinweis + CTA */}
|
||||||
|
<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">
|
||||||
|
<strong className="text-slate-900 dark:text-white">Hinweis:</strong> Alle Preise zzgl.
|
||||||
|
gesetzl. MwSt. Individuelle Angebote auf Anfrage. Kostenlose Erstberatung vor Ort —
|
||||||
|
kein Risiko, kein Kleingedrucktes.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/#contact"
|
||||||
|
className="inline-block mt-4 px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-xl text-sm transition-colors"
|
||||||
|
>
|
||||||
|
Kostenloses Erstgespräch anfragen
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue