Adapta la siguiente estructura de prompt al nombre de la empresa y al tema especificado. Asegúrate de personalizar completamente el contenido, los servicios, los colores, el diseño y las secciones para que estén alineados con la actividad y los objetivos de la empresa. Nombre de la empresa: Tema: Actúa como un desarrollador web senior, diseñador UX/UI profesional y especialista en sitios corporativos de tecnología. Diseña una página web moderna, elegante y completamente funcional para una empresa de soporte técnico llamada TechSolutions, especializada en mantenimiento, reparación, soporte tecnológico y consultoría informática para pequeñas y medianas empresas. La página debe transmitir confianza, profesionalismo, innovación tecnológica, seguridad y rapidez en la atención. IMPORTANTE: Genera el código completamente separado en tres archivos independientes: 1. index.html 2. styles.css 3. script.js No combines CSS ni JavaScript dentro del HTML. --- ## OBJETIVO DEL SITIO Crear una presencia digital profesional para TechSolutions que permita presentar los servicios de la empresa, generar confianza en los clientes potenciales y facilitar la solicitud de soporte técnico. --- ## ESTILO VISUAL Y DISEÑO El diseño debe ser similar al de empresas tecnológicas modernas como Microsoft, Cisco, Dell, IBM o empresas SaaS actuales. Características visuales: • Diseño limpio y profesional. • Estética tecnológica moderna. • Totalmente responsive. • Compatible con computadores, tablets y móviles. • Diseño tipo landing page corporativa premium. • Uso de espacios en blanco bien distribuidos. • Bordes redondeados modernos. • Sombras suaves y elegantes. • Efecto Glassmorphism en algunos elementos. • Gradientes modernos. • Animaciones suaves. • Iconografía profesional. • Aspecto visual premium. --- ## PALETA DE COLORES Color principal: #0A66FF Color secundario: #1E293B Color de apoyo: #3B82F6 Fondo claro: #F8FAFC Texto principal: #1E293B Texto secundario: #64748B Gradientes tecnológicos: linear-gradient(135deg, #0A66FF, #3B82F6) --- ## TIPOGRAFÍA Utilizar Google Fonts: Poppins Pesos: 300 400 500 600 700 --- ## EFECTOS VISUALES Implementar: • Hover en botones. • Hover en tarjetas. • Animaciones Fade In. • Animaciones Slide Up. • Animaciones al hacer scroll. • Efecto Parallax suave. • Aparición progresiva de secciones. • Sombras dinámicas. • Efectos modernos de interacción. • Scroll suave entre secciones. --- ## ESTRUCTURA COMPLETA DEL SITIO 1. HEADER --- Menú fijo (sticky navbar). Incluir: Logo TechSolutions Menú: Inicio Servicios Nosotros Beneficios Planes Testimonios Contacto Botón destacado: "Solicitar Soporte" Al hacer scroll: • Cambiar fondo del menú. • Aplicar sombra elegante. --- 2. HERO SECTION --- Diseño dividido en dos columnas. Columna izquierda: Título principal: "Soluciones Tecnológicas para Empresas Modernas" Subtítulo: "Brindamos soporte técnico profesional, mantenimiento preventivo, seguridad informática y soluciones tecnológicas para que tu empresa nunca se detenga." Botones: • Solicitar Soporte • Conocer Servicios Columna derecha: Ilustración o imagen tecnológica moderna relacionada con soporte técnico empresarial. Agregar elementos decorativos flotantes. --- 3. SERVICIOS --- Título: "Nuestros Servicios" Mostrar 10 tarjetas con iconos. Servicios: 1. Mantenimiento Preventivo 2. Mantenimiento Correctivo 3. Soporte Remoto 4. Soporte Presencial 5. Instalación de Software 6. Configuración de Redes 7. Seguridad Informática 8. Recuperación de Datos 9. Optimización de Equipos 10. Asesoría Tecnológica Empresarial Cada tarjeta debe incluir: • Icono • Título • Descripción corta Agregar animaciones hover. --- 4. SOBRE NOSOTROS --- Sección con dos columnas. Mostrar: • Imagen corporativa. • Historia de TechSolutions. • Misión. • Visión. --- 5. ¿POR QUÉ ELEGIRNOS? --- Mostrar tarjetas con ventajas competitivas. Ventajas: • Atención rápida • Técnicos certificados • Soporte 24/7 • Soluciones personalizadas • Precios competitivos • Más de 10 años de experiencia Diseño visual atractivo. --- 6. ESTADÍSTICAS --- Crear contadores animados. Mostrar: +500 Clientes Atendidos +3000 Equipos Reparados +250 Empresas Asesoradas +10 Años de Experiencia Los números deben animarse al entrar en pantalla. --- 7. PROCESO DE TRABAJO --- Mostrar línea de tiempo o pasos visuales. Paso 1: Solicitud del cliente Paso 2: Diagnóstico técnico Paso 3: Solución del problema Paso 4: Seguimiento y soporte Diseño profesional con iconos. --- 8. PLANES DE SOPORTE --- Mostrar tres planes. PLAN BÁSICO • Soporte remoto • Horario laboral • Asistencia básica PLAN EMPRESARIAL • Soporte remoto • Soporte presencial • Monitoreo de equipos • Reportes técnicos PLAN PREMIUM • Soporte prioritario 24/7 • Atención inmediata • Seguridad avanzada • Consultoría tecnológica Destacar visualmente el plan Premium. --- 9. TESTIMONIOS --- Mostrar mínimo tres testimonios empresariales ficticios. Cada tarjeta debe contener: • Foto de perfil • Nombre • Empresa • Comentario Diseño moderno tipo slider o cards. --- 10. FORMULARIO DE CONTACTO --- Campos: Nombre Completo Empresa Correo Electrónico Teléfono Mensaje Botón: "Enviar Solicitud" Validaciones JavaScript: • Campos obligatorios • Correo válido • Longitud mínima del mensaje • Mensajes de error amigables --- 11. INFORMACIÓN DE CONTACTO --- Mostrar: Dirección Correo electrónico Teléfono Horario de atención Agregar iconos. --- 12. BOTÓN FLOTANTE DE WHATSAPP --- Ubicación: Esquina inferior derecha. Características: • Siempre visible. • Animación de pulso. • Abrir WhatsApp en nueva pestaña. --- 13. FOOTER --- Incluir: Logo TechSolutions Enlaces rápidos Redes sociales: Facebook Instagram LinkedIn WhatsApp Texto: "© 2026 TechSolutions. Todos los derechos reservados." --- ## FUNCIONALIDADES JAVASCRIPT Implementar: ✓ Menú responsive hamburguesa. ✓ Scroll suave. ✓ Cambio de estilo del navbar al hacer scroll. ✓ Animaciones al aparecer elementos. ✓ Contadores animados. ✓ Validación completa del formulario. ✓ Botón volver arriba. ✓ Aparición progresiva de secciones. ✓ Efectos hover modernos. ✓ Animaciones CSS y JavaScript. ✓ Optimización para móviles. --- ## OPTIMIZACIÓN El código debe: • Estar bien comentado. • Tener estructura profesional. • Utilizar HTML5 semántico. • CSS organizado por secciones. • JavaScript limpio y modular. • Ser fácil de modificar. • Ser compatible con navegadores modernos. Genera el contenido completo de los tres archivos: index.html styles.css script.js Incluye comentarios explicativos dentro de cada archivo para facilitar futuras modificaciones.