Componentización

Mirá cualquier landing buena y vas a ver siempre las mismas piezas: una barra arriba, un título grande con un botón, unas tarjetas, unas preguntas frecuentes y un pie de página. Esas piezas son los componentes. Una página no se escribe de corrido: se arma apilando bloques, como un Lego.

Pasá el mouse por cada bloque de esta maqueta para ver qué hace cada pieza dentro de una landing:

Pedir “hacéme toda la web” de una es como pedirle a un arquitecto la casa entera sin planos: sale algo, pero genérico y difícil de corregir. En cambio, si pedís pieza por pieza, ganás tres cosas:

1. Control. Iterás un componente sin romper el resto. 2. Reutilización. El mismo botón, la misma card y el mismo navbar se repiten en toda la web — los definís una vez. 3. Consistencia.Si todos los bloques salen del mismo “molde”, la web se ve profesional y coherente.

Vamos a construir la landing de {{producto: ej. el fondo Money Market de IEB Capital}}.
Trabajá de forma COMPONENTIZADA: creá cada sección como un componente reutilizable e independiente
(Navbar, Hero, Cards, FAQ, Footer, etc.). Antes de codear, listame los componentes que va a tener esta página.
Después los vamos generando de a uno. No escribas todo junto.

Es la barra de arriba: logo a la izquierda, links al medio y un botón de acción a la derecha. Se repite igual en todas las páginas, así que es el primer componente que conviene fijar. Mirá la vista, el código y el prompt que lo genera:

El hero es la parte de arriba de todo: un título con la promesa, una bajada corta y el CTA principal. Tenés ~5 segundos para enganchar, así que el título manda. Una buena fórmula: qué gana el cliente + qué hace ahora.

La card es una cajita reutilizable: ícono, título y una descripción corta. Es el ejemplo perfecto del Lego, porque definís una y la repetís cambiando solo el contenido. Sirve para beneficios, planes, features, integrantes del equipo, lo que sea.

Las preguntas frecuentes despejan las últimas dudas justo antes de que el cliente convierta. El componente típico es un acordeón: cada pregunta se abre y se cierra al clickearla. Probalo:

El footer cierra la página: logo, una bajada, columnas de links secundarios, redes y la línea legal. Como el navbar, se repite igual en todas las páginas, así que también es un componente único.

Un modal es una ventana que aparece encimade la página, oscureciendo el fondo. Sirve para pedir un dato sin sacar a la persona de donde está: “dejá tu mail”, una confirmación, un video. Apretá el botón para verlo:

El formulario es, para marketing, la pieza más importante: es donde la visita se convierte en lead. Regla de oro: pedí lo mínimo. Cada campo de más es gente que abandona. Probá enviarlo:

Con estas 7 piezas armás el 90% de cualquier landing de marketing. La próxima vez que encares una web, pensala como una lista de bloques y pedí uno a la vez.