feat: add MBO FamilyGuard package page and homepage promo
Add /pakete/familyguard detail page mirroring the VPN page pattern, list it as the first tile on /pakete (before Nextcloud + Paperless-ngx), and promote it with a new section directly below the hero on the homepage. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
4386cc4b45
commit
fd38267cb9
|
|
@ -1,6 +1,7 @@
|
|||
import { createServiceClient } from "@/lib/supabase";
|
||||
import Header from "@/components/Header";
|
||||
import Hero from "@/components/Hero";
|
||||
import FamilyGuardPromo from "@/components/FamilyGuardPromo";
|
||||
import TaglineBanner from "@/components/TaglineBanner";
|
||||
import StatsBar from "@/components/StatsBar";
|
||||
import Services from "@/components/Services";
|
||||
|
|
@ -77,6 +78,7 @@ export default async function Home() {
|
|||
bgImagePath={hero?.bg_image_path}
|
||||
badges={badges.length > 0 ? badges.map((b) => b.text) : undefined}
|
||||
/>
|
||||
<FamilyGuardPromo />
|
||||
<TaglineBanner />
|
||||
<StatsBar />
|
||||
<Services />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,228 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,11 +5,11 @@ import Logo from "@/components/Logo";
|
|||
export const metadata: Metadata = {
|
||||
title: "Pakete & Preise | MBO-Tech-IT",
|
||||
description:
|
||||
"Unsere IT-Dienstleistungen auf einen Blick: Nextcloud + Paperless-ngx Cloud-Lösungen und Zero-Trust-VPN für sicheren Fernzugriff. Individuelle Angebote aus Crailsheim.",
|
||||
"Unsere IT-Dienstleistungen auf einen Blick: MBO FamilyGuard Familienschutz, Nextcloud + Paperless-ngx Cloud-Lösungen und Zero-Trust-VPN für sicheren Fernzugriff. Individuelle Angebote aus Crailsheim.",
|
||||
openGraph: {
|
||||
title: "Pakete & Preise | MBO-Tech-IT",
|
||||
description:
|
||||
"Nextcloud, Paperless-ngx und Zero-Trust-VPN — IT-Lösungen aus Crailsheim.",
|
||||
"FamilyGuard, Nextcloud, Paperless-ngx und Zero-Trust-VPN — IT-Lösungen aus Crailsheim.",
|
||||
url: "https://mbo-tech-it.de/pakete",
|
||||
},
|
||||
alternates: {
|
||||
|
|
@ -18,6 +18,21 @@ export const metadata: Metadata = {
|
|||
};
|
||||
|
||||
const services = [
|
||||
{
|
||||
href: "/pakete/familyguard",
|
||||
icon: (
|
||||
<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>
|
||||
),
|
||||
iconBg: "bg-orange-500/10 text-orange-400",
|
||||
label: "MBO FamilyGuard",
|
||||
description:
|
||||
"Familienschutz fürs ganze Zuhause. Jugendschutzfilter, Werbe-Blocker & Zeitpläne für jedes Gerät im WLAN — ohne App, ohne Umgehung.",
|
||||
tag: "NEU · Einführungspreis 149,99 €",
|
||||
isNew: true,
|
||||
},
|
||||
{
|
||||
href: "/pakete/nextcloud",
|
||||
icon: (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
import Link from "next/link";
|
||||
import ScrollReveal from "@/components/ScrollReveal";
|
||||
|
||||
const features = [
|
||||
"Jugendschutzfilter",
|
||||
"Werbe- & Tracker-Blocker",
|
||||
"Zeitpläne & Regeln",
|
||||
"Schutz vor Betrug",
|
||||
];
|
||||
|
||||
export default function FamilyGuardPromo() {
|
||||
return (
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 relative">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<ScrollReveal>
|
||||
<div className="relative overflow-hidden rounded-2xl border border-orange-500/20 bg-white dark:bg-gray-900 p-8 sm:p-10">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(249,115,22,0.06)_0%,transparent_60%)]" />
|
||||
<div className="relative flex flex-col lg:flex-row lg:items-center gap-8">
|
||||
<div className="flex-1">
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-500/10 border border-orange-500/30 text-orange-400 text-xs font-black tracking-[0.2em] uppercase mb-4">
|
||||
<span className="w-1.5 h-1.5 bg-orange-400 rounded-full animate-pulse" />
|
||||
Neu: MBO FamilyGuard
|
||||
</span>
|
||||
<h2 className="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white mb-3">
|
||||
Wissen Sie, was Ihr Kind gerade im Internet sieht?
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-base leading-relaxed mb-5 max-w-2xl">
|
||||
Der Familienschutz fürs ganze Zuhause — eingerichtet von Ihrem
|
||||
IT-Profi. Ein zentraler Schutzschild für jedes Gerät in Ihrem WLAN.
|
||||
Ohne App-Installation, ohne Abschalten durch die Kinder.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{features.map((f) => (
|
||||
<span
|
||||
key={f}
|
||||
className="px-3 py-1 rounded-full bg-orange-500/10 border border-orange-500/20 text-orange-400 text-xs font-mono"
|
||||
>
|
||||
{f}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<Link href="/pakete/familyguard" className="btn-primary inline-flex justify-center px-6 py-3 text-sm">
|
||||
FamilyGuard entdecken
|
||||
</Link>
|
||||
<a href="#contact" className="btn-secondary inline-flex justify-center px-6 py-3 text-sm">
|
||||
Jetzt beraten lassen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 lg:w-64 p-5 rounded-xl bg-orange-500/5 border border-orange-500/20 text-center">
|
||||
<p className="text-slate-500 dark:text-slate-400 text-xs line-through mb-1">statt 199,99 €</p>
|
||||
<p className="text-3xl font-black text-orange-400 mb-1">149,99 €</p>
|
||||
<p className="text-slate-600 dark:text-slate-400 text-xs">
|
||||
Beratung + Einrichtung — Einführungsangebot
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
Loading…
Reference in New Issue