feat(ui): paleta profesional + iconos SVG inline (sin emojis)

- Reemplaza emojis por iconos SVG estilo Lucide en cards landing y descargas - Paleta refinada: slate grays + navy + accent amber-700 (B45309) - Hero con grid pattern sutil y gradients radiales - Cards con sombras suaves y borders, hover lift - Header sticky con backdrop-filter - Tipografía Inter con tracking ajustado - Botones con flechas SVG inline
2026-05-13 03:12:59 +00:00
parent a062b45c51
commit 1f2ad8d235
5 changed files with 285 additions and 93 deletions
--- a/app/frontend.py
+++ b/app/frontend.py
@@ -22,13 +22,13 @@ templates = Jinja2Templates(directory=str(_TEMPLATES_DIR))
 DOWNLOADS = [
    {
        "filename": "taller-wox-tecnico.zip",
-        "icon": "🧩",
+        "icon": "code",
        "title": "Material técnico",
        "description": "Specs OpenAPI, configs y artefactos para importar a watsonx Orchestrate.",
    },
    {
        "filename": "taller-wox-funcional.zip",
-        "icon": "📚",
+        "icon": "book",
        "title": "Material funcional",
        "description": "Manual paso a paso del bootcamp y deck de slides.",
    },
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -4,29 +4,32 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}Bootcamp Agentic AI — watsonx Orchestrate | FactorIT{% endblock %}</title>
-  <meta name="description" content="Construye tu primer agente de IA en 4 horas con IBM watsonx Orchestrate. Material completo del bootcamp para descarga.">
+  <meta name="description" content="Construye tu primer agente de IA en cuatro horas con IBM watsonx Orchestrate. Material completo del bootcamp para descarga.">

  <meta property="og:title" content="Bootcamp Agentic AI — watsonx Orchestrate | FactorIT">
-  <meta property="og:description" content="Construye tu primer agente de IA en 4 horas con IBM watsonx Orchestrate.">
+  <meta property="og:description" content="Construye tu primer agente de IA en cuatro horas con IBM watsonx Orchestrate.">
  <meta property="og:url" content="https://taller-wox.fitlabs.dev/">

  <link rel="icon" href="/static/img/LogoFIT.png">
  <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@400;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/static/css/styles.css">
 </head>
 <body>
  <header class="site-header">
-    <a class="brand" href="/"><img src="/static/img/LogoFIT.png" alt="FactorIT" height="36"></a>
-    <span class="powered-by">powered by <strong>IBM watsonx Orchestrate</strong></span>
+    <a class="brand" href="/"><img src="/static/img/LogoFIT.png" alt="FactorIT" height="32"></a>
+    <span class="powered-by">
+      powered by <strong>IBM watsonx Orchestrate</strong>
+    </span>
  </header>

  {% block content %}{% endblock %}

  <footer class="site-footer">
    <div class="footer-inner">
-      <p><strong>FactorIT · FIT</strong> — Material del bootcamp · taller-wox.fitlabs.dev</p>
+      <p><strong>FactorIT · FIT</strong> — Material del bootcamp</p>
+      <p>taller-wox.fitlabs.dev</p>
      <p class="copyright">© 2026 FactorIT — Todos los derechos reservados</p>
    </div>
  </footer>
--- a/app/templates/descargas.html
+++ b/app/templates/descargas.html
@@ -3,18 +3,29 @@

 {% block content %}
 <section class="descargas-section">
-  <h1 class="hello">¡Hola {{ nombre }}!</h1>
+  <h1 class="hello">Hola {{ nombre }}</h1>
  <p class="hello-sub">Acá tienes todo el material del bootcamp.</p>

  <div class="download-cards">
    {% for d in downloads %}
    <article class="download-card">
-      <div class="dl-icon">{{ d.icon }}</div>
+      <div class="dl-icon-wrap">
+        {% if d.icon == 'code' %}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+        {% elif d.icon == 'book' %}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
+        {% else %}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+        {% endif %}
+      </div>
      <h2>{{ d.title }}</h2>
      <p>{{ d.description }}</p>
      <p class="size">{% if d.available %}{{ d.size_mb }} MB{% else %}Próximamente{% endif %}</p>
      {% if d.available %}
-      <a class="btn btn-primary" href="/download/{{ d.filename }}?token={{ token }}">Descargar</a>
+      <a class="btn btn-primary" href="/download/{{ d.filename }}?token={{ token }}">
+        Descargar
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+      </a>
      {% else %}
      <span class="btn btn-disabled" title="Archivo aún no disponible">No disponible</span>
      {% endif %}
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -7,24 +7,49 @@

 <section class="hero">
  <div class="hero-inner">
