Oliver/odoo-expertos.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero: replace matching visual with grid of Spanish business professional photos

Browse Source
This commit is contained in:
Hermes Agent
2026-08-07 16:54:25 +00:00
parent 3d6cf77648
commit 815bd60575
1 changed files with 18 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+18 -54
View File
@@ -82,6 +82,7 @@
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float { animation: float 6s ease-in-out infinite; }
.float-delayed { animation: float 6s ease-in-out 2s infinite; }
</style>
</head>
<body>
@@ -140,62 +141,25 @@
</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>
<!-- Hero images: Spanish business professionals -->
<div style="margin-top:64px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;max-width:720px;margin-left:auto;margin-right:auto;">
<div style="border-radius:20px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.08);aspect-ratio:3/4;position:relative;" class="float">
<img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=400&h=533&fit=crop&crop=face" alt="Consultor Odoo" style="width:100%;height:100%;object-fit:cover;">
<div style="position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.7));padding:20px;">
<span style="color:#fff;font-weight:600;font-size:0.875rem;">Consultor ERP</span>
</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 style="border-radius:20px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.08);aspect-ratio:3/4;position:relative;margin-top:24px;" class="float-delayed">
<img src="https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?w=400&h=533&fit=crop&crop=face" alt="Desarrolladora Odoo" style="width:100%;height:100%;object-fit:cover;">
<div style="position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.7));padding:20px;">
<span style="color:#fff;font-weight:600;font-size:0.875rem;">Desarrolladora</span>
</div>
</div>
<div style="border-radius:20px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.08);aspect-ratio:3/4;position:relative;">
<img src="https://images.unsplash.com/photo-1552581234-26160f608093?w=400&h=533&fit=crop&crop=face" alt="Equipo Odoo" style="width:100%;height:100%;object-fit:cover;">
<div style="position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.7));padding:20px;">
<span style="color:#fff;font-weight:600;font-size:0.875rem;">Equipo técnico</span>
</div>
</div>
</div>
</div>