Actividad No. 2. Creación de una Landing Page para Ventas

🧠 Ejercicio 2: Creación de una Landing Page para Ventas

Objetivo del ejercicio:
Explorar cómo la IA puede generar una página web sencilla y funcional para presentar información de ventas con KPIs, gráficos y formulario de contacto.

📝 Instrucciones:
1. Abre ChatGPT o Gemini.
2. Copia y pega el siguiente prompt:

🔑 Prompt detallado:
Genera un archivo HTML único llamado index.html que contenga:
1. Sección Hero:
- Título llamativo sobre ventas o marketing.
- Subtítulo breve.
- Botón CTA: "Solicitar demo".
- Imagen o ilustración representada por un placeholder.
2. Tarjetas KPI (en formato grid o flexbox) con valores de ejemplo:
- Ventas mensuales (USD).
- Conversión (%).
- Ticket promedio.
- Clientes activos.
Cada tarjeta debe mostrar el valor principal y un delta (%).
3. Gráfico con Chart.js:
- Línea: ingresos mensuales durante 12 meses.
- Barras: unidades vendidas en los mismos 12 meses.
- Leyenda y tooltips activados.
- Ejes con formato moneda y miles.
4. Sección “Beneficios”:
- 3 o 4 columnas con iconos (pueden ser emojis).
- Cada columna debe contener un título corto y una breve descripción.
5. Formulario de contacto:
- Campos: nombre, email, mensaje.
- Checkbox: "Acepto políticas de privacidad".
- Validación básica: email correcto y checkbox obligatorio.
- Al enviar, mostrar alerta “Formulario enviado con éxito”.
6. Footer:
- Nombre institucional y datos de contacto.
7. SEO básico:
- Title y meta description.
- Etiquetas og (Open Graph).
- Etiqueta viewport para mobile.
8. Estilo visual:
- Diseño moderno, limpio, responsive.
- Tipografía segura para web.
- Tema claro, con variables CSS para colores.
Todo debe estar en un solo archivo HTML con CSS y JS embebidos.
3. Guarda el resultado como index.html.
4. Ábrelo en el navegador y revisa el diseño.
5. Modifica manualmente los valores de los KPI para simular datos propios.

🤔 Reflexiona:
● ¿Qué tan fácil fue personalizar la página?
● ¿El formulario funcionó como esperabas?
● ¿Cómo podrías usar una landing generada con IA en tu contexto laboral o académico?
📌 Resultado esperado: Un archivo index.html con hero, KPIs, gráfico Chart.js, beneficios,
formulario de contacto y footer institucional.