-    <p class="eyebrow">FACTORIT · FIT</p>
+    <p class="eyebrow">FactorIT · FIT</p>
    <h1>Bootcamp Agentic AI con watsonx Orchestrate</h1>
-    <p class="subtitle">Construye tu primer agente de IA en 4 horas.</p>
-    <a class="btn btn-primary" href="#descargas">Acceder al material →</a>
+    <p class="subtitle">Diseña, construye y despliega tu primer agente de IA empresarial en cuatro horas.</p>
+    <a class="btn btn-primary btn-large" href="#descargas">
+      Acceder al material
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+    </a>
  </div>
 </section>

 <section class="cards-section">
-  <h2 class="section-title">¿Qué vas a construir?</h2>
-  <div class="cards">
-    <article class="card"><div class="icon">⚙️</div><h3>Tu primer agente</h3><p>Conecta una API real a un agente conversacional sin escribir código.</p></article>
-    <article class="card"><div class="icon">📚</div><h3>Multi-agente con RAG</h3><p>Compón agentes especializados con base de conocimiento documental.</p></article>
-    <article class="card"><div class="icon">📊</div><h3>Reportes y APIs</h3><p>Genera reportes ejecutivos invocando endpoints en vivo.</p></article>
+  <div class="cards-inner">
+    <h2 class="section-title">¿Qué vas a construir?</h2>
+    <p class="section-subtitle">Tres bloques prácticos para dominar el ciclo completo de desarrollo de agentes empresariales.</p>
+    <div class="cards">
+      <article class="card">
+        <div class="icon-wrap">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="2" x2="9" y2="4"/><line x1="15" y1="2" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="22"/><line x1="15" y1="20" x2="15" y2="22"/><line x1="20" y1="9" x2="22" y2="9"/><line x1="20" y1="14" x2="22" y2="14"/><line x1="2" y1="9" x2="4" y2="9"/><line x1="2" y1="14" x2="4" y2="14"/></svg>
+        </div>
+        <h3>Tu primer agente</h3>
+        <p>Conecta una API REST a un agente conversacional sin escribir una línea de código.</p>
+      </article>
+      <article class="card">
+        <div class="icon-wrap">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
+        </div>
+        <h3>Multi-agente con RAG</h3>
+        <p>Compón agentes especializados con base de conocimiento documental y orquestación dinámica.</p>
+      </article>
+      <article class="card">
+        <div class="icon-wrap">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="3" y1="20" x2="21" y2="20"/></svg>
+        </div>
+        <h3>Reportes y APIs</h3>
+        <p>Genera reportes ejecutivos invocando endpoints en vivo y herramientas externas en tiempo real.</p>
+      </article>
+    </div>
  </div>
 </section>

 <section class="stats-section">
  <h2 class="section-title">El taller en números</h2>
+  <p class="section-subtitle">Una sesión intensiva, práctica y orientada a resultados.</p>
  <div class="stats">
    <div class="stat"><span class="num">4h</span><span class="label">Duración</span></div>
    <div class="stat"><span class="num">6</span><span class="label">Módulos</span></div>
@@ -34,8 +59,8 @@
 </section>

 <section id="descargas" class="form-section">
-  <h2 class="section-title">Descarga todo el material</h2>
-  <p class="form-intro">Registra tus datos para acceder al kit completo del bootcamp.</p>
+  <h2 class="section-title">Descarga el material</h2>
+  <p class="form-intro">Completa el formulario para acceder al kit completo del bootcamp.</p>
  <form class="register-form" method="post" action="/register" autocomplete="on">
    <div class="field">
      <label for="nombre">Nombre completo</label>
@@ -49,15 +74,18 @@
      <label for="empresa">Empresa</label>
      <input type="text" id="empresa" name="empresa" minlength="2" maxlength="100" required>
    </div>
-    <div class="field field-checkbox">
+    <div class="field-checkbox">
      <input type="checkbox" id="consentimiento" name="consentimiento" required>
-      <label for="consentimiento">Acepto que FactorIT use mis datos para enviarme información del bootcamp y comunicaciones futuras. No spam — solo lo importante.</label>
+      <label for="consentimiento">Acepto que FactorIT use mis datos para enviarme información del bootcamp y comunicaciones futuras. Sin spam — solo lo importante.</label>
    </div>
    <div class="hp-field" aria-hidden="true">
      <label for="website">Website</label>
      <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
    </div>
-    <button type="submit" class="btn btn-primary btn-large">Acceder al material</button>
+    <button type="submit" class="btn btn-primary btn-large">
+      Acceder al material
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+    </button>
  </form>
 </section>
 {% endblock %}