Landing de producto interactiva

¿Quieres convertir tu landing estática en una máquina de conversión interactiva? En este proyecto vas a transformar tu Product Landing Page del Módulo 1 en una experiencia que captura leads, responde dudas y cierra ventas automáticamente.

Vas a agregar componentes interactivos profesionales: comparador de planes dinámico, formulario multi-paso inteligente, FAQ accordion y testimoniales con filtros. Todo mientras dominas el arte del prompting avanzado y debugging colaborativo con IA.

🌱 ¿Cómo empezar este proyecto?

1. Abre Cursor y carga tu proyecto Product Landing Page
2. Si no conservaste el proyecto, crea uno nuevo siguiendo el ejercicio anterior
3. Prepárate para agregar interactividad que aumenta conversiones

👉 Importante: Este proyecto se construye sobre tu trabajo anterior. Vamos a expandir, no recrear desde cero.

Instrucciones

1. Comparador de Planes Interactivo

Prompt inicial para pricing dinámico:

Quiero convertir mi sección de pricing estática en un comparador interactivo.

FUNCIONALIDADES REQUERIDAS:
- Toggle anual/mensual que cambie precios dinámicamente
- Mostrar "Ahorra X%" cuando se selecciona anual
- Slider de cantidad/usuarios que actualice precio en tiempo real
- Highlight visual de diferencias entre planes al hacer hover
- Botón "Plan recomendado para ti" que destaque el plan medio
- Comparación lado a lado al hacer clic en "Comparar planes"

INTEGRACIÓN:
- Mantener el diseño visual existente
- Agregar estas funcionalidades sin romper el layout
- Animaciones suaves en todos los cambios
- Mobile-friendly (el slider debe funcionar en touch)

CARACTERÍSTICAS TÉCNICAS:
- JavaScript vanilla para los cálculos
- CSS transitions para animaciones
- LocalStorage para recordar preferencia anual/mensual
- Accesibilidad: keyboard navigation funcional

Mantén el código limpio y bien comentado.

2. Formulario Multi-Step Inteligente

Prompt para formulario avanzado:

Quiero reemplazar el CTA simple con un formulario multi-step inteligente.

ESTRUCTURA DEL FORMULARIO:
Paso 1 - Información básica:
- Nombre completo
- Email (con validación)
- Empresa (opcional)

Paso 2 - Necesidades:
- "¿Qué buscas?" (checkboxes múltiples según el producto)
- "¿Cuántos usuarios?" (si aplica)
- "¿Cuándo quieres empezar?" (radio buttons: inmediato/este mes/próximo mes)

Paso 3 - Selección de plan:
- Mostrar los 3 planes con el recomendado pre-seleccionado
- Resumen de información ingresada
- Confirmación final

CARACTERÍSTICAS:
- Progress bar visual (Paso X de 3)
- Botones "Siguiente" y "Atrás"
- Validación en tiempo real con mensajes claros
- Guardar draft en localStorage (recuperar si refresca)
- Animación smooth entre pasos
- Loading state en botón final
- Mensaje de éxito al completar

INTEGRACIÓN:
- Reemplazar el botón "Comenzar ahora" del hero
- También en la sección de pricing
- Modal/overlay elegante para el formulario
- Cerrar con X o click fuera

Hazlo profesional y conversion-optimized.

3. FAQ Accordion

Prompt para sección de preguntas frecuentes:

Quiero agregar una sección FAQ antes del pricing con accordion interactivo.

CONTENIDO:
Crea 6-8 preguntas frecuentes relevantes para [tipo de producto].
Ejemplos genéricos:
- ¿Cómo funciona [producto]?
- ¿Puedo cancelar en cualquier momento?
- ¿Ofrecen garantía de devolución?
- ¿Necesito conocimientos técnicos?
- ¿Qué incluye el plan gratuito?
- ¿Hay descuentos para equipos grandes?

FUNCIONALIDADES:
- Accordion: click para expandir/colapsar
- Solo una pregunta abierta a la vez
- Animación smooth de apertura/cierre
- Iconos de + y - que cambian según estado
- Search box arriba: filtrar preguntas en tiempo real
- "¿Te ayudó esta respuesta?" con thumbs up/down
- Contador de veces que se abrió cada pregunta

