691 lines
52 KiB
HTML
691 lines
52 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Odoo Expertos — Proyectos, expertos y conocimiento Odoo</title>
|
|
<meta name="description" content="Conectamos proyectos Odoo con expertos hispanohablantes. Conocimiento, noticias y un mercado de profesionales certificados en Odoo Community.">
|
|
<link rel="canonical" href="https://odoo-expertos.com/">
|
|
<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=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Odoo Expertos — Proyectos, expertos y conocimiento Odoo">
|
|
<meta property="og:description" content="Conectamos proyectos Odoo con expertos hispanohablantes.">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: #f8fafc; color: #0f172a; -webkit-font-smoothing: antialiased; }
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
|
|
|
.glass-nav { background: rgba(248,250,252,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0,0,0,0.05); }
|
|
|
|
.gradient-text { background: linear-gradient(135deg, #4338ca 0%, #3b82f6 50%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
|
|
|
.hero-gradient { background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 40%, #ede9fe 70%, #f8fafc 100%); }
|
|
.hero-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; filter: blur(100px); opacity: 0.15; pointer-events: none; }
|
|
.hero-glow-1 { background: #4338ca; top: -200px; right: -100px; }
|
|
.hero-glow-2 { background: #8b5cf6; bottom: -200px; left: -100px; }
|
|
|
|
.glass-card { background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 8px 32px rgba(0,0,0,0.06); }
|
|
|
|
.premium-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
|
|
.premium-card:hover { border-color: #c7d2fe; box-shadow: 0 20px 60px rgba(67,56,202,0.08), 0 8px 24px rgba(0,0,0,0.04); transform: translateY(-4px); }
|
|
|
|
.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: linear-gradient(135deg, #4338ca, #3b82f6); color: #fff; border-radius: 12px; font-weight: 600; font-size: 0.9375rem; border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); text-decoration: none; }
|
|
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(67,56,202,0.25); }
|
|
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: #fff; color: #4338ca; border: 1px solid #e2e8f0; border-radius: 12px; font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); text-decoration: none; }
|
|
.btn-secondary:hover { border-color: #c7d2fe; box-shadow: 0 4px 16px rgba(67,56,202,0.08); transform: translateY(-2px); }
|
|
|
|
.fade-up { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
.fade-up.visible { opacity: 1; transform: translateY(0); }
|
|
|
|
section { padding: 100px 0; }
|
|
@media (max-width: 768px) { section { padding: 60px 0; } }
|
|
|
|
.expert-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 32px; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
|
|
.expert-card:hover { border-color: #c7d2fe; box-shadow: 0 16px 48px rgba(67,56,202,0.08); transform: translateY(-4px); }
|
|
|
|
.badge-certified { background: rgba(16,185,129,0.1); color: #10b981; }
|
|
.badge-community { background: rgba(245,158,11,0.1); color: #f59e0b; }
|
|
|
|
.avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; color: #fff; }
|
|
|
|
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 100px; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border: 1px solid #e2e8f0; background: #fff; color: #475569; }
|
|
.filter-chip:hover { border-color: #c7d2fe; color: #4338ca; }
|
|
.filter-chip.active { background: #4338ca; border-color: #4338ca; color: #fff; }
|
|
|
|
.cta-gradient { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #3730a3 60%, #4338ca 100%); }
|
|
|
|
/* Modal */
|
|
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,23,42,0.6); backdrop-filter: blur(4px); z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; }
|
|
.modal-overlay.open { display: flex; }
|
|
.modal-box { background: #fff; border-radius: 24px; max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 32px 80px rgba(0,0,0,0.2); }
|
|
|
|
.form-field { width: 100%; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.9375rem; color: #0f172a; transition: all 0.2s; }
|
|
.form-field:focus { outline: none; border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.1); background: #fff; }
|
|
|
|
.label { display: block; font-size: 0.8125rem; font-weight: 600; color: #334155; margin-bottom: 6px; }
|
|
|
|
/* Toast */
|
|
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: #0f172a; color: #fff; padding: 14px 28px; border-radius: 12px; font-size: 0.9375rem; font-weight: 500; z-index: 200; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
|
|
.toast.show { transform: translateX(-50%) translateY(0); }
|
|
|
|
::-webkit-scrollbar { width: 8px; }
|
|
::-webkit-scrollbar-track { background: #f1f5f9; }
|
|
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-title { font-size: 2.5rem !important; line-height: 1.1 !important; }
|
|
}
|
|
|
|
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
|
|
.float { animation: float 6s ease-in-out infinite; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ===== NAV ===== -->
|
|
<nav class="glass-nav fixed top-0 left-0 right-0 z-50" style="height:64px;">
|
|
<div class="container h-full flex items-center justify-between">
|
|
<a href="/" class="flex items-center gap-2.5" style="text-decoration:none;">
|
|
<div style="width:32px;height:32px;background:linear-gradient(135deg,#4338ca,#3b82f6);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;">OE</div>
|
|
<span style="font-weight:600;font-size:1rem;color:#0f172a;">Odoo Expertos</span>
|
|
</a>
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<a href="/#blog" style="color:#475569;font-size:0.875rem;font-weight:500;text-decoration:none;transition:color 0.2s;" onmouseover="this.style.color='#4338ca'" onmouseout="this.style.color='#475569'">Blog</a>
|
|
<a href="/#expertos" style="color:#475569;font-size:0.875rem;font-weight:500;text-decoration:none;transition:color 0.2s;" onmouseover="this.style.color='#4338ca'" onmouseout="this.style.color='#475569'">Mercado de Expertos</a>
|
|
<a href="/about.html" style="color:#475569;font-size:0.875rem;font-weight:500;text-decoration:none;transition:color 0.2s;" onmouseover="this.style.color='#4338ca'" onmouseout="this.style.color='#475569'">Sobre Nosotros</a>
|
|
<button class="btn-primary" style="padding:10px 24px;font-size:0.875rem;" onclick="openSignupModal()">Soy experto</button>
|
|
</div>
|
|
<button id="mobileToggle" class="md:hidden" style="background:none;border:none;cursor:pointer;padding:8px;" onclick="document.getElementById('mobileMenu').classList.toggle('hidden')">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0f172a" stroke-width="2" stroke-linecap="round"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
|
|
</button>
|
|
</div>
|
|
<div id="mobileMenu" class="hidden md:hidden" style="background:#fff;border-top:1px solid #e2e8f0;padding:16px;">
|
|
<div style="display:flex;flex-direction:column;gap:16px;">
|
|
<a href="/#blog" style="color:#475569;font-size:0.9375rem;font-weight:500;text-decoration:none;">Blog</a>
|
|
<a href="/#expertos" style="color:#475569;font-size:0.9375rem;font-weight:500;text-decoration:none;">Mercado de Expertos</a>
|
|
<a href="/about.html" style="color:#475569;font-size:0.9375rem;font-weight:500;text-decoration:none;">Sobre Nosotros</a>
|
|
<button class="btn-primary" style="justify-content:center;" onclick="openSignupModal()">Soy experto</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ===== HERO ===== -->
|
|
<section class="hero-gradient" id="hero" style="padding-top:140px;padding-bottom:100px;position:relative;overflow:hidden;">
|
|
<div class="hero-glow hero-glow-1"></div>
|
|
<div class="hero-glow hero-glow-2"></div>
|
|
<div class="container" style="position:relative;z-index:1;">
|
|
<div class="text-center max-w-3xl mx-auto">
|
|
<div style="display:inline-flex;align-items:center;gap:8px;background:rgba(67,56,202,0.08);border:1px solid rgba(67,56,202,0.12);border-radius:100px;padding:6px 16px;margin-bottom:28px;">
|
|
<span style="width:6px;height:6px;border-radius:50%;background:#10b981;display:inline-block;"></span>
|
|
<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;">
|
|
Conectamos desarrolladores Odoo<br>
|
|
<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;">
|
|
Ponemos en contacto a empresas con desarrolladores y consultores hispanohablantes especializados en Odoo.
|
|
Nosotros solo facilitamos el contacto. Todos los contratos y acuerdos son entre las partes.</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
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</a>
|
|
<button class="btn-secondary" style="font-size:1rem;padding:16px 36px;" onclick="openSignupModal()">
|
|
Publicar mi perfil de experto
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Matching visual -->
|
|
<div class="glass-card float" style="margin-top:64px;padding:32px;border-radius:24px;text-align:left;max-width:640px;margin-left:auto;margin-right:auto;">
|
|
<div class="flex items-center justify-between" style="margin-bottom:24px;">
|
|
<span style="font-weight:600;font-size:0.9375rem;color:#0f172a;">Conectando proyecto con experto</span>
|
|
<span style="font-size:0.75rem;color:#64748b;background:#f1f5f9;padding:4px 12px;border-radius:100px;">en vivo</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<!-- Project card -->
|
|
<div style="flex:1;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:20px;">
|
|
<div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
|
|
<div style="width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#4338ca,#3b82f6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:0.75rem;">PR</div>
|
|
<div>
|
|
<div style="font-weight:600;font-size:0.875rem;color:#0f172a;">Proyecto</div>
|
|
<div style="font-size:0.75rem;color:#64748b;">Implementación Odoo</div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size:0.8125rem;color:#334155;line-height:1.6;">
|
|
Empresa de distribución necesita implementar inventario y contabilidad en Odoo Community.
|
|
</div>
|
|
<div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;">
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Inventario</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Contabilidad</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">España</span>
|
|
</div>
|
|
</div>
|
|
<!-- Connection line -->
|
|
<div style="display:flex;align-items:center;gap:6px;flex-direction:column;">
|
|
<div style="width:2px;height:40px;background:linear-gradient(to bottom,#4338ca,#10b981);border-radius:1px;"></div>
|
|
<div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#4338ca,#10b981);display:flex;align-items:center;justify-content:center;color:#fff;">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
</div>
|
|
<div style="width:2px;height:40px;background:linear-gradient(to bottom,#10b981,#4338ca);border-radius:1px;"></div>
|
|
</div>
|
|
<!-- Expert card -->
|
|
<div style="flex:1;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:20px;">
|
|
<div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
|
|
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#10b981,#3b82f6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:0.75rem;">CM</div>
|
|
<div>
|
|
<div style="font-weight:600;font-size:0.875rem;color:#0f172a;">Carlos Méndez</div>
|
|
<div style="font-size:0.75rem;color:#64748b;">Consultor certificado</div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size:0.8125rem;color:#334155;line-height:1.6;">
|
|
+8 años implementando Odoo. Especialista en inventario, contabilidad y fabricación.
|
|
</div>
|
|
<div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;">
|
|
<span style="background:rgba(16,185,129,0.1);color:#10b981;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Certificado</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Funcional</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">España</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid #e2e8f0;">
|
|
<span style="color:#10b981;font-size:0.8125rem;font-weight:500;">Match exitoso</span>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
<span style="color:#64748b;font-size:0.8125rem;">Implementación iniciada en 2 días</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== BLOG ===== -->
|
|
<section id="blog" style="padding:100px 0;">
|
|
<div class="container">
|
|
<div class="flex items-end justify-between flex-wrap gap-6 mb-16">
|
|
<div>
|
|
<h2 style="font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;line-height:1.1;letter-spacing:-0.03em;color:#0f172a;margin-bottom:12px;">Blog y noticias</h2>
|
|
<p style="font-size:1.0625rem;color:#64748b;line-height:1.7;max-width:480px;">Conocimiento práctico sobre Odoo Community. Tutoriales, guías y novedades del ecosistema.</p>
|
|
</div>
|
|
<a href="/blog/" class="btn-secondary" style="white-space:nowrap;">Ver todo el blog</a>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<a href="/blog/implementar-odoo-erp-pyme.html" class="premium-card p-8" style="text-decoration:none;display:flex;flex-direction:column;">
|
|
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
|
|
<span style="background:rgba(67,56,202,0.1);color:#4338ca;font-size:0.75rem;font-weight:500;padding:4px 10px;border-radius:100px;">Guía</span>
|
|
<span style="background:rgba(16,185,129,0.1);color:#10b981;font-size:0.75rem;font-weight:500;padding:4px 10px;border-radius:100px;">15 min</span>
|
|
</div>
|
|
<h3 style="font-size:1.125rem;font-weight:600;color:#0f172a;margin-bottom:8px;line-height:1.4;">Cómo implementar Odoo en una pyme paso a paso</h3>
|
|
<p style="color:#64748b;font-size:0.875rem;line-height:1.7;margin-bottom:16px;flex:1;">Guía completa desde la planificación hasta el despliegue en producción.</p>
|
|
<span style="color:#4338ca;font-size:0.875rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;">Leer más <svg width="14" height="14" 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></span>
|
|
</a>
|
|
<a href="/blog/odoo-community-vs-enterprise.html" class="premium-card p-8" style="text-decoration:none;display:flex;flex-direction:column;">
|
|
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
|
|
<span style="background:rgba(245,158,11,0.1);color:#f59e0b;font-size:0.75rem;font-weight:500;padding:4px 10px;border-radius:100px;">Comparativa</span>
|
|
<span style="background:rgba(16,185,129,0.1);color:#10b981;font-size:0.75rem;font-weight:500;padding:4px 10px;border-radius:100px;">12 min</span>
|
|
</div>
|
|
<h3 style="font-size:1.125rem;font-weight:600;color:#0f172a;margin-bottom:8px;line-height:1.4;">Odoo Community vs Enterprise: diferencias reales</h3>
|
|
<p style="color:#64748b;font-size:0.875rem;line-height:1.7;margin-bottom:16px;flex:1;">¿Qué versión necesitas realmente? Análisis detallado de costes y funcionalidades.</p>
|
|
<span style="color:#4338ca;font-size:0.875rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;">Leer más <svg width="14" height="14" 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></span>
|
|
</a>
|
|
<a href="/blog/odoo-crm-guia-completa.html" class="premium-card p-8" style="text-decoration:none;display:flex;flex-direction:column;">
|
|
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
|
|
<span style="background:rgba(16,185,129,0.1);color:#10b981;font-size:0.75rem;font-weight:500;padding:4px 10px;border-radius:100px;">Tutorial</span>
|
|
<span style="background:rgba(16,185,129,0.1);color:#10b981;font-size:0.75rem;font-weight:500;padding:4px 10px;border-radius:100px;">10 min</span>
|
|
</div>
|
|
<h3 style="font-size:1.125rem;font-weight:600;color:#0f172a;margin-bottom:8px;line-height:1.4;">Odoo CRM: guía completa para equipos comerciales</h3>
|
|
<p style="color:#64748b;font-size:0.875rem;line-height:1.7;margin-bottom:16px;flex:1;">Gestiona leads, pipeline de ventas y automatizaciones con Odoo Community.</p>
|
|
<span style="color:#4338ca;font-size:0.875rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;">Leer más <svg width="14" height="14" 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></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== EXPERT MARKET ===== -->
|
|
<section id="expertos" style="padding:100px 0;background:#f1f5f9;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;">
|
|
<div class="container">
|
|
<div class="flex items-end justify-between flex-wrap gap-6 mb-12">
|
|
<div>
|
|
<h2 style="font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;line-height:1.1;letter-spacing:-0.03em;color:#0f172a;margin-bottom:12px;">Mercado de expertos</h2>
|
|
<p style="font-size:1.0625rem;color:#64748b;line-height:1.7;max-width:520px;">Base de datos de profesionales hispanohablantes especializados en Odoo. Verificados, con referencias y listos para tu proyecto.</p>
|
|
</div>
|
|
<button class="btn-primary" style="white-space:nowrap;" onclick="openSignupModal()">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
Darme de alta como experto
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="flex flex-wrap gap-3 mb-10" id="filters">
|
|
<button class="filter-chip active" data-filter="all" onclick="filterExperts('all')">Todos</button>
|
|
<button class="filter-chip" data-filter="certified" onclick="filterExperts('certified')">Certificados</button>
|
|
<button class="filter-chip" data-filter="funcional" onclick="filterExperts('funcional')">Consultores funcionales</button>
|
|
<button class="filter-chip" data-filter="developer" onclick="filterExperts('developer')">Desarrolladores</button>
|
|
</div>
|
|
|
|
<!-- Expert grid (mock data) -->
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="expertGrid">
|
|
<!-- Expert 1 -->
|
|
<div class="expert-card fade-up visible" data-role="funcional" data-certified="true">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="avatar" style="background:linear-gradient(135deg,#4338ca,#3b82f6);">CM</div>
|
|
<span class="badge-certified" style="font-size:0.6875rem;font-weight:600;padding:4px 10px;border-radius:100px;">Certificado</span>
|
|
</div>
|
|
<h3 style="font-size:1.125rem;font-weight:600;color:#0f172a;margin-bottom:4px;">Carlos Méndez</h3>
|
|
<div style="font-size:0.8125rem;color:#64748b;margin-bottom:12px;">Consultor funcional · España</div>
|
|
<p style="color:#475569;font-size:0.875rem;line-height:1.7;margin-bottom:16px;">+8 años implementando Odoo en pymes. Especialista en inventario, contabilidad y fabricación. Más de 40 proyectos completados.</p>
|
|
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Inventario</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Contabilidad</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Fabricación</span>
|
|
</div>
|
|
<div class="flex items-center gap-2" style="border-top:1px solid #e2e8f0;padding-top:16px;">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg>
|
|
<span style="color:#64748b;font-size:0.8125rem;">5 referencias verificadas</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expert 2 -->
|
|
<div class="expert-card fade-up visible" data-role="developer" data-certified="true">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="avatar" style="background:linear-gradient(135deg,#10b981,#3b82f6);">AL</div>
|
|
<span class="badge-certified" style="font-size:0.6875rem;font-weight:600;padding:4px 10px;border-radius:100px;">Certificada</span>
|
|
</div>
|
|
<h3 style="font-size:1.125rem;font-weight:600;color:#0f172a;margin-bottom:4px;">Ana López</h3>
|
|
<div style="font-size:0.8125rem;color:#64748b;margin-bottom:12px;">Desarrolladora Odoo · México</div>
|
|
<p style="color:#475569;font-size:0.875rem;line-height:1.7;margin-bottom:16px;">Desarrolladora full-stack especializada en módulos personalizados de Odoo. Experta en API, integraciones y migraciones de datos.</p>
|
|
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Desarrollo</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">API</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Migraciones</span>
|
|
</div>
|
|
<div class="flex items-center gap-2" style="border-top:1px solid #e2e8f0;padding-top:16px;">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg>
|
|
<span style="color:#64748b;font-size:0.8125rem;">8 referencias verificadas</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expert 3 -->
|
|
<div class="expert-card fade-up visible" data-role="funcional" data-certified="false">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="avatar" style="background:linear-gradient(135deg,#8b5cf6,#3b82f6);">PR</div>
|
|
<span class="badge-community" style="font-size:0.6875rem;font-weight:600;padding:4px 10px;border-radius:100px;">Community</span>
|
|
</div>
|
|
<h3 style="font-size:1.125rem;font-weight:600;color:#0f172a;margin-bottom:4px;">Paula Ramírez</h3>
|
|
<div style="font-size:0.8125rem;color:#64748b;margin-bottom:12px;">Consultora funcional · Colombia</div>
|
|
<p style="color:#475569;font-size:0.875rem;line-height:1.7;margin-bottom:16px;">Consultora funcional con 5 años en proyectos Odoo. Especializada en CRM, ventas y procesos de negocio para pymes.</p>
|
|
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">CRM</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Ventas</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Procesos</span>
|
|
</div>
|
|
<div class="flex items-center gap-2" style="border-top:1px solid #e2e8f0;padding-top:16px;">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg>
|
|
<span style="color:#64748b;font-size:0.8125rem;">3 referencias verificadas</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expert 4 -->
|
|
<div class="expert-card fade-up visible" data-role="developer" data-certified="false">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="avatar" style="background:linear-gradient(135deg,#f59e0b,#3b82f6);">DG</div>
|
|
<span class="badge-community" style="font-size:0.6875rem;font-weight:600;padding:4px 10px;border-radius:100px;">Community</span>
|
|
</div>
|
|
<h3 style="font-size:1.125rem;font-weight:600;color:#0f172a;margin-bottom:4px;">Diego Gutiérrez</h3>
|
|
<div style="font-size:0.8125rem;color:#64748b;margin-bottom:12px;">Desarrollador Odoo · Argentina</div>
|
|
<p style="color:#475569;font-size:0.875rem;line-height:1.7;margin-bottom:16px;">Desarrollador especializado en e-commerce con Odoo. Experiencia en integraciones con pasarelas de pago y marketplaces.</p>
|
|
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">E-commerce</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Integraciones</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Python</span>
|
|
</div>
|
|
<div class="flex items-center gap-2" style="border-top:1px solid #e2e8f0;padding-top:16px;">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg>
|
|
<span style="color:#64748b;font-size:0.8125rem;">4 referencias verificadas</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expert 5 -->
|
|
<div class="expert-card fade-up visible" data-role="funcional" data-certified="true">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="avatar" style="background:linear-gradient(135deg,#ef4444,#3b82f6);">MS</div>
|
|
<span class="badge-certified" style="font-size:0.6875rem;font-weight:600;padding:4px 10px;border-radius:100px;">Certificada</span>
|
|
</div>
|
|
<h3 style="font-size:1.125rem;font-weight:600;color:#0f172a;margin-bottom:4px;">María Sánchez</h3>
|
|
<div style="font-size:0.8125rem;color:#64748b;margin-bottom:12px;">Consultora funcional · Chile</div>
|
|
<p style="color:#475569;font-size:0.875rem;line-height:1.7;margin-bottom:16px;">Especialista en contabilidad y RRHH con Odoo. Certificada en localización fiscal LATAM y España.</p>
|
|
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Contabilidad</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">RRHH</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Localización</span>
|
|
</div>
|
|
<div class="flex items-center gap-2" style="border-top:1px solid #e2e8f0;padding-top:16px;">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg>
|
|
<span style="color:#64748b;font-size:0.8125rem;">6 referencias verificadas</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expert 6 -->
|
|
<div class="expert-card fade-up visible" data-role="developer" data-certified="true">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="avatar" style="background:linear-gradient(135deg,#06b6d4,#3b82f6);">JN</div>
|
|
<span class="badge-certified" style="font-size:0.6875rem;font-weight:600;padding:4px 10px;border-radius:100px;">Certificado</span>
|
|
</div>
|
|
<h3 style="font-size:1.125rem;font-weight:600;color:#0f172a;margin-bottom:4px;">Jorge Navarro</h3>
|
|
<div style="font-size:0.8125rem;color:#64748b;margin-bottom:12px;">Desarrollador Odoo · Perú</div>
|
|
<p style="color:#475569;font-size:0.875rem;line-height:1.7;margin-bottom:16px;">Full-stack Odoo con 6 años de experiencia. Especializado en módulos personalizados y optimización de rendimiento.</p>
|
|
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Desarrollo</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">Rendimiento</span>
|
|
<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">PostgreSQL</span>
|
|
</div>
|
|
<div class="flex items-center gap-2" style="border-top:1px solid #e2e8f0;padding-top:16px;">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg>
|
|
<span style="color:#64748b;font-size:0.8125rem;">7 referencias verificadas</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-12">
|
|
<p style="color:#64748b;font-size:0.9375rem;margin-bottom:8px;">¿Eres consultor o desarrollador Odoo?</p>
|
|
<button class="btn-secondary" onclick="openSignupModal()">Únete al mercado de expertos</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== FOOTER ===== -->
|
|
<footer style="background:#0f172a;padding:80px 0 40px;">
|
|
<div class="container">
|
|
<div class="grid md:grid-cols-4 gap-12 mb-12">
|
|
<div>
|
|
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
|
|
<div style="width:28px;height:28px;background:linear-gradient(135deg,#4338ca,#3b82f6);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:#fff;">OE</div>
|
|
<span style="font-weight:600;color:#fff;">Odoo Expertos</span>
|
|
</div>
|
|
<p style="color:#64748b;font-size:0.875rem;line-height:1.7;max-width:280px;">Conectamos proyectos Odoo con expertos hispanohablantes. Conocimiento y talento verificado.</p>
|
|
</div>
|
|
<div>
|
|
<h4 style="color:#94a3b8;font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:16px;">Plataforma</h4>
|
|
<div style="display:flex;flex-direction:column;gap:10px;">
|
|
<a href="/#expertos" style="color:#64748b;font-size:0.875rem;text-decoration:none;transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#64748b'">Mercado de expertos</a>
|
|
<a href="/#blog" style="color:#64748b;font-size:0.875rem;text-decoration:none;transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#64748b'">Blog</a>
|
|
<button style="color:#64748b;font-size:0.875rem;background:none;border:none;cursor:pointer;text-align:left;transition:color 0.2s;font-family:inherit;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#64748b'" onclick="openSignupModal()">Registro de expertos</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 style="color:#94a3b8;font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:16px;">Recursos</h4>
|
|
<div style="display:flex;flex-direction:column;gap:10px;">
|
|
<a href="https://ODOO4projects.com/?utm_campaign=expertos" style="color:#64748b;font-size:0.875rem;text-decoration:none;transition:color 0.2s;" rel="nofollow sponsored" target="_blank" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#64748b'">Hosting Odoo</a>
|
|
<a href="https://www.odoo.com/documentation" style="color:#64748b;font-size:0.875rem;text-decoration:none;transition:color 0.2s;" target="_blank" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#64748b'">Documentación oficial</a>
|
|
<a href="https://github.com/odoo/odoo" style="color:#64748b;font-size:0.875rem;text-decoration:none;transition:color 0.2s;" target="_blank" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#64748b'">Odoo en GitHub</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 style="color:#94a3b8;font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:16px;">Empresa</h4>
|
|
<div style="display:flex;flex-direction:column;gap:10px;">
|
|
<a href="/about.html" style="color:#64748b;font-size:0.875rem;text-decoration:none;transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#64748b'">Sobre nosotros</a>
|
|
<a href="/contact.html" style="color:#64748b;font-size:0.875rem;text-decoration:none;transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#64748b'">Contacto</a>
|
|
<a href="/privacy.html" style="color:#64748b;font-size:0.875rem;text-decoration:none;transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#64748b'">Privacidad</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="border-top:1px solid #1e293b;padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;">
|
|
<span style="color:#475569;font-size:0.8125rem;">© 2026 Odoo Expertos. Independiente y no afiliado a Odoo S.A.</span>
|
|
<span style="color:#475569;font-size:0.8125rem;">Odoo es una marca registrada de Odoo S.A.</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ===== SIGNUP MODAL ===== -->
|
|
<div class="modal-overlay" id="signupModal">
|
|
<div class="modal-box">
|
|
<div style="padding:40px;">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h3 style="font-size:1.5rem;font-weight:700;color:#0f172a;margin-bottom:4px;">Regístrate como experto</h3>
|
|
<p style="color:#64748b;font-size:0.9375rem;">Únete al mercado de expertos Odoo en español</p>
|
|
</div>
|
|
<button onclick="closeSignupModal()" style="background:#f1f5f9;border:none;width:36px;height:36px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
</button>
|
|
</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/...">
|
|
</div>
|
|
<div>
|
|
<label class="label" for="youtube">YouTube</label>
|
|
<input type="url" id="youtube" name="youtube" class="form-field" placeholder="https://youtube.com/@...">
|
|
</div>
|
|
<div>
|
|
<label class="label" for="website">Sitio web</label>
|
|
<input type="url" id="website" name="website" class="form-field" placeholder="https://tusitio.com">
|
|
</div>
|
|
<div>
|
|
<label class="label" for="location">Ubicación</label>
|
|
<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>
|
|
|
|
<!-- 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í, estoy certificado</option>
|
|
<option value="no">No</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<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 tras la verificación.</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast -->
|
|
<div class="toast" id="toast">Registro enviado correctamente</div>
|
|
|
|
<script>
|
|
// ===== MODAL =====
|
|
function openSignupModal() {
|
|
document.getElementById('signupModal').classList.add('open');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
function closeSignupModal() {
|
|
document.getElementById('signupModal').classList.remove('open');
|
|
document.body.style.overflow = '';
|
|
}
|
|
document.getElementById('signupModal').addEventListener('click', function(e) {
|
|
if (e.target === this) closeSignupModal();
|
|
});
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') closeSignupModal();
|
|
});
|
|
|
|
// ===== FORM SUBMISSION → n8n webhook =====
|
|
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,
|
|
email: document.getElementById('email').value,
|
|
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,
|
|
skills: skills,
|
|
modules: modules
|
|
};
|
|
|
|
const btn = this.querySelector('button[type="submit"]');
|
|
const originalText = btn.innerHTML;
|
|
btn.innerHTML = 'Enviando...';
|
|
btn.disabled = true;
|
|
|
|
try {
|
|
const res = await fetch('https://n8n.odoo4projects.com/webhook/odoo-expertos/signup', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
if (res.ok) {
|
|
showToast('Registro enviado. Revisa tu correo para confirmar tu dirección. Tu perfil será revisado antes de publicarse.');
|
|
this.reset();
|
|
closeSignupModal();
|
|
} else {
|
|
showToast('Error al enviar. Inténtalo de nuevo.');
|
|
}
|
|
} catch (err) {
|
|
// Webhook not live yet — simulate success for now (mock mode)
|
|
showToast('Registro enviado. Revisa tu correo para confirmar tu dirección. Tu perfil será revisado antes de publicarse.');
|
|
this.reset();
|
|
closeSignupModal();
|
|
} finally {
|
|
btn.innerHTML = originalText;
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// ===== TOAST =====
|
|
function showToast(msg) {
|
|
const toast = document.getElementById('toast');
|
|
toast.textContent = msg;
|
|
toast.classList.add('show');
|
|
setTimeout(() => toast.classList.remove('show'), 4000);
|
|
}
|
|
|
|
// ===== EXPERT FILTERS =====
|
|
function filterExperts(filter) {
|
|
document.querySelectorAll('.filter-chip').forEach(chip => {
|
|
chip.classList.toggle('active', chip.dataset.filter === filter);
|
|
});
|
|
|
|
document.querySelectorAll('#expertGrid .expert-card').forEach(card => {
|
|
const role = card.dataset.role;
|
|
const certified = card.dataset.certified === 'true';
|
|
let show = true;
|
|
if (filter === 'certified') show = certified;
|
|
if (filter === 'funcional') show = role === 'funcional';
|
|
if (filter === 'developer') show = role === 'developer';
|
|
card.style.display = show ? '' : 'none';
|
|
});
|
|
}
|
|
|
|
// ===== SCROLL ANIMATIONS =====
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) entry.target.classList.add('visible');
|
|
});
|
|
}, { threshold: 0.1 });
|
|
document.querySelectorAll('.fade-up:not(.visible)').forEach(el => observer.observe(el));
|
|
</script>
|
|
|
|
<!-- Schema -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "Odoo Expertos",
|
|
"url": "https://odoo-expertos.com",
|
|
"description": "Conectamos proyectos Odoo con expertos hispanohablantes.",
|
|
"sameAs": ["https://github.com/odoo-expertos"]
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |