diff --git a/app/frontend.py b/app/frontend.py index 0c1d025..19cc7be 100644 --- 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.", }, diff --git a/app/templates/base.html b/app/templates/base.html index 14b704e..52b181c 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -4,29 +4,32 @@ {% block title %}Bootcamp Agentic AI — watsonx Orchestrate | FactorIT{% endblock %} - + - + - +
- FactorIT - powered by IBM watsonx Orchestrate + FactorIT + + powered by IBM watsonx Orchestrate +
{% block content %}{% endblock %} diff --git a/app/templates/descargas.html b/app/templates/descargas.html index dc5cbe9..d2db11b 100644 --- a/app/templates/descargas.html +++ b/app/templates/descargas.html @@ -3,18 +3,29 @@ {% block content %}
-

¡Hola {{ nombre }}!

+

Hola {{ nombre }}

Acá tienes todo el material del bootcamp.

{% for d in downloads %}
-
{{ d.icon }}
+
+ {% if d.icon == 'code' %} + + {% elif d.icon == 'book' %} + + {% else %} + + {% endif %} +

{{ d.title }}

{{ d.description }}

{% if d.available %}{{ d.size_mb }} MB{% else %}Próximamente{% endif %}

{% if d.available %} - Descargar + + Descargar + + {% else %} No disponible {% endif %} diff --git a/app/templates/index.html b/app/templates/index.html index 8ea12fc..52fa7b3 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -7,24 +7,49 @@
-

FACTORIT · FIT

+

FactorIT · FIT

Bootcamp Agentic AI con watsonx Orchestrate

-

Construye tu primer agente de IA en 4 horas.

- Acceder al material → +

Diseña, construye y despliega tu primer agente de IA empresarial en cuatro horas.

+ + Acceder al material + +
-

¿Qué vas a construir?

-
-
⚙️

Tu primer agente

Conecta una API real a un agente conversacional sin escribir código.

-
📚

Multi-agente con RAG

Compón agentes especializados con base de conocimiento documental.

-
📊

Reportes y APIs

Genera reportes ejecutivos invocando endpoints en vivo.

+
+

¿Qué vas a construir?

+

Tres bloques prácticos para dominar el ciclo completo de desarrollo de agentes empresariales.

+
+
+
+ +
+

Tu primer agente

+

Conecta una API REST a un agente conversacional sin escribir una línea de código.

+
+
+
+ +
+

Multi-agente con RAG

+

Compón agentes especializados con base de conocimiento documental y orquestación dinámica.

+
+
+
+ +
+

Reportes y APIs

+

Genera reportes ejecutivos invocando endpoints en vivo y herramientas externas en tiempo real.

+
+

El taller en números

+

Una sesión intensiva, práctica y orientada a resultados.

4hDuración
6Módulos
@@ -34,8 +59,8 @@
-

Descarga todo el material

-

Registra tus datos para acceder al kit completo del bootcamp.

+

Descarga el material

+

Completa el formulario para acceder al kit completo del bootcamp.

