Form: references textarea, location continents, checkbox skills+modules, verification flow

index.html

@@ -124,13 +124,12 @@
         <span style="color:#4338ca;font-size:0.8125rem;font-weight:500;">El puente entre proyectos y expertos Odoo</span>
       </div>
       <h1 class="hero-title" style="font-size:clamp(2.75rem,5vw,4rem);font-weight:800;line-height:1.08;letter-spacing:-0.04em;color:#0f172a;margin-bottom:24px;">
-        Proyectos Odoo que encuentran<br>
+        Conectamos desarrolladores Odoo<br>
-        <span class="gradient-text">a los expertos perfectos</span>
+        <span class="gradient-text">con proyectos en español</span>
       </h1>
       <p style="font-size:1.1875rem;line-height:1.7;color:#475569;max-width:600px;margin:0 auto 40px;font-weight:400;">
-        Conectamos empresas con proyectos Odoo reales y consultores hispanohablantes certificados.
+        Ponemos en contacto a empresas con desarrolladores y consultores hispanohablantes especializados en Odoo.
-        Conocimiento experto, talento verificado y una comunidad que crece cada día.
+        Nosotros solo facilitamos el contacto. Todos los contratos y acuerdos son entre las partes.</p>
-      </p>
       <div class="flex flex-wrap justify-center gap-4">
         <a href="/#expertos" class="btn-primary" style="font-size:1rem;padding:16px 36px;">
           Encontrar un experto
@@ -455,18 +454,22 @@
       </div>
       <form id="expertSignupForm">
         <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
+
           <div style="grid-column:1/-1;">
             <label class="label" for="name">Nombre completo</label>
             <input type="text" id="name" name="name" class="form-field" required placeholder="Tu nombre y apellidos">
           </div>
+
           <div style="grid-column:1/-1;">
             <label class="label" for="image">Imagen de perfil (URL)</label>
             <input type="url" id="image" name="image" class="form-field" placeholder="https://...">
           </div>
+
           <div style="grid-column:1/-1;">
             <label class="label" for="email">Correo electrónico</label>
             <input type="email" id="email" name="email" class="form-field" required placeholder="tu@email.com">
           </div>
+
           <div>
             <label class="label" for="linkedin">LinkedIn</label>
             <input type="url" id="linkedin" name="linkedin" class="form-field" placeholder="https://linkedin.com/in/...">
@@ -480,36 +483,87 @@
             <input type="url" id="website" name="website" class="form-field" placeholder="https://tusitio.com">
           </div>
           <div>
-            <label class="label" for="references">Referencias</label>
+            <label class="label" for="location">Ubicación</label>
-            <input type="text" id="references" name="references" class="form-field" placeholder="Proyectos o clientes anteriores">
+            <select id="location" name="location" class="form-field">
+              <option value="">Selecciona un continente...</option>
+              <option value="europa" selected>Europa</option>
+              <option value="norteamerica">Norteamérica</option>
+              <option value="centroamerica">Centroamérica y Caribe</option>
+              <option value="sudamerica">Sudamérica</option>
+              <option value="asia">Asia</option>
+              <option value="africa">África</option>
+              <option value="oceania">Oceanía</option>
+            </select>
           </div>
+
+          <div style="grid-column:1/-1;">
+            <label class="label">Referencias (proyectos anteriores, clientes, enlaces)</label>
+            <textarea id="references" name="references" class="form-field" rows="3" placeholder="Describe tus proyectos anteriores, clientes con los que has trabajado, o enlaces a casos de éxito..."></textarea>
+          </div>
+
           <div style="grid-column:1/-1;">
             <label class="label" for="summary">Resumen breve</label>
             <textarea id="summary" name="summary" class="form-field" rows="3" placeholder="Tu experiencia, especialidades y años trabajando con Odoo..."></textarea>
           </div>
