| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>COETI 2025 – Ingeniería 5.0: El futuro gamificado</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Poppins', sans-serif; |
| } |
| .hero-gradient { |
| background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); |
| } |
| .ticket-card { |
| transition: all 0.3s ease; |
| } |
| .ticket-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .timeline-item:not(:last-child)::after { |
| content: ''; |
| position: absolute; |
| left: 24px; |
| top: 40px; |
| height: calc(100% - 40px); |
| width: 2px; |
| background: #e5e7eb; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i data-feather="cpu" class="h-8 w-8 text-blue-600"></i> |
| <span class="ml-2 text-xl font-bold text-gray-900">COETI 2025</span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="#about" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Sobre el evento</a> |
| <a href="#schedule" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Cronograma</a> |
| <a href="#speakers" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Ponentes</a> |
| <a href="#tickets" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Tickets</a> |
| <a href="#contact" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contacto</a> |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Inscríbete aquí</a> |
| </div> |
| <div class="-mr-2 flex items-center md:hidden"> |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false"> |
| <span class="sr-only">Open main menu</span> |
| <i data-feather="menu" class="block h-6 w-6"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="md:hidden hidden" id="mobile-menu"> |
| <div class="pt-2 pb-3 space-y-1"> |
| <a href="#about" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Sobre el evento</a> |
| <a href="#schedule" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Cronograma</a> |
| <a href="#speakers" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Ponentes</a> |
| <a href="#tickets" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Tickets</a> |
| <a href="#contact" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Contacto</a> |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white block px-4 py-2 rounded-md text-base font-medium mx-3 my-2">Inscríbete aquí</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero-gradient text-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32"> |
| <div class="grid md:grid-cols-2 gap-8 items-center"> |
| <div data-aos="fade-right"> |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">COETI 2025 – Ingeniería 5.0: El futuro gamificado</h1> |
| <div class="flex items-center mb-6"> |
| <i data-feather="calendar" class="mr-2"></i> |
| <span class="font-medium">25 de octubre de 2025</span> |
| </div> |
| <div class="flex items-center mb-8"> |
| <i data-feather="map-pin" class="mr-2"></i> |
| <span class="font-medium">Universidad Tecnológica de Bolívar – Auditorio Napoleón de la Rosa Echavez</span> |
| </div> |
| <p class="text-xl mb-8">"El evento que transformará tu forma de ver la ingeniería."</p> |
| <a href="#tickets" class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-md text-lg font-bold inline-flex items-center"> |
| Reserva tu cupo ahora |
| <i data-feather="arrow-right" class="ml-2"></i> |
| </a> |
| </div> |
| <div data-aos="fade-left" class="hidden md:block"> |
| <img src="http://static.photos/technology/1024x576/1" alt="Evento COETI 2025" class="rounded-lg shadow-xl"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Sobre el evento</h2> |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> |
| </div> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div data-aos="fade-right"> |
| <p class="text-lg text-gray-600 mb-6">COETI 2025 es el evento insignia de ANEIAP Capítulo UTB, que reúne a estudiantes, profesionales y apasionados de la ingeniería para explorar las oportunidades de la Industria 5.0, la gamificación y las tecnologías emergentes.</p> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> |
| <i data-feather="award" class="h-5 w-5 text-blue-600"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-gray-900 font-medium">Evento académico de alto nivel</p> |
| <p class="text-gray-600">Con ponentes expertos en sus áreas</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> |
| <i data-feather="users" class="h-5 w-5 text-blue-600"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-gray-900 font-medium">Networking profesional</p> |
| <p class="text-gray-600">Conoce a otros profesionales y estudiantes</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> |
| <i data-feather="activity" class="h-5 w-5 text-blue-600"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-gray-900 font-medium">Talleres prácticos</p> |
| <p class="text-gray-600">Aplica lo aprendido en sesiones interactivas</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div data-aos="fade-left"> |
| <div class="relative rounded-xl overflow-hidden shadow-lg"> |
| <img src="http://static.photos/workspace/1024x576/2" alt="Evento COETI 2025" class="w-full h-auto"> |
| <div class="absolute inset-0 bg-blue-600 opacity-20"></div> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <button class="bg-white text-blue-600 hover:bg-gray-100 rounded-full p-4 shadow-lg"> |
| <i data-feather="play" class="h-8 w-8"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="schedule" class="py-16 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Cronograma</h2> |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> |
| </div> |
| <div class="grid md:grid-cols-2 gap-8"> |
| <div data-aos="fade-up"> |
| <div class="bg-white rounded-lg shadow-md p-6"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i data-feather="sun" class="h-6 w-6 text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900">Mañana</h3> |
| </div> |
| <div class="space-y-6"> |
| <div class="relative timeline-item pl-12"> |
| <div class="absolute left-0 top-0 bg-blue-600 rounded-full h-8 w-8 flex items-center justify-center"> |
| <span class="text-white text-sm font-bold">08:00</span> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-gray-900">Acreditación</h4> |
| <p class="text-gray-600">Registro de participantes</p> |
| </div> |
| </div> |
| <div class="relative timeline-item pl-12"> |
| <div class="absolute left-0 top-0 bg-blue-600 rounded-full h-8 w-8 flex items-center justify-center"> |
| <span class="text-white text-sm font-bold">08:30</span> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-gray-900">Apertura oficial</h4> |
| <p class="text-gray-600">Bienvenida y presentación del evento</p> |
| </div> |
| </div> |
| <div class="relative timeline-item pl-12"> |
| <div class="absolute left-0 top-0 bg-blue-600 rounded-full h-8 w-8 flex items-center justify-center"> |
| <span class="text-white text-sm font-bold">09:00</span> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-gray-900">Ponencia 1 + preguntas</h4> |
| <p class="text-gray-600">Primera conferencia magistral</p> |
| </div> |
| </div> |
| <div class="relative timeline-item pl-12"> |
| <div class="absolute left-0 top-0 bg-blue-600 rounded-full h-8 w-8 flex items-center justify-center"> |
| <span class="text-white text-sm font-bold">09:55</span> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-gray-900">Refrigerio</h4> |
| <p class="text-gray-600">Tiempo para networking</p> |
| </div> |
| </div> |
| <div class="relative timeline-item pl-12"> |
| <div class="absolute left-0 top-0 bg-blue-600 rounded-full h-8 w-8 flex items-center justify-center"> |
| <span class="text-white text-sm font-bold">10:30</span> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-gray-900">Taller práctico</h4> |
| <p class="text-gray-600">Sesión interactiva de aprendizaje</p> |
| </div> |
| </div> |
| <div class="relative timeline-item pl-12"> |
| <div class="absolute left-0 top-0 bg-blue-600 rounded-full h-8 w-8 flex items-center justify-center"> |
| <span class="text-white text-sm font-bold">11:50</span> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-gray-900">Almuerzo</h4> |
| <p class="text-gray-600">Tiempo libre</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div data-aos="fade-up" data-aos-delay="100"> |
| <div class="bg-white rounded-lg shadow-md p-6"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i data-feather="moon" class="h-6 w-6 text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-900">Tarde</h3> |
| </div> |
| <div class="space-y-6"> |
| <div class="relative timeline-item pl-12"> |
| <div class="absolute left-0 top-0 bg-blue-600 rounded-full h-8 w-8 flex items-center justify-center"> |
| <span class="text-white text-sm font-bold">13:30</span> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-gray-900">Acreditación</h4> |
| <p class="text-gray-600">Registro de participantes</p> |
| </div> |
| </div> |
| <div class="relative timeline-item pl-12"> |
| <div class="absolute left-0 top-0 bg-blue-600 rounded-full h-8 w-8 flex items-center justify-center"> |
| <span class="text-white text-sm font-bold">14:10</span> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-gray-900">Ponencia 2 + preguntas</h4> |
| <p class="text-gray-600">Segunda conferencia magistral</p> |
| </div> |
| </div> |
| <div class="relative timeline-item pl-12"> |
| <div class="absolute left-0 top-0 bg-blue-600 rounded-full h-8 w-8 flex items-center justify-center"> |
| <span class="text-white text-sm font-bold">15:00</span> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-gray-900">Ponencia 3 + preguntas</h4> |
| <p class="text-gray-600">Tercera conferencia magistral</p> |
| </div> |
| </div> |
| <div class="relative timeline-item pl-12"> |
| <div class="absolute left-0 top-0 bg-blue-600 rounded-full h-8 w-8 flex items-center justify-center"> |
| <span class="text-white text-sm font-bold">16:00</span> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-gray-900">Cierre + refrigerio</h4> |
| <p class="text-gray-600">Conclusiones y despedida</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="speakers" class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Ponencias y ponentes</h2> |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> |
| </div> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div data-aos="fade-up" class="bg-gray-50 rounded-lg overflow-hidden shadow-md"> |
| <img src="http://static.photos/people/640x360/1" alt="Yuliza Atencia Barrios" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Entre engranajes y emociones: salud mental en el trabajo con máquinas + desafío emocional: gamificando sentimientos</h3> |
| <p class="text-blue-600 font-medium mb-4">Yuliza Atencia Barrios</p> |
| <p class="text-gray-600">Exploración de la relación entre salud mental y tecnología en entornos industriales.</p> |
| </div> |
| </div> |
| <div data-aos="fade-up" data-aos-delay="100" class="bg-gray-50 rounded-lg overflow-hidden shadow-md"> |
| <img src="http://static.photos/people/640x360/2" alt="Carlos Ferreira Vanegas" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Industria 5.0 y analítica predictiva: la nueva frontera en la seguridad vial</h3> |
| <p class="text-blue-600 font-medium mb-4">Carlos Ferreira Vanegas</p> |
| <p class="text-gray-600">Cómo la analítica de datos está transformando la seguridad en el transporte.</p> |
| </div> |
| </div> |
| <div data-aos="fade-up" data-aos-delay="200" class="bg-gray-50 rounded-lg overflow-hidden shadow-md"> |
| <img src="http://static.photos/people/640x360/3" alt="Melissa María Villadiego Lobo" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Gamificación para la capacitación en competencias digitales en la Industria 5.0</h3> |
| <p class="text-blue-600 font-medium mb-4">Melissa María Villadiego Lobo</p> |
| <p class="text-gray-600">Métodos innovadores para el desarrollo de habilidades digitales mediante juegos.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="tickets" class="py-16 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Cortes de pago</h2> |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> |
| </div> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div data-aos="fade-up" class="ticket-card bg-white rounded-lg shadow-md overflow-hidden"> |
| <div class="bg-gray-200 p-6"> |
| <h3 class="text-xl font-bold text-gray-900 text-center">Umbral Digital</h3> |
| <p class="text-3xl font-bold text-blue-600 text-center mt-2">$10.000</p> |
| </div> |
| <div class="p-6"> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Entrada al evento</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Certificado</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Manilla</span> |
| </li> |
| </ul> |
| <div class="mt-8 text-center"> |
| <p class="text-sm text-gray-500 mb-2">Disponible del 22 sep – 25 oct</p> |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium inline-block w-full">Comprar ahora</a> |
| </div> |
| </div> |
| </div> |
| <div data-aos="fade-up" data-aos-delay="100" class="ticket-card bg-white rounded-lg shadow-lg overflow-hidden transform scale-105"> |
| <div class="bg-blue-600 p-6"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="text-xl font-bold text-white">Visión Suprema</h3> |
| <p class="text-3xl font-bold text-white mt-2">$20.000</p> |
| </div> |
| <div class="bg-yellow-400 text-blue-800 px-2 py-1 rounded-full text-xs font-bold">POPULAR</div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Entrada al evento</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Certificado</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Manilla</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Tote bag</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Libreta premium</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Llavero</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Lapicero</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Escarapela</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>2 refrigerios</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Hidratación</span> |
| </li> |
| </ul> |
| <div class="mt-8 text-center"> |
| <p class="text-sm text-gray-500 mb-2">Disponible del 8 sep – 17 oct</p> |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium inline-block w-full">Comprar ahora</a> |
| </div> |
| </div> |
| </div> |
| <div data-aos="fade-up" data-aos-delay="200" class="ticket-card bg-white rounded-lg shadow-md overflow-hidden"> |
| <div class="bg-gray-800 p-6"> |
| <h3 class="text-xl font-bold text-white">Cenit Dorado</h3> |
| <p class="text-3xl font-bold text-yellow-400 mt-2">$36.000</p> |
| <p class="text-white text-sm mt-1">(20 cupos disponibles)</p> |
| </div> |
| <div class="p-6"> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Todos los beneficios de Visión Suprema</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Almuerzo</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Visita industrial</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="h-5 w-5 text-green-500 mr-2 mt-1"></i> |
| <span>Fila rápida</span> |
| </li> |
| </ul> |
| <div class="mt-8 text-center"> |
| <p class="text-sm text-gray-500 mb-2">Disponible del 15 – 22 sep</p> |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium inline-block w-full">Comprar ahora</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Contacto</h2> |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> |
| </div> |
| <div class="grid md:grid-cols-2 gap-12"> |
| <div data-aos="fade-right"> |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md"> |
| <h3 class="text-xl font-bold text-gray-900 mb-6">Escríbenos</h3> |
| <form> |
| <div class="mb-4"> |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nombre</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div class="mb-4"> |
| <label for="email" class="block text-gray-700 font-medium mb-2">Correo electrónico</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div class="mb-4"> |
| <label for="message" class="block text-gray-700 font-medium mb-2">Mensaje</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
| </div> |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium w-full">Enviar mensaje</button> |
| </form> |
| </div> |
| </div> |
| <div data-aos="fade-left"> |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i data-feather="mail" class="h-6 w-6 text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold text-gray-900 mb-1">Correo electrónico</h3> |
| <a href="mailto:coeti_utb@aneiap.co" class="text-blue-600 hover:underline">coeti_utb@aneiap.co</a> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i data-feather="map-pin" class="h-6 w-6 text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold text-gray-900 mb-1">Ubicación</h3> |
| <p class="text-gray-600">Universidad Tecnológica de Bolívar – Auditorio Napoleón de la Rosa Echavez</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i data-feather="calendar" class="h-6 w-6 text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold text-gray-900 mb-1">Fecha y hora</h3> |
| <p class="text-gray-600">25 de octubre de 2025</p> |
| <p class="text-gray-600">Desde las 8:00 AM</p> |
| </div> |
| </div> |
| <div class="pt-6"> |
| <h3 class="text-lg font-bold text-gray-900 mb-4">Síguenos en redes sociales</h3> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-600 hover:bg-blue-200"> |
| <i data-feather="facebook" class="h-5 w-5"></i> |
| </a> |
| <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-600 hover:bg-blue-200"> |
| <i data-feather="instagram" class="h-5 w-5"></i> |
| </a> |
| <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-600 hover:bg-blue-200"> |
| <i data-feather="twitter" class="h-5 w-5"></i> |
| </a> |
| <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-600 hover:bg-blue-200"> |
| <i data-feather="linkedin" class="h-5 w-5"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center mb-4"> |
| <i data-feather="cpu" class="h-8 w-8 text-blue-400"></i> |
| <span class="ml-2 text-xl font-bold">COETI 2025</span> |
| </div> |
| <p class="text-gray-400">El evento que transformará tu forma de ver la ingeniería.</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Enlaces rápidos</h3> |
| <ul class="space-y-2"> |
| <li><a href="#about" class="text-gray-400 hover:text-white">Sobre el evento</a></li> |
| <li><a href="#schedule" class="text-gray-400 hover:text-white">Cronograma</a></li> |
| <li><a href="#speakers" class="text-gray-400 hover:text-white">Ponentes</a></li> |
| <li><a href="#tickets" class="text-gray-400 hover:text-white">Tickets</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Contacto</h3> |
| <ul class="space-y-2"> |
| <li class="flex items-start"> |
| <i data-feather="mail" class="h-5 w-5 text-blue-400 mr-2 mt-1"></i> |
| <a href="mailto:coeti_utb@aneiap.co" class="text-gray-400 hover:text-white">coeti_utb@aneiap.co</a> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="map-pin" class="h-5 w-5 text-blue-400 mr-2 mt-1"></i> |
| <span class="text-gray-400">UTB - Cartagena</span> |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Boletín informativo</h3> |
| <p class="text-gray-400 mb-4">Suscríbete para recibir actualizaciones sobre el evento.</p> |
| <form class="flex"> |
| <input type="email" placeholder="Tu correo" class="px-4 py-2 rounded-l-md text-gray-900 w-full focus:outline-none"> |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-md"> |
| <i data-feather="send" class="h-5 w-5"></i> |
| </button> |
| </form> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 text-sm">© 2025 COETI - ANEIAP Capítulo UTB. Todos los derechos reservados.</p> |
| <div class="flex space-x-6 mt-4 md:mt-0"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="facebook" class="h-5 w-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="instagram" class="h-5 w-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="twitter" class="h-5 w-5"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="linkedin" class="h-5 w-5"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| AOS.init({ |
| duration: 800, |
| easing: 'ease-in-out', |
| once: true |
| }); |
| |
| |
| document.querySelector('button[aria-controls="mobile-menu"]').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
