🚀 Plan Vacacional de Programación y Cursos - Landing Page

Landing page moderna y responsive para promocionar el Plan vacacional de los cursos impartidos del instituto CEF

📖 Descripción del Proyecto

Este proyecto consiste en una landing page educativa desarrollada como parte de un plan vacacional del instituto CEF, diseñada para promover cursos de programación accesibles para todas las edades. La página combina un diseño atractivo con funcionalidades interactivas para crear una experiencia de usuario envolvente.

✨ Características Destacadas

🎨 Diseño y Experiencia de Usuario

• Paleta de colores vibrante especialmente diseñada para atraer público infantil y juvenil
• Interfaz intuitiva con navegación fluida y elementos visuales atractivos
• Tipografía legible optimizada para diferentes dispositivos y edades

📱 Responsive Design

• Mobile-first approach - Diseño optimizado para dispositivos móviles
• Tablet-friendly - Adaptación perfecta para tablets
• Desktop-optimized - Experiencia completa en pantallas grandes

⚡ Rendimiento y Técnicas

• Animaciones CSS nativas - Sin dependencias externas para mejor performance
• Lazy loading de imágenes para tiempos de carga rápidos
• Código vanilla JavaScript - Sin frameworks para máxima ligereza

🔧 Funcionalidades Interactivas

• Formularios de contacto con validación en tiempo real
• Navegación suave entre secciones
• Efectos hover y transiciones CSS3
• Galerías interactivas de cursos y actividades

🎯 Público Objetivo

Grupo de Edad	Enfoque	Características
Niños (6-12)	Programación creativa	Visuales coloridos, gamificación
Adolescentes (13-17)	Desarrollo web básico	Proyectos prácticos, diseño moderno
Adultos (18+)	Habilidades digitales	Enfoque profesional, aplicaciones reales

🗂 Estructura del Proyecto

plan-vacacional-programacion/
├── 📁 src/
│   ├── 📁 css/
│   │   ├── style.css          # Estilos principales
│   │   └── animations.css     # Animaciones personalizadas
│   ├── 📁 js/
│   │   ├── main.js            # Lógica principal
│   │   ├── animations.js      # Efectos interactivos
│   │   └── form-validation.js # Validación de formularios
│   ├── 📁 image/
│   │   ├── 📁 heroes/         # Imágenes principales
│   │   ├── 📁 icons/          # Iconos y SVG
│   │   └── 📁 screenshots/    # Capturas del proyecto
│   └── 📁 fonts/              # Fuentes personalizadas
├── 📄 index.html              # Página principal
└── 📄 README.md              # Este archivo

🚀 Instalación y Uso Local

Prerrequisitos

• Navegador web moderno
• Editor de código (VS Code recomendado)
• Servidor local (opcional)

🎨 Guía de Estilos

Paleta de Colores

:root {
    --primary: #FF6B35;     /* Naranja principal */
    --secondary: #2EC4B6;   /* Verde azulado */
    --accent: #FF9F1C;      /* Amarillo destacado */
    --dark: #1A1A2E;        /* Fondo oscuro */
    --light: #F8F9FA;       /* Fondo claro */
    --text: #333333;        /* Texto principal */
}

Tipografía

• Títulos: 'Poppins', sans-serif
• Cuerpo: 'Open Sans', sans-serif
• Código: 'Fira Code', monospace

📱 Compatibilidad

Navegador	Versión	Estado
Chrome	70+	✅ Completamente compatible
Firefox	65+	✅ Completamente compatible
Safari	12+	✅ Completamente compatible
Edge	79+	✅ Completamente compatible

🌐 Despliegue en Vercel

Pasos para desplegar

1. Conectar repositorio a Vercel
2. Configuración automática - Vercel detecta automáticamente el proyecto estático
3. Despliegue continuo - Cada push a main despliega automáticamente

🤝 Contribución

¿Quieres mejorar este proyecto? ¡Tu ayuda es bienvenida!

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📝 Roadmap Futuro

• ✨ Agregar modo oscuro/claro
• 📊 Integrar menu de Navegacion
• 🌍 Soporte multiidioma
• 📱 PWA (Progressive Web App)
• 🔍 Optimización SEO avanzada

🐛 Reportar Issues

Encontraste un bug o tienes una sugerencia? Abre un issue y lo revisaremos pronto.

📄 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE.md para detalles.

🙏 Agradecimientos

• Instituto CEF - Por la oportunidad de desarrollar este proyecto
• Comunidad de desarrolladores - Por el apoyo y recursos compartidos
• Vercel - Por el hosting gratuito para proyectos educativos

---

⭐ ¿Te gustó este proyecto?

Dale una estrella al repositorio si este proyecto te resultó útil o interesante.

Desarrollado con ❤️ para fomentar la educación en programación