Add community clans section to landing

ai/tasks/done/TASK-039-community-clans-section-on-landing.md

@@ -0,0 +1,62 @@
+# TASK-039-community-clans-section-on-landing
+
+## Goal
+Añadir una nueva sección en la página principal para mostrar clanes/comunidades aliadas o relacionadas, con sus logos y un enlace hacia sus respectivos Discords.
+
+## Context
+Además de los servidores y del histórico, se quiere que la home tenga una sección específica de clanes donde puedan verse logos representativos y un link hacia cada Discord. Esta sección debe integrarse en la landing sin romper su simplicidad ni convertirse en un directorio desordenado.
+
+## Steps
+1. Revisar la landing actual y decidir una ubicación razonable para la nueva sección de clanes.
+2. Diseñar una sección clara y visualmente coherente con el resto de la home.
+3. Preparar una estructura de datos simple y mantenible para los clanes mostrados, por ejemplo:
+   - nombre
+   - logo
+   - enlace Discord
+   - descripción breve opcional
+4. Implementar la sección mostrando al menos:
+   - logo de cada clan
+   - nombre
+   - botón o link claro hacia su Discord
+5. Mantener la solución suficientemente flexible para añadir o quitar clanes más adelante sin reescribir la sección completa.
+6. Asegurar que la sección funciona bien en escritorio y móvil.
+7. No incrustar widgets completos de Discord salvo que ya estén expresamente aprobados; en esta task basta con enlaces claros al servidor Discord.
+8. Mantener la landing limpia y visualmente consistente.
+9. Al completar la implementación:
+   - dejar el repositorio consistente
+   - hacer commit
+   - hacer push al remoto si el entorno lo permite
+
+## Files to Read First
+- AGENTS.md
+- frontend/index.html
+- frontend/assets/css/styles.css
+- frontend/assets/js/main.js
+- ai/repo-context.md
+
+## Expected Files to Modify
+- frontend/index.html
+- frontend/assets/css/styles.css
+- frontend/assets/js/main.js
+- opcionalmente un archivo de datos/config simple en frontend si mejora claridad, por ejemplo:
+  - frontend/assets/js/community-clans.js
+- opcionalmente assets de logos si se dejan preparados o referenciados correctamente
+
+## Constraints
+- No romper la landing actual.
+- No recargar la home con demasiada información.
+- No depender de páginas externas como iframes para esta sección.
+- No introducir frameworks nuevos.
+- No hacer cambios destructivos.
+- Mantener el trabajo centrado en una sección limpia, visual y fácil de mantener.
+
+## Validation
+- Existe una nueva sección de clanes en la página principal.
+- Cada clan mostrado tiene logo y enlace claro a su Discord.
+- La sección es coherente con el estilo de la landing.
+- La estructura permite mantener y ampliar la lista de clanes razonablemente.
+- Los cambios quedan committeados y se hace push al remoto si el entorno lo permite.
+
+## Change Budget
+- Preferir menos de 5 archivos modificados o creados.
+- Preferir menos de 240 líneas cambiadas.

frontend/assets/css/styles.css

@@ -743,6 +743,94 @@ h2 {
   text-align: center;
 }
 
