av-website — naechster Session-Prompt (Hero-Prototype Stripe-Style)

Naechster Schritt — av-website Hero-Prototype

Copy-paste in eine neue Claude-Code-Session in ~/source/agentic-ventures/.

Stand 2026-05-19 Abend

Strategie-Marathon am 2026-05-19 Abend hat eine komplette Repositionierung der Landing-Page produziert. Source-of-Truth ist landing-spec-v2 mit 9 Sektionen Section-by-Section ausformuliert.

Was sich gegenueber dem alten Stand veraendert:

• Veo-3-Hero-Video raus (AI-Slop-Wahrnehmung 2026)
• „One giant number”-Headline raus (passt nicht zum DACH-KMU-Markt)
• KI-Agenten-Sprache statt MCP, kein Claude-Vendor-Lock
• Two-Card-Hero (KMU vs Industrie)
• „Solo aus Hamm” raus aus Hero (verkleinert Positionierung)
• Founder-Story raus von Hauptseite, Footer-Light + /about
• Visualisierung: Stripe-Niveau-Animation gefordert, nicht flaches SVG

Volle Strategie-Snapshot: 2026-05-19-strategie-tagesabschluss

Konkrete Aufgabe naechste Session

Hero-Prototype bauen als eigenstaendige HTML-Datei, BEVOR wir das agentic-ventures-website-Repo anfassen.

Output-Pfad: assets/firma/slides/2026-05-20-hero-prototype-animated.html

Aufwand: 2-3 Stunden netto

Was die Datei enthaelt:

1. Hero-Sektion mit einer der vier Hero-Varianten. Wenn Marvin keine Wahl getroffen hat, Default-Variante B nehmen:

   • Headline: „Belege per Foto, Buchung automatisch. Anfrage rein, Angebot raus.”
   • Sub-Headline: „Ich verbinde deine bestehenden Tools mit KI-Agenten. EU-souveraen gehostet, BAFA-foerderfaehig.”
   • Two-Cards darunter: Card A („Du hast schon Lexware, Microsoft 365 oder aehnliches”) + Card B („Du baust gerade etwas Neues”)
   • Primary CTA: „30-Min Discovery-Call buchen”
   • Trust-Mikro-Zeile: „EU-souveraen · BAFA-foerderfaehig · Lieferung in 4 bis 12 Wochen”

2. Stripe-Style-Animation im Hero-Hintergrund / um die Headline herum. Konkret:

   • Animated Beams (Magic UI) als Hauptelement — Lichtstrahlen zwischen Tool-Logos und einem zentralen „KI-Agent”-Knoten
   • Background Beams (Aceternity UI) subtil im Hintergrund
   • Dot-Pattern Grid als statischer Tiefen-Layer
   • Border Beam auf den Two-Cards und dem CTA-Button
   • Easing-Curves cubic-bezier, nicht linear
   • Tool-Logos: Lexware, Microsoft 365, WhatsApp, Cal.com, Replicate (Placeholder-SVGs OK fuer den Prototype)
   • KI-Agent-Knoten in der Mitte: pulsierender Kreis mit Brand-Gradient + Glow

3. Single-File-Setup: alles inline (CSS + JS + SVG-Icons), kein npm, kein Build-Step. Laeuft sofort im Browser.

Hero-Varianten zur Wahl (Marvin entscheiden lassen vor Build)

• A — Outcome + Ich-Form: „Ich baue KI-Agenten die in deinen Tools arbeiten.”
• B — Konkrete Beispiele (Default): „Belege per Foto, Buchung automatisch. Anfrage rein, Angebot raus.”
• C — Problem-Pull: „Dein Buero erstickt im Tool-Sprung. Ich baue KI-Agenten die das uebernehmen.”
• D — Differenzierer im Hero: „KI-Agenten fuer den deutschen Mittelstand. EU-souveraen, BAFA-foerderfaehig.”

Tech-Stack-Vorgaben

Components-Bibliotheken zum Inspirieren / Pattern-Klau:

• Magic UI (magicui.design) — MIT-lizenziert, Tailwind-basiert, Framer-Motion intern

  • Animated Beam: magicui.design/docs/components/animated-beam
  • Orbiting Circles: magicui.design/docs/components/orbiting-circles
  • Border Beam: magicui.design/docs/components/border-beam
  • Particles: magicui.design/docs/components/particles

• Aceternity UI (ui.aceternity.com) — MIT-lizenziert

  • Background Beams
  • Spotlight
  • Wavy Background

Fuer Prototype-HTML-Datei:

• Vanilla HTML + CSS + JS (kein React-Build-Step im Single-File-Prototype)
• Framer-Motion-Effekte als CSS-Animationen oder Vanilla-JS nachbauen (das Pattern abkupfern, nicht die React-Component)
• Inline-SVG fuer Beams und Logos
• Tailwind-CDN OK fuer schnelles Styling

Brand-Aesthetik:

