carlos/reformix-hackaton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Añade sección de vídeo demo + CTA en la landing B2B

Browse Source 
Debajo del hero, nueva sección #demo: título + placeholder de vídeo 16:9
(sustituible por iframe/video cuando lo haya) + CTA "Empezar ahora". El botón
"Ver una demo en vivo" del hero apunta aquí (se movió el id #demo del mock del
hero a esta sección). Copy añadido a COPY-GUIDE §2.

Aplicado en public/b2b.html (servido en / y /b2b) y en mvp/b2b/index.html.
Nota: ambos ficheros ya tenían el hero divergido (public con copy más nuevo);
no toco ese copy aquí.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Carlos Narro
2026-06-04 17:34:31 +02:00
parent 0b46de89f2
commit f9d112ecaa
3 changed files with 67 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
mvp/b2b/index.html
View File

@@ -1539,7 +1539,7 @@ h3, h4, h5, h6 {
</div>
<!-- Hero visual: panel de leads mock -->
<div class="hero-visual reveal" id="demo" aria-label="Vista previa del panel de leads">
<div class="hero-visual reveal" aria-label="Vista previa del panel de leads">
<div class="mock-bar">
<span class="mock-dot" style="background: var(--color-danger-500);"></span>
<span class="mock-dot" style="background: var(--color-warning-500);"></span>
@@ -1607,6 +1607,33 @@ h3, h4, h5, h6 {
</div>
</section>
<!-- ============================================
Demo en vídeo
============================================ -->
<section class="section" id="demo">
<div class="container">
<div class="section-head center reveal">
<p class="section-kicker">En 2 minutos</p>
<h2 class="section-title">Míralo funcionando <em>de principio a fin</em>.</h2>
<p class="section-lede">Te enseñamos cómo Reformix atiende a tu cliente, calcula el presupuesto orientativo y te lo deja en el panel — sin que tú levantes el teléfono.</p>
</div>
<div class="reveal" style="max-width: 900px; margin: 0 auto;">
<!-- Placeholder de vídeo: sustituir este bloque por un <iframe>/<video> cuando esté el vídeo. -->
<div style="position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-2xl); overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, var(--color-neutral-900), var(--color-neutral-950)); border: 1px solid var(--color-neutral-200); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);">
<span style="display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: var(--radius-full); background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.25);">
<svg width="30" height="30" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
</span>
<span style="color: rgba(255,255,255,0.85); font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase;">Vídeo demo · próximamente</span>
</div>
</div>
<div class="reveal" style="text-align: center; margin-top: var(--space-8);">
<a href="/signup" class="btn btn-primary btn-lg">Empezar ahora</a>
</div>
</div>
</section>
<!-- ============================================
Logo strip
============================================ -->