Hi, this website was created for me, and I really love the texts and the copywriting, so I want to keep them intact. However, there are some poorly designed elements (titles without the proper hierarchy, missing icons, buttons that are hard to read, and photos that don’t fit the theme). I’d like you to analyze the design in depth and improve the current layout, keeping the brand color (#9376d5), correcting design issues, and making it look like a modern, functional, and fully responsive landing page. Don’t just fix the obvious flaws—be curious and work as if you were a top-level UX/UI designer, analyzing each section and paying close attention to detail so that every element looks refined. In each section, I want you to carefully work on the hierarchy of headings, and ensure that all visual elements and buttons are clearly defined, differentiated, and enhance the strength of the text. You may completely redesign the layout of any section if you think it’s necessary to improve usability, as long as the text is preserved. The goal of the landing page is to look professional and modern. Establish a clear and visual hierarchy of all elements. Do not redesign the footer—keep it exactly as it is in the original code. It must be fully responsive and viewable on all mobile devices.
#10
by
Tumarca
- opened
README.md
ADDED
|
@@ -0,0 +1,321 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="es">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Seytú Cosmética: Descubre la Belleza que Transforma</title>
|
| 7 |
+
<!-- Tailwind CSS CDN -->
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<!-- Google Fonts - Inter -->
|
| 10 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
| 11 |
+
<style>
|
| 12 |
+
/* Custom corporate color */
|
| 13 |
+
:root {
|
| 14 |
+
--primary-color: #9376d5;
|
| 15 |
+
}
|
| 16 |
+
body {
|
| 17 |
+
font-family: 'Inter', sans-serif;
|
| 18 |
+
background-color: #f8fafc; /* Light gray background */
|
| 19 |
+
color: #333;
|
| 20 |
+
}
|
| 21 |
+
.bg-primary {
|
| 22 |
+
background-color: var(--primary-color);
|
| 23 |
+
}
|
| 24 |
+
.text-primary {
|
| 25 |
+
color: var(--primary-color);
|
| 26 |
+
}
|
| 27 |
+
.border-primary {
|
| 28 |
+
border-color: var(--primary-color);
|
| 29 |
+
}
|
| 30 |
+
.btn-primary {
|
| 31 |
+
background-color: var(--primary-color);
|
| 32 |
+
color: white;
|
| 33 |
+
padding: 1rem 2rem;
|
| 34 |
+
border-radius: 0.5rem;
|
| 35 |
+
font-weight: 600;
|
| 36 |
+
transition: background-color 0.3s ease;
|
| 37 |
+
}
|
| 38 |
+
.btn-primary:hover {
|
| 39 |
+
background-color: #7b5bbd; /* Slightly darker shade for hover */
|
| 40 |
+
}
|
| 41 |
+
.modal {
|
| 42 |
+
display: none; /* Hidden by default */
|
| 43 |
+
position: fixed; /* Stay in place */
|
| 44 |
+
z-index: 1000; /* Sit on top */
|
| 45 |
+
left: 0;
|
| 46 |
+
top: 0;
|
| 47 |
+
width: 100%; /* Full width */
|
| 48 |
+
height: 100%; /* Full height */
|
| 49 |
+
overflow: auto; /* Enable scroll if needed */
|
| 50 |
+
background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
|
| 51 |
+
justify-content: center;
|
| 52 |
+
align-items: center;
|
| 53 |
+
}
|
| 54 |
+
.modal-content {
|
| 55 |
+
background-color: #fefefe;
|
| 56 |
+
margin: auto;
|
| 57 |
+
padding: 2.5rem;
|
| 58 |
+
border-radius: 0.75rem;
|
| 59 |
+
width: 90%;
|
| 60 |
+
max-width: 500px;
|
| 61 |
+
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
| 62 |
+
position: relative;
|
| 63 |
+
}
|
| 64 |
+
.close-button {
|
| 65 |
+
color: #aaa;
|
| 66 |
+
position: absolute;
|
| 67 |
+
top: 1rem;
|
| 68 |
+
right: 1rem;
|
| 69 |
+
font-size: 2rem;
|
| 70 |
+
font-weight: bold;
|
| 71 |
+
cursor: pointer;
|
| 72 |
+
}
|
| 73 |
+
.close-button:hover,
|
| 74 |
+
.close-button:focus {
|
| 75 |
+
color: #333;
|
| 76 |
+
text-decoration: none;
|
| 77 |
+
cursor: pointer;
|
| 78 |
+
}
|
| 79 |
+
</style>
|
| 80 |
+
</head>
|
| 81 |
+
<body class="antialiased">
|
| 82 |
+
|
| 83 |
+
<!-- Hero Section -->
|
| 84 |
+
<header class="bg-primary text-white py-20 px-4 sm:px-6 lg:px-8 rounded-b-xl shadow-lg">
|
| 85 |
+
<div class="max-w-7xl mx-auto text-center">
|
| 86 |
+
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
|
| 87 |
+
Descubre la Belleza que Transforma: Tu Oportunidad con Seytú Cosmética
|
| 88 |
+
</h1>
|
| 89 |
+
<p class="text-lg sm:text-xl leading-relaxed max-w-3xl mx-auto">
|
| 90 |
+
¿Sueñas con un negocio propio que te permita crecer, tener flexibilidad y conectar con lo que te apasiona? En Seytú Cosmética, creemos que la belleza es <strong class="font-semibold">cuidar que tú y tu autoestima estén en su mejor versión</strong>, y te ofrecemos la oportunidad de impulsar esa transformación en tu vida y en la de miles de personas más.
|
| 91 |
+
</p>
|
| 92 |
+
</div>
|
| 93 |
+
</header>
|
| 94 |
+
|
| 95 |
+
<main class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
| 96 |
+
|
| 97 |
+
<!-- Why Seytú Section -->
|
| 98 |
+
<section class="mb-16">
|
| 99 |
+
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-10 text-primary">
|
| 100 |
+
¿Por qué Seytú? Más que Cosméticos, un Estilo de Vida y Negocio con Propósito.
|
| 101 |
+
</h2>
|
| 102 |
+
<div class="bg-white p-8 rounded-xl shadow-lg">
|
| 103 |
+
<p class="text-lg mb-6 leading-relaxed">
|
| 104 |
+
En el dinámico mundo de las Redes de Mercadeo, los productos de belleza y suplementos nutricionales son pilares fundamentales, con proyecciones de crecimiento masivo. Seytú Cosmética no solo es parte de esta tendencia, sino que la lidera con una propuesta de valor única:
|
| 105 |
+
</p>
|
| 106 |
+
<ul class="space-y-6 text-lg">
|
| 107 |
+
<li class="flex items-start">
|
| 108 |
+
<span class="text-primary text-2xl mr-3">✓</span>
|
| 109 |
+
<div>
|
| 110 |
+
<strong class="font-semibold">Innovación y Calidad Superior</strong>: Nuestros productos están formulados con los más <strong class="font-semibold">altos estándares de calidad e ingredientes de origen natural</strong>. Son <strong class="font-semibold">hipoalergénicos, sin parabenos y no probados en animales</strong>, atendiendo la creciente demanda de <strong class="font-semibold">belleza limpia y sostenible</strong>. Desde nuestro <strong class="font-semibold">Maquillaje Líquido UP+ FPS 15</strong> y el <strong class="font-semibold">Polvo Traslúcido de tono universal</strong>, hasta nuestra <strong class="font-semibold">Espuma Limpiadora Facial</strong>, <strong class="font-semibold">Micro-Exfoliante Facial</strong>, y las líneas <strong class="font-semibold">SYSTEM Time-Specialist</strong> (con <strong class="font-semibold">Crema de Día FPS 30</strong>, <strong class="font-semibold">Suero de Noche</strong>, <strong class="font-semibold">Crema para Contorno de Ojos</strong>) y <strong class="font-semibold">SYSTEM Luminous-Specialist</strong> (con <strong class="font-semibold">Crema para Manos, Cuello y Escote</strong>), nuestros productos ofrecen <strong class="font-semibold">resultados auténticos y experiencias de uso inigualables</strong>.
|
| 111 |
+
</div>
|
| 112 |
+
</li>
|
| 113 |
+
<li class="flex items-start">
|
| 114 |
+
<span class="text-primary text-2xl mr-3">✓</span>
|
| 115 |
+
<div>
|
| 116 |
+
<strong class="font-semibold">Negocio Centrado en el Producto Real</strong>: A diferencia de esquemas fraudulentos, en Seytú, tus ganancias provienen principalmente de la <strong class="font-semibold">venta de productos de alta calidad a consumidores finales</strong>. Te enfocarás en un producto en el que puedes creer y usar genuinamente, construyendo una base de clientes leales.
|
| 117 |
+
</div>
|
| 118 |
+
</li>
|
| 119 |
+
<li class="flex items-start">
|
| 120 |
+
<span class="text-primary text-2xl mr-3">✓</span>
|
| 121 |
+
<div>
|
| 122 |
+
<strong class="font-semibold">Flexibilidad y Autonomía Total</strong>: Diseña tu propio horario y ritmo de trabajo, sin las limitaciones de un empleo tradicional. Seytú es ideal para quienes buscan <strong class="font-semibold">conciliar su vida familiar y profesional</strong>, ofreciendo una alternativa viable en cualquier contexto. Puedes construir tu negocio <strong class="font-semibold">desde casa o desde cualquier lugar</strong>.
|
| 123 |
+
</div>
|
| 124 |
+
</li>
|
| 125 |
+
<li class="flex items-start">
|
| 126 |
+
<span class="text-primary text-2xl mr-3">✓</span>
|
| 127 |
+
<div>
|
| 128 |
+
<strong class="font-semibold">Desarrollo Personal y Liderazgo</strong>: El negocio multinivel es un <strong class="font-semibold">catalizador para tu crecimiento profesional y personal</strong>. Tendrás la oportunidad de <strong class="font-semibold">optimizar tus habilidades de comunicación, liderazgo y persuasión</strong> a través de nuestra <strong class="font-semibold">formación continua y recursos de apoyo</strong>. Nuestro modelo de Multidesarrollo está diseñado para apoyar tu <strong class="font-semibold">crecimiento integral</strong>.
|
| 129 |
+
</div>
|
| 130 |
+
</li>
|
| 131 |
+
<li class="flex items-start">
|
| 132 |
+
<span class="text-primary text-2xl mr-3">✓</span>
|
| 133 |
+
<div>
|
| 134 |
+
<strong class="font-semibold">Una Comunidad de Apoyo Genuino</strong>: En Seytú, <strong class="font-semibold">la gente se une a la gente</strong>. Te unirás a una red de apoyo y <strong class="font-semibold">sentido de comunidad</strong> donde el <strong class="font-semibold">éxito del equipo es prioritario</strong>. Fomentamos la <strong class="font-semibold">colaboración, la mentoría y la celebración de logros compartidos</strong>.
|
| 135 |
+
</div>
|
| 136 |
+
</li>
|
| 137 |
+
</ul>
|
| 138 |
+
</div>
|
| 139 |
+
</section>
|
| 140 |
+
|
| 141 |
+
<!-- Earnings Potential Section -->
|
| 142 |
+
<section class="mb-16">
|
| 143 |
+
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-10 text-primary">
|
| 144 |
+
Tu Potencial de Ganancias y el Camino al Éxito
|
| 145 |
+
</h2>
|
| 146 |
+
<div class="bg-white p-8 rounded-xl shadow-lg">
|
| 147 |
+
<p class="text-lg mb-6 leading-relaxed">
|
| 148 |
+
El modelo de negocio de Seytú te permite generar ganancias a través de la <strong class="font-semibold">reventa directa de nuestros productos con atractivos descuentos</strong> (desde el 20% hasta el 40% sobre el precio de lista), así como mediante la <strong class="font-semibold">construcción de tu propia Organización de Presentados</strong>. Puedes obtener <strong class="font-semibold">ganancias por las compras de tus Clientes Admirables y Presentados</strong>.
|
| 149 |
+
</p>
|
| 150 |
+
<p class="text-lg mb-6 leading-relaxed italic">
|
| 151 |
+
Es importante ser <strong class="font-semibold">totalmente transparente</strong>: construir un negocio exitoso en Redes de Mercadeo requiere <strong class="font-semibold">tiempo, esfuerzo, dedicación y persistencia</strong>. No es una promesa de "riqueza rápida", sino una oportunidad para <strong class="font-semibold">construir ingresos significativos y sostenibles a través del trabajo constante</strong>. Nuestro <strong class="font-semibold">Plan de Carrera del Empresario</strong> te ofrece diferentes niveles de progreso, desde Empresario Bronce hasta Diamante, cada uno con requisitos de puntos y la posibilidad de acceder a diversas compensaciones como <strong class="font-semibold">Compensación de Inicio Rápido, por Nivel, Constructor de Equipos y por Generación</strong>.
|
| 152 |
+
</p>
|
| 153 |
+
</div>
|
| 154 |
+
</section>
|
| 155 |
+
|
| 156 |
+
<!-- Call to Action Section -->
|
| 157 |
+
<section class="text-center mb-16">
|
| 158 |
+
<h2 class="text-3xl sm:text-4xl font-bold mb-8 text-primary">
|
| 159 |
+
¡Únete a Nuestra Próxima Junta de Oportunidad!
|
| 160 |
+
</h2>
|
| 161 |
+
<div class="bg-white p-8 rounded-xl shadow-lg max-w-4xl mx-auto">
|
| 162 |
+
<p class="text-lg mb-6 leading-relaxed">
|
| 163 |
+
¿Estás listo/a para conocer en detalle cómo Seytú Cosmética puede ser la plataforma para tus sueños de emprendimiento y desarrollo personal? En nuestras Juntas de Oportunidad, podrás:
|
| 164 |
+
</p>
|
| 165 |
+
<ul class="list-disc list-inside text-left text-lg space-y-2 mb-6 max-w-2xl mx-auto">
|
| 166 |
+
<li><strong class="font-semibold">Comprender a fondo nuestro modelo de negocio</strong> y cómo se generan las ganancias.</li>
|
| 167 |
+
<li><strong class="font-semibold">Resolver todas tus dudas</strong> sobre los productos, el plan de compensación y la ética de nuestro negocio.</li>
|
| 168 |
+
<li><strong class="font-semibold">Conectar con otros Empresarios</strong> y escuchar sus testimonios reales.</li>
|
| 169 |
+
</ul>
|
| 170 |
+
<p class="text-lg mb-8 leading-relaxed">
|
| 171 |
+
<strong class="font-semibold">Elige la modalidad que mejor se adapte a ti:</strong>
|
| 172 |
+
</p>
|
| 173 |
+
<ul class="text-lg space-y-2 mb-10 max-w-2xl mx-auto">
|
| 174 |
+
<li class="flex items-center justify-center sm:justify-start">
|
| 175 |
+
<span class="text-primary text-2xl mr-3">✈</span>
|
| 176 |
+
<div>
|
| 177 |
+
<strong class="font-semibold">Junta Virtual</strong>: Si te encuentras en <strong class="font-semibold">cualquier país donde Seytú tiene presencia</strong>, puedes conectarte cómodamente desde tu hogar.
|
| 178 |
+
</div>
|
| 179 |
+
</li>
|
| 180 |
+
<li class="flex items-center justify-center sm:justify-start">
|
| 181 |
+
<span class="text-primary text-2xl mr-3">🏠</span>
|
| 182 |
+
<div>
|
| 183 |
+
<strong class="font-semibold">Junta Presencial</strong>: Si estás ubicado/a en la ciudad de <strong class="font-semibold">Bogotá, Colombia</strong>, te invitamos a vivir la experiencia en persona y conectar directamente con nuestra comunidad.
|
| 184 |
+
</div>
|
| 185 |
+
</li>
|
| 186 |
+
</ul>
|
| 187 |
+
<button id="openModalBtn" class="btn-primary inline-block shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">
|
| 188 |
+
¡Quiero Asistir a la Junta de Oportunidad!
|
| 189 |
+
</button>
|
| 190 |
+
</div>
|
| 191 |
+
</section>
|
| 192 |
+
|
| 193 |
+
</main>
|
| 194 |
+
|
| 195 |
+
<!-- Footer -->
|
| 196 |
+
<footer class="bg-gray-800 text-gray-300 py-10 px-4 sm:px-6 lg:px-8 rounded-t-xl">
|
| 197 |
+
<div class="max-w-7xl mx-auto text-center text-sm">
|
| 198 |
+
<p class="mb-2">
|
| 199 |
+
<strong class="text-white">Seytú Cosmética</strong> es parte del Grupo OMNILIFE, una compañía global con más de 33 años de experiencia y presencia en más de 30 países.
|
| 200 |
+
</p>
|
| 201 |
+
<p class="mb-2">
|
| 202 |
+
Contamos con <strong class="text-white">certificaciones internacionales como ISO 9001:2015</strong> (Sistema de Gestión de Calidad) e <strong class="text-white">ISO 14001:2015</strong> (Gestión Ambiental), lo que respalda nuestro compromiso con la excelencia y la sostenibilidad.
|
| 203 |
+
</p>
|
| 204 |
+
<p class="font-semibold text-primary">Nuestro lema es "Gente que Cuida a la Gente".</p>
|
| 205 |
+
</div>
|
| 206 |
+
</footer>
|
| 207 |
+
|
| 208 |
+
<!-- Modal for the form -->
|
| 209 |
+
<div id="opportunityModal" class="modal">
|
| 210 |
+
<div class="modal-content">
|
| 211 |
+
<span class="close-button">×</span>
|
| 212 |
+
<h3 class="text-2xl font-bold mb-6 text-center text-primary">Regístrate para la Junta de Oportunidad</h3>
|
| 213 |
+
<!-- Formspree integration: Replace YOUR_EMAIL_HERE with contacto@bienestaryencanto.com -->
|
| 214 |
+
<form id="registrationForm" class="space-y-4" action="https://formspree.io/f/f/contacto@bienestaryencanto.com" method="POST">
|
| 215 |
+
<div>
|
| 216 |
+
<label for="name" class="block text-gray-700 text-sm font-bold mb-2">Nombre Completo:</label>
|
| 217 |
+
<input type="text" id="name" name="name" class="shadow appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Tu nombre" required>
|
| 218 |
+
</div>
|
| 219 |
+
<div>
|
| 220 |
+
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">Correo Electrónico:</label>
|
| 221 |
+
<input type="email" id="email" name="email" class="shadow appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="tu.correo@ejemplo.com" required>
|
| 222 |
+
</div>
|
| 223 |
+
<div>
|
| 224 |
+
<label for="phone" class="block text-gray-700 text-sm font-bold mb-2">Número de Teléfono:</label>
|
| 225 |
+
<input type="tel" id="phone" name="phone" class="shadow appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="+XX XXX XXX XXXX" required>
|
| 226 |
+
</div>
|
| 227 |
+
<div>
|
| 228 |
+
<label for="country" class="block text-gray-700 text-sm font-bold mb-2">País:</label>
|
| 229 |
+
<input type="text" id="country" name="country" class="shadow appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Tu país" required>
|
| 230 |
+
</div>
|
| 231 |
+
<div>
|
| 232 |
+
<label class="block text-gray-700 text-sm font-bold mb-2">Modalidad de Asistencia:</label>
|
| 233 |
+
<div class="mt-2">
|
| 234 |
+
<label class="inline-flex items-center mr-6">
|
| 235 |
+
<input type="radio" class="form-radio text-primary h-5 w-5" name="attendance" value="virtual" id="attendanceVirtual" required>
|
| 236 |
+
<span class="ml-2 text-gray-700">Virtual</span>
|
| 237 |
+
</label>
|
| 238 |
+
<label class="inline-flex items-center">
|
| 239 |
+
<input type="radio" class="form-radio text-primary h-5 w-5" name="attendance" value="presencial" id="attendancePresencial">
|
| 240 |
+
<span class="ml-2 text-gray-700">Presencial (Bogotá, Colombia)</span>
|
| 241 |
+
</label>
|
| 242 |
+
</div>
|
| 243 |
+
</div>
|
| 244 |
+
<div id="cityField" class="hidden">
|
| 245 |
+
<label for="city" class="block text-gray-700 text-sm font-bold mb-2">Ciudad:</label>
|
| 246 |
+
<input type="text" id="city" name="city" class="shadow appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="Bogotá" readonly>
|
| 247 |
+
</div>
|
| 248 |
+
<button type="submit" class="btn-primary w-full mt-6">Enviar Registro</button>
|
| 249 |
+
</form>
|
| 250 |
+
<!-- Formspree will handle the success message/redirection directly -->
|
| 251 |
+
<!-- The thankYouMessage div is no longer needed for Formspree's default behavior -->
|
| 252 |
+
<!-- <div id="thankYouMessage" class="hidden text-center mt-6 text-lg text-green-600 font-semibold">
|
| 253 |
+
¡Gracias por tu interés! Nos pondremos en contacto contigo pronto.
|
| 254 |
+
</div> -->
|
| 255 |
+
</div>
|
| 256 |
+
</div>
|
| 257 |
+
|
| 258 |
+
<script>
|
| 259 |
+
// Get the modal
|
| 260 |
+
const modal = document.getElementById("opportunityModal");
|
| 261 |
+
|
| 262 |
+
// Get the button that opens the modal
|
| 263 |
+
const btn = document.getElementById("openModalBtn");
|
| 264 |
+
|
| 265 |
+
// Get the <span> element that closes the modal
|
| 266 |
+
const span = document.getElementsByClassName("close-button")[0];
|
| 267 |
+
|
| 268 |
+
// Get the attendance radio buttons and city field
|
| 269 |
+
const attendanceVirtual = document.getElementById("attendanceVirtual");
|
| 270 |
+
const attendancePresencial = document.getElementById("attendancePresencial");
|
| 271 |
+
const cityField = document.getElementById("cityField");
|
| 272 |
+
const registrationForm = document.getElementById("registrationForm");
|
| 273 |
+
// const thankYouMessage = document.getElementById("thankYouMessage"); // No longer needed with Formspree direct submit
|
| 274 |
+
|
| 275 |
+
// When the user clicks the button, open the modal
|
| 276 |
+
btn.onclick = function() {
|
| 277 |
+
modal.style.display = "flex"; // Use flex to center content
|
| 278 |
+
registrationForm.reset(); // Reset form when opening
|
| 279 |
+
registrationForm.classList.remove('hidden'); // Ensure form is visible
|
| 280 |
+
// thankYouMessage.classList.add('hidden'); // Hide thank you message if it was visible
|
| 281 |
+
cityField.classList.add('hidden'); // Hide city field initially
|
| 282 |
+
}
|
| 283 |
+
|
| 284 |
+
// When the user clicks on <span> (x), close the modal
|
| 285 |
+
span.onclick = function() {
|
| 286 |
+
modal.style.display = "none";
|
| 287 |
+
}
|
| 288 |
+
|
| 289 |
+
// When the user clicks anywhere outside of the modal, close it
|
| 290 |
+
window.onclick = function(event) {
|
| 291 |
+
if (event.target == modal) {
|
| 292 |
+
modal.style.display = "none";
|
| 293 |
+
}
|
| 294 |
+
}
|
| 295 |
+
|
| 296 |
+
// Event listener for attendance radio buttons
|
| 297 |
+
attendancePresencial.addEventListener('change', function() {
|
| 298 |
+
if (this.checked) {
|
| 299 |
+
cityField.classList.remove('hidden');
|
| 300 |
+
}
|
| 301 |
+
});
|
| 302 |
+
|
| 303 |
+
attendanceVirtual.addEventListener('change', function() {
|
| 304 |
+
if (this.checked) {
|
| 305 |
+
cityField.classList.add('hidden');
|
| 306 |
+
}
|
| 307 |
+
});
|
| 308 |
+
|
| 309 |
+
// With Formspree, the form submission is handled directly by the browser
|
| 310 |
+
// and Formspree's servers. The JavaScript 'submit' event listener
|
| 311 |
+
// that prevented default and logged to console is no longer needed
|
| 312 |
+
// for sending data, as the 'action' attribute handles it.
|
| 313 |
+
// If you need to perform client-side validation before sending,
|
| 314 |
+
// you would add it here before allowing the default submit.
|
| 315 |
+
// registrationForm.addEventListener('submit', function(event) {
|
| 316 |
+
// // event.preventDefault(); // Do NOT prevent default if you want Formspree to handle it
|
| 317 |
+
// // ... client-side validation here ...
|
| 318 |
+
// });
|
| 319 |
+
</script>
|
| 320 |
+
</body>
|
| 321 |
+
</html>
|