71 lines
3.4 KiB
TypeScript
71 lines
3.4 KiB
TypeScript
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>
|
|
<Link
|
|
href="/pakete/familyguard#flyer-download"
|
|
className="btn-secondary inline-flex justify-center px-6 py-3 text-sm"
|
|
>
|
|
Flyer herunterladen
|
|
</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, nur bis 15.09.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|