Prompts para diseñar landing pages.

Estamos diseñando una landing page para [Tally, una app de facturación para freelancers]. Los visitantes son [diseñadores, redactores y desarrolladores que envían de 2 a 10 facturas al mes]. La única acción que buscamos: [empezar una prueba gratuita]. La promesa principal: [cobrar antes sin perseguir a los clientes]. Pruebas que podemos mostrar: [12 400 usuarios, los pagos llegan de media 9 días antes].

Antes de diseñar nada, enumera en orden las secciones que necesita esta página, con una frase sobre lo que cada sección debe convencer al visitante.

Diseña la sección hero en tres direcciones, cada una como un archivo HTML autocontenido a 1440×900 con CSS en línea y fuentes del sistema:
A — cálida y editorial, con un titular serif
B — oscura y contundente, con un solo color de acento brillante y números grandes
C — suave y cercana, con tarjetas redondeadas y un degradado claro
Usa el mismo titular, el mismo subtítulo y la misma llamada a la acción en las tres. Dibuja cualquier elemento visual del producto con HTML y CSS; sin imágenes externas.

Amplía la dirección [B] a una landing page completa en un único archivo HTML de 1440px de ancho. Secciones, en orden: hero, franja de logos, tres funciones clave con un pequeño elemento visual del producto cada una, cómo funciona en tres pasos, dos citas de clientes con nombre y cargo, precios, preguntas frecuentes con cinco preguntas y una llamada a la acción final. Deja el hero exactamente como está.

Reescribe la sección de funciones. Cada función necesita un titular concreto que diga qué obtiene el usuario, una frase con un detalle o una cifra específica y un pequeño elemento visual de UI dibujado en HTML que muestre la función en uso. Nada de iconos en círculos de color ni titulares de una sola palabra.

Diseña la sección de precios con [Free, Pro a US$12/mes, Studio a US$29/mes]. Destaca [Pro] como el plan recomendado. Enumera como máximo cinco funciones por plan, empezando por lo que cambia entre planes. Añade un selector mensual/anual que muestre el ahorro anual y, bajo las tarjetas, una línea que responda a la objeción más común: [¿Puedo cancelar cuando quiera?].

Haz una versión de esta página de 390px de ancho en un archivo aparte. Apila las secciones en un orden lógico, mantén la llamada a la acción visible sin hacer scroll en la primera pantalla, haz que cada zona táctil tenga al menos 44px de alto y dime qué elementos de escritorio eliminaste o simplificaste y por qué.

Revisa esta página en busca de lo que la hace parecer generada por IA o de plantilla: todo centrado, manchas con degradado, cuadrículas de tarjetas idénticas, textos vagos, demasiados colores de acento. Enumera lo que encuentres, corrige los cinco problemas más llamativos y deja todo lo demás igual.

Reconstruye landing.html como una página de [Next.js] con [Tailwind CSS] y nuestros componentes de [src/components]. Reproduce el layout, el espaciado y los tamaños de texto del archivo HTML, hazla responsive entre 390px y 1440px y mantén los textos exactamente como están.