Update index.html

This commit is contained in:
oliver committed 2026-09-13 15:43:37 -03:00
1 parent 39977336e0
commit 496acee172
1 file changed
+7 -216
+7 -216
View File
@@ -203,45 +203,6 @@
.news-body a.more svg { width: 15px; height: 15px; transition: transform .25s; }
.news-card:hover a.more svg { transform: translateX(4px); }
/* ---------- Tips ---------- */
.tips-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: start; }
.tip-list { display: flex; flex-direction: column; gap: 14px; }
.tip {
background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px;
box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .2s;
}
.tip:hover { border-color: var(--violet-soft); transform: translateX(4px); }
.tip.open { border-color: var(--violet); box-shadow: var(--shadow); }
.tip-head { display: flex; align-items: center; gap: 14px; }
.tip-num {
width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center;
background: linear-gradient(135deg, var(--violet), var(--plum)); color: #fff; font-weight: 700; font-size: .85rem;
font-family: 'Sora';
}
.tip-head h4 { font-size: 1rem; flex: 1; font-weight: 600; }
.tip-head .chev { width: 18px; height: 18px; color: var(--muted); transition: transform .3s; flex: 0 0 18px; }
.tip.open .chev { transform: rotate(180deg); color: var(--violet); }
.tip-body { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.7,.2,1), margin .4s; }
.tip.open .tip-body { max-height: 260px; margin-top: 12px; }
.tip-body p { font-size: .88rem; color: var(--muted); }
.tip-body code {
background: #f3effa; color: var(--plum); padding: 2px 7px; border-radius: 6px; font-size: .82rem;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.tip-side {
background: linear-gradient(160deg, var(--plum-dark), var(--violet)); border-radius: 22px; padding: 34px;
color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.tip-side::before {
content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
background: rgba(255,255,255,.10); top: -70px; right: -50px;
}
.tip-side h3 { font-size: 1.5rem; margin-bottom: 14px; position: relative; }
.tip-side p { font-size: .94rem; color: rgba(255,255,255,.82); margin-bottom: 22px; position: relative; }
.tip-side ul { list-style: none; position: relative; display: flex; flex-direction: column; gap: 12px; }
.tip-side li { display: flex; gap: 11px; align-items: flex-start; font-size: .9rem; }
.tip-side li svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--mint); margin-top: 2px; }
/* ---------- Events ---------- */
.events { background: linear-gradient(180deg, transparent, #f4f0fb 40%, transparent); }
.event-list { display: flex; flex-direction: column; gap: 16px; }
@@ -267,28 +228,6 @@
.badge.presencial { background: rgba(213,43,30,.1); color: var(--py-red); }
.badge.taller { background: rgba(22,199,154,.14); color: var(--mint-dark); }
/* ---------- CTA / Join ---------- */
.join-box {
background: linear-gradient(140deg, var(--plum-dark) 0%, var(--violet) 62%, #7a5be8 100%);
border-radius: 28px; padding: 54px; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.join-box::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 80% 10%, rgba(22,199,154,.35), transparent 45%);
}
.join-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
.join-grid h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 14px; }
.join-grid p { color: rgba(255,255,255,.85); max-width: 520px; margin-bottom: 26px; }
.join-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-white { background: #fff; color: var(--plum); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.25); }
.btn-outline { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-outline:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.join-stats { display: flex; flex-direction: column; gap: 18px; }
.join-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 18px 22px; backdrop-filter: blur(6px); }
.join-stat strong { font-family: 'Sora'; font-size: 1.7rem; display: block; }
.join-stat span { font-size: .82rem; color: rgba(255,255,255,.8); }
/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 54px 0 30px; margin-top: 40px; background: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 40px; }
@@ -419,12 +358,10 @@
@media (max-width: 960px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
.hero-visual { height: 400px; max-width: 460px; margin: 0 auto; width: 100%; }
.tips-wrap { grid-template-columns: 1fr; }
.news-grid { grid-template-columns: repeat(2, 1fr); }
.state-grid { grid-template-columns: 1fr; }
.hack-grid { grid-template-columns: 1fr; }
.hack-targets { grid-template-columns: 1fr; }
.join-grid { grid-template-columns: 1fr; }
.foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
@@ -443,7 +380,6 @@
.event-date { padding-right: 14px; }
.event-date .d { font-size: 1.5rem; }
.event .badge { grid-column: 2; justify-self: start; margin-top: 6px; }
.join-box { padding: 34px 24px; }
.hack-box { padding: 34px 24px; }
.hack-form { padding: 24px 20px; }
.foot-grid { grid-template-columns: 1fr; }
@@ -475,13 +411,10 @@
</a>
<nav>
<ul id="menu">
<li><a class="link" href="#comunidad">Comunidad</a></li>
<li><a class="link" href="#estado">Estado Odoo</a></li>
<li><a class="link" href="#hackathon">Hackathon</a></li>
<li><a class="link" href="#noticias">Noticias</a></li>
<li><a class="link" href="#tips">Tips &amp; Trucos</a></li>
<li><a class="link" href="#eventos">Eventos</a></li>
<li><a class="link" href="#sumate">Sumate</a></li>
</ul>
</nav>
<div class="nav-cta">
@@ -507,11 +440,10 @@
Paraguay y en toda Latinoamérica.
</p>
<div class="hero-cta">
<a href="#sumate" class="btn btn-primary">
<a href="https://www.odoo-community.org/get-involved/become-a-member" class="btn btn-primary" target="_blank" rel="noopener">
Hacete miembro
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<a href="#tips" class="btn btn-ghost">Ver tips &amp; trucos</a>
</div>
<div class="hero-meta">
<div><strong data-count="20000" data-suffix="+">0</strong><span>Módulos OCA</span></div>
@@ -728,44 +660,6 @@
</div>
</section>
<!-- ============ COMMUNITY ============ -->
<section id="comunidad" class="community">
<div class="container">
<div class="sec-head center reveal">
<span class="kicker">Quiénes somos</span>
<h2>Una red local con impacto global</h2>
<p>
La OCA es una organización sin fines de lucro con sede en Suiza que reúne a
desarrolladores, consultores y usuarios de Odoo en todo el mundo. Desde Paraguay
aportamos módulos, traducciones y comunidad para toda la región.
</p>
</div>
<div class="news-grid" style="grid-template-columns:repeat(3,1fr);">
<div class="news-card reveal" style="overflow:visible;border:none;box-shadow:none;background:transparent;">
<div class="cf-ico ico-violet" style="width:52px;height:52px;border-radius:15px;">
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8"/></svg>
</div>
<h3 style="margin:16px 0 10px;font-size:1.2rem;">Colaboración abierta</h3>
<p style="color:var(--muted);font-size:.92rem;">Revisión entre pares, guías y sprints de código para mejorar el ecosistema Odoo.</p>
</div>
<div class="news-card reveal" style="overflow:visible;border:none;box-shadow:none;background:transparent;transition-delay:.1s">
<div class="cf-ico ico-mint" style="width:52px;height:52px;border-radius:15px;">
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20Z"/></svg>
</div>
<h3 style="margin:16px 0 10px;font-size:1.2rem;">Adaptación local</h3>
<p style="color:var(--muted);font-size:.92rem;">Localización paraguaya: facturación electrónica, SIFEN y procesos propios del país.</p>
</div>
<div class="news-card reveal" style="overflow:visible;border:none;box-shadow:none;background:transparent;transition-delay:.2s">
<div class="cf-ico ico-plum" style="width:52px;height:52px;border-radius:15px;">
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3 style="margin:16px 0 10px;font-size:1.2rem;">Formación y soporte</h3>
<p style="color:var(--muted);font-size:.92rem;">Webinars, sesiones de soporte para consultores y capacitaciones técnicas gratuitas.</p>
</div>
</div>
</div>
</section>
<!-- ============ NEWS ============ -->
<section id="noticias">
<div class="container">
@@ -798,7 +692,7 @@
<div class="news-date">Julio 2026</div>
<h3>Nueva Apps Store de la OCA ya está online</h3>
<p>La nueva plataforma de módulos es más que una tienda: integra búsqueda mejorada, perfiles y mucha más información para elegir el módulo correcto.</p>
<a class="more" href="#tips">Cómo aprovecharla <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
<a class="more" href="https://apps.odoo-community.org/" target="_blank" rel="noopener">Cómo aprovecharla <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</article>
@@ -837,7 +731,7 @@
<div class="news-date">Julio 2026</div>
<h3>Lista de módulos "Must Have" de Stock</h3>
<p>La OCA publicó su selección de módulos imprescindibles para inventario y productos, una base ideal para cualquier implementación.</p>
<a class="more" href="#tips">Ver selección <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
<a class="more" href="https://apps.odoo-community.org/" target="_blank" rel="noopener">Ver selección <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</article>
@@ -850,75 +744,13 @@
<div class="news-date">Siempre abierto</div>
<h3>Cómo contribuir tu primer módulo</h3>
<p>Forkeá, creá tu rama por versión, seguí las guías de estilo y abrí un Pull Request. La comunidad te acompaña en cada revisión.</p>
<a class="more" href="#sumate">Empezar ahora <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
<a class="more" href="https://github.com/OCA" target="_blank" rel="noopener">Empezar ahora <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</article>
</div>
</div>
</section>
<!-- ============ TIPS ============ -->
<section id="tips">
<div class="container">
<div class="sec-head reveal">
<span class="kicker">Tips &amp; Trucos</span>
<h2>Atajos que te ahorran horas</h2>
<p>Pequeños hábitos que marcan la diferencia al trabajar con módulos de la comunidad.</p>
</div>
<div class="tips-wrap">
<div class="tip-list reveal">
<div class="tip open" tabindex="0">
<div class="tip-head">
<span class="tip-num">01</span>
<h4>Elegí siempre la rama por versión</h4>
<svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</div>
<div class="tip-body"><p>Los repositorios de la OCA usan ramas como <code>17.0</code>, <code>18.0</code>. Nunca uses <code>master</code> en producción: cada versión de Odoo tiene su propia rama estable y probada.</p></div>
</div>
<div class="tip" tabindex="0">
<div class="tip-head">
<span class="tip-num">02</span>
<h4>Automatizá dependencias con oca_dependencies</h4>
<svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</div>
<div class="tip-body"><p>El archivo <code>oca_dependencies.txt</code> declara los repos de los que depende tu módulo. Herramientas como <em>oca_dependencies</em> clonan todo automáticamente y evitan "import errors" misteriosos.</p></div>
</div>
<div class="tip" tabindex="0">
<div class="tip-head">
<span class="tip-num">03</span>
<h4>Instalá con pip y no desde el zip</h4>
<svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</div>
<div class="tip-body"><p>Cloná el repositorio completo y agregá la carpeta al <code>addons_path</code>. Instalar un módulo aislado suele romper dependencias entre módulos del mismo repo.</p></div>
</div>
<div class="tip" tabindex="0">
<div class="tip-head">
<span class="tip-num">04</span>
<h4>Usá pre-commit antes de cada PR</h4>
<svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</div>
<div class="tip-body"><p>La configuración de <code>pre-commit</code> de la OCA valida formato, imports y estilo. Correrla localmente (o con el repo <code>oca-ci</code>) hace que tu PR se apruebe mucho más rápido.</p></div>
</div>
</div>
<aside class="tip-side reveal" style="transition-delay:.1s">
<h3>Reglas de oro de la comunidad</h3>
<p>Antes de escribir código nuevo, preguntate si ya existe. La mayoría de las veces, alguien de la OCA ya resolvió el problema.</p>
<ul>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg> Extendé, no reemplaces: usá <code style="color:#c6f3e6">_inherit</code> con criterio.</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg> Un módulo, una responsabilidad: evitá el "módulo Frankenstein".</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg> Documentá migraciones y respetá la licencia AGPL.</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg> Traducí: cada cadena en español suma para toda la región.</li>
</ul>
</aside>
</div>
</div>
</section>
<!-- ============ EVENTS ============ -->
<section id="eventos" class="events">
<div class="container">
@@ -972,32 +804,6 @@
</div>
</section>
<!-- ============ JOIN ============ -->
<section id="sumate">
<div class="container">
<div class="join-box reveal">
<div class="join-grid">
<div>
<h2>Sumate a la comunidad Odoo de Paraguay</h2>
<p>
No necesitás ser desarrollador: hay lugar para consultores, usuarios, traductores y
entusiastas del software libre. Ayudanos a que Odoo siga siendo abierto, local y de todos.
</p>
<div class="join-actions">
<a href="#noticias" class="btn btn-white">Quiero ser miembro</a>
<a href="#tips" class="btn btn-outline">Contribuir código</a>
</div>
</div>
<div class="join-stats">
<div class="join-stat"><strong>+20.000</strong><span>Módulos open source</span></div>
<div class="join-stat"><strong>62</strong><span>Países conectados</span></div>
<div class="join-stat"><strong>100%</strong><span>Licencia AGPL libre</span></div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
@@ -1019,19 +825,17 @@
<div>
<h5>Comunidad</h5>
<ul>
<li><a href="#comunidad">Quiénes somos</a></li>
<li><a href="#estado">Estado Odoo en Paraguay</a></li>
<li><a href="#hackathon">Hackathon 2026</a></li>
<li><a href="#sumate">Hacete miembro</a></li>
<li><a href="#tips">Contribuir código</a></li>
<li><a href="https://github.com/OCA" target="_blank" rel="noopener">Contribuir código</a></li>
<li><a href="#eventos">Eventos</a></li>
</ul>
</div>
<div>
<h5>Recursos</h5>
<ul>
<li><a href="#tips">Módulos Must Have</a></li>
<li><a href="#tips">Guías técnicas</a></li>
<li><a href="https://apps.odoo-community.org/" target="_blank" rel="noopener">Módulos Must Have</a></li>
<li><a href="https://odoo-community.org/" target="_blank" rel="noopener">Guías técnicas</a></li>
<li><a href="#noticias">Apps Store</a></li>
<li><a href="#noticias">Política de IA</a></li>
</ul>
@@ -1104,19 +908,6 @@
}, { threshold: 0.4 });
counters.forEach(c => cio.observe(c));
// Tips accordion
document.querySelectorAll('.tip').forEach(tip => {
const toggle = () => {
const wasOpen = tip.classList.contains('open');
document.querySelectorAll('.tip').forEach(t => t.classList.remove('open'));
if (!wasOpen) tip.classList.add('open');
};
tip.addEventListener('click', toggle);
tip.addEventListener('keydown', (ev) => {
if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); toggle(); }
});
});
// Year
document.getElementById('year').textContent = new Date().getFullYear();