MatiSolina/gtm-skills

Landing Page GTM

Build production-grade SaaS landing pages with the visual language of cer0.ai — dark mode, minimal, gradient-and-grain background, Framer Motion micro-interactions, shadcn-based UI primitives, conversion-oriented copy in Spanish (Río de la Plata) or English.

When to use this skill

• User asks: "armame una landing", "build a landing page", "marketing site", "SaaS homepage", "página de producto".
• User references: cer0.ai, Midday, Linear, Vercel as design inspiration.
• User wants a dark/minimal aesthetic for a B2B or B2C SaaS product.
• User is using v0.dev and wants prompts/components that match this style.

Stack (non-negotiable defaults)

• Next.js 15 App Router with server components by default.
• TypeScript with strict: true.
• Tailwind CSS v4 with CSS variables for theming (bg-background, text-foreground, etc.).
• shadcn/ui for primitives (button, card, accordion, dialog).
• Framer Motion (framer-motion) imported as m from motion-provider for in-view animations.
• lucide-react for icons (NEVER emojis in product UI).
• next/image for all images with explicit width/height.
• next/dynamic for below-the-fold sections (lazy load).

Mandatory page structure

Every landing follows this section order. Skipping a section requires explicit justification.

1. <Navbar /> — sticky, transparent → blurred on scroll
2. <Hero /> — h1 + subtitle + 2 CTAs + product mockup (right column)
3. <LogoStrip /> — client/press logos, monochrome (filter: brightness(0) invert(1))
4. Product preview — large dashboard screenshot in framed card with fade-out gradient at bottom
5. Feature sections (3-5) — alternating left/right, each = headline + paragraph + visual mockup
6. <Benefits /> — 3-column grid with icon + headline + 1-line description
7. <Pricing /> — 3 tiers, middle tier highlighted with badge "Más elegido"
8. <Faq /> — accordion with 5-7 real objections, JSON-LD FAQPage schema
9. <Footer /> — minimal, links + social + legal
10. JSON-LD blocks — SoftwareApplication, Organization, FAQPage

Visual system

Load references/design-tokens.md for the full spec. Quick reference:

• Palette: --background: #000, --foreground: #fafafa, --muted-foreground: #a1a1aa, --border: rgba(250,250,250,0.08).
• Background: Two radial-gradient blurs (top-left + bottom-right) at ~5% opacity, plus a noise PNG overlay at 0.03 opacity with mix-blend-overlay.
• Typography: Display font for headings (Geist Sans or local --font-display). Body uses Inter. Headings have tracking-[-0.02em] and font-medium (NOT font-bold — too heavy for this aesthetic).
• Headings sizes: text-[clamp(2.5rem,5vw,4.5rem)] for h1, text-balance. Use clamps everywhere for fluid scaling.
• Borders: Always border-border/50 (50% opacity). Never solid borders — too harsh.
• Surfaces: bg-secondary/20, bg-secondary/30, bg-secondary/50 — always semi-transparent for depth.
• Buttons: Pills (rounded-full), h-12, px-8. Primary: bg-foreground text-background. Secondary: border border-border/50 bg-secondary/30 backdrop-blur-sm.
• Cards: rounded-[24px] outer, rounded-[20px] inner (Russian doll). 1px borders. Subtle shadow-2xl shadow-black/20.
• Blur effects: Background glows use blur-[100px] to blur-[120px]. Decorative inset blurs on mockups use blur-2xl.
• Motion: Fade + 10-40px translate, duration: 0.6-1s, stagger by 0.1-0.15s. Use useInView({ once: true, margin: "-100px" }) for triggers.

Copy patterns

Load references/copy-patterns.md for full guide. Quick rules:

• Hero headline: Imperative or declarative, addresses the pain ("Dejá de aceptar cheques a ciegas."). NEVER "Welcome to X" or "X is a platform for...".
• Hero subtitle: 1-2 sentences. What it does + how + why it matters.
• CTA primary: Action verb in imperative. "Probar gratis", "Empezar", "Crear cuenta". Always action, never noun ("Get started" not "Get started today!").
• CTA secondary: Lower-friction option, often informational. "Ver demo", "Cómo funciona".
• Below the CTA: Trust line. "+50.000 cheques analizados · Sin tarjeta de crédito". Use middots ·.
• Section headlines: Statement of fact, not question. "El análisis llega en 3 segundos." not "How fast is it?".
• Tone for Spanish: Voseo when the audience is Argentine. Direct, no corporate-speak. ("Sacale una foto", not "Tome una fotografía").
• NO: "Revolutionary", "cutting-edge", "synergy", "leverage", "world-class", "best-in-class".

Build sequence

When generating a landing:

1. Ask the user 3 questions max (skip if obvious from context):
   • What does the product do? (1 sentence)
   • Who is the audience?
   • What's the primary CTA action?
2. Generate the Hero first. Get hero approval before building the rest.
3. Build sections incrementally — one section per response, with the user approving copy before moving on.
4. Add JSON-LD at the end, never skip it (SEO matters).
5. Verify accessibility: all images have alt, all buttons are real <button> or <a>, color contrast passes WCAG AA.

Anti-patterns (refuse these)

• Hero with stock photo of "diverse team smiling at laptop".
• Generic gradient hero with no product mockup.
• Pricing "Contact sales" for every tier (in early-stage SaaS).
• Hiding the price entirely.
• More than 3 CTAs above the fold (forces decision paralysis).
• Carousels for testimonials (low engagement, kills LCP).
• motion.div with transition: { duration: 2 } — too slow.
• Light mode as default (this skill = dark first).

References

Read on demand:

• references/sections.md — anatomy of each section with code patterns
• references/design-tokens.md — full color, typography, spacing tokens
• references/copy-patterns.md — headline formulas, CTA library, FAQ patterns
• references/seo-jsonld.md — schema.org templates for SaaS landings

Templates

In templates/:

• page.tsx — root page with all sections, dynamic imports, JSON-LD
• hero.tsx — Hero component with right-column mockup pattern
• pricing.tsx — 3-tier pricing card with middle highlight
• faq.tsx — accordion FAQ with JSON-LD
• navbar.tsx — scroll-aware navbar with backdrop blur

Copy a template, adapt the copy and props. Don't rewrite from scratch.

Reference codebase

Live reference: /Users/mati/Clientes/rosental/radiant-compliance/apps/web/ (cer0.ai source). When in doubt, mirror that codebase's patterns exactly. It's been battle-tested in production.