+.clans-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
+  gap: 20px;
+}
+
+.clan-card {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  gap: 18px;
+  padding: 22px;
+  border: 1px solid rgba(159, 168, 141, 0.18);
+  border-radius: 22px;
+  background:
+    linear-gradient(180deg, rgba(28, 34, 25, 0.94), rgba(15, 18, 13, 0.98));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    var(--shadow-soft);
+}
+
+.clan-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 1px;
+  background: linear-gradient(90deg, rgba(210, 182, 118, 0.4), transparent 68%);
+  pointer-events: none;
+}
+
+.clan-card__brand {
+  display: grid;
+  grid-template-columns: minmax(92px, 112px) minmax(0, 1fr);
+  align-items: center;
+  gap: 18px;
+}
+
+.clan-card__logo {
+  min-height: 92px;
+  padding: 12px;
+  display: grid;
+  place-items: center;
+  border: 1px dashed rgba(183, 201, 125, 0.3);
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgba(19, 24, 16, 0.82), rgba(10, 13, 9, 0.66));
+}
+
+.clan-card__logo img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 84px;
+  object-fit: contain;
+}
+
+.clan-card__copy {
+  display: grid;
+  gap: 8px;
+}
+
+.clan-card__eyebrow {
+  margin: 0;
+  color: var(--accent-warm);
+  font-size: 0.68rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.clan-card__copy h3,
+.clan-card__copy p {
+  margin: 0;
+}
+
+.clan-card__copy h3 {
+  font-size: 1.08rem;
+  line-height: 1.4;
+}
+
+.clan-card__copy p:last-child {
+  color: var(--text-soft);
+  line-height: 1.65;
+}
+
+.clan-card__link {
+  width: fit-content;
+  min-width: 180px;
+}
+
 @media (max-width: 1120px) {
   .hero__brand {
     grid-template-columns: 1fr;
@@ -766,7 +854,8 @@ h2 {
 
 @media (max-width: 760px) {
   .servers-grid,
-  .servers-grid--section {
+  .servers-grid--section,
+  .clans-grid {
     grid-template-columns: 1fr;
   }
 }
@@ -853,6 +942,15 @@ h2 {
     grid-template-columns: 1fr;
   }
 
+  .clan-card__brand {
+    grid-template-columns: 1fr;
+    justify-items: start;
+  }
+
+  .clan-card__link {
+    width: 100%;
+  }
+
   .panel::before {
     left: 16px;
   }

frontend/assets/js/main.js

@@ -4,6 +4,18 @@ const SERVER_HISTORY_URLS = Object.freeze({
   "comunidad-hispana-01": "https://scoreboard.comunidadhll.es/games",
   "comunidad-hispana-02": "https://scoreboard.comunidadhll.es:5443/games",
 });
+const COMMUNITY_CLANS = Object.freeze([
+  {
+    name: "Comunidad Hispana HLL Vietnam",
+    badge: "Comunidad anfitriona",
+    description:
+      "Punto principal de reunion para escuadras, anuncios y acceso directo al Discord del proyecto.",
+    logoSrc: "./assets/img/logo.png",
+    logoAlt: "Logo de Comunidad Hispana HLL Vietnam",
+    discordUrl: "https://discord.com/invite/PedEqZ2Xsa",
+    discordLabel: "Abrir Discord",
+  },
+]);
 
 document.addEventListener("DOMContentLoaded", () => {
   console.info("HLL Vietnam frontend ready");
@@ -19,9 +31,11 @@ document.addEventListener("DOMContentLoaded", () => {
   const serversTitle = document.getElementById("servers-title");
   const serversList = document.getElementById("servers-list");
   const serversBadge = document.getElementById("servers-badge");
+  const communityClansList = document.getElementById("community-clans-list");
 
   updateBackendStatus(statusNode, "Backend comprobando", "status-chip--idle");
   setServersDataState(serversBadge, { timestampLabel: "" });
+  hydrateCommunityClans(communityClansList);
 
   let serverRefreshInFlight = false;
   const refreshServers = async () => {
@@ -227,6 +241,45 @@ function renderServerAction(server) {
   `;
 }
 
+function hydrateCommunityClans(listNode) {
+  if (!listNode) {
+    return;
+  }
+
+  listNode.innerHTML = COMMUNITY_CLANS.map((clan) => renderCommunityClanCard(clan)).join("");
+}
+
+function renderCommunityClanCard(clan) {
+  return `
+    <article class="clan-card">
+      <div class="clan-card__brand">
+        <div class="clan-card__logo">
+          <img
+            src="${escapeHtml(clan.logoSrc)}"
+            alt="${escapeHtml(clan.logoAlt)}"
+            width="1024"
+            height="1044"
+            decoding="async"
+          />
+        </div>
+        <div class="clan-card__copy">
+          <p class="clan-card__eyebrow">${escapeHtml(clan.badge)}</p>
+          <h3>${escapeHtml(clan.name)}</h3>
+          <p>${escapeHtml(clan.description)}</p>
+        </div>
+      </div>
+      <a
+        class="server-action-link clan-card__link"
+        href="${escapeHtml(clan.discordUrl)}"
+        target="_blank"
+        rel="noreferrer"
+      >
+        ${escapeHtml(clan.discordLabel)}
+      </a>
+    </article>
+  `;
+}
+
 function renderQuickFacts(items) {
   return `
     <div class="server-card__quickfacts">

frontend/index.html

@@ -164,6 +164,50 @@
             </div>
           </div>
         </section>
+
+        <section class="panel panel--clans" aria-labelledby="clans-title">
+          <div class="panel__shell">
+            <div class="panel__header">
+              <p class="eyebrow eyebrow--section">Clanes y comunidades</p>
+              <h2 id="clans-title">Red de comunidad</h2>
+            </div>
+            <p class="panel__intro">
+              Espacio para mantener visibles las comunidades y clanes con los que
+              compartimos actividad, eventos o coordinacion en Discord.
+            </p>
+            <div class="clans-grid" id="community-clans-list">
+              <article class="clan-card">
+                <div class="clan-card__brand">
+                  <div class="clan-card__logo">
+                    <img
+                      src="./assets/img/logo.png"
+                      alt="Logo de Comunidad Hispana HLL Vietnam"
+                      width="1024"
+                      height="1044"
+                      decoding="async"
+                    />
+                  </div>
+                  <div class="clan-card__copy">
+                    <p class="clan-card__eyebrow">Comunidad anfitriona</p>
+                    <h3>Comunidad Hispana HLL Vietnam</h3>
+                    <p>
+                      Punto principal de reunion para escuadras, anuncios y acceso
+                      directo al Discord del proyecto.
+                    </p>
+                  </div>
+                </div>
+                <a
+                  class="server-action-link clan-card__link"
+                  href="https://discord.com/invite/PedEqZ2Xsa"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Abrir Discord
+                </a>
+              </article>
+            </div>
+          </div>
+        </section>
       </main>
     </div>