Página de Aterrizaje

¿Qué hace Página de Aterrizaje?

Construye páginas de aterrizaje hermosas y responsivas en minutos.

Cuándo Usarlo

• Lanzar un nuevo producto o funcionalidad
• Crear una página de marketing o promocional
• Construir un portafolio o sitio personal
• Hacer una página de registro o lista de espera
• Prototipar un concepto de producto rápidamente

Cómo Funciona

1. Secciones de la Página

Toda página de aterrizaje efectiva sigue esta estructura:

┌─────────────────────────────────────┐
│  Navegación (logo + enlaces)          │
├─────────────────────────────────────┤
│  Hero (titular + CTA)                │
├─────────────────────────────────────┤
│  Prueba Social / Logotipos           │
├─────────────────────────────────────┤
│  Características (3-4 tarjetas)      │
├─────────────────────────────────────┤
│  Cómo Funciona (3 pasos)             │
├─────────────────────────────────────┤
│  Testimonios                        │
├─────────────────────────────────────┤
│  Precios (opcional)                 │
├─────────────────────────────────────┤
│  CTA (repetir acción principal)     │
├─────────────────────────────────────┤
│  Pie de página                       │
└─────────────────────────────────────┘

2. Sección Hero

El hero hace o deshace la página. Mantenlo simple:

function Hero() {
  return (
    <section className="py-20 px-6 text-center">
      {/* Insignia */}
      <div className="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-sm text-blue-700 mb-6">
        Ahora en beta público
      </div>

      {/* Titular — una propuesta de valor clara */}
      <h1 className="text-5xl font-bold tracking-tight text-gray-900 max-w-3xl mx-auto">
        Lanza tu producto <span className="text-blue-600">10x más rápido</span> con IA
      </h1>

      {/* Subtítulo — respalda el titular */}
      <p className="mt-6 text-xl text-gray-600 max-w-2xl mx-auto">
        Deja de escribir código repetitivo. Deja que la IA maneje el trabajo tedioso
        mientras tú te enfocas en lo que importa.
      </p>

      {/* CTA — una acción principal */}
      <div className="mt-10 flex gap-4 justify-center">
        <a href="#" className="px-8 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">
          Comienza Gratis
        </a>
        <a href="#" className="px-8 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-50">
          Ver Demo
        </a>
      </div>
    </section>
  )
}

3. Tarjetas de Características

const features = [
  { icon: '⚡', title: 'Rápido como un Rayo', description: 'Despliega en segundos, no en horas' },
  { icon: '🔒', title: 'Seguro por Defecto', description: 'Seguridad de nivel empresarial incorporada' },
  { icon: '📊', title: 'Analíticas', description: 'Información en tiempo real sobre tus datos' },
]

function Features() {
  return (
    <section className="py-20 px-6 bg-gray-50">
      <h2 className="text-3xl font-bold text-center mb-12">Todo lo que necesitas</h2>
      <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        {features.map(f => (
          <div key={f.title} className="bg-white p-6 rounded-xl shadow-sm">
            <div className="text-3xl mb-4">{f.icon}</div>
            <h3 className="text-lg font-semibold mb-2">{f.title}</h3>
            <p className="text-gray-600">{f.description}</p>
          </div>
        ))}
      </div>
    </section>
  )
}

4. Principios de Diseño

• Una CTA por sección — no abrumes con opciones
• El espacio en blanco es tu aliado — padding generoso (py-20, gap-8)
• Ancho máximo en el texto — nunca dejes que el texto ocupe todo el ancho (max-w-3xl)
• Jerarquía visual — más grande = más importante, usa font-bold con moderación
• Móvil primero — diseña para móvil, mejora con breakpoints md: y lg:
• Carga rápida — usa next/image, minimiza JS, sin librerías pesadas

5. Configuración Rápida

# Ruta más rápida: Next.js + Tailwind
npx create-next-app@latest landing --typescript --tailwind --app
cd landing
npm run dev

Checklist de Calidad

• Se ve bien en móvil (comprobar a 375px de ancho)
• El titular del hero es claro y conciso (< 10 palabras)
• Una CTA obvia arriba del pliegue
• La página carga en < 2 segundos
• Todos los enlaces y botones funcionan
• Favicon y meta etiquetas configurados

Ejemplos

> Construye una página de aterrizaje para una herramienta de escritura con IA
> Crea una página de lista de espera con registro por correo electrónico para una app móvil
> Construye una página de portafolio con muestra de proyectos