Spaces:

AP012006
/

coeti2025

Running

App Files Files Community

AP012006 commited on Sep 7, 2025

Commit

08807c1

verified ·

1 Parent(s): ec8f7a4

Guion Landing Page – COETI 2025

Browse files

Home (Inicio)

Banner principal:

Título: COETI 2025 – Ingeniería 5.0: El futuro gamificado

Fecha: 25 de octubre de 2025

Lugar: Universidad Tecnológica de Bolívar – Auditorio Napoleón de la Rosa Echavez

Botón CTA: Reserva tu cupo ahora

Frase motivadora:
“El evento que transformará tu forma de ver la ingeniería.”

Sobre el evento

Breve descripción:
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.

Imagen/Video corto del evento.

Cronograma
Mañana

08:00 – 08:30 → Acreditación

08:30 – 08:50 → Apertura oficial

09:00 – 09:40 → Ponencia 1 + preguntas

09:55 – 10:30 → Refrigerio

10:30 – 11:45 → Taller práctico

11:50 – 13:30 → Almuerzo

Tarde

13:30 – 14:00 → Acreditación

14:10 – 14:55 → Ponencia 2 + preguntas

15:00 – 15:45 → Ponencia 3 + preguntas

16:00 – 17:00 → Cierre + refrigerio

Ponencias y ponentes

Entre engranajes y emociones: salud mental en el trabajo con máquinas + desafío emocional: gamificando sentimientos

Ponente: Yuliza Atencia Barrios

Industria 5.0 y analítica predictiva: la nueva frontera en la seguridad vial

Ponente: Carlos Ferreira Vanegas

Gamificación para la capacitación en competencias digitales en la Industria 5.0

Ponente: Melissa María Villadiego Lobo

Cortes de pago

Umbral Digital – $10.000

Entrada al evento, certificado, manilla

Visión Suprema – $20.000

Entrada, certificado, manilla, tote bag, libreta premium, llavero, lapicero, escarapela, 2 refrigerios, hidratación

Cenit Dorado – $36.000 (20 cupos)

Todos los beneficios anteriores + almuerzo, visita industrial, fila rápida

Fechas de apertura (12:00 p.m.)

Visión Suprema: 8 sep – 17 oct

Cenit Dorado: 15 – 22 sep

Umbral Digital: 22 sep – 25 oct

Botón CTA: Inscríbete aquí

Mi perfil (para asistentes registrados)

Datos visibles: Nombre, correo, tipo de corte adquirido.

Estado: Confirmación de inscripción y pagos.

Código QR personal:

Escaneo para registro de asistencia.

Reclamo de refrigerios.

Acceso a visita industrial (solo Cenit Dorado).

Contacto

Correo: coeti_utb@aneiap.co - Initial Deployment

Files changed (3) hide show

README.md +7 -5
index.html +613 -18
prompts.txt +103 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Coeti2025
-emoji: 🐠
-colorFrom: yellow
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: coeti2025
+emoji: 🐳
+colorFrom: purple
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,614 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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">
+    <!-- Navigation -->
+    <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>
+        <!-- Mobile menu -->
+        <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>
+    <!-- Hero Section -->
+    <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>
+    <!-- About 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>
+    <!-- Schedule 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>
+    <!-- Speakers 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>
+    <!-- Tickets 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>
+    <!-- Contact 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 -->
+    <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
+        });
+        // Mobile menu toggle
+        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>

prompts.txt ADDED Viewed

	@@ -0,0 +1,103 @@

+Guion Landing Page – COETI 2025
+Home (Inicio)
+Banner principal:
+Título: COETI 2025 – Ingeniería 5.0: El futuro gamificado
+Fecha: 25 de octubre de 2025
+Lugar: Universidad Tecnológica de Bolívar – Auditorio Napoleón de la Rosa Echavez
+Botón CTA: Reserva tu cupo ahora
+Frase motivadora:
+“El evento que transformará tu forma de ver la ingeniería.”
+Sobre el evento
+Breve descripción:
+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.
+Imagen/Video corto del evento.
+Cronograma
+Mañana
+08:00 – 08:30 → Acreditación
+08:30 – 08:50 → Apertura oficial
+09:00 – 09:40 → Ponencia 1 + preguntas
+09:55 – 10:30 → Refrigerio
+10:30 – 11:45 → Taller práctico
+11:50 – 13:30 → Almuerzo
+Tarde
+13:30 – 14:00 → Acreditación
+14:10 – 14:55 → Ponencia 2 + preguntas
+15:00 – 15:45 → Ponencia 3 + preguntas
+16:00 – 17:00 → Cierre + refrigerio
+ Ponencias y ponentes
+Entre engranajes y emociones: salud mental en el trabajo con máquinas + desafío emocional: gamificando sentimientos
+Ponente: Yuliza Atencia Barrios
+Industria 5.0 y analítica predictiva: la nueva frontera en la seguridad vial
+Ponente: Carlos Ferreira Vanegas
+Gamificación para la capacitación en competencias digitales en la Industria 5.0
+Ponente: Melissa María Villadiego Lobo
+ Cortes de pago
+Umbral Digital – $10.000
+Entrada al evento, certificado, manilla
+Visión Suprema – $20.000
+Entrada, certificado, manilla, tote bag, libreta premium, llavero, lapicero, escarapela, 2 refrigerios, hidratación
+Cenit Dorado – $36.000 (20 cupos)
+Todos los beneficios anteriores + almuerzo, visita industrial, fila rápida
+ Fechas de apertura (12:00 p.m.)
+Visión Suprema: 8 sep – 17 oct
+Cenit Dorado: 15 – 22 sep
+Umbral Digital: 22 sep – 25 oct
+ Botón CTA: Inscríbete aquí
+ Mi perfil (para asistentes registrados)
+Datos visibles: Nombre, correo, tipo de corte adquirido.
+Estado: Confirmación de inscripción y pagos.
+Código QR personal:
+Escaneo para registro de asistencia.
+Reclamo de refrigerios.
+Acceso a visita industrial (solo Cenit Dorado).
+Contacto
+Correo: coeti_utb@aneiap.co