MatiSolina/gtm-skills

Landing Page GTM

Erstellen Sie produktionsreife SaaS-Landingpages mit der visuellen Sprache von cer0.ai – Dark Mode, minimalistisch, Gradienten- und Körnungshintergrund, Framer Motion Mikrointeraktionen, shadcn-basierte UI-Primitive, konversionsorientierter Text auf Spanisch (Río de la Plata) oder Englisch.

Wann diese Fähigkeit angewendet wird

• Der Benutzer fragt: „armame una landing“, „bau mir eine Landingpage“, „Marketing-Website“, „SaaS-Homepage“, „Produktseite“.
• Der Benutzer bezieht sich auf: cer0.ai, Midday, Linear, Vercel als Design-Inspiration.
• Der Benutzer wünscht eine dunkle/minimale Ästhetik für ein B2B- oder B2C-SaaS-Produkt.
• Der Benutzer verwendet v0.dev und wünscht Prompts/Komponenten, die diesem Stil entsprechen.

Stack (nicht verhandelbare Standardeinstellungen)

• Next.js 15 App Router mit standardmäßig Server-Komponenten.
• TypeScript mit strict: true.
• Tailwind CSS v4 mit CSS-Variablen für Theming (bg-background, text-foreground, usw.).
• shadcn/ui für Primitive (Button, Card, Accordion, Dialog).
• Framer Motion (framer-motion) importiert als m von motion-provider für In-View-Animationen.
• lucide-react für Symbole (NIEMALS Emojis in der Produkt-UI).
• next/image für alle Bilder mit expliziten Breiten-/Höhenangaben.
• next/dynamic für Abschnitte unterhalb der Bildschirmmitte (lazy load).

Verbindliche Seitenstruktur

Jede Landingpage folgt dieser Abschnittsreihenfolge. Das Überspringen eines Abschnitts erfordert eine explizite Begründung.

1. <Navbar /> – fixiert, transparent → beim Scrollen unscharf
2. <Hero /> – h1 + Untertitel + 2 CTAs + Produkt-Mockup (rechte Spalte)
3. <LogoStrip /> – Kunden-/Presse-Logos, monochrom (filter: brightness(0) invert(1))
4. Produktvorschau – großer Dashboard-Screenshot in gerahmter Karte mit auslaufendem Farbverlauf am unteren Rand
5. Feature-Abschnitte (3-5) – abwechselnd links/rechts, jeder = Überschrift + Absatz + visuelles Mockup
6. <Benefits /> – 3-spaltiges Raster mit Symbol + Überschrift + 1-zeilige Beschreibung
7. <Pricing /> – 3 Stufen, mittlere Stufe hervorgehoben mit Badge „Más elegido“
8. <Faq /> – Accordion mit 5-7 echten Einwänden, JSON-LD FAQPage Schema
9. <Footer /> – minimal, Links + Social + Rechtliches
10. JSON-LD-Blöcke – SoftwareApplication, Organization, FAQPage

Visuelles System

Laden Sie references/design-tokens.md für die vollständige Spezifikation. Kurzreferenz:

• Palette: --background: #000, --foreground: #fafafa, --muted-foreground: #a1a1aa, --border: rgba(250,250,250,0.08).
• Hintergrund: Zwei radial-gradient-Unschärfen (oben-links + unten-rechts) mit etwa 5% Deckkraft, plus eine Noise-PNG-Überlagerung mit 0,03 Deckkraft und mix-blend-overlay.
• Typografie: Anzeigeschrift für Überschriften (Geist Sans oder lokal --font-display). Der Fließtext verwendet Inter. Überschriften haben tracking-[-0.02em] und font-medium (NICHT font-bold – zu schwer für diese Ästhetik).
• Überschriftengrößen: text-[clamp(2.5rem,5vw,4.5rem)] für h1, text-balance. Überall Clamps für fließende Skalierung verwenden.
• Rahmen: Immer border-border/50 (50% Deckkraft). Niemals durchgehende Rahmen – zu hart.
• Oberflächen: bg-secondary/20, bg-secondary/30, bg-secondary/50 – immer halbtransparent für Tiefe.
• Buttons: Pillen (rounded-full), h-12, px-8. Primär: bg-foreground text-background. Sekundär: border border-border/50 bg-secondary/30 backdrop-blur-sm.
• Karten: Außen rounded-[24px], innen rounded-[20px] (Matroschka). 1px Rahmen. Dezentes shadow-2xl shadow-black/20.
• Unschärfeeffekte: Hintergrundleuchten verwenden blur-[100px] bis blur-[120px]. Dekorative eingebettete Unschärfen bei Mockups verwenden blur-2xl.
• Bewegung: Einblenden + 10-40px Verschiebung, duration: 0.6-1s, Staffelung um 0.1-0.15s. useInView({ once: true, margin: "-100px" }) für Auslöser verwenden.

