farentsen
1f2ad8d235
- 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
92 lines
5.0 KiB
HTML
92 lines
5.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
{% if error %}
|
|
<div class="banner banner-error" role="alert">{{ error }}</div>
|
|
{% endif %}
|
|
|
|
<section class="hero">
|
|
<div class="hero-inner">
|
|
<p class="eyebrow">FactorIT · FIT</p>
|
|
<h1>Bootcamp Agentic AI con watsonx Orchestrate</h1>
|
|
<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">
|
|
<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>
|
|
<div class="stat"><span class="num">0</span><span class="label">Líneas de código</span></div>
|
|
<div class="stat"><span class="num">100%</span><span class="label">Hands-on</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="descargas" class="form-section">
|
|
<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>
|
|
<input type="text" id="nombre" name="nombre" minlength="2" maxlength="80" required>
|
|
</div>
|
|
<div class="field">
|
|
<label for="email">Email corporativo</label>
|
|
<input type="email" id="email" name="email" required>
|
|
</div>
|
|
<div class="field">
|
|
<label for="empresa">Empresa</label>
|
|
<input type="text" id="empresa" name="empresa" minlength="2" maxlength="100" required>
|
|
</div>
|
|
<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. 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
|
|
<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 %}
|