MatiSolina/gtm-skills

Page d'Atterrissage GTM

Créez des pages d'atterrissage SaaS de qualité production avec le langage visuel de cer0.ai — mode sombre, minimal, fond avec dégradé et grain, micro-interactions Framer Motion, primitives d'interface basées sur shadcn/ui, copywriting orienté conversion en espagnol (Río de la Plata) ou en anglais.

Quand utiliser cette compétence

• L'utilisateur demande : "armame una landing", "crée une page d'atterrissage", "site marketing", "page d'accueil SaaS", "página de producto".
• L'utilisateur référence : cer0.ai, Midday, Linear, Vercel comme inspiration de design.
• L'utilisateur souhaite une esthétique sombre/minimale pour un produit SaaS B2B ou B2C.
• L'utilisateur utilise v0.dev et souhaite des invites/composants correspondant à ce style.

Stack (valeurs par défaut non négociables)

• Next.js 15 App Router avec composants serveur par défaut.
• TypeScript avec strict: true.
• Tailwind CSS v4 avec variables CSS pour le thème (bg-background, text-foreground, etc.).
• shadcn/ui pour les primitives (button, card, accordion, dialog).
• Framer Motion (framer-motion) importé sous m depuis motion-provider pour les animations au scroll.
• lucide-react pour les icônes (JAMAIS d'émojis dans l'interface produit).
• next/image pour toutes les images avec largeur/hauteur explicites.
• next/dynamic pour les sections hors écran (chargement différé).

Structure de page obligatoire

Chaque page d'atterrissage suit cet ordre de sections. Sauter une section nécessite une justification explicite.

1. <Navbar /> — fixe, transparent → flouté au défilement
2. <Hero /> — h1 + sous-titre + 2 CTA + maquette produit (colonne de droite)
3. <LogoStrip /> — logos clients/presse, monochrome (filter: brightness(0) invert(1))
4. Aperçu du produit — grande capture d'écran du tableau de bord dans une carte encadrée avec dégradé de fondu en bas
5. Sections de fonctionnalités (3-5) — alternance gauche/droite, chacune = titre + paragraphe + maquette visuelle
6. <Benefits /> — grille 3 colonnes avec icône + titre + description d'une ligne
7. <Pricing /> — 3 niveaux, niveau du milieu mis en évidence avec badge "Más elegido"
8. <Faq /> — accordéon avec 5-7 objections réelles, schéma JSON-LD FAQPage
9. <Footer /> — minimal, liens + réseaux sociaux + mentions légales
10. Blocs JSON-LD — SoftwareApplication, Organization, FAQPage

Système visuel

Chargez references/design-tokens.md pour la spécification complète. Référence rapide :