Textmuster

Laden Sie references/copy-patterns.md für die vollständige Anleitung. Kurzregeln:

• Hero-Überschrift: Imperativ oder deklarativ, spricht das Problem an („Hör auf, blind Schecks zu akzeptieren.“). NIEMALS „Willkommen bei X“ oder „X ist eine Plattform für…“.
• Hero-Untertitel: 1-2 Sätze. Was es tut + wie + warum es wichtig ist.
• CTA primär: Aktionsverb im Imperativ. „Probar gratis“, „Empezar“, „Crear cuenta“. Immer Aktion, niemals Nomen („Loslegen“ nicht „Jetzt loslegen!“).
• CTA sekundär: Option mit geringerer Hürde, oft informativ. „Ver demo“, „Cómo funciona“.
• Unterhalb des CTA: Vertrauenszeile. „+50.000 analysierte Schecks · Keine Kreditkarte“. Mittelpunktzeichen · verwenden.
• Abschnittsüberschriften: Tatsachenfeststellung, keine Frage. „Die Analyse kommt in 3 Sekunden.“ nicht „Wie schnell ist es?“.
• Ton für Spanisch: Voseo, wenn das Publikum argentinisch ist. Direkt, keine Unternehmenssprache. („Sacale una foto“, nicht „Tome una fotografía“).
• NEIN: „Revolutionär“, „hochmodern“, „Synergie“, „hebeln“, „weltklasse“, „branchenführend“.

Erstellungsreihenfolge

Beim Generieren einer Landingpage:

1. Dem Benutzer maximal 3 Fragen stellen (überspringen, wenn aus dem Kontext offensichtlich):
   • Was macht das Produkt? (1 Satz)
   • Wer ist die Zielgruppe?
   • Was ist die primäre CTA-Aktion?
2. Zuerst den Hero generieren. Hero-Freigabe einholen, bevor der Rest erstellt wird.
3. Abschnitte schrittweise erstellen – ein Abschnitt pro Antwort, wobei der Benutzer den Text genehmigt, bevor fortgefahren wird.
4. JSON-LD am Ende hinzufügen, niemals auslassen (SEO ist wichtig).
5. Barrierefreiheit überprüfen: alle Bilder haben alt, alle Buttons sind echte <button> oder <a>, Farbkontrast erfüllt WCAG AA.

Anti-Patterns (diese ablehnen)

• Hero mit Stockfoto von „vielfältigem Team, das vor dem Laptop lächelt“.
• Generischer Farbverlaufs-Hero ohne Produkt-Mockup.
• Preise „Vertrieb kontaktieren“ für jede Stufe (in frühen SaaS-Phasen).
• Den Preis vollständig verstecken.
• Mehr als 3 CTAs oberhalb der Falz (führt zu Entscheidungslähmung).
• Karussells für Testimonials (geringe Interaktion, verschlechtert LCP).
• motion.div mit transition: { duration: 2 } – zu langsam.
• Helles Farbschema als Standard (diese Fähigkeit = Dark-First).

Referenzen

Auf Anfrage lesen:

• references/sections.md – Anatomie jedes Abschnitts mit Code-Mustern
• references/design-tokens.md – vollständige Farb-, Typografie-, Abstands-Token
• references/copy-patterns.md – Überschriftenformeln, CTA-Bibliothek, FAQ-Muster
• references/seo-jsonld.md – Schema.org-Vorlagen für SaaS-Landingpages

Vorlagen

In templates/:

• page.tsx – Root-Seite mit allen Abschnitten, dynamischen Imports, JSON-LD
• hero.tsx – Hero-Komponente mit Mockup-Muster in der rechten Spalte
• pricing.tsx – 3-stufige Preiskarte mit mittlerer Hervorhebung
• faq.tsx – Accordion-FAQ mit JSON-LD
• navbar.tsx – Scroll-bewusste Navigationsleiste mit Hintergrundunschärfe

Kopieren Sie eine Vorlage, passen Sie den Text und die Eigenschaften an. Nicht von Grund auf neu schreiben.

Referenz-Codebasis

Live-Referenz: /Users/mati/Clientes/rosental/radiant-compliance/apps/web/ (cer0.ai-Quelle). Im Zweifelsfall die Muster dieser Codebasis exakt spiegeln. Sie ist produktionserprobt.