Saltar al contenido
Lección 15 de 22

Proyecto: Landing Page que Convierte

15 min read

Descripcion General del Proyecto

Bienvenido al Modulo IV. Todo lo que has aprendido hasta ahora --- prompt engineering, configuracion de CLAUDE.md, flujos de trabajo con Git, debugging, patrones de frontend, APIs de backend --- se une aqui. Vamos a construir un proyecto real desde cero: una landing page completa y profesional para un producto SaaS ficticio llamado FlowTask, una aplicacion de productividad y gestion de tareas.

Al final de esta leccion tendras una landing page totalmente desplegada y responsive con una seccion hero, destacados de funcionalidades, un recorrido de "como funciona", una tabla de precios con toggle mensual/anual, testimonios de clientes, un accordion de preguntas frecuentes, un formulario de contacto y un footer. La pagina estara en vivo en Vercel con seguimiento de analytics.

Este no es un proyecto de juguete. La pagina que vamos a construir es el tipo de trabajo por el que las startups pagan miles de dolares a agencias. Tu la vas a publicar en una sola sesion usando vibe coding.

Como Luce el Resultado Final

Imagina un sitio de una sola pagina, limpio y moderno. En la parte superior, un hero con un degradado llamativo, un titulo, subtitulo y un boton de llamada a la accion brillante. Debajo, una grilla de seis tarjetas de funcionalidades. Luego una seccion de tres pasos "como funciona", seguida de una tabla de precios con tres niveles. Despues, una seccion de testimonios con citas de aspecto real. Un accordion de preguntas frecuentes resuelve objeciones, y una seccion final de CTA con un formulario de captura de email cierra el trato. Un footer minimalista ata todo.

Habilidades Aplicadas

  • Prompt engineering para generacion de interfaces
  • Arquitectura frontend basada en componentes
  • Diseno responsive con Tailwind CSS
  • Control de versiones con Git
  • Despliegue en Vercel
  • Integracion basica de analytics

Planificacion de la Landing Page

Antes de escribir un solo prompt, necesitas saber que vas a construir. Una landing page tiene una estructura clara, y cada seccion cumple un proposito de conversion.

Este es el desglose por secciones:

  1. Hero --- Primera impresion. El titulo comunica la propuesta de valor. El subtitulo agrega detalle. El boton CTA impulsa la accion.
  2. Features --- Muestra lo que hace el producto. Seis tarjetas con iconos, titulos y descripciones cortas.
  3. Como Funciona --- Elimina la complejidad. Tres pasos simples que muestran el recorrido del usuario.
  4. Precios --- Responde "cuanto cuesta?" Elimina la ambiguedad. Tres niveles: Free, Pro, Enterprise.
  5. Testimonios --- Prueba social. Personas reales diciendo que el producto funciona.
  6. FAQ --- Maneja objeciones. Responde preguntas comunes antes de que el usuario tenga que preguntar.
  7. CTA Final --- Ultima oportunidad de convertir. Formulario de captura de email.
  8. Footer --- Enlaces de navegacion, redes sociales, paginas legales.

Wireframe en Palabras

Piensa en la pagina como un scroll vertical. Cada seccion ocupa aproximadamente la altura de un viewport. El hero es de ancho completo con un fondo degradado. Las features usan una grilla de tres columnas en desktop, apilándose a una columna en movil. "Como Funciona" alterna contenido izquierda y derecha. Los precios muestran tres tarjetas lado a lado. Los testimonios son una fila horizontal de tarjetas con citas. El FAQ es una columna centrada de elementos expandibles. El CTA final es una seccion llamativa y contrastante. El footer es oscuro con columnas de enlaces.

Este wireframe mental es tu hoja de ruta. Cuando le des prompts a la IA, puedes referenciar secciones especificas por nombre, y la IA sabra exactamente a que te refieres porque has establecido el vocabulario desde el inicio.

El Prompt Inicial

Comencemos scaffoldeando todo el proyecto. Este es el prompt completo que le darias a Claude Code:

Create a Next.js landing page for a SaaS product called "FlowTask" — a task
management app for teams. Use Tailwind CSS for styling. The page should be a
single-page layout with these sections in order:

1. Navigation bar with logo "FlowTask" and links: Features, Pricing, FAQ, and
   a "Get Started" button
2. Hero section with gradient background (indigo to purple), large headline,
   subheadline, CTA button, and a placeholder for a hero image