-          <div>
+
-            <label class="label">Certificado</label>
+          <!-- Skills: two columns -->
+          <div style="grid-column:1/-1;">
+            <label class="label" style="margin-bottom:12px;">Habilidades técnicas</label>
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
+              <!-- Left: Development -->
+              <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px;">
+                <div style="font-weight:600;font-size:0.875rem;color:#0f172a;margin-bottom:12px;">Desarrollo</div>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="python" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Python</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="git" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Git</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="database" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Base de datos (PostgreSQL)</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="owl" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">OWL (Odoo Web Library)</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="javascript" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">JavaScript / TypeScript</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="xml" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">XML / QWeb</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="docker" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Docker / Linux</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="api" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">API / REST / Webhooks</span></label>
+              </div>
+              <!-- Right: Modules -->
+              <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px;">
+                <div style="font-weight:600;font-size:0.875rem;color:#0f172a;margin-bottom:12px;">Módulos</div>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="accounting" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Contabilidad</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="crm" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">CRM</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="inventory" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Inventario</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="manufacturing" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Fabricación</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="sales" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Ventas</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="purchases" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Compras</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="hr" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">RRHH</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="projects" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Proyectos</span></label>
+                <label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="ecommerce" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">E-commerce</span></label>
+              </div>
+            </div>
+          </div>
+
+          <div style="grid-column:1/-1;">
+            <label class="label">Certificado Odoo</label>
             <select id="certified" name="certified" class="form-field">
-              <option value="yes">Sí</option>
+              <option value="yes">Sí, estoy certificado</option>
               <option value="no">No</option>
             </select>
           </div>
-          <div>
+
-            <label class="label">Tipo de perfil</label>
-            <select id="role" name="role" class="form-field">
-              <option value="funcional">Consultor funcional</option>
-              <option value="developer">Desarrollador</option>
-            </select>
-          </div>
         </div>
-        <div style="margin-top:32px;display:flex;gap:12px;">
+
+        <div style="margin-top:24px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px;">
+          <p style="color:#475569;font-size:0.875rem;line-height:1.6;">
+            <strong style="color:#0f172a;">Proceso de registro:</strong> Recibirás un correo electrónico para confirmar tu dirección.
+            Una vez confirmado, tu perfil será revisado por nuestro equipo antes de publicarse en el directorio.
+            Solo entonces aparecerás visible para potenciales clientes.
+          </p>
+        </div>
+
+        <div style="margin-top:24px;display:flex;gap:12px;">
           <button type="submit" class="btn-primary" style="flex:1;justify-content:center;font-size:1rem;padding:16px;">
             Enviar registro
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
           </button>
           <button type="button" class="btn-secondary" onclick="closeSignupModal()">Cancelar</button>
         </div>
-        <p style="color:#94a3b8;font-size:0.8125rem;margin-top:16px;text-align:center;">Al enviar aceptas aparecer en el directorio público de expertos.</p>
+        <p style="color:#94a3b8;font-size:0.8125rem;margin-top:16px;text-align:center;">Al enviar aceptas aparecer en el directorio público de expertos tras la verificación.</p>
       </form>
     </div>
   </div>
@@ -539,6 +593,10 @@
   document.getElementById('expertSignupForm').addEventListener('submit', async function(e) {
     e.preventDefault();
 
+    // Collect checkboxes
+    const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(cb => cb.value);
+    const modules = Array.from(document.querySelectorAll('input[name="modules"]:checked')).map(cb => cb.value);
+
     const formData = {
       image: document.getElementById('image').value,
       name: document.getElementById('name').value,
@@ -546,10 +604,12 @@
       linkedin: document.getElementById('linkedin').value,
       youtube: document.getElementById('youtube').value,
       website: document.getElementById('website').value,
+      location: document.getElementById('location').value,
+      references: document.getElementById('references').value,
       summary: document.getElementById('summary').value,
       certified: document.getElementById('certified').value,
-      role: document.getElementById('role').value,
+      skills: skills,
-      references: document.getElementById('references').value
+      modules: modules
     };
 
     const btn = this.querySelector('button[type="submit"]');
@@ -565,7 +625,7 @@
       });
 
       if (res.ok) {
-        showToast('Registro enviado correctamente. ¡Bienvenido al mercado de expertos!');
+        showToast('Registro enviado. Revisa tu correo para confirmar tu dirección. Tu perfil será revisado antes de publicarse.');
         this.reset();
         closeSignupModal();
       } else {
@@ -573,7 +633,7 @@
       }
     } catch (err) {
       // Webhook not live yet — simulate success for now (mock mode)
-      showToast('Registro enviado correctamente. ¡Bienvenido al mercado de expertos!');
+      showToast('Registro enviado. Revisa tu correo para confirmar tu dirección. Tu perfil será revisado antes de publicarse.');
       this.reset();
       closeSignupModal();
     } finally {