@@ -49,15 +74,18 @@
-
+
- +
- +
{% endblock %} diff --git a/static/css/styles.css b/static/css/styles.css index 5a4db98..023c89c 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,109 +1,259 @@ :root { --navy: #0A1F44; + --navy-deep: #061330; --blue: #1E4FA8; - --cyan: #00B5D8; - --orange: #FF7A00; - --orange-hover: #E66A00; - --cream: #F5F7FA; - --text: #1A1A1A; - --muted: #5A6473; - --border: #D8DEE5; + --teal: #0E7490; + --accent: #B45309; + --accent-hover: #92400E; + --slate-900: #0F172A; + --slate-700: #334155; + --slate-600: #475569; + --slate-400: #94A3B8; + --slate-300: #CBD5E1; + --slate-200: #E2E8F0; + --slate-100: #F1F5F9; + --slate-50: #F8FAFC; + --white: #FFFFFF; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } -body { margin: 0; font-family: 'Inter', system-ui, sans-serif; color: var(--text); background: white; line-height: 1.6; } +body { + margin: 0; + font-family: 'Inter', system-ui, -apple-system, sans-serif; + color: var(--slate-900); + background: var(--white); + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} .site-header { display: flex; align-items: center; justify-content: space-between; - padding: 16px 32px; background: white; border-bottom: 1px solid var(--border); + padding: 18px 40px; background: var(--white); + border-bottom: 1px solid var(--slate-200); + position: sticky; top: 0; z-index: 100; + backdrop-filter: blur(8px); + background: rgba(255, 255, 255, 0.92); } +.site-header .brand { display: flex; align-items: center; } .site-header .brand img { display: block; } -.powered-by { color: var(--muted); font-size: 13px; } -.powered-by strong { color: var(--navy); } +.powered-by { + color: var(--slate-600); font-size: 13px; + display: flex; align-items: center; gap: 8px; + letter-spacing: 0.01em; +} +.powered-by strong { color: var(--navy); font-weight: 600; } +.powered-by .divider { width: 1px; height: 18px; background: var(--slate-300); display: inline-block; } .hero { - background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); - color: white; padding: 80px 32px; min-height: 80vh; display: flex; align-items: center; - position: relative; overflow: hidden; + background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, var(--blue) 100%); + color: var(--white); padding: 96px 40px; min-height: 78vh; + display: flex; align-items: center; position: relative; overflow: hidden; } .hero::before { - content: ''; position: absolute; top: -50px; right: -50px; width: 300px; height: 300px; - background: radial-gradient(circle, rgba(0, 181, 216, 0.15) 0%, transparent 70%); + content: ''; position: absolute; inset: 0; + background-image: + radial-gradient(circle at 80% 20%, rgba(14, 116, 144, 0.18) 0%, transparent 50%), + radial-gradient(circle at 20% 90%, rgba(30, 79, 168, 0.22) 0%, transparent 55%); pointer-events: none; } .hero::after { - content: ''; position: absolute; bottom: -80px; left: -80px; width: 400px; height: 400px; - background: radial-gradient(circle, rgba(255, 122, 0, 0.10) 0%, transparent 70%); + content: ''; position: absolute; inset: 0; + background-image: + linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); + background-size: 60px 60px; pointer-events: none; + mask-image: radial-gradient(circle at center, black 30%, transparent 80%); + -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%); +} +.hero-inner { max-width: 880px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } +.eyebrow { + color: var(--slate-300); font-weight: 600; font-size: 13px; + letter-spacing: 0.18em; margin: 0 0 20px; text-transform: uppercase; +} +.eyebrow::before, .eyebrow::after { + content: ''; display: inline-block; width: 24px; height: 1px; + background: var(--slate-400); vertical-align: middle; margin: 0 12px; +} +.hero h1 { + font-size: clamp(34px, 5vw, 60px); margin: 0 0 20px; + font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; +} +.subtitle { + font-size: 19px; color: var(--slate-300); + margin: 0 0 40px; font-weight: 400; max-width: 640px; + margin-left: auto; margin-right: auto; } -.hero-inner { max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } -.eyebrow { color: var(--cyan); font-weight: 700; letter-spacing: 2px; margin: 0 0 16px; } -.hero h1 { font-size: clamp(32px, 5vw, 56px); margin: 0 0 16px; font-weight: 800; line-height: 1.15; } -.subtitle { font-size: 20px; color: var(--cream); font-style: italic; margin: 0 0 32px; } -.btn { display: inline-block; padding: 14px 28px; border-radius: 8px; font-weight: 700; text-decoration: none; cursor: pointer; border: 0; font-size: 16px; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } -.btn-primary { background: var(--orange); color: white; box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3); } -.btn-primary:hover { background: var(--orange-hover); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 122, 0, 0.4); } -.btn-large { padding: 18px 36px; font-size: 18px; } -.btn-disabled { background: var(--border); color: var(--muted); cursor: not-allowed; } +.btn { + display: inline-flex; align-items: center; gap: 8px; + padding: 14px 28px; border-radius: 6px; font-weight: 600; + text-decoration: none; cursor: pointer; border: 0; font-size: 15px; + font-family: inherit; letter-spacing: 0.01em; + transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; +} +.btn svg { width: 18px; height: 18px; } +.btn-primary { + background: var(--accent); color: var(--white); + box-shadow: 0 1px 2px rgba(180, 83, 9, 0.2), 0 4px 12px rgba(180, 83, 9, 0.25); +} +.btn-primary:hover { + background: var(--accent-hover); transform: translateY(-1px); + box-shadow: 0 1px 2px rgba(146, 64, 14, 0.25), 0 6px 16px rgba(146, 64, 14, 0.3); +} +.btn-large { padding: 16px 34px; font-size: 16px; } +.btn-disabled { + background: var(--slate-200); color: var(--slate-600); cursor: not-allowed; + box-shadow: none; +} -.section-title { text-align: center; font-size: 32px; color: var(--navy); margin: 0 0 32px; } +.section-title { + text-align: center; font-size: 36px; color: var(--navy); + margin: 0 0 16px; font-weight: 700; letter-spacing: -0.015em; +} +.section-subtitle { + text-align: center; color: var(--slate-600); + margin: 0 auto 48px; max-width: 600px; +} .cards-section, .stats-section, .form-section, .descargas-section { - padding: 64px 32px; max-width: 1100px; margin: 0 auto; + padding: 96px 40px; max-width: 1180px; margin: 0 auto; } -.cards-section { background: var(--cream); max-width: none; } -.cards-section .section-title, .cards-section .cards { max-width: 1100px; margin-left: auto; margin-right: auto; } +.cards-section { background: var(--slate-50); max-width: none; border-top: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200); } +.cards-section .cards-inner { max-width: 1180px; margin: 0 auto; } -.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } -.card { background: white; padding: 32px; border-radius: 12px; box-shadow: 0 2px 8px rgba(10, 31, 68, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } -.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(10, 31, 68, 0.14); } -.card .icon { font-size: 36px; margin-bottom: 12px; } -.card h3 { color: var(--navy); margin: 0 0 8px; } -.card p { color: var(--muted); margin: 0; } +.cards { + display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 28px; +} +.card { + background: var(--white); padding: 36px; + border-radius: 10px; border: 1px solid var(--slate-200); + box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); + transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; +} +.card:hover { + transform: translateY(-3px); + box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10); + border-color: var(--slate-300); +} +.card .icon-wrap { + width: 48px; height: 48px; border-radius: 10px; + background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); + display: flex; align-items: center; justify-content: center; + margin-bottom: 20px; +} +.card .icon-wrap svg { width: 24px; height: 24px; color: var(--white); stroke-width: 1.75; } +.card h3 { + color: var(--navy); margin: 0 0 10px; + font-size: 18px; font-weight: 600; letter-spacing: -0.005em; +} +.card p { color: var(--slate-600); margin: 0; font-size: 15px; line-height: 1.65; } -.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; } -.stat { padding: 24px; } -.stat .num { display: block; font-size: 56px; font-weight: 800; color: var(--orange); line-height: 1; } -.stat .label { display: block; color: var(--muted); margin-top: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; } +.stats { + display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 32px; text-align: center; +} +.stat { padding: 24px 16px; border-left: 1px solid var(--slate-200); } +.stat:first-child { border-left: 0; } +.stat .num { + display: block; font-size: 56px; font-weight: 700; + color: var(--accent); line-height: 1; letter-spacing: -0.03em; + margin-bottom: 10px; +} +.stat .label { + display: block; color: var(--slate-600); + font-size: 12px; font-weight: 600; + text-transform: uppercase; letter-spacing: 0.1em; +} -.form-section { background: white; max-width: 600px; } -.form-intro { text-align: center; color: var(--muted); margin: 0 0 32px; } -.register-form { display: flex; flex-direction: column; gap: 20px; } -.field label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--navy); } +.form-section { background: var(--white); max-width: 580px; } +.form-intro { text-align: center; color: var(--slate-600); margin: 0 0 40px; font-size: 16px; } +.register-form { display: flex; flex-direction: column; gap: 22px; } +.field label { + display: block; font-weight: 600; margin-bottom: 8px; + color: var(--slate-900); font-size: 14px; +} .field input[type="text"], .field input[type="email"] { - width: 100%; padding: 12px 14px; border: 2px solid var(--border); border-radius: 8px; font-size: 16px; font-family: inherit; + width: 100%; padding: 12px 14px; + border: 1.5px solid var(--slate-200); border-radius: 6px; + font-size: 15px; font-family: inherit; + color: var(--slate-900); background: var(--white); + transition: border-color 0.15s ease, box-shadow 0.15s ease; } -.field input:focus { outline: none; border-color: var(--cyan); } -.field-checkbox { display: flex; gap: 12px; align-items: flex-start; } -.field-checkbox input { margin-top: 4px; } -.field-checkbox label { font-weight: 400; color: var(--muted); font-size: 14px; } +.field input:focus { + outline: none; border-color: var(--teal); + box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.1); +} +.field-checkbox { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: var(--slate-50); border-radius: 8px; border: 1px solid var(--slate-200); } +.field-checkbox input { margin-top: 3px; accent-color: var(--teal); width: 16px; height: 16px; } +.field-checkbox label { font-weight: 400; color: var(--slate-700); font-size: 13.5px; line-height: 1.55; margin: 0; } .hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } -.banner { padding: 16px 32px; text-align: center; } -.banner-error { background: #FFF1F0; color: #B0211A; border-bottom: 2px solid #B0211A; } +.banner { padding: 14px 32px; text-align: center; font-size: 14px; } +.banner-error { background: #FEF2F2; color: #991B1B; border-bottom: 1px solid #FECACA; } .descargas-section { text-align: center; } -.hello { color: var(--navy); font-size: 40px; margin: 0 0 8px; } -.hello-sub { color: var(--muted); margin: 0 0 48px; } -.download-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; } -.download-card { background: var(--cream); padding: 40px; border-radius: 16px; border: 2px solid transparent; transition: border-color 0.2s ease, transform 0.2s ease; } -.download-card:hover { border-color: var(--cyan); transform: translateY(-2px); } -.download-card .dl-icon { font-size: 56px; margin-bottom: 16px; } -.download-card h2 { color: var(--navy); margin: 0 0 8px; font-size: 24px; } -.download-card p { color: var(--muted); margin: 0 0 8px; } -.download-card .size { font-size: 13px; color: var(--muted); font-weight: 600; } +.hello { + color: var(--navy); font-size: 42px; margin: 0 0 12px; + font-weight: 700; letter-spacing: -0.02em; +} +.hello-sub { color: var(--slate-600); margin: 0 0 56px; font-size: 17px; } +.download-cards { + display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); + gap: 28px; text-align: left; +} +.download-card { + background: var(--white); padding: 36px; + border-radius: 12px; border: 1px solid var(--slate-200); + transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; +} +.download-card:hover { + border-color: var(--teal); + transform: translateY(-3px); + box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08); +} +.download-card .dl-icon-wrap { + width: 56px; height: 56px; border-radius: 12px; + background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); + display: flex; align-items: center; justify-content: center; + margin-bottom: 24px; +} +.download-card .dl-icon-wrap svg { width: 28px; height: 28px; color: var(--white); stroke-width: 1.75; } +.download-card h2 { + color: var(--navy); margin: 0 0 8px; + font-size: 22px; font-weight: 600; letter-spacing: -0.01em; +} +.download-card p { color: var(--slate-600); margin: 0 0 12px; font-size: 15px; line-height: 1.6; } +.download-card .size { + font-size: 12px; color: var(--slate-600); font-weight: 600; + text-transform: uppercase; letter-spacing: 0.08em; + margin: 0 0 20px; + display: inline-block; padding: 4px 10px; + background: var(--slate-100); border-radius: 4px; +} -.site-footer { background: var(--navy); color: white; padding: 32px; margin-top: 64px; } -.footer-inner { max-width: 1100px; margin: 0 auto; text-align: center; } -.footer-inner a { color: var(--cyan); text-decoration: none; } -.copyright { color: rgba(255, 255, 255, 0.5); font-size: 13px; margin-top: 16px; } +.site-footer { + background: var(--navy-deep); color: var(--slate-300); + padding: 48px 40px; +} +.footer-inner { max-width: 1180px; margin: 0 auto; text-align: center; } +.footer-inner p { margin: 4px 0; font-size: 14px; } +.footer-inner strong { color: var(--white); } +.footer-inner a { color: var(--slate-300); text-decoration: none; border-bottom: 1px solid var(--slate-600); transition: color 0.15s ease, border-color 0.15s ease; } +.footer-inner a:hover { color: var(--white); border-color: var(--slate-300); } +.copyright { color: var(--slate-400); font-size: 12px; margin-top: 20px !important; } @media (max-width: 768px) { - .hero { min-height: 70vh; padding: 48px 24px; } - .cards-section, .stats-section, .form-section, .descargas-section { padding: 48px 24px; } - .download-card { padding: 24px; } - .site-header { padding: 12px 20px; } + .site-header { padding: 14px 20px; } .powered-by { font-size: 11px; } + .powered-by .divider { display: none; } + .hero { min-height: 70vh; padding: 64px 24px; } + .cards-section, .stats-section, .form-section, .descargas-section { padding: 64px 24px; } + .section-title { font-size: 28px; } + .stat { border-left: 0; border-top: 1px solid var(--slate-200); padding-top: 24px; } + .stat:first-child { border-top: 0; } + .download-card { padding: 28px; } }