3. Features grid with 6 feature cards (icon placeholder, title, description)
4. "How It Works" section with 3 numbered steps
5. Pricing table with 3 tiers (Free, Pro $12/mo, Enterprise $49/mo) with a
   monthly/annual toggle (annual = 20% discount)
6. Testimonials section with 3 quote cards (avatar, name, role, quote)
7. FAQ accordion with 6 questions
8. Final CTA section with email capture form
9. Footer with logo, navigation columns, and social links

Make it fully responsive. Use modern design patterns: rounded corners, subtle
shadows, smooth hover transitions. The color scheme is indigo/purple primary
with slate grays for text.

Por Que Importa Cada Parte

Observa la estructura del prompt. Nombramos el producto, describimos lo que hace y especificamos el stack tecnologico. Luego listamos cada seccion en orden con suficiente detalle para que la IA genere contenido significativo, pero no tanto como para limitar el diseno. Cerramos con directrices de estilo globales.

Este es el patron de prompt "arquitecto" de nuestras lecciones de prompt engineering. Un prompt integral que establece el alcance completo, permitiendo que la IA tome decisiones de diseno inteligentes dentro de tus restricciones.

Construyendo la Seccion Hero

El scaffold inicial te dara algo funcional, pero la seccion hero merece atencion especial porque es lo primero que ven los visitantes.

El Prompt

Improve the hero section. Use a gradient from indigo-600 to purple-700. The
headline should be "Manage Tasks Like Never Before" in white, bold, text-5xl
on desktop. Subheadline: "FlowTask brings your team's work together in one
beautiful, intuitive space. Plan, track, and ship faster." Add a "Start Free
Trial" button (white background, indigo text, rounded-full, shadow-lg, hover
scale effect) and a "Watch Demo" secondary button (white outline). Below the
buttons, add a browser mockup placeholder (rounded rectangle with a subtle
shadow to suggest a screenshot). Make the section min-h-screen with content
centered vertically.

Revisando el Resultado

La IA generara un componente hero con clases utilitarias de Tailwind. Verifica lo siguiente:

  • Contraste: Texto blanco sobre degradado indigo/purpura deberia cumplir los estandares de accesibilidad WCAG. Si el degradado es muy claro, pidele a la IA que lo oscurezca.
  • Jerarquia de botones: El CTA primario debe ser visualmente dominante. El boton secundario debe ser claramente secundario.
  • Comportamiento responsive: En movil, el titulo debe reducirse a text-3xl y los botones deben apilarse verticalmente.
  • Espaciado: Padding generoso (py-20 o mas) le da a la seccion espacio para respirar.

Si algo esta mal, itera:

The hero headline is too small on mobile. Make it text-3xl on mobile and
text-5xl on desktop. Also increase the vertical padding to py-24.

Grilla de Features

La seccion de features comunica lo que hace FlowTask. Queremos seis tarjetas organizadas en una grilla responsive.

El Prompt

Create the features section with the heading "Everything Your Team Needs".
Use a 3-column grid on desktop (md:grid-cols-3), 2 columns on tablet
(sm:grid-cols-2), and 1 column on mobile. Each card should have: an icon
placeholder (a colored circle with an emoji or Heroicon), a bold title, and
a 2-sentence description. The 6 features are:

1. Smart Task Boards - Kanban boards that adapt to your workflow
2. Real-Time Collaboration - See changes as your team makes them
3. Automated Workflows - Set triggers and let FlowTask handle the rest
4. Time Tracking - Built-in timers and time reports
5. Analytics Dashboard - Insights into team productivity
6. Integrations - Connect with 100+ tools your team already uses

Add subtle hover effects: lift the card slightly (hover:-translate-y-1) with
a shadow increase.

Iteracion

Despues de revisar el resultado, podrias notar que las tarjetas carecen de variedad visual. Intenta:

Add a different background color tint to each feature card icon circle. Use
indigo-100, purple-100, pink-100, blue-100, green-100, and amber-100. This
gives each feature a distinct visual identity while maintaining cohesion.

Seccion Como Funciona

Esta seccion simplifica el producto en tres pasos. Reduce la complejidad percibida y acerca al visitante a la conversion.

Create a "How It Works" section with 3 steps in a horizontal timeline layout
on desktop. Each step has a large number (01, 02, 03) in indigo, a title,
and a description. Connect the steps with a dashed line or arrow. On mobile,
stack vertically. The steps are:

1. Create Your Workspace - Set up your team in under 2 minutes
2. Add Your Tasks - Import from existing tools or start fresh
3. Ship Faster - Watch your team's productivity take off

