detalles finalizados v0.8.3 lista
This commit is contained in:
+129
-128
@@ -17,140 +17,141 @@
|
||||
|
||||
<main>
|
||||
|
||||
<!-- Header Contacto -->
|
||||
<section class="section-padding">
|
||||
<div class="container container-narrow text-center" style="padding-bottom: 5rem;">
|
||||
<span class="eyebrow">CONVERSACIÓN INICIAL</span>
|
||||
<h1 style="margin-bottom: 1.25rem;">Hablemos de lo que necesitás</h1>
|
||||
<p class="lead-text" style="margin: 0 auto;">
|
||||
Cada organización, proyecto o iniciativa parte de un contexto diferente. <br>Contanos qué te trae a IDE y empecemos por entender cómo podemos aportar valor.
|
||||
</p>
|
||||
<!-- Header & Contenido de Contacto con Parallax -->
|
||||
<section class="section-padding contact-parallax-section" style="position: relative; overflow: hidden;">
|
||||
|
||||
<!-- CAPA PARALLAX (FONDO + OVERLAY DE CONTRASTE) -->
|
||||
<div class="parallax-wrapper" aria-hidden="true">
|
||||
<div id="contact-parallax-bg" class="parallax-bg-layer"></div>
|
||||
<div class="parallax-overlay"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
|
||||
|
||||
<!-- Columna Izquierda: Formulario Inteligente -->
|
||||
<div class="card" style="padding: clamp(1.75rem, 4vw, 2.5rem);">
|
||||
<h3 style="font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--ide-primary);">Contanos en qué podemos ayudarte</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
|
||||
Completá tus datos y contanos brevemente el motivo de tu consulta. Empecemos por conversar y entender cómo podemos aportar valor.
|
||||
</p>
|
||||
|
||||
<form id="ide-contact-form">
|
||||
<input type="hidden" name="form_type" value="contacto">
|
||||
<input type="hidden" name="origen" id="contact-origen" value="Formulario General">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-nombre" class="form-label">Nombre y Apellido *</label>
|
||||
<input type="text" id="contact-nombre" name="nombre" class="form-control" placeholder="Ej: Lic. Martín Rossi" required>
|
||||
</div>
|
||||
|
||||
<div class="grid-2" style="gap: 1rem;">
|
||||
<div class="form-group">
|
||||
<label for="contact-organizacion" class="form-label">Organización / Empresa *</label>
|
||||
<input type="text" id="contact-organizacion" name="organizacion" class="form-control" placeholder="Ej: Industria S.A." required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contact-rol" class="form-label">Rol o Cargo en la empresa</label>
|
||||
<input type="text" id="contact-rol" name="rol" class="form-control" placeholder="Ej: Gerente de Operaciones">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-2" style="gap: 1rem;">
|
||||
<div class="form-group">
|
||||
<label for="contact-email" class="form-label">Correo Electrónico *</label>
|
||||
<input type="email" id="contact-email" name="email" class="form-control" placeholder="nombre@empresa.com" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contact-telefono" class="form-label">Teléfono / WhatsApp</label>
|
||||
<input type="tel" id="contact-telefono" name="telefono" class="form-control" placeholder="Ej: +54 9 11 5555-1234">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-busqueda" class="form-label">¿Qué te trae a IDE? *</label>
|
||||
<select id="contact-busqueda" name="busqueda" class="form-control">
|
||||
<option value="Necesito orientación para abordar un desafío">Necesito orientación para abordar un desafío</option>
|
||||
<option value="Estoy buscando una solución específica">Estoy buscando una solución específica</option>
|
||||
<option value="Quiero implementar o certificar una norma / sistema de gestión"> Quiero implementar o certificar una norma / sistema de gestión</option>
|
||||
<option value="Busco formación para mi organización / equipo">Busco formación para mi organización / equipo</option>
|
||||
<option value="Necesito gestionar, ordenar o impulsar un proyecto">Necesito gestionar, ordenar o impulsar un proyecto</option>
|
||||
<option value="Quiero incorporar tecnología, automatización o IA">Quiero incorporar tecnología, automatización o IA</option>
|
||||
<option value="Quiero hacer una consulta sobre IDE Academy">Quiero hacer una consulta sobre IDE Academy</option>
|
||||
<option value="Quiero proponer una alianza o colaboración">Quiero proponer una alianza o colaboración</option>
|
||||
<option value="Otro motivo de consulta">Otro motivo de consulta.</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-mensaje" class="form-label">Contanos brevemente en qué podemos ayudarte *</label>
|
||||
<textarea id="contact-mensaje" name="mensaje" class="form-control" rows="4" placeholder="Describí los objetivos o problemáticas que quisieras abordar..." required></textarea>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
|
||||
* campos requeridos. <br><i>La información que compartas será utilizada únicamente para gestionar tu consulta y contactarte en relación con ella.</i>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-lg" style="width: 100%; margin-top: 0.5rem;">
|
||||
ENVIAR CONSULTA →
|
||||
</button>
|
||||
|
||||
<div id="contact-form-alert" class="form-alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Columna Derecha: Canales Directos y Datos Institucionales -->
|
||||
<div>
|
||||
|
||||
<!-- WhatsApp Destacado -->
|
||||
<div class="card" style="background-color: var(--ide-accent-soft); border-color: var(--ide-accent); padding: 1.75rem; margin-bottom: 2rem;">
|
||||
<h3 style="font-size: 1.2rem; color: var(--ide-accent-hover); margin-bottom: 0.5rem;">¿Preferís contactarnos directamente?</h3>
|
||||
<p style="font-size: 0.9rem; color: var(--text-body); line-height: 1.5; margin-bottom: 1.25rem;">
|
||||
<strong>WhatsApp: </strong>Para consultas breves o coordinar una conversación.
|
||||
</p>
|
||||
<a href="https://wa.me/5491123456789?text=Hola%20IDE%20Consultores,%20quisiera%20recibir%20m%C3%A1s%20informaci%C3%B3n." target="_blank" rel="noopener noreferrer" class="btn btn-accent btn-sm" style="width: 100%;">
|
||||
ESCRIBINOS POR WHATSAPP →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Datos Ficticios para fácil edición -->
|
||||
<div class="card" style="padding: 1.75rem;">
|
||||
<h3 style="font-size: 1.15rem; margin-bottom: 1.25rem;">Canales Institucionales</h3>
|
||||
|
||||
<ul style="list-style: none; display: flex; flex-direction: column; gap: 1.25rem; font-size: 0.92rem;">
|
||||
<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
||||
<span style="font-size: 1.2rem;">•</span>
|
||||
<div>
|
||||
<strong>Email:</strong><br>
|
||||
<a href="mailto:info@ideconsultores.com.ar" style="color: var(--ide-primary); font-weight: 600;">info@ideconsultores.com.ar</a>
|
||||
<p>Para consultas, propuestas o documentación.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
||||
<span style="font-size: 1.2rem;">•</span>
|
||||
<div>
|
||||
<strong>Teléfono Directo:</strong><br>
|
||||
<span style="color: var(--text-body);">+54 11 4800-0000 (Lunes a Viernes 9 a 18 hs)</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!--<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
||||
<span style="font-size: 1.2rem;">•</span>
|
||||
<div>
|
||||
<strong>Oficinas Centrales:</strong><br>
|
||||
<span style="color: var(--text-body);">Av. del Libertador 4800, Piso 8, CABA, Argentina</span>
|
||||
</div>-->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- CONTENIDO (Z-INDEX SUPERIOR) -->
|
||||
<div style="position: relative; z-index: 2;">
|
||||
<div class="container container-narrow text-center" style="padding-bottom: 4rem;">
|
||||
<span class="eyebrow">CONVERSACIÓN INICIAL</span>
|
||||
<h1 style="margin-bottom: 1.25rem;">Hablemos de lo que necesitás</h1>
|
||||
<p class="lead-text" style="margin: 0 auto;">
|
||||
Cada organización, proyecto o iniciativa parte de un contexto diferente. <br>Contanos qué te trae a IDE y empecemos por entender cómo podemos aportar valor.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
|
||||
|
||||
<!-- Columna Izquierda: Formulario Inteligente -->
|
||||
<div class="card" style="padding: clamp(1.75rem, 4vw, 2.5rem);">
|
||||
<h3 style="font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--ide-primary);">Contanos en qué podemos ayudarte</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
|
||||
Completá tus datos y contanos brevemente el motivo de tu consulta. Empecemos por conversar y entender cómo podemos aportar valor.
|
||||
</p>
|
||||
|
||||
<form id="ide-contact-form">
|
||||
<input type="hidden" name="form_type" value="contacto">
|
||||
<input type="hidden" name="origen" id="contact-origen" value="Formulario General">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-nombre" class="form-label">Nombre y Apellido *</label>
|
||||
<input type="text" id="contact-nombre" name="nombre" class="form-control" placeholder="Ej: Lic. Martín Rossi" required>
|
||||
</div>
|
||||
|
||||
<div class="grid-2" style="gap: 1rem;">
|
||||
<div class="form-group">
|
||||
<label for="contact-organizacion" class="form-label">Organización / Empresa *</label>
|
||||
<input type="text" id="contact-organizacion" name="organizacion" class="form-control" placeholder="Ej: Industria S.A." required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contact-rol" class="form-label">Rol o Cargo en la empresa</label>
|
||||
<input type="text" id="contact-rol" name="rol" class="form-control" placeholder="Ej: Gerente de Operaciones">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-2" style="gap: 1rem;">
|
||||
<div class="form-group">
|
||||
<label for="contact-email" class="form-label">Correo Electrónico *</label>
|
||||
<input type="email" id="contact-email" name="email" class="form-control" placeholder="nombre@empresa.com" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contact-telefono" class="form-label">Teléfono / WhatsApp</label>
|
||||
<input type="tel" id="contact-telefono" name="telefono" class="form-control" placeholder="Ej: +54 9 11 5555-1234">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-busqueda" class="form-label">¿Qué te trae a IDE? *</label>
|
||||
<select id="contact-busqueda" name="busqueda" class="form-control">
|
||||
<option value="Necesito orientación para abordar un desafío">Necesito orientación para abordar un desafío</option>
|
||||
<option value="Estoy buscando una solución específica">Estoy buscando una solución específica</option>
|
||||
<option value="Quiero implementar o certificar una norma / sistema de gestión">Quiero implementar o certificar una norma / sistema de gestión</option>
|
||||
<option value="Busco formación para mi organización / equipo">Busco formación para mi organización / equipo</option>
|
||||
<option value="Necesito gestionar, ordenar o impulsar un proyecto">Necesito gestionar, ordenar o impulsar un proyecto</option>
|
||||
<option value="Quiero incorporar tecnología, automatización o IA">Quiero incorporar tecnología, automatización o IA</option>
|
||||
<option value="Quiero hacer una consulta sobre IDE Academy">Quiero hacer una consulta sobre IDE Academy</option>
|
||||
<option value="Quiero proponer una alianza o colaboración">Quiero proponer una alianza o colaboración</option>
|
||||
<option value="Otro motivo de consulta">Otro motivo de consulta.</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-mensaje" class="form-label">Contanos brevemente en qué podemos ayudarte *</label>
|
||||
<textarea id="contact-mensaje" name="mensaje" class="form-control" rows="4" placeholder="Describí los objetivos o problemáticas que quisieras abordar..." required></textarea>
|
||||
<p style="font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem; margin-bottom: 1.25rem;">
|
||||
* campos requeridos. <br><i>La información que compartas será utilizada únicamente para gestionar tu consulta y contactarte en relación con ella.</i>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-lg" style="width: 100%;">
|
||||
ENVIAR CONSULTA →
|
||||
</button>
|
||||
|
||||
<div id="contact-form-alert" class="form-alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Columna Derecha: Canales Directos y Datos Institucionales -->
|
||||
<div>
|
||||
<!-- WhatsApp Destacado -->
|
||||
<div class="card" style="background-color: var(--ide-accent-soft); border-color: var(--ide-accent); padding: 1.75rem; margin-bottom: 2rem;">
|
||||
<h3 style="font-size: 1.2rem; color: var(--ide-accent-hover); margin-bottom: 0.5rem;">¿Preferís contactarnos directamente?</h3>
|
||||
<p style="font-size: 0.9rem; color: var(--text-body); line-height: 1.5; margin-bottom: 1.25rem;">
|
||||
<strong>WhatsApp: </strong>Para consultas breves o coordinar una conversación.
|
||||
</p>
|
||||
<a href="https://wa.me/5491123456789?text=Hola%20IDE%20Consultores,%20quisiera%20recibir%20m%C3%A1s%20informaci%C3%B3n." target="_blank" rel="noopener noreferrer" class="btn btn-accent btn-sm" style="width: 100%;">
|
||||
ESCRIBINOS POR WHATSAPP →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Canales Institucionales -->
|
||||
<div class="card" style="padding: 1.75rem;">
|
||||
<h3 style="font-size: 1.15rem; margin-bottom: 1.25rem;">Canales Institucionales</h3>
|
||||
|
||||
<ul style="list-style: none; display: flex; flex-direction: column; gap: 1.25rem; font-size: 0.92rem; padding: 0;">
|
||||
<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
||||
<span style="font-size: 1.2rem; color: var(--ide-primary);">•</span>
|
||||
<div>
|
||||
<strong>Email:</strong><br>
|
||||
<a href="mailto:info@ideconsultores.com.ar" style="color: var(--ide-primary); font-weight: 600;">info@ideconsultores.com.ar</a>
|
||||
<p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem;">Para consultas, propuestas o documentación.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
||||
<span style="font-size: 1.2rem; color: var(--ide-primary);">•</span>
|
||||
<div>
|
||||
<strong>Teléfono Directo:</strong><br>
|
||||
<span style="color: var(--text-body);">+54 11 4800-0000 (Lunes a Viernes 9 a 18 hs)</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer id="site-footer"></footer>
|
||||
|
||||
Reference in New Issue
Block a user