feat(marketing): Saving-Section + Landingpages + Pipeline Lessons-Learned [split-required]
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 35s
CI / test-python-voice (push) Successful in 33s
CI / test-bqas (push) Successful in 35s

Marketing-Website
- Neue SavingsSection auf Homepage: "Compliance entdeckt sechsstellige
  Einsparungen". Pitch-Position der Cookie-Audit-Cost-Optimization-Story
  fuer DAX-Konzern-Sales (BMW-Case-Style: 90 Vendors -> 25 nach
  Konsolidierung, EUR 500k-3M / Jahr).
- /savings-scan: Kostenloser 5-Min-Saving-Scan-Form (URL + E-Mail).
  Form-Submit ist Placeholder, soll an Compliance-Backend gehaengt werden.
- /savings-methodik: 4-Stufen-Erklaerung der Cookie-Tier-Inferenz +
  ehrliche Caveats (Listpreise != Vertragspreise, Media-Spend nicht
  enthalten) + Datenquellen.
- Content-de + Content-en in content.ts beide um savings-Block ergaenzt
  und Section-Numerierung angepasst (03=Savings, 04=Deterministic).
- LOC-Split: savings-Inhalte (DE+EN, ~100 LOC) in content.savings.ts
  ausgelagert damit content.ts unter 500-LOC-Hard-Cap bleibt.

Control-Pipeline
- LESSONS-LEARNED-mc-check-types.md fuer die parallele CRA-MC-Generation.
  Erklaert die TEXT/PROCESS/REVIEW-Klassifikation die im Compliance-Repo
  retrofitted wurde. Verhindert dass CRA-MCs denselben Defekt bekommen.
  Mapping-Heuristik fuer verification_method -> check_type, plus
  Backfill-Workflow fuer ~62 ambiguous Eintraege.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-05-18 18:38:30 +02:00
parent 9783657da3
commit 911697bab4
7 changed files with 735 additions and 2 deletions
+2
View File
@@ -3,6 +3,7 @@ import Footer from '@/components/layout/Footer'
import ChatFAB from '@/components/layout/ChatFAB'
import HeroSection from '@/components/sections/HeroSection'
import ProblemFlowSection from '@/components/sections/ProblemFlowSection'
import SavingsSection from '@/components/sections/SavingsSection'
import UseCaseCards from '@/components/sections/UseCaseCards'
import TrustBar from '@/components/sections/TrustBar'
@@ -13,6 +14,7 @@ export default function HomePage() {
<main>
<HeroSection />
<ProblemFlowSection />
<SavingsSection />
<UseCaseCards />
<TrustBar />
</main>
@@ -0,0 +1,213 @@
import Navbar from '@/components/layout/Navbar'
import Footer from '@/components/layout/Footer'
import ChatFAB from '@/components/layout/ChatFAB'
import PageHeader from '@/components/ui/PageHeader'
import GlassCard from '@/components/ui/GlassCard'
import FadeInView from '@/components/ui/FadeInView'
import { Database, Layers, Calculator, AlertTriangle, Globe, Cookie } from 'lucide-react'
export default function SavingsMethodikPage() {
return (
<>
<Navbar />
<main>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<PageHeader
tag="METHODIK"
title="Wie Cookies"
titleHighlight="Marketing-Budgets entlarven"
subtitle="4-Stufen-Analyse: vom rohen Cookie-Footprint zur fundierten Saving-Schaetzung. Jede Stufe nachvollziehbar, jede Zahl mit Quelle, jede Annahme transparent."
/>
</div>
{/* 4 Stufen */}
<section className="py-12 sm:py-16">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
<FadeInView>
<GlassCard>
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
<Cookie className="w-6 h-6 text-emerald-400" />
</div>
<div>
<div className="mono-label text-emerald-400 mb-1">STUFE 1</div>
<h3 className="text-xl font-bold mb-2">Cookie-Footprint extrahieren</h3>
<p className="text-sm text-white/60 mb-3">
Playwright laedt die Webseite vollstaendig (inkl. JavaScript-Rendering)
und erfasst jeden gesetzten Cookie + jeden CMP-Payload
(ePaaS, OneTrust, Usercentrics, Cookiebot, Didomi, TrustArc).
</p>
<ul className="text-sm text-white/50 space-y-1">
<li> Cookie-Namen, Werte, Domains, Lifetimes</li>
<li> IAB TCF v2.2 Vendor-Liste auswerten (Vendor-IDs zur eindeutigen Zuordnung)</li>
<li> Drittanbieter-Quote pro Cookie</li>
<li> Premium-Feature-Cookies erkennen (z.B. <code className="text-emerald-300">s_target_qa</code> = Adobe Target Enterprise)</li>
</ul>
</div>
</div>
</GlassCard>
</FadeInView>
<FadeInView delay={0.1}>
<GlassCard>
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
<Database className="w-6 h-6 text-emerald-400" />
</div>
<div>
<div className="mono-label text-emerald-400 mb-1">STUFE 2</div>
<h3 className="text-xl font-bold mb-2">Wissens-Datenbank-Abgleich</h3>
<p className="text-sm text-white/60 mb-3">
Jeder Cookie wird gegen unsere kuratierte Wissens-DB mit derzeit
~50 Top-Vendors abgeglichen. Pro Cookie wissen wir:
</p>
<ul className="text-sm text-white/50 space-y-1">
<li> Setzender Anbieter + Sitzland</li>
<li> Exakter funktionaler Zweck (nicht nur Kategorie)</li>
<li> Welche Datenfelder gesammelt werden (Client-ID, IP, etc.)</li>
<li> Re-Identifikations-Risiko (low/medium/high)</li>
<li> §25(2) TDDDG technische Notwendigkeit</li>
<li> Schrems-II-Status + relevante EuGH-/CNIL-Urteile</li>
<li> Konkreter EU-Alternativ-Cookie + EU-Alternativ-Vendor</li>
</ul>
</div>
</div>
</GlassCard>
</FadeInView>
<FadeInView delay={0.2}>
<GlassCard>
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
<Layers className="w-6 h-6 text-emerald-400" />
</div>
<div>
<div className="mono-label text-emerald-400 mb-1">STUFE 3</div>
<h3 className="text-xl font-bold mb-2">Tier-Inferenz + Funktionale Kategorisierung</h3>
<p className="text-sm text-white/60 mb-3">
Pro Vendor leiten wir das Pricing-Tier aus dem Cookie-Footprint ab:
</p>
<ul className="text-sm text-white/50 space-y-1">
<li> <strong className="text-white/80">&lt;10 Cookies</strong> = Starter-Plan</li>
<li> <strong className="text-white/80">10-30 Cookies</strong> = Professional / Mid-Market</li>
<li> <strong className="text-white/80">30-60 Cookies</strong> = Enterprise</li>
<li> <strong className="text-white/80">&gt;60 Cookies + Premium-Features</strong> = Premier-Tier</li>
</ul>
<p className="text-sm text-white/60 mt-3 mb-2">
Parallel werden alle Vendors funktional klassifiziert (Web-Analytics,
Werbung, CDN, Marketing-Automation, ). Mehrere Vendors in
derselben Kategorie = Konsolidierungs-Kandidat.
</p>
</div>
</div>
</GlassCard>
</FadeInView>
<FadeInView delay={0.3}>
<GlassCard>
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
<Calculator className="w-6 h-6 text-emerald-400" />
</div>
<div>
<div className="mono-label text-emerald-400 mb-1">STUFE 4</div>
<h3 className="text-xl font-bold mb-2">Kosten-Schaetzung + EU-Konsolidierung</h3>
<p className="text-sm text-white/60 mb-3">
Pro Tier multiplizieren wir mit unseren Pricing-Lookups
(Gartner/Forrester 2025 + oeffentliche Listpreise).
Ergebnis: jaehrlicher Kostenbereich pro Vendor.
</p>
<ul className="text-sm text-white/50 space-y-1">
<li> Master-Vertrag-Dedupe (1 Adobe-Lizenz, viele Features)</li>
<li> EU-Alternative mit gleicher Funktion + Listpreis</li>
<li> Multi-Funktions-Tools die mehrere Kategorien gleichzeitig ersetzen</li>
<li> Sparpotenzial = Aktuelle Listpreise EU-Tool-Listpreis</li>
</ul>
</div>
</div>
</GlassCard>
</FadeInView>
</div>
</section>
{/* Caveats — ehrlich */}
<section className="py-12 sm:py-16 bg-amber-500/[0.03]">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
<AlertTriangle className="w-6 h-6 text-amber-400" />
Was wir NICHT versprechen
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<GlassCard>
<h3 className="font-bold mb-2">Listpreise Vertragspreise</h3>
<p className="text-sm text-white/60">
Konzern-Konditionen liegen ueblicherweise 3050% unter Listpreis.
Wir geben Bereiche an, nicht exakte Zahlen. Verifikation mit dem
eigenen Einkauf ist Pflicht.
</p>
</GlassCard>
<GlassCard>
<h3 className="font-bold mb-2">Funktionale Redundanz Strategische Redundanz</h3>
<p className="text-sm text-white/60">
Mehrere Analytics-Tools koennen legitim sein (A/B-Test, regional split,
Marketing vs Produkt). Wir nennen die bekannten Gruende explizit.
</p>
</GlassCard>
<GlassCard>
<h3 className="font-bold mb-2">Media-Spend nicht enthalten</h3>
<p className="text-sm text-white/60">
Google-Ads-/Meta-Ads-/Programmatic-Budget ist NICHT in der Saving-
Schaetzung. Nur Tool-Lizenzen. Media-Optimierung ist ein separates
Thema.
</p>
</GlassCard>
<GlassCard>
<h3 className="font-bold mb-2">Migrations-Kosten nicht abgezogen</h3>
<p className="text-sm text-white/60">
Tool-Wechsel kostet Zeit + interne Implementation. Faustregel:
3-6 Monate Amortisation einrechnen. Saving-Schaetzung ist Brutto.
</p>
</GlassCard>
</div>
</div>
</section>
{/* Datenquellen */}
<section className="py-12 sm:py-16">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
<Globe className="w-6 h-6 text-emerald-400" />
Datenquellen + Updates
</h2>
<GlassCard>
<ul className="text-sm text-white/60 space-y-3">
<li>
<strong className="text-white/90">Cookie-Wissen:</strong>{' '}
Cookiepedia, IAB Europe TCF v2.2 Vendor-Liste, Cookiebot Public DB,
Vendor-eigene Dokumentation
</li>
<li>
<strong className="text-white/90">Pricing:</strong>{' '}
Gartner Hype Cycle 2025, Forrester Wave MarTech 2025, oeffentliche
Pricing-Pages, anonymisierte Kundengespraeche
</li>
<li>
<strong className="text-white/90">Regulatorik:</strong>{' '}
EDPB Cookie Guidelines 2/2023, DSK-Orientierungshilfe Telemedien 2024,
CNIL Cookies-Recommendations
</li>
<li>
<strong className="text-white/90">Updates:</strong>{' '}
DB wird kontinuierlich gepflegt. Neue Kunden geben uns Ground-Truth
fuer Kalibrierung.
</li>
</ul>
</GlassCard>
</div>
</section>
</main>
<Footer />
<ChatFAB />
</>
)
}
+169
View File
@@ -0,0 +1,169 @@
'use client'
import { useState } from 'react'
import Navbar from '@/components/layout/Navbar'
import Footer from '@/components/layout/Footer'
import ChatFAB from '@/components/layout/ChatFAB'
import PageHeader from '@/components/ui/PageHeader'
import GlassCard from '@/components/ui/GlassCard'
import FadeInView from '@/components/ui/FadeInView'
import { Cookie, ShieldCheck, Mail, ArrowRight, CheckCircle2 } from 'lucide-react'
export default function SavingsScanPage() {
const [url, setUrl] = useState('')
const [email, setEmail] = useState('')
const [submitting, setSubmitting] = useState(false)
const [done, setDone] = useState(false)
async function handleSubmit(e: React.FormEvent) {
e.preventDefault()
if (!url || !email) return
setSubmitting(true)
try {
// TODO: wire to compliance-check backend
// For now: send to contact form / placeholder
await new Promise(r => setTimeout(r, 800))
setDone(true)
} finally {
setSubmitting(false)
}
}
return (
<>
<Navbar />
<main>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<PageHeader
tag="KOSTENLOSER SAVING-SCAN"
title="In 5 Minuten zur"
titleHighlight="sechsstelligen Saving-Schaetzung"
subtitle="URL eingeben — wir analysieren alle Cookies, identifizieren redundante Anbieter und schaetzen jaehrliche Einsparung. Kostenlos, ohne Login, ohne Vertrieb-Termin."
/>
</div>
<section className="py-12 sm:py-16">
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
{!done ? (
<GlassCard>
<form onSubmit={handleSubmit} className="space-y-5">
<div>
<label htmlFor="url" className="block text-sm font-medium text-white/70 mb-2">
Website-URL <span className="text-red-400">*</span>
</label>
<input
id="url"
type="url"
required
placeholder="https://www.ihre-firma.de"
value={url}
onChange={e => setUrl(e.target.value)}
className="w-full px-4 py-3 rounded-lg bg-white/[0.04] border border-white/10
text-white placeholder-white/30 focus:border-emerald-400 focus:outline-none"
/>
<p className="mt-1 text-xs text-white/40">
Wir crawlen die Startseite + automatisch erkennbare Unterseiten
(DSI, Impressum, Cookie-Richtlinie).
</p>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-white/70 mb-2">
E-Mail fuer den Bericht <span className="text-red-400">*</span>
</label>
<input
id="email"
type="email"
required
placeholder="ihr.name@firma.de"
value={email}
onChange={e => setEmail(e.target.value)}
className="w-full px-4 py-3 rounded-lg bg-white/[0.04] border border-white/10
text-white placeholder-white/30 focus:border-emerald-400 focus:outline-none"
/>
<p className="mt-1 text-xs text-white/40">
Bericht kommt als PDF + JSON. Die Mailadresse wird ausschliesslich
fuer diesen Scan verwendet.
</p>
</div>
<button
type="submit"
disabled={submitting}
className="inline-flex items-center gap-2 px-6 py-3 rounded-full
bg-emerald-500 hover:bg-emerald-400 transition-colors
text-enterprise-dark font-semibold disabled:opacity-50"
>
{submitting ? 'Wird gestartet …' : 'Saving-Scan starten'}
<ArrowRight className="w-4 h-4" />
</button>
<p className="text-xs text-white/40 pt-2">
Wir analysieren ausschliesslich oeffentlich abrufbare Daten Ihrer Website.
Keine Anmeldung, keine Daten werden gespeichert. Ergebnis innerhalb von
~5 Minuten per E-Mail.
</p>
</form>
</GlassCard>
) : (
<GlassCard>
<div className="text-center py-6">
<CheckCircle2 className="w-12 h-12 text-emerald-400 mx-auto mb-4" />
<h3 className="text-xl font-bold mb-2">Scan gestartet</h3>
<p className="text-white/60 mb-4">
Wir analysieren Ihre Website jetzt. Der Bericht kommt in
den naechsten 5 Minuten per E-Mail an <strong className="text-white/90">{email}</strong>.
</p>
<p className="text-xs text-white/40">
Pruefen Sie auch Ihren Spam-Ordner.
</p>
</div>
</GlassCard>
)}
</div>
</section>
<section className="py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<FadeInView>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<GlassCard>
<Cookie className="w-8 h-8 text-emerald-400 mb-4" />
<h3 className="text-lg font-bold mb-2">Was wir analysieren</h3>
<ul className="text-sm text-white/60 space-y-2">
<li> Alle Cookies + Vendor-Identifikation</li>
<li> Funktionale Kategorisierung (Analytics, Werbung, CDN, )</li>
<li> Redundanz-Detection ueber Kategorien</li>
<li> Cookie-Tiefenanalyse mit Tier-Inferenz</li>
</ul>
</GlassCard>
<GlassCard delay={0.1}>
<ShieldCheck className="w-8 h-8 text-emerald-400 mb-4" />
<h3 className="text-lg font-bold mb-2">Was Sie bekommen</h3>
<ul className="text-sm text-white/60 space-y-2">
<li> Geschaetzte jaehrliche Tooling-Kosten (Listpreis-Range)</li>
<li> Sparpotenzial pro Konsolidierungs-Kandidat</li>
<li> EU-Alternative pro US-Vendor</li>
<li> Schrems-II-Risiko-Bewertung</li>
</ul>
</GlassCard>
<GlassCard delay={0.2}>
<Mail className="w-8 h-8 text-emerald-400 mb-4" />
<h3 className="text-lg font-bold mb-2">Was es kostet</h3>
<ul className="text-sm text-white/60 space-y-2">
<li> <strong className="text-white">Erster Scan: kostenlos</strong></li>
<li> Kein Login, kein Vertriebs-Termin</li>
<li> Daten werden nicht gespeichert</li>
<li> PDF + JSON zum Download</li>
</ul>
</GlassCard>
</div>
</FadeInView>
</div>
</section>
</main>
<Footer />
<ChatFAB />
</>
)
}