Blog moved to homepage: search, 2 rows of 3, pagination. Dedicated blog page now redirects to /#blog.
This commit is contained in:
Hermes Agent
+69
-30
@@ -170,45 +170,84 @@
|
||||
<!-- ===== 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 class="flex items-end justify-between flex-wrap gap-6 mb-8">
|
||||
<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>
|
||||
|
||||
<!-- Search -->
|
||||
<div style="position:relative;max-width:480px;margin-bottom:32px;">
|
||||
<svg style="position:absolute;left:16px;top:50%;transform:translateY(-50%);" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<input type="text" id="blogSearch" placeholder="Buscar artículos..." oninput="blogSearch(this.value)" style="width:100%;padding:12px 16px 12px 46px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;font-family:'Inter',sans-serif;font-size:0.9375rem;color:#0f172a;outline:none;transition:border-color 0.2s;" onfocus="this.style.borderColor='#4338ca'" onblur="this.style.borderColor='#e2e8f0'">
|
||||
</div>
|
||||
|
||||
<!-- Blog grid -->
|
||||
<div class="grid md:grid-cols-3 gap-6" id="blogGrid"></div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div id="blogPagination" style="display:flex;justify-content:center;gap:12px;margin-top:40px;"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// All blog articles data
|
||||
const allArticles = [
|
||||
{ slug:"oca-lanza-nueva-tienda-apps.html", cat:"Novedades", time:"4 min", title:"La OCA lanza su nueva tienda de apps Odoo", excerpt:"La Odoo Community Association (OCA) lanza su nuevo Apps Store. Una plataforma para descubrir módulos, contribuidores y servicios del ecosistema Odoo open source.", tag:"news" },
|
||||
{ slug:"implementar-odoo-erp-pyme.html", cat:"Guía", time:"15 min", title:"C\u00f3mo implementar Odoo en una pyme paso a paso", excerpt:"Gu\u00eda completa desde la planificaci\u00f3n hasta el despliegue en producci\u00f3n.", tag:"guide" },
|
||||
{ slug:"odoo-community-vs-enterprise.html", cat:"Comparativa", time:"12 min", title:"Odoo Community vs Enterprise: diferencias reales", excerpt:"\u00bfQu\u00e9 versi\u00f3n necesitas realmente? An\u00e1lisis detallado de costes y funcionalidades.", tag:"comparison" },
|
||||
{ slug:"odoo-crm-guia-completa.html", cat:"Tutorial", time:"10 min", title:"Odoo CRM: gu\u00eda completa para equipos comerciales", excerpt:"Gestiona leads, pipeline de ventas y automatizaciones con Odoo Community.", tag:"tutorial" },
|
||||
{ slug:"odoo-inventory-gestion-almacenes.html", cat:"Tutorial", time:"8 min", title:"Odoo Inventory: gu\u00eda completa para gestionar almacenes", excerpt:"Configuraci\u00f3n del m\u00f3dulo de inventario de Odoo Community: stocks, almacenes, movimientos y valoraci\u00f3n.", tag:"tutorial" },
|
||||
{ slug:"odoo-contabilidad-modulo-financiero.html", cat:"Accounting", time:"12 min", title:"Odoo Accounting: gu\u00eda completa del m\u00f3dulo financiero", excerpt:"Plan contable, facturaci\u00f3n, conciliaci\u00f3n bancaria e informes financieros en Odoo Community.", tag:"guide" },
|
||||
{ slug:"odoo-erp-open-source-alternativa.html", cat:"Comparativa", time:"10 min", title:"Odoo ERP: la alternativa open source a SAP y Sage", excerpt:"An\u00e1lisis comparativo de Odoo frente a SAP, Sage y Microsoft Dynamics. Costes y casos de uso.", tag:"comparison" },
|
||||
{ slug:"modulos-fabricacion-odoo-erp.html", cat:"Manufacturing", time:"11 min", title:"M\u00f3dulos de fabricaci\u00f3n en Odoo ERP: gu\u00eda pr\u00e1ctica", excerpt:"Gu\u00eda completa del m\u00f3dulo de fabricaci\u00f3n de Odoo Community. \u00d3rdenes de producci\u00f3n, listas de materiales.", tag:"guide" },
|
||||
{ slug:"guia-hosting-odoo-servidores.html", cat:"Infraestructura", time:"13 min", title:"Gu\u00eda completa de hosting para Odoo: c\u00f3mo elegir servidor", excerpt:"Todo sobre hosting para Odoo: servidores dedicados, VPS, cloud hosting.", tag:"guide" },
|
||||
{ slug:"como-elegir-erp-pequena-empresa.html", cat:"Gu\u00eda", time:"9 min", title:"C\u00f3mo elegir un ERP para tu peque\u00f1a empresa", excerpt:"Gu\u00eda pr\u00e1ctica para seleccionar el ERP adecuado para tu pyme.", tag:"guide" },
|
||||
{ slug:"mejores-modulos-odoo-community.html", cat:"Odoo Community", time:"10 min", title:"Los mejores m\u00f3dulos Odoo Community para empresas", excerpt:"Selecci\u00f3n de los m\u00f3dulos m\u00e1s potentes de Odoo Community para empresas.", tag:"guide" }
|
||||
];
|
||||
const perPage = 6;
|
||||
let currentPage = 1;
|
||||
let filteredArticles = [...allArticles];
|
||||
|
||||
const tagColors = { news:"rgba(99,102,241,0.1)", guide:"rgba(67,56,202,0.1)", comparison:"rgba(245,158,11,0.1)", tutorial:"rgba(16,185,129,0.1)" };
|
||||
const tagText = { news:"#6366f1", guide:"#4338ca", comparison:"#f59e0b", tutorial:"#10b981" };
|
||||
|
||||
function renderBlog() {
|
||||
const grid = document.getElementById('blogGrid');
|
||||
const pag = document.getElementById('blogPagination');
|
||||
const start = (currentPage - 1) * perPage;
|
||||
const page = filteredArticles.slice(start, start + perPage);
|
||||
const totalPages = Math.ceil(filteredArticles.length / perPage);
|
||||
|
||||
grid.innerHTML = page.map(a => `<a href="/blog/${a.slug}" 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:${tagColors[a.tag]||tagColors.guide};color:${tagText[a.tag]||tagText.guide};font-size:0.75rem;font-weight:500;padding:4px 10px;border-radius:100px;">${a.cat}</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;">${a.time}</span>
|
||||
</div>
|
||||
<h3 style="font-size:1.125rem;font-weight:600;color:#0f172a;margin-bottom:8px;line-height:1.4;">${a.title}</h3>
|
||||
<p style="color:#64748b;font-size:0.875rem;line-height:1.7;margin-bottom:16px;flex:1;">${a.excerpt}</p>
|
||||
<span style="color:#4338ca;font-size:0.875rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;">Leer m\u00e1s <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>`).join('');
|
||||
|
||||
if (totalPages <= 1) { pag.innerHTML = ''; return; }
|
||||
pag.innerHTML = Array.from({length:totalPages}, (_, i) => i+1).map(p =>
|
||||
`<button onclick="currentPage=${p};renderBlog()" style="padding:8px 18px;border-radius:10px;font-weight:600;font-size:0.875rem;border:1px solid ${p===currentPage?'#4338ca':'#e2e8f0'};background:${p===currentPage?'#4338ca':'#fff'};color:${p===currentPage?'#fff':'#475569'};cursor:pointer;transition:all 0.2s;">${p}</button>`
|
||||
).join('');
|
||||
}
|
||||
|
||||
function blogSearch(q) {
|
||||
const query = q.toLowerCase().trim();
|
||||
filteredArticles = query ? allArticles.filter(a =>
|
||||
a.title.toLowerCase().includes(query) || a.excerpt.toLowerCase().includes(query) || a.cat.toLowerCase().includes(query)
|
||||
) : [...allArticles];
|
||||
currentPage = 1;
|
||||
renderBlog();
|
||||
}
|
||||
|
||||
renderBlog();
|
||||
</script>
|
||||
|
||||
<!-- ===== EXPERT MARKET ===== -->
|
||||
<section id="expertos" style="padding:100px 0;background:#f1f5f9;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;">
|
||||
<div class="container">
|
||||
|
||||
Reference in New Issue
Block a user