Use alternating left-right layout on desktop for visual interest.

La linea conectora entre pasos es un detalle de diseno elegante. Si la IA no lo implementa bien en el primer intento, puedes especificar:

Add a horizontal dashed line connecting the three step circles on desktop.
Use border-dashed with border-indigo-300. On mobile, use a vertical dashed
line instead.

Tabla de Precios

La seccion de precios es una de las partes mas criticas para la conversion de cualquier landing page. Necesita ser absolutamente clara.

El Prompt

Build a pricing section with the heading "Simple, Transparent Pricing". Add a
monthly/annual toggle at the top (annual shows 20% discount). Display 3 pricing
cards side by side:

Free ($0/mo):
- Up to 5 users
- 3 projects
- Basic task boards
- 1 GB storage
- CTA: "Get Started Free"

Pro ($12/mo, $10/mo annual):
- Up to 25 users
- Unlimited projects
- Advanced boards + automation
- 50 GB storage
- Priority support
- CTA: "Start Free Trial"
- This card should be visually highlighted (larger, border-indigo-500, "Most
  Popular" badge)

Enterprise ($49/mo, $39/mo annual):
- Unlimited users
- Unlimited everything
- Custom workflows
- 500 GB storage
- Dedicated account manager
- SSO and audit logs
- CTA: "Contact Sales"

Use check marks for included features. The Pro card should be scaled slightly
larger (scale-105) and have a colored border to draw attention.

El Toggle Mensual/Anual

El toggle es interactivo. La IA deberia generar un componente con gestion de estado:

const [isAnnual, setIsAnnual] = useState(false);

const prices = {
  pro: isAnnual ? 10 : 12,
  enterprise: isAnnual ? 39 : 49,
};

Si la IA genera el toggle sin gestion de estado adecuada, guiala:

The pricing toggle should use React useState. When "Annual" is selected,
show the discounted prices and add a "Save 20%" badge next to the annual
option.

Seccion de Testimonios

La prueba social impulsa las conversiones. Incluso con contenido de ejemplo, la estructura importa.

Create a testimonials section with the heading "Loved by Teams Worldwide".
Show 3 testimonial cards in a row on desktop. Each card has: a circular
avatar placeholder (gray circle with initials), a quote in italics, the
person's name in bold, their role and company. Use subtle card styling with
rounded-xl and shadow-sm. Add quotation mark decorations (a large
semi-transparent quote icon in the background of each card).

Testimonial content:
1. "FlowTask transformed how our team works. We shipped our product two
   weeks ahead of schedule." — Sarah Chen, Product Manager at TechCorp
2. "The automation features alone saved us 10 hours per week. It's a
   game-changer." — Marcus Johnson, Engineering Lead at StartupXYZ
3. "Finally, a project management tool that doesn't require a PhD to use."
   — Lisa Park, Founder at DesignStudio

Accordion de FAQ

Un componente accordion permite a los visitantes encontrar respuestas sin tener que hacer scroll por un muro de texto.

Build an FAQ section with the heading "Frequently Asked Questions". Create an
accordion component where clicking a question reveals the answer with a smooth
height transition. Use a plus/minus icon or chevron that rotates on open. Style
with divide-y for clean separation. Include these questions:

1. What is FlowTask? — A task management platform for teams...
2. Is there a free plan? — Yes, our Free plan includes...
3. Can I import from other tools? — Absolutely. We support import from...
4. How does billing work? — We offer monthly and annual billing...
5. Is my data secure? — Yes, we use industry-standard encryption...
6. What kind of support do you offer? — Free plans get community support...

Each answer should be 2-3 sentences.

El accordion necesita gestion de estado adecuada. Cada item debe rastrear si esta abierto o cerrado:

const [openIndex, setOpenIndex] = useState<number | null>(null);

const toggle = (index: number) => {
  setOpenIndex(openIndex === index ? null : index);
};

Formulario de Contacto y CTA

La seccion final de CTA debe crear urgencia y hacer que sea extremadamente simple tomar accion.

Create a final CTA section with a dark background (slate-900) and white text.
Heading: "Ready to Transform Your Team's Productivity?" Subheading: "Join
10,000+ teams already using FlowTask." Add an email input field with a "Start
Free Trial" submit button on the same line (inline form). Add form validation
for email format. Below the form, add a small note: "No credit card required.
14-day free trial." Style the section with generous padding and center
everything.

Manejo del Formulario

Para una landing page, tienes varias opciones para manejar los envios del formulario:

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  // Opcion 1: Enviar a una API route
  // Opcion 2: Enviar a un servicio como Formspree
  // Opcion 3: Almacenar en una base de datos
  // Por ahora, solo mostrar un mensaje de exito
  setSubmitted(true);
};

Pidele a la IA que agregue validacion basica de email y un estado de exito:

Add email validation to the CTA form. Show an error message if the email
format is invalid. After successful submission, replace the form with a
"Thanks! Check your inbox" message with a checkmark icon.

Revision de Diseno Responsive

Con todas las secciones construidas, es hora de probar la responsividad. Aqui es donde la mayoria de las landing pages generadas por IA necesitan mas iteracion.

Enfoque de Pruebas

Abre las herramientas de desarrollo de tu navegador y prueba en tres breakpoints:

  • Movil (375px de ancho) --- todo deberia apilarse verticalmente
  • Tablet (768px de ancho) --- algunas secciones pueden usar grillas de 2 columnas
  • Desktop (1280px de ancho) --- layouts completos con 3+ columnas

Problemas Comunes y Prompts

Si las tarjetas de precios se desbordan en movil:

The pricing cards are overflowing on mobile screens. Make them stack vertically
on screens below md breakpoint. Remove the scale-105 on the Pro card on mobile.

Si el texto es demasiado grande en pantallas pequenas:

Reduce all heading sizes by one step on mobile. text-5xl becomes text-3xl,
text-3xl becomes text-2xl. Add responsive text classes throughout.

Si el padding horizontal es muy ajustado:

Add px-4 on mobile and px-6 on tablet to all section containers. The content
is touching the edges on small screens.

Revisa cada seccion metodicamente. Una landing page con un layout movil roto perdera la mayoria de sus conversiones potenciales.

Desplegando en Vercel

Con la landing page completa y responsive, vamos a publicarla.

Configuracion de Git y Push

git add .
git commit -m "feat: complete FlowTask landing page"
git push origin main

Auto-Deploy en Vercel

Si has conectado tu repositorio de GitHub a Vercel (lo cual cubrimos en la leccion de despliegue), hacer push a main activa un despliegue automatico. En aproximadamente 60 segundos, tu sitio estara en vivo.

Si aun no has configurado Vercel:

npx vercel

Sigue las indicaciones para vincular tu proyecto y desplegarlo.

Dominio Personalizado

En el dashboard de Vercel, ve a la configuracion de tu proyecto y agrega un dominio personalizado. Vercel te guiara para actualizar tus registros DNS. Una vez propagado, tu landing page sera accesible en tu propio dominio.

Verificar el Sitio en Vivo

Abre tu URL desplegada y verifica:

  • Todas las secciones se renderizan correctamente
  • El toggle de precios funciona
  • El accordion de FAQ se abre y cierra
  • El formulario valida y muestra el estado de exito
  • Los enlaces de navegacion hacen scroll a las secciones correctas
  • La pagina carga rapido (verificalo con Lighthouse)

Configuracion de Analytics

Una landing page sin analytics esta volando a ciegas. Necesitas saber que esta funcionando y que no.

Vercel Analytics

Add Vercel Analytics to the project. Install @vercel/analytics and add the
Analytics component to the root layout.

La IA generara:

import { Analytics } from "@vercel/analytics/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Google Analytics

Para un seguimiento mas detallado:

Add Google Analytics 4 to the project. Create a GoogleAnalytics component
that loads the gtag script. Add it to the root layout. Use the measurement
ID from an environment variable NEXT_PUBLIC_GA_ID.

Rastreo de Clicks en CTA

La metrica mas importante para una landing page es la tasa de click en CTA. Rastreala:

const handleCtaClick = () => {
  if (typeof window.gtag !== "undefined") {
    window.gtag("event", "cta_click", {
      event_category: "engagement",
      event_label: "hero_start_trial",
    });
  }
};

Agrega un seguimiento similar a cada boton de CTA, las tarjetas de precios y el envio del formulario de email. Estos datos te dicen que secciones estan impulsando conversiones y cuales necesitan mejoras.

Que Sigue

Has construido y desplegado una landing page profesional que costaria miles de dolares en una agencia. Lo hiciste en una fraccion del tiempo usando vibe coding.

En la proxima leccion, vamos mucho mas profundo. Estamos construyendo FlowTask como una aplicacion SaaS full-stack --- con autenticacion, base de datos, operaciones CRUD y un dashboard. La landing page que acabas de construir se convierte en la puerta de entrada a un producto real. Vamos a construir el producto detras de ella.