Initial landing page commit
This commit is contained in:
+760
@@ -0,0 +1,760 @@
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cirux - Automatiza la Atención a tus Pacientes</title>
|
||||
<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=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Questrial&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav-fixed" id="navbar">
|
||||
<div class="container nav-container">
|
||||
<a href="#" class="logo">
|
||||
<span class="logo">
|
||||
<img src="media/logo-cirux-blanco.png" width="170" />
|
||||
</span>
|
||||
</a>
|
||||
<div class="nav-links" id="navLinks">
|
||||
<a href="#funciona" class="nav-link">Cómo funciona</a>
|
||||
<a href="#dolores" class="nav-link"
|
||||
>Problemas que resolvemos</a
|
||||
>
|
||||
<a href="#beneficios" class="nav-link">Beneficios</a>
|
||||
<a href="#demo" class="nav-link">Demo</a>
|
||||
</div>
|
||||
<a href="#cta" class="btn btn-primary nav-cta"
|
||||
>Agendar demo gratuita</a
|
||||
>
|
||||
<button
|
||||
class="mobile-menu-btn"
|
||||
id="mobileMenuBtn"
|
||||
aria-label="Abrir menú"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="hero" id="inicio">
|
||||
<div class="hero-bg-decoration"></div>
|
||||
<div class="container hero-container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<span class="badge-dot"></span>
|
||||
Software para cirujanos estéticos y reconstructivos
|
||||
</div>
|
||||
<h1 class="hero-title">
|
||||
Deja de perder pacientes por<br />
|
||||
<span class="text-green">falta de seguimiento</span>
|
||||
</h1>
|
||||
<p class="hero-description">
|
||||
Cirux automatiza la atención post-operatoria,
|
||||
recordatorios de citas y comunicación con pacientes. Los
|
||||
cirujanos que usan Cirux recuperan hasta un
|
||||
<strong>40% de pacientes</strong> que antes se perdían
|
||||
en el proceso.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#cta" class="btn btn-primary btn-lg">
|
||||
Quiero una demo gratuita
|
||||
</a>
|
||||
<a href="#funciona" class="btn btn-outline btn-lg">
|
||||
Ver cómo funciona
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="video-wrapper">
|
||||
<div class="video-container">
|
||||
<video
|
||||
id="heroVideo"
|
||||
poster="https://images.unsplash.com/photo-1551076805-e1869033e561?w=1280&h=720&fit=crop"
|
||||
muted
|
||||
loop
|
||||
playsinline
|
||||
>
|
||||
<source
|
||||
src="https://cdn.coverr.co/videos/coverr-a-doctor-checking-on-a-patient-4867/1080p.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
<div class="video-overlay" id="videoOverlay">
|
||||
<button
|
||||
class="play-btn"
|
||||
id="playBtn"
|
||||
aria-label="Reproducir video"
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</button>
|
||||
<p class="video-caption">
|
||||
Mira cómo Cirux transforma tu consulta en 90
|
||||
segundos
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-float-card card-pos-1">
|
||||
<div class="float-icon">✓</div>
|
||||
<div>
|
||||
<div class="float-title">Cita confirmada</div>
|
||||
<div class="float-sub">
|
||||
Paciente notificado por WhatsApp
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-float-card card-pos-2">
|
||||
<div class="float-icon">♥</div>
|
||||
<div>
|
||||
<div class="float-title">
|
||||
Seguimiento automático
|
||||
</div>
|
||||
<div class="float-sub">
|
||||
Día 3 post-operatorio
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section how-it-works" id="funciona">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">Cómo funciona</span>
|
||||
<h2 class="section-title">
|
||||
Tu consulta automatizada<br />en
|
||||
<span class="text-green">3 pasos</span>
|
||||
</h2>
|
||||
<p class="section-desc">
|
||||
Olvídate de los mensajes no respondidos, los olvidos de
|
||||
citas y los pacientes sin seguimiento. Cirux trabaja
|
||||
24/7 por ti.
|
||||
</p>
|
||||
</div>
|
||||
<div class="steps-grid">
|
||||
<div class="step-card">
|
||||
<div class="step-number">01</div>
|
||||
<div class="step-icon">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<rect
|
||||
x="3"
|
||||
y="4"
|
||||
width="18"
|
||||
height="18"
|
||||
rx="2"
|
||||
/>
|
||||
<path d="M16 2v4M8 2v4M3 10h18" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="step-title">Conecta tu agenda</h3>
|
||||
<p class="step-desc">
|
||||
Sincroniza tu calendario existente (Google Calendar,
|
||||
Outlook o tu sistema actual). En 5 minutos está
|
||||
listo. Sin cambiar tus herramientas.
|
||||
</p>
|
||||
<div class="step-features">
|
||||
<span class="step-feature"
|
||||
>Sincronización bidireccional</span
|
||||
>
|
||||
<span class="step-feature">Sin interrupciones</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-card">
|
||||
<div class="step-number">02</div>
|
||||
<div class="step-icon">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="step-title">
|
||||
Configura tu asistente virtual
|
||||
</h3>
|
||||
<p class="step-desc">
|
||||
Personaliza los mensajes de confirmación,
|
||||
recordatorios y seguimiento post-operatorio. Usa
|
||||
plantillas probadas o crea las tuyas con tu voz
|
||||
profesional.
|
||||
</p>
|
||||
<div class="step-features">
|
||||
<span class="step-feature"
|
||||
>WhatsApp, SMS y Email</span
|
||||
>
|
||||
<span class="step-feature"
|
||||
>Plantillas médicas validadas</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-card">
|
||||
<div class="step-number">03</div>
|
||||
<div class="step-icon">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M12 20V10M18 20V4M6 20v-4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="step-title">Mide y mejora</h3>
|
||||
<p class="step-desc">
|
||||
Dashboard con métricas en tiempo real: tasa de
|
||||
confirmación, pacientes recuperados, ingresos
|
||||
adicionales por re-agendamiento. Todo lo que
|
||||
necesitas saber.
|
||||
</p>
|
||||
<div class="step-features">
|
||||
<span class="step-feature"
|
||||
>Reportes automáticos semanales</span
|
||||
>
|
||||
<span class="step-feature"
|
||||
>ROI visible al instante</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section pain-points" id="dolores">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">Problemas que resolvemos</span>
|
||||
<h2 class="section-title">
|
||||
¿Te suena <span class="text-green">familiar?</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="pain-grid">
|
||||
<div class="pain-card">
|
||||
<div class="pain-icon pain-icon-red">
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M18 6L6 18M6 6l12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="pain-title">
|
||||
Citas que no aparecen (no-shows)
|
||||
</h3>
|
||||
<p class="pain-desc">
|
||||
El 23% de tus citas se pierden porque el paciente
|
||||
olvida o no confirma. Eso son horas de quirófano
|
||||
vacías e ingresos que se evaporan.
|
||||
</p>
|
||||
<div class="pain-solution">
|
||||
<span class="solution-tag">Solución Cirux</span>
|
||||
<p>
|
||||
Recordatorios automáticos por WhatsApp 24h, 2h y
|
||||
30min antes. Confirmación con un solo clic.
|
||||
Reducción del no-show hasta un 65%.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pain-card">
|
||||
<div class="pain-icon pain-icon-red">
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="pain-title">
|
||||
Mensajes sin responder = pacientes perdidos
|
||||
</h3>
|
||||
<p class="pain-desc">
|
||||
Atiendes cirugías todo el día. Mientras tanto, 8 de
|
||||
cada 10 mensajes de pacientes potenciales quedan sin
|
||||
respuesta. Muchos no vuelven a responder.
|
||||
</p>
|
||||
<div class="pain-solution">
|
||||
<span class="solution-tag">Solución Cirux</span>
|
||||
<p>
|
||||
Asistente virtual que responde WhatsApp al
|
||||
instante. Agenda citas automáticamente, responde
|
||||
preguntas frecuentes y escala lo complejo a tu
|
||||
equipo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pain-card">
|
||||
<div class="pain-icon pain-icon-red">
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"
|
||||
/>
|
||||
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="pain-title">
|
||||
Seguimiento post-operatorio inexistente
|
||||
</h3>
|
||||
<p class="pain-desc">
|
||||
El 60% de los cirujanos admite no poder hacer
|
||||
seguimiento sistemático a todos sus pacientes.
|
||||
Resultado: complicaciones detectadas tarde y reseñas
|
||||
negativas.
|
||||
</p>
|
||||
<div class="pain-solution">
|
||||
<span class="solution-tag">Solución Cirux</span>
|
||||
<p>
|
||||
Protocolos automáticos de seguimiento: día 1, 3,
|
||||
7, 14 y 30. Encuestas de satisfacción. Alertas
|
||||
si un paciente reporta un síntoma preocupante.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pain-card">
|
||||
<div class="pain-icon pain-icon-red">
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 6v6l4 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="pain-title">
|
||||
El equipo administrativo desbordado
|
||||
</h3>
|
||||
<p class="pain-desc">
|
||||
Tu recepcionista pasa el 70% del tiempo confirmando
|
||||
citas y respondiendo "¿a qué hora era?". Tareas de
|
||||
bajo valor que queman al equipo.
|
||||
</p>
|
||||
<div class="pain-solution">
|
||||
<span class="solution-tag">Solución Cirux</span>
|
||||
<p>
|
||||
Automatiza el 85% de la comunicación repetitiva.
|
||||
Tu equipo se libera para atender lo que
|
||||
realmente importa: la experiencia del paciente
|
||||
presencial.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pain-card">
|
||||
<div class="pain-icon pain-icon-red">
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"
|
||||
/>
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path
|
||||
d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="pain-title">
|
||||
Pacientes que no vuelven para retoques
|
||||
</h3>
|
||||
<p class="pain-desc">
|
||||
El valor de vida de un paciente satisfecho es 5x su
|
||||
primera cirugía. Pero sin recordatorios, el 70% no
|
||||
regresa para procedimientos adicionales.
|
||||
</p>
|
||||
<div class="pain-solution">
|
||||
<span class="solution-tag">Solución Cirux</span>
|
||||
<p>
|
||||
Campañas de fidelización automáticas:
|
||||
recordatorios de controles anuales, ofertas
|
||||
personalizadas para retoques, y programa de
|
||||
referidos automatizado.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pain-card">
|
||||
<div class="pain-icon pain-icon-red">
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="pain-title">Reputación online vulnerable</h3>
|
||||
<p class="pain-desc">
|
||||
Un solo paciente insatisfecho por falta de
|
||||
comunicación puede destruir tu reputación en Google
|
||||
con una reseña de 1 estrella.
|
||||
</p>
|
||||
<div class="pain-solution">
|
||||
<span class="solution-tag">Solución Cirux</span>
|
||||
<p>
|
||||
Solicitud automática de reseñas a pacientes
|
||||
satisfechos. Detección temprana de
|
||||
insatisfacción antes de que llegue a internet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section benefits" id="beneficios">
|
||||
<div class="container">
|
||||
<div class="benefits-layout">
|
||||
<div class="benefits-content">
|
||||
<span class="section-tag">Beneficios</span>
|
||||
<h2 class="section-title">
|
||||
Diseñado específicamente para<span
|
||||
class="text-green"
|
||||
>
|
||||
cirujanos</span
|
||||
>
|
||||
</h2>
|
||||
<p class="section-desc">
|
||||
No es un CRM genérico pintado de blanco. Cirux
|
||||
entiende el ciclo completo del paciente quirúrgico:
|
||||
desde la primera consulta hasta los controles de
|
||||
años.
|
||||
</p>
|
||||
<div class="benefit-list">
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-check">✓</div>
|
||||
<div>
|
||||
<h4>Menos interrupciones, más cirugías</h4>
|
||||
<p>
|
||||
Tu asistente virtual atiende consultas
|
||||
mientras operas. No más teléfono sonando
|
||||
en medio de una valoración.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-check">✓</div>
|
||||
<div>
|
||||
<h4>Pacientes más tranquilos y seguros</h4>
|
||||
<p>
|
||||
El seguimiento proactivo reduce la
|
||||
ansiedad post-operatoria y las llamadas
|
||||
de emergencia innecesarias a tu celular
|
||||
personal.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-check">✓</div>
|
||||
<div>
|
||||
<h4>Auditoría y cumplimiento médico</h4>
|
||||
<p>
|
||||
Toda la comunicación documentada,
|
||||
trazable y segura. Cumple con normativas
|
||||
de protección de datos médicos Ley 1581
|
||||
de 2012, Ley 1712 de 2020.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-check">✓</div>
|
||||
<div>
|
||||
<h4>Ingresos predecibles y crecientes</h4>
|
||||
<p>
|
||||
Reduce el abandono de pacientes, aumenta
|
||||
la tasa de re-agendamiento y activa el
|
||||
boca a boca digital con referidos
|
||||
automatizados.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefits-visual">
|
||||
<div class="benefits-image-wrapper">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=800&h=1000&fit=crop"
|
||||
alt="Doctor usando tablet para atención al paciente"
|
||||
/>
|
||||
<div class="benefits-float-card">
|
||||
<div class="bfc-header">
|
||||
<span class="bfc-dot"></span>
|
||||
<span class="bfc-label"
|
||||
>Paciente: María G.</span
|
||||
>
|
||||
<span class="bfc-status"
|
||||
>Rinoplastía - Día 5</span
|
||||
>
|
||||
</div>
|
||||
<div class="bfc-messages">
|
||||
<div class="bfc-msg bfc-msg-in">
|
||||
<div class="bfc-msg-text">
|
||||
¿Es normal que tenga un poco de
|
||||
hinchazón todavía?
|
||||
</div>
|
||||
<div class="bfc-msg-time">09:15</div>
|
||||
</div>
|
||||
<div class="bfc-msg bfc-msg-out">
|
||||
<div class="bfc-msg-text">
|
||||
Sí María, es completamente normal.
|
||||
La hinchazón pica alrededor del día
|
||||
7-10. ¿Tienes dolor?
|
||||
</div>
|
||||
<div class="bfc-msg-time">09:16</div>
|
||||
</div>
|
||||
<div class="bfc-msg bfc-msg-in">
|
||||
<div class="bfc-msg-text">
|
||||
No, solo un poco de presión. Gracias
|
||||
doctor.
|
||||
</div>
|
||||
<div class="bfc-msg-time">09:18</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bfc-note">
|
||||
Asistente Cirux resolvió en 3 minutos. Sin
|
||||
interrumpir tu mañana.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section cta-section" id="cta">
|
||||
<div class="cta-bg"></div>
|
||||
<div class="container">
|
||||
<div class="cta-box">
|
||||
<h2 class="cta-title">
|
||||
Tu próximo paciente está<br />escribiéndote ahora mismo
|
||||
</h2>
|
||||
<p class="cta-desc">
|
||||
Cada minuto que pasa sin responder es un paciente que
|
||||
puede ir con tu competencia. Agenda una demo gratuita de
|
||||
20 minutos y descubre cuántos pacientes estás dejando
|
||||
escapar.
|
||||
</p>
|
||||
<div class="cta-form-wrapper">
|
||||
<form
|
||||
class="cta-form"
|
||||
id="ctaForm"
|
||||
action="#"
|
||||
method="POST"
|
||||
>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="nombre">Tu Nombre</label>
|
||||
<input
|
||||
type="text"
|
||||
id="nombre"
|
||||
name="nombre"
|
||||
required
|
||||
placeholder="Dr. Juan Pérez"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="telefono">WhatsApp</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="telefono"
|
||||
name="telefono"
|
||||
required
|
||||
placeholder="+57 300 000 0000"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-lg btn-full"
|
||||
>
|
||||
Agendar mi demo gratuita
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
<div class="cta-guarantee">
|
||||
<div class="guarantee-item">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M22 11.08V12a10 10 0 11-5.93-9.14"
|
||||
/>
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
Demo sin compromiso
|
||||
</div>
|
||||
<div class="guarantee-item">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M22 11.08V12a10 10 0 11-5.93-9.14"
|
||||
/>
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
Setup gratis con tu agenda actual
|
||||
</div>
|
||||
<div class="guarantee-item">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M22 11.08V12a10 10 0 11-5.93-9.14"
|
||||
/>
|
||||
<path d="M22 4L12 14.01l-3-3" />
|
||||
</svg>
|
||||
Cancela cuando quieras
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
<a href="#" class="logo">
|
||||
<img
|
||||
src="media/logo-cirux-blanco.png"
|
||||
width="140"
|
||||
/>
|
||||
</a>
|
||||
<p>
|
||||
Software de automatización para cirujanos que
|
||||
valoran el tiempo, la precisión y la relación con
|
||||
sus pacientes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<h4>Producto</h4>
|
||||
<a href="#funciona">Cómo funciona</a>
|
||||
<a href="#dolores">Problemas que resolvemos</a>
|
||||
<a href="#beneficios">Beneficios</a>
|
||||
<a href="#cta">Agendar demo</a>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<h4>Legal</h4>
|
||||
<a href="#">Política de privacidad</a>
|
||||
<a href="#">Términos de uso</a>
|
||||
<a href="#">Protección de datos médicos</a>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<h4>Contacto</h4>
|
||||
<a href="mailto:hola@cirux.co">hola@cirux.cloud</a>
|
||||
<a href="https://wa.me/573236570699"
|
||||
>WhatsApp: +57 323 657 0699</a
|
||||
>
|
||||
<span>Pereira, Colombia · LATAM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>
|
||||
Cirux. Todos los derechos reservados. Construido con
|
||||
rigor médico y tecnología de clase mundial.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="success-modal" id="successModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-icon">✓</div>
|
||||
<h3>¡Solicitud recibida!</h3>
|
||||
<p>
|
||||
En un momento te contactaremos para agendar tu demo
|
||||
personalizada.
|
||||
</p>
|
||||
<button class="btn btn-primary" id="closeModal">
|
||||
Entendido
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
@@ -0,0 +1,217 @@
|
||||
/* Cirux Landing Page Scripts */
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// DOM Elements
|
||||
const navbar = document.getElementById('navbar');
|
||||
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
|
||||
const navLinks = document.getElementById('navLinks');
|
||||
const heroVideo = document.getElementById('heroVideo');
|
||||
const videoOverlay = document.getElementById('videoOverlay');
|
||||
const playBtn = document.getElementById('playBtn');
|
||||
const ctaForm = document.getElementById('ctaForm');
|
||||
const successModal = document.getElementById('successModal');
|
||||
const closeModalBtn = document.getElementById('closeModal');
|
||||
|
||||
// Navbar scroll effect
|
||||
function handleScroll() {
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('scrolled');
|
||||
} else {
|
||||
navbar.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
handleScroll();
|
||||
|
||||
// Mobile menu toggle
|
||||
if (mobileMenuBtn && navLinks) {
|
||||
mobileMenuBtn.addEventListener('click', function() {
|
||||
const isOpen = navLinks.classList.toggle('mobile-open');
|
||||
mobileMenuBtn.classList.toggle('active', isOpen);
|
||||
document.body.classList.toggle('menu-open', isOpen);
|
||||
});
|
||||
}
|
||||
|
||||
// Hero video play
|
||||
if (heroVideo && playBtn && videoOverlay) {
|
||||
playBtn.addEventListener('click', function() {
|
||||
heroVideo.play().then(function() {
|
||||
videoOverlay.classList.add('hidden');
|
||||
}).catch(function(err) {
|
||||
console.log('Autoplay prevented:', err);
|
||||
videoOverlay.classList.add('hidden');
|
||||
heroVideo.setAttribute('controls', 'controls');
|
||||
});
|
||||
});
|
||||
|
||||
// Pause video when out of viewport
|
||||
const videoObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (!entry.isIntersecting && !heroVideo.paused) {
|
||||
heroVideo.pause();
|
||||
videoOverlay.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.3 });
|
||||
|
||||
videoObserver.observe(heroVideo);
|
||||
}
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (href === '#') return;
|
||||
const target = document.querySelector(href);
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
const offset = 80;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
// Close mobile menu if open
|
||||
if (navLinks) {
|
||||
navLinks.classList.remove('mobile-open');
|
||||
mobileMenuBtn.classList.remove('active');
|
||||
document.body.classList.remove('menu-open');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// CTA Form submission
|
||||
if (ctaForm) {
|
||||
ctaForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Collect form data
|
||||
const formData = new FormData(ctaForm);
|
||||
const data = {};
|
||||
formData.forEach(function(value, key) {
|
||||
data[key] = value;
|
||||
});
|
||||
|
||||
// Here you would typically send to your backend
|
||||
console.log('Form submitted:', data);
|
||||
|
||||
// Show success modal
|
||||
if (successModal) {
|
||||
successModal.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
// Reset form
|
||||
ctaForm.reset();
|
||||
});
|
||||
}
|
||||
|
||||
// Close modal
|
||||
if (closeModalBtn && successModal) {
|
||||
closeModalBtn.addEventListener('click', function() {
|
||||
successModal.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
|
||||
successModal.addEventListener('click', function(e) {
|
||||
if (e.target === successModal) {
|
||||
successModal.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close modal on Escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && successModal && successModal.classList.contains('active')) {
|
||||
successModal.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll reveal animation
|
||||
const revealElements = document.querySelectorAll(
|
||||
'.step-card, .pain-card, .testimonial-card, .benefit-item, .section-header'
|
||||
);
|
||||
|
||||
const revealObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
});
|
||||
|
||||
revealElements.forEach(function(el) {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||
revealObserver.observe(el);
|
||||
});
|
||||
|
||||
// Number counter animation for stats
|
||||
const statNumbers = document.querySelectorAll('.stat-number');
|
||||
let statsAnimated = false;
|
||||
|
||||
function animateStats() {
|
||||
if (statsAnimated) return;
|
||||
const statsSection = document.querySelector('.hero-stats');
|
||||
if (!statsSection) return;
|
||||
const rect = statsSection.getBoundingClientRect();
|
||||
if (rect.top < window.innerHeight && rect.bottom > 0) {
|
||||
statsAnimated = true;
|
||||
statNumbers.forEach(function(stat) {
|
||||
const text = stat.textContent;
|
||||
const hasPlus = text.includes('+');
|
||||
const hasPercent = text.includes('%');
|
||||
const num = parseInt(text.replace(/\D/g, ''), 10);
|
||||
const suffix = hasPlus ? '+' : (hasPercent ? '%' : '');
|
||||
const prefix = text.startsWith('$') ? '$' : '';
|
||||
|
||||
let current = 0;
|
||||
const increment = Math.ceil(num / 40);
|
||||
const duration = 1200;
|
||||
const stepTime = duration / (num / increment);
|
||||
|
||||
const timer = setInterval(function() {
|
||||
current += increment;
|
||||
if (current >= num) {
|
||||
current = num;
|
||||
clearInterval(timer);
|
||||
}
|
||||
stat.textContent = prefix + current.toLocaleString() + suffix;
|
||||
}, stepTime);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', animateStats, { passive: true });
|
||||
animateStats();
|
||||
|
||||
// Benefits float card subtle parallax
|
||||
const benefitsVisual = document.querySelector('.benefits-visual');
|
||||
if (benefitsVisual) {
|
||||
window.addEventListener('scroll', function() {
|
||||
const rect = benefitsVisual.getBoundingClientRect();
|
||||
const centerOffset = (rect.top + rect.height / 2 - window.innerHeight / 2) / window.innerHeight;
|
||||
const floatCard = benefitsVisual.querySelector('.benefits-float-card');
|
||||
if (floatCard) {
|
||||
floatCard.style.transform = 'translateY(' + (centerOffset * -15) + 'px)';
|
||||
}
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
// Console welcome message
|
||||
console.log('%c Cirux ', 'background: #22c55e; color: #2e4057; font-size: 20px; font-weight: bold; padding: 8px 16px; border-radius: 8px;');
|
||||
console.log('%cSoftware de automatización para cirujanos', 'color: #fdf8f5; font-size: 14px;');
|
||||
|
||||
})();
|
||||
+1281
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user