From 0183430725d5cdd821a4af6166438254a63b51c4 Mon Sep 17 00:00:00 2001 From: MBO-Tech-IT Date: Tue, 21 Jul 2026 20:09:20 +0200 Subject: [PATCH] feat: add example report preview with stats and chart to FamilyGuard page Zeigt beispielhaft, wie die monatliche FamilyGuard-Report-E-Mail aussieht (Stat-Kacheln + Balkendiagramm der letzten 6 Monate), direkt nach dem Report-Angebot platziert. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01LhY1QhDXGWfyhrxaJvfpNt --- app/pakete/familyguard/page.tsx | 3 + components/FlyerReportPreview.tsx | 146 ++++++++++++++++++++++++++++++ 2 files changed, 149 insertions(+) create mode 100644 components/FlyerReportPreview.tsx diff --git a/app/pakete/familyguard/page.tsx b/app/pakete/familyguard/page.tsx index c5f2818..de67f19 100644 --- a/app/pakete/familyguard/page.tsx +++ b/app/pakete/familyguard/page.tsx @@ -2,6 +2,7 @@ import type { Metadata } from "next"; import Link from "next/link"; import Logo from "@/components/Logo"; import FlyerDownloadForm from "@/components/FlyerDownloadForm"; +import FlyerReportPreview from "@/components/FlyerReportPreview"; export const metadata: Metadata = { title: "MBO FamilyGuard – Familienschutz fürs Heimnetzwerk | MBO-Tech-IT", @@ -180,6 +181,8 @@ export default function FamilyGuardPage() {

+ + {/* Preis */}
diff --git a/components/FlyerReportPreview.tsx b/components/FlyerReportPreview.tsx new file mode 100644 index 0000000..926a96b --- /dev/null +++ b/components/FlyerReportPreview.tsx @@ -0,0 +1,146 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; + +const monthlyData = [ + { month: "Okt", value: 189 }, + { month: "Nov", value: 203 }, + { month: "Dez", value: 231 }, + { month: "Jan", value: 198 }, + { month: "Feb", value: 215 }, + { month: "Mär", value: 247 }, +]; + +const maxValue = Math.max(...monthlyData.map((d) => d.value)); + +const stats = [ + { value: 247, suffix: "", label: "Blockierte Gefahren (Mär)", accent: "orange" as const }, + { value: 6, suffix: "", label: "Geschützte Geräte", accent: "blue" as const }, + { value: 100, suffix: "%", label: "Automatisch aktuell", accent: "orange" as const }, +]; + +function Counter({ + value, + suffix, + accent, +}: { + value: number; + suffix: string; + accent: "orange" | "blue"; +}) { + const [count, setCount] = useState(0); + const ref = useRef(null); + const started = useRef(false); + + useEffect(() => { + const el = ref.current; + if (!el) return; + + const observer = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting && !started.current) { + started.current = true; + const duration = 1200; + const start = performance.now(); + + const tick = (now: number) => { + const progress = Math.min((now - start) / duration, 1); + const eased = 1 - Math.pow(1 - progress, 3); + setCount(Math.floor(eased * value)); + if (progress < 1) requestAnimationFrame(tick); + }; + + requestAnimationFrame(tick); + observer.disconnect(); + } + }, + { threshold: 0.3 } + ); + + observer.observe(el); + return () => observer.disconnect(); + }, [value]); + + const color = accent === "orange" ? "text-orange-400" : "text-blue-400"; + + return ( + + {count} + {suffix} + + ); +} + +export default function FlyerReportPreview() { + return ( +
+
+ + Beispiel-Report + +

+ So sieht Ihre monatliche Übersicht aus +

+

+ Beispielhafte Darstellung des MBO FamilyGuard Reports – Ihre echte + monatliche E-Mail zeigt die tatsächlichen Werte für Ihr Zuhause. +

+
+ + {/* Stat-Kacheln */} +
+ {stats.map((s) => ( +
+ +

+ {s.label} +

+
+ ))} +
+ + {/* Balkendiagramm */} +
+

+ Blockierte Gefahren – letzte 6 Monate +

+
+ {monthlyData.map((d, i) => { + const isCurrent = i === monthlyData.length - 1; + const heightPct = (d.value / maxValue) * 100; + return ( +
+ + {d.value} + +
+
+ ); + })} +
+
+ {monthlyData.map((d) => ( + + {d.month} + + ))} +
+
+
+ ); +}