229 lines
11 KiB
TypeScript
229 lines
11 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import Logo from "@/components/Logo";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "MBO FamilyGuard – Familienschutz fürs Heimnetzwerk | MBO-Tech-IT",
|
||
description:
|
||
"Jugendschutzfilter, Werbe- & Tracker-Blocker, Zeitpläne und Schutz vor Betrug für jedes Gerät im WLAN. Einrichtung durch Ihren IT-Profi — Einführungsangebot 149,99 €.",
|
||
openGraph: {
|
||
title: "MBO FamilyGuard – Familienschutz fürs Heimnetzwerk | MBO-Tech-IT",
|
||
description:
|
||
"Zentraler Schutzschild für jedes Gerät in Ihrem WLAN. Ohne App-Installation, ohne Abschalten durch die Kinder.",
|
||
url: "https://mbo-tech-it.de/pakete/familyguard",
|
||
},
|
||
alternates: {
|
||
canonical: "https://mbo-tech-it.de/pakete/familyguard",
|
||
},
|
||
};
|
||
|
||
const risks = [
|
||
"Gewalt- und Pornoseiten sind nur zwei Klicks entfernt – auch aus Versehen",
|
||
"Werbung und In-App-Käufe zielen gezielt auf Kinder und Jugendliche",
|
||
"Tracker sammeln heimlich Daten über das Surfverhalten Ihrer Kinder",
|
||
"Phishing-Seiten und Betrugsmaschen erkennen Kinder nicht",
|
||
"Endloses Scrollen bis tief in die Nacht – ohne Zeitlimit",
|
||
];
|
||
|
||
const features = [
|
||
{
|
||
title: "Jugendschutzfilter",
|
||
text: "Blockiert nicht jugendfreie Inhalte automatisch.",
|
||
icon: (
|
||
<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>
|
||
),
|
||
},
|
||
{
|
||
title: "Werbe- & Tracker-Blocker",
|
||
text: "Keine Werbung, keine heimliche Datensammlung.",
|
||
icon: (
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||
</svg>
|
||
),
|
||
},
|
||
{
|
||
title: "Zeitpläne & Regeln",
|
||
text: "Feste Internetzeiten, z. B. Schluss um 21 Uhr.",
|
||
icon: (
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
),
|
||
},
|
||
{
|
||
title: "Schutz vor Betrug",
|
||
text: "Phishing- und Schadseiten werden blockiert.",
|
||
icon: (
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||
</svg>
|
||
),
|
||
},
|
||
];
|
||
|
||
export default function FamilyGuardPage() {
|
||
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: FAMILIENSCHUTZ
|
||
</span>
|
||
<h1 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-4">
|
||
Wissen Sie, was Ihr Kind<br className="hidden sm:block" /> gerade im Internet sieht?
|
||
</h1>
|
||
<p className="text-slate-600 dark:text-slate-400 text-lg max-w-2xl mx-auto">
|
||
Vermutlich nicht. Und genau das ist das Problem.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Risiken */}
|
||
<h2 className="text-2xl font-black text-slate-900 dark:text-white mb-6 text-center">
|
||
Das Internet vergisst nichts – und filtert nichts
|
||
</h2>
|
||
<div className="grid sm:grid-cols-2 gap-4 mb-16">
|
||
{risks.map((risk) => (
|
||
<div
|
||
key={risk}
|
||
className="flex items-start gap-3 p-4 rounded-xl bg-white dark:bg-gray-900 border border-red-500/20"
|
||
>
|
||
<span className="w-2 h-2 rounded-full bg-red-400 flex-shrink-0 mt-1.5" />
|
||
<span className="text-slate-700 dark:text-slate-300 text-sm leading-relaxed">{risk}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Die Lösung */}
|
||
<div className="mb-16 p-6 rounded-2xl bg-orange-500/5 border border-orange-500/30 flex flex-col md:flex-row gap-6 items-start">
|
||
<div className="flex-shrink-0 w-14 h-14 rounded-xl bg-orange-500/10 text-orange-400 flex items-center justify-center">
|
||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5z" />
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
|
||
Die Lösung
|
||
</span>
|
||
<h3 className="text-slate-900 dark:text-white font-black text-2xl mt-1 mb-2">MBO FamilyGuard</h3>
|
||
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
|
||
Der Familienschutz fürs ganze Zuhause – eingerichtet von Ihrem IT-Profi.
|
||
Ein zentraler Schutzschild für jedes Gerät in Ihrem WLAN: Handy, Tablet,
|
||
Laptop, Smart-TV, Spielkonsole. Ohne App-Installation. Ohne Abschalten
|
||
durch die Kinder.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Features */}
|
||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||
{features.map((f) => (
|
||
<div key={f.title} 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">
|
||
{f.icon}
|
||
</div>
|
||
<h3 className="text-slate-800 dark:text-white font-bold text-base mb-2">{f.title}</h3>
|
||
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{f.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Hinweis: kein Virenschutz */}
|
||
<div className="mb-8 p-5 rounded-2xl border border-slate-200 dark:border-gray-800 bg-white dark:bg-gray-900">
|
||
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
|
||
<strong className="text-slate-900 dark:text-white">Hinweis:</strong> MBO FamilyGuard
|
||
ist ein Familien- und Jugendschutzfilter fürs Heimnetzwerk – kein Virenschutz.
|
||
Für den Schutz vor Viren und Schadsoftware empfehlen wir zusätzlich eine
|
||
Antiviren-Lösung.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Optionaler Report */}
|
||
<div className="mb-16 p-5 rounded-2xl border border-dashed border-slate-300 dark:border-gray-700 bg-slate-50 dark:bg-gray-900/50">
|
||
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
|
||
<strong className="text-slate-900 dark:text-white">Optional: MBO FamilyGuard Report</strong>{" "}
|
||
— 4,99 €/Monat oder 49,99 €/Jahr. Jeden Monat automatisch eine verständliche
|
||
Übersicht per E-Mail: blockierte Gefahren, geschützte Geräte. Inklusive
|
||
automatischer Updates – Sie müssen nichts selbst konfigurieren.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Preis */}
|
||
<div className="mb-16 rounded-2xl overflow-hidden border border-blue-500/30 bg-[#111925]">
|
||
<div className="p-8 flex flex-col sm:flex-row items-center justify-between gap-6">
|
||
<div>
|
||
<span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
|
||
Rundum-Sorglos-Paket
|
||
</span>
|
||
<h3 className="text-white font-black text-2xl mt-1 mb-2">Beratung + Einrichtung</h3>
|
||
<p className="text-slate-400 text-sm max-w-md">
|
||
Einführungsangebot – nur für kurze Zeit! Danach gilt der reguläre
|
||
Preis von 199,99 €.
|
||
</p>
|
||
</div>
|
||
<div className="text-center sm:text-right flex-shrink-0">
|
||
<p className="text-slate-500 text-sm line-through">statt 199,99 €</p>
|
||
<p className="text-4xl font-black text-white">
|
||
149,99 <span className="text-lg">€</span>
|
||
</p>
|
||
<p className="text-orange-400 text-xs font-bold tracking-wider uppercase">jetzt nur</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom callout */}
|
||
<div className="p-6 rounded-2xl border border-blue-500/20 bg-blue-500/5 text-center">
|
||
<p className="text-slate-900 dark:text-white font-bold mb-1">
|
||
Weniger als eine Spielkonsole kostet – aber unbezahlbar für die
|
||
Sicherheit Ihrer Kinder.
|
||
</p>
|
||
<p className="text-slate-600 dark:text-slate-400 text-sm mb-4">
|
||
Handeln Sie, bevor etwas passiert – nicht danach.
|
||
</p>
|
||
<Link
|
||
href="/#contact"
|
||
className="inline-block px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-xl text-sm transition-colors"
|
||
>
|
||
Jetzt unverbindlich beraten lassen
|
||
</Link>
|
||
</div>
|
||
|
||
<p className="text-center text-slate-500 text-xs mt-8">
|
||
Technische Basis: Raspberry-Pi-Hardware in Verbindung mit der AdGuard-Filtertechnologie.
|
||
</p>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|