Prompt Engineering para desarrollo web

Soy del equipo de marketing de {{empresa}}. Quiero construir {{qué: ej. una landing para captar leads de un fondo nuevo}}.

Antes de escribir una sola línea de código, hacéme las preguntas que necesites para entender: objetivo, público, acción principal (CTA), estilo visual y referencias que me gusten.

Cuando tengas todo claro, proponé un plan de secciones. Recién después armamos el código.

Vamos a construir el proyecto con este stack: Next.js (App Router), React, TypeScript, Tailwind CSS y componentes shadcn/ui.

Reglas para todo el proyecto:
- Diseño minimalista y premium, mobile primero.
- Paleta: {{color principal}} + {{color de acento}}. Tipografía: {{fuente}}.
- Componentes chicos y reutilizables, un archivo por componente.
- Nada de librerías nuevas sin avisarme antes.

Confirmame que entendiste y arrancamos por la primera sección.

Generá la sección Hero de la landing.

Contenido:
- Título grande con la promesa: "{{promesa, ej. Invertí desde tu celular, sin vueltas}}"
- Subtítulo de una línea que lo refuerce.
- Un botón CTA principal que diga "{{CTA, ej. Quiero invertir}}".
- A la derecha, un espacio para una imagen/mockup.

Estilo: minimalista, mucho aire, mobile primero. Usá la paleta de la marca.
Devolvé un único componente React + Tailwind, listo para pegar.

Hacé un Navbar responsive para la landing.

- Izquierda: el logo (texto "{{marca}}" por ahora).
- Centro: links a Inicio, Beneficios, Preguntas, Contacto.
- Derecha: un botón CTA "{{CTA}}".
- En mobile: menú hamburguesa que abre los links.

Que sea sticky arriba y tenga un fondo levemente translúcido al hacer scroll. Un solo componente.

Generá una sección de 3 cards de beneficios en grilla (1 columna en mobile, 3 en desktop).

Cada card: un ícono (de lucide-react), un título corto y 1-2 líneas de descripción.
Beneficios: {{beneficio 1}}, {{beneficio 2}}, {{beneficio 3}}.

Estilo limpio, bordes suaves, leve sombra. Hover sutil. Paleta de la marca.

Armá un formulario de contacto para captar leads.

Campos: Nombre, Email, WhatsApp y un select "{{tema, ej. ¿Qué te interesa?}}".
Al enviar, mostrá un estado de "Enviando…" y después un mensaje de éxito.
Validá que el email tenga formato válido y que los campos requeridos estén completos.

Por ahora, en el submit solo hacé un console.log de los datos (después lo conectamos).
Diseño acorde al resto de la landing.

Generá una sección de Preguntas Frecuentes con un acordeón (se expande/colapsa al clickear).

Usá estas 4 preguntas: {{pregunta 1}}, {{pregunta 2}}, {{pregunta 3}}, {{pregunta 4}}.
Solo una abierta a la vez. Animación suave al abrir/cerrar. Estilo de la marca.

Hacé un footer simple y prolijo.

- Logo "{{marca}}" + una línea de descripción.
- Columnas de links: Producto, Empresa, Legales.
- Redes sociales (íconos).
- Abajo: copyright con el año actual.

Responsive, paleta de la marca, sobrio.

En el {{componente, ej. Hero}} que ya tenemos, cambiá SOLO {{lo que querés, ej. el color del botón a teal}}.

No modifiques ningún otro archivo ni otra parte del componente.
No reescribas lo que ya funciona.
Mostrame únicamente lo que cambiaste.

El último cambio rompió {{qué se rompió, ej. el layout en mobile}}.

Volvé el {{componente}} a como estaba antes de ese cambio y, esta vez, hacé SOLO {{el cambio mínimo}} sin tocar el resto.

Quiero hacer varios cambios al {{componente}}, pero vamos de a uno.

Empecemos por el primero: {{cambio 1}}.
Cuando lo confirme, te paso el siguiente. No adelantes los demás.

Antes de aplicar el cambio, explicame en 2-3 líneas y en lenguaje simple:
- Qué vas a modificar.
- Qué archivos toca.
- Si hay algún riesgo de romper algo que ya funciona.

Si todo está claro, te digo que avances.

[CONTEXTO DEL PROYECTO — usar en todos los pedidos]

Proyecto: landing de {{empresa}} para {{objetivo}}.
Stack: Next.js + React + TypeScript + Tailwind + shadcn/ui.

Marca y diseño:
- Estilo: minimalista, premium, con mucho aire. Mobile primero.
- Colores: principal {{navy/#____}}, acento {{teal/#____}}.
- Tipografía: {{fuente}} para textos, mono para números/código.
- Botones: {{describí el estilo, ej. redondeados, sólidos en color de acento}}.
- Tono de los textos: {{ej. cercano, claro, sin jerga financiera}}.

Reglas: componentes chicos y reutilizables; no agregar librerías sin avisar;
respetar SIEMPRE esta guía visual.

Tené esto presente en todo lo que generes a partir de ahora.

Usá SIEMPRE estos términos tal cual, sin variaciones:
- Nombre del producto: "{{nombre exacto}}"
- Cómo nos referimos al usuario: "{{ej. inversor / cliente}}"
- CTA principal: "{{texto exacto del botón}}"
- Tagline: "{{frase exacta}}"
- Palabras a EVITAR: {{ej. "barato", "fácil y rápido"}}.

Necesito una nueva sección de {{qué}}.

Usá EXACTAMENTE el mismo estilo que ya tienen el Hero y las cards de beneficios:
mismos colores, mismos botones, mismos espaciados y la misma tipografía.
No inventes un estilo nuevo: que se sienta parte de la misma página.