• Bestehende Brand-Farben aus den existing Slides: --bg: #F0EEE6, --ink: #191919, --accent: #CC785C, --serif: Iowan Old Style, --sans: Inter
• Alternative: Dark Hero-Variante mit #0E0E0E Hintergrund + #CC785C Akzent + #F0EEE6 Text (Stripe-Connect-aehnlicher Dark-Style)
• Marvin entscheiden lassen: Light Hero auf Brand-Beige oder Dark Hero im Stripe-Style. Default: Dark, weil Stripe-Niveau ist die Ansage.

Anker-Sites parallel oeffnen beim Bauen

Diese vier beim Build offen lassen als Referenzen fuer Easing, Timing, Depth:

1. stripe.com/connect — Tools-zu-Plattform-Animation, sehr aehnliche Idee
2. magicui.design — Live-Referenz fuer Animated Beam und Orbiting Circles in Action
3. linear.app/now — Background-Gradient + Foreground-Content Komposition
4. vercel.com — Hero-Animation Disziplin

Style-Regeln (nicht-verhandelbar)

• Echte Umlaute (ä, ö, ü, ß) im Content, keine ae/oe/ue-Schreibweise
• Keine Em-Dashes (—) oder En-Dashes (–) — Komma, Punkt, Doppelpunkt, Klammern
• Ich-Form in der Copy (Marvin ist Solo-GF, „wir” wirkt unecht)
• Keine Marketing-Floskeln (siehe Anti-Slop-Checkliste in landing-spec-v2)
• Kein „Solo aus Hamm” im Hero — das wirkt klein gegen Industriekunden-Linie

Workflow fuer die Session

1. Read first:

   • landing-spec-v2 (Source-of-Truth fuer alle Texte und Sektionen)
   • 2026-05-19-strategie-tagesabschluss (vollstaendiger Strategie-Context)
   • Existing Hero-Style ueberpruefen: assets/firma/slides/2026-05-12-vf-claudeai-vs-openwebui.html (fuer Farben/Typo-Anker)

2. Vor Build kurz klaeren mit Marvin:

   • Welche Hero-Variante (A, B, C, D)? Default B wenn keine Wahl
   • Light Hero oder Dark Hero? Default Dark (Stripe-Style)
   • Welche Tool-Logos im Hero-Diagramm sichtbar (4-6 max)? Default: Lexware, Microsoft 365, WhatsApp, Cal.com, Replicate

3. Build in iterativen Schritten:

   • Layout-Skeleton (Two-Cards + Headlines) + Brand-Farben (~30 min)
   • Animated-Beam-Logik in Vanilla HTML + JS (~60 min) — Magic-UI-Pattern abkupfern
   • Background Beams + Dot-Pattern Layer (~30 min)
   • Easing-Curves und Timing-Polish (~30-45 min)
   • Mobile-Responsive Check (~15 min)

4. Output zeigen im Launch-Preview-Panel (das ist automatisch fuer assets/firma/slides/*.html aktiv)

5. Iterations-Loop: Marvin sieht den Prototype, sagt was anders, eine Iteration einbauen, fertig.

Was NICHT in dieser Session

• Kein Refactor im agentic-ventures-website-Repo — das passiert erst nach Prototype-Freigabe
• Keine anderen Sektionen (Tool-Logo-Wall, FAQ, Pricing) — nur Hero im Prototype
• Keine LLM-Citation-Tests — kommt nach echtem Deploy
• Kein „Solo aus Hamm” im Hero — strikt
• Kein Veo-3-Video — strikt

Skill-Empfehlung

Direkt im Vault arbeiten ohne Skill-Overhead. Wenn ein Phasen-Check gewuenscht: frontend-design.

Pending Decisions die der Prototype klaeren soll

• Funktioniert Stripe-Style-Animation visuell mit dem KI-Agenten-Anker-Pitch?
• Welche Hero-Variante fuehlt sich richtig an wenn man sie live sieht?
• Light oder Dark Hero?
• Welche Tool-Logos visualisieren am besten den Pitch?
• Ist 2-3h Aufwand realistisch oder braucht es einen Polish-Tag?

Quellen

• Source-of-Truth Spec: landing-spec-v2
• Strategie-Context: 2026-05-19-strategie-tagesabschluss
• Recherche-Output zu Landing-Page-Architektur 2026: best-practices-researcher-Run 2026-05-19 (Inhalt im Tagesabschluss-Doc zusammengefasst)
• Existing Brand-Pattern: assets/firma/slides/2026-05-12-vf-claudeai-vs-openwebui.html
• Strategie-Visualisierung vom 2026-05-19: assets/firma/slides/2026-05-19-av-strategie-drei-streams.html

Wenn der Prototype passt — Folgeschritte (NICHT diese Session)

1. Implementation im ~/source/agentic-ventures-website-Repo via /work-Pipeline, 3-4 Tage netto
2. Rest des landing-spec-v2 Sektion-fuer-Sektion in den Code uebersetzen
3. SSR-Check + robots.txt + Schema.org-Update fuer LLM-Zitierbarkeit
4. Deploy + LLM-Citation-Test (drei Test-Queries gegen Claude/ChatGPT/Perplexity)