• Palette : --background: #000, --foreground: #fafafa, --muted-foreground: #a1a1aa, --border: rgba(250,250,250,0.08).
• Arrière-plan : Deux flous radial-gradient (haut-gauche + bas-droite) à ~5% d'opacité, plus une superposition PNG de bruit à 0.03 d'opacité avec mix-blend-overlay.
• Typographie : Police d'affichage pour les titres (Geist Sans ou --font-display locale). Le corps utilise Inter. Les titres ont tracking-[-0.02em] et font-medium (PAS font-bold — trop lourd pour cette esthétique).
• Tailles de titres : text-[clamp(2.5rem,5vw,4.5rem)] pour h1, text-balance. Utilisez des clamps partout pour une mise à l'échelle fluide.
• Bordures : Toujours border-border/50 (50% d'opacité). Jamais de bordures pleines — trop agressives.
• Surfaces : bg-secondary/20, bg-secondary/30, bg-secondary/50 — toujours semi-transparentes pour la profondeur.
• Boutons : Pastilles (rounded-full), h-12, px-8. Primaire : bg-foreground text-background. Secondaire : border border-border/50 bg-secondary/30 backdrop-blur-sm.
• Cartes : rounded-[24px] extérieur, rounded-[20px] intérieur (poupée russe). Bordures de 1px. Ombre subtile shadow-2xl shadow-black/20.
• Effets de flou : Les lueurs d'arrière-plan utilisent blur-[100px] à blur-[120px]. Les flous décoratifs incrustés sur les maquettes utilisent blur-2xl.
• Animation : Fondu + translation de 10-40px, duration: 0.6-1s, décalage de 0.1-0.15s. Utilisez useInView({ once: true, margin: "-100px" }) pour les déclencheurs.

Modèles de copywriting

Chargez references/copy-patterns.md pour le guide complet. Règles rapides :

• Titre du Hero : Impératif ou déclaratif, adresse le problème ("Dejá de aceptar cheques a ciegas."). JAMAIS "Bienvenue sur X" ou "X est une plateforme pour...".
• Sous-titre du Hero : 1-2 phrases. Qu'est-ce que ça fait + comment + pourquoi c'est important.
• CTA principal : Verbe d'action à l'impératif. "Probar gratis", "Empezar", "Crear cuenta". Toujours une action, jamais un nom ("Get started" pas "Get started today!").
• CTA secondaire : Option à moindre friction, souvent informative. "Ver demo", "Cómo funciona".
• En dessous du CTA : Ligne de confiance. "+50.000 cheques analizados · Sin tarjeta de crédito". Utilisez des middots ·.
• Titres de section : Énoncé de fait, pas une question. "El análisis llega en 3 segundos." pas "How fast is it?".
• Ton pour l'espagnol : Voseo quand le public est argentin. Direct, pas de jargon d'entreprise. ("Sacale una foto", pas "Tome una fotografía").
• NON : "Revolutionary", "cutting-edge", "synergy", "leverage", "world-class", "best-in-class".

Séquence de construction

Lors de la génération d'une page d'atterrissage :

1. Posez 3 questions maximum à l'utilisateur (passez si évident d'après le contexte) :
   • Que fait le produit ? (1 phrase)
   • Quel est le public ?
   • Quelle est l'action principale du CTA ?
2. Générez le Hero en premier. Obtenez l'approbation du Hero avant de construire le reste.
3. Construisez les sections de manière incrémentielle — une section par réponse, l'utilisateur approuvant le texte avant de passer à la suivante.
4. Ajoutez le JSON-LD à la fin, ne le sautez jamais (le SEO compte).
5. Vérifiez l'accessibilité : toutes les images ont alt, tous les boutons sont de vrais <button> ou <a>, le contraste des couleurs passe WCAG AA.

Anti-patrons (refusez-les)

• Hero avec photo stock d'une "équipe diversifiée souriant devant un ordinateur portable".
• Hero avec dégradé générique sans maquette de produit.
• Tarification "Contacter les ventes" pour chaque niveau (dans un SaaS en phase de démarrage).
• Cacher complètement le prix.
• Plus de 3 CTA au-dessus de la ligne de flottaison (provoque une paralysie de la décision).
• Carrousels pour les témoignages (faible engagement, tue le LCP).
• motion.div avec transition: { duration: 2 } — trop lent.
• Mode clair par défaut (cette compétence = sombre d'abord).

Références

Lire à la demande :

• references/sections.md — anatomie de chaque section avec motifs de code
• references/design-tokens.md — jetons complets de couleur, typographie, espacement
• references/copy-patterns.md — formules de titres, bibliothèque de CTA, motifs de FAQ
• references/seo-jsonld.md — modèles schema.org pour pages d'atterrissage SaaS

Modèles

Dans templates/ :

• page.tsx — page racine avec toutes les sections, imports dynamiques, JSON-LD
• hero.tsx — composant Hero avec motif de maquette en colonne de droite
• pricing.tsx — carte de tarification à 3 niveaux avec mise en évidence du milieu
• faq.tsx — FAQ en accordéon avec JSON-LD
• navbar.tsx — barre de navigation sensible au défilement avec flou d'arrière-plan

Copiez un modèle, adaptez le texte et les props. Ne réécrivez pas à partir de zéro.

Base de code de référence

Référence en direct : /Users/mati/Clientes/rosental/radiant-compliance/apps/web/ (source de cer0.ai). En cas de doute, reproduisez exactement les motifs de cette base de code. Elle a été éprouvée en production.