DISEÑO:
- Cards elegantes con sombras sutiles
- Hover effects
- Responsive: funciona perfecto en móvil
- Colores consistentes con el resto de la landing

Agrégalo como nueva sección entre Features y Pricing.

4. Testimoniales Dinámicos

Prompt para mejorar testimoniales:

Quiero convertir los testimoniales estáticos en un sistema dinámico e interactivo.

FUNCIONALIDADES:
- Carousel automático (cada 5 segundos)
- Pause on hover
- Botones prev/next manuales
- Dots indicator (cual testimonial está activo)
- Filtros por categoría: "Todos" / "Emprendedores" / "Empresas" / "Freelancers"
- Al filtrar, smooth transition entre testimoniales

ELEMENTOS ADICIONALES:
- Rating stars (5 estrellas) para cada testimonial
- Fecha del testimonial
- Link a perfil/empresa (opcional)
- "Usuarios activos ahora" - contador animado que aumenta

MEJORAS VISUALES:
- Cards con efecto 3D sutil al hacer hover
- Quotes icon decorativo
- Foto de perfil circular con border elegante
- Animación de fade-in cuando aparece nuevo testimonial

CARACTERÍSTICAS TÉCNICAS:
- Auto-play con pause/resume
- Touch-friendly para mobile (swipe gestures)
- Keyboard navigation (arrows)
- Smooth animations a 60fps

Mantén el diseño profesional y creíble.

5. Debugging Colaborativo

Durante esta fase, intencionalmente vas a encontrar errores. Usa estos prompts cuando algo falle:

Para errores de cálculos en pricing:

Mi pricing dinámico no calcula correctamente.

Error específico: [describe qué pasa]
Ejemplo: "Al cambiar de mensual a anual, el precio no se multiplica por 12"

Código relevante:
[pega la función de cálculo]

¿Cuál es el problema en la lógica y cómo lo arreglo?

Para problemas de validación del formulario:

Mi formulario multi-step tiene problemas de validación.

Comportamiento esperado: [descripción]
Comportamiento actual: [qué pasa]

Código del paso que falla:
[HTML + JavaScript relevante]

¿Dónde está el error y cómo valido correctamente?

Para issues del accordion:

Mi FAQ accordion no abre/cierra correctamente.

Problema: [descripción específica]
Ejemplo: "Abre múltiples preguntas a la vez" o "La animación se ve cortada"

Código:
[pega código del accordion]

¿Cómo lo arreglo para que funcione smooth?

6. Integración y Polish

Prompt final de optimización:

Quiero optimizar mi Interactive Product Landing para máxima conversión y performance.

OPTIMIZACIONES:
- Lazy loading de componentes pesados
- Smooth scroll entre secciones al hacer click en navegación
- Estados de loading visibles en todas las interacciones
- Error handling robusto en formularios
- Analytics events: tracking de clicks en CTAs, formulario completado, etc.

ACCESIBILIDAD:
- Aria labels en todos los componentes interactivos
- Keyboard navigation completa
- Focus states visibles y claros
- Screen reader friendly
- Contraste suficiente en ambos temas

TESTING:
- Funcionamiento en Chrome, Firefox, Safari
- Responsive en 320px, 768px, 1024px+
- Touch gestures en mobile
- Performance: carga rápida, animaciones a 60fps

CONVERSIÓN:
- CTAs visibles en todo momento
- Formulario accesible fácilmente
- FAQ responde objeciones principales
- Social proof prominente
- Zero-friction para empezar

Dame checklist de optimización y el código necesario.

Debugging Integrado

A diferencia del primer proyecto, este proyecto incluye momentos de debugging intencionales. Cuando encuentres errores (y los vas a encontrar), usarás la metodología que aprendiste en el artículo de debugging para resolverlos colaborativamente con la IA.

Cada error es una oportunidad de practicar:

• Describir problemas claramente
• Proporcionar contexto relevante
• Iterar sobre soluciones
• Entender el "por qué" detrás de cada fix

Comparte tu creación

Cuando termines:

• Graba un video corto de tu voice assistant funcionando
• Comparte en redes con #VibeCoding #IA
• Envía el link a amigos y prepárate para sus reacciones
• Documenta qué fue lo más desafiante de debugging