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
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:
@@ -0,0 +1,115 @@
|
||||
'use client'
|
||||
|
||||
import { TrendingDown, Cookie, Scale, AlertTriangle, ArrowRight } from 'lucide-react'
|
||||
import { t } from '@/lib/content'
|
||||
import { useApp } from '@/lib/context'
|
||||
import SectionHeading from '@/components/ui/SectionHeading'
|
||||
import GlassCard from '@/components/ui/GlassCard'
|
||||
import FadeInView from '@/components/ui/FadeInView'
|
||||
import GradientText from '@/components/ui/GradientText'
|
||||
|
||||
const pillarIcons = [Cookie, Scale, AlertTriangle]
|
||||
|
||||
export default function SavingsSection() {
|
||||
const { lang } = useApp()
|
||||
const i = t(lang)
|
||||
const s = (i as unknown as { savings: typeof i.problem & { promise: string; caseStudy: { label: string; headline: string; bullets: string[]; saving: string; side: string }; pillars: { title: string; description: string }[]; cta: string; ctaSecondary: string } }).savings
|
||||
|
||||
return (
|
||||
<section id="savings" className="py-24 sm:py-32 relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-emerald-500/[0.02] to-transparent" />
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<SectionHeading
|
||||
tag={s.tag}
|
||||
title={s.title}
|
||||
titleHighlight={s.titleHighlight}
|
||||
subtitle={s.subtitle}
|
||||
/>
|
||||
|
||||
{/* PROMISE — high-impact one-liner */}
|
||||
<FadeInView>
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-3 px-6 py-3 rounded-full
|
||||
border border-emerald-400/30 bg-emerald-500/[0.08]">
|
||||
<TrendingDown className="w-5 h-5 text-emerald-400" />
|
||||
<span className="text-lg font-semibold text-emerald-300">
|
||||
{s.promise}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</FadeInView>
|
||||
|
||||
{/* CASE STUDY card */}
|
||||
<FadeInView>
|
||||
<div className="rounded-2xl border border-emerald-400/20 bg-gradient-to-br
|
||||
from-emerald-500/[0.06] to-white/[0.02] p-8 mb-16">
|
||||
<div className="mono-label text-emerald-400 mb-3 tracking-widest">
|
||||
{s.caseStudy.label}
|
||||
</div>
|
||||
<h3 className="text-2xl sm:text-3xl font-bold mb-6">
|
||||
{s.caseStudy.headline}
|
||||
</h3>
|
||||
<ul className="space-y-3 mb-8">
|
||||
{s.caseStudy.bullets.map((b: string, idx: number) => (
|
||||
<li key={idx} className="flex items-start gap-3 text-white/70">
|
||||
<span className="mt-1 w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0" />
|
||||
<span className="text-sm">{b}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-6 border-t border-white/10">
|
||||
<div>
|
||||
<div className="mono-label text-white/40 mb-1">JAEHRLICHES SPARPOTENZIAL</div>
|
||||
<div className="text-3xl font-bold">
|
||||
<GradientText>{s.caseStudy.saving}</GradientText>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mono-label text-white/40 mb-1">PLUS</div>
|
||||
<div className="text-sm text-white/70">{s.caseStudy.side}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeInView>
|
||||
|
||||
{/* Pillars: HOW we do it */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
|
||||
{s.pillars.map((p: { title: string; description: string }, idx: number) => {
|
||||
const Icon = pillarIcons[idx] || Cookie
|
||||
return (
|
||||
<GlassCard key={idx} delay={idx * 0.1}>
|
||||
<div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4">
|
||||
<Icon className="w-6 h-6 text-emerald-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold mb-2">{p.title}</h3>
|
||||
<p className="text-sm text-white/50">{p.description}</p>
|
||||
</GlassCard>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<FadeInView>
|
||||
<div className="text-center">
|
||||
<a
|
||||
href="/savings-scan"
|
||||
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"
|
||||
>
|
||||
{s.cta}
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</a>
|
||||
<a
|
||||
href="/savings-methodik"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 ml-3
|
||||
text-white/60 hover:text-white transition-colors text-sm"
|
||||
>
|
||||
{s.ctaSecondary}
|
||||
</a>
|
||||
</div>
|
||||
</FadeInView>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user