275 lines
13 KiB
HTML
275 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Contactá a Amor y Roma. Contanos sobre tu proyecto y coordinemos un diagnóstico estratégico sin compromiso.">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
|
||
<title>Contacto | Amor y Roma — Agencia Boutique</title>
|
||
<link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
|
||
<link rel="stylesheet" href="style/main.css">
|
||
<link rel="stylesheet" href="style/contacto.css">
|
||
<link rel="stylesheet" href="style/modal.css">
|
||
</head>
|
||
<body>
|
||
<div id="fluid-bg" aria-hidden="true">
|
||
<canvas id="fluidCanvas"></canvas>
|
||
</div>
|
||
<div id="menu-container"></div>
|
||
|
||
<main>
|
||
<!-- SECCIÓN 1: HERO DE CONTACTO -->
|
||
<section class="hero-section contacto-hero">
|
||
<div class="hero-content">
|
||
<span class="badge-filosofia"></span>
|
||
<h1 class="hero-title">Hablemos de tu proyecto</h1>
|
||
<p class="hero-subtitle">
|
||
Contanos dónde estás parado y hacia dónde querés ir. <br>
|
||
Te respondemos en menos de 48 horas hábiles con una lectura inicial.
|
||
</p>
|
||
<div class="hero-cta-group">
|
||
<a href="#formulario-contacto" class="btn btn-primary">Completar formulario</a>
|
||
<a href="https://wa.me/543886118304" target="_blank" rel="noopener" class="btn btn-secondary">
|
||
<span class="icono-whatsapp-btn"></span> Escribinos por WhatsApp
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECCIÓN 2: INFO + FORMULARIO -->
|
||
<section id="formulario-contacto" class="contacto-grid-section">
|
||
<div class="contacto-grid">
|
||
|
||
<!-- COLUMNA IZQUIERDA: Información directa -->
|
||
<aside class="contacto-info">
|
||
<h2 class="contacto-info-titulo">Canales directos</h2>
|
||
<p class="contacto-info-texto">
|
||
Si preferís un contacto más inmediato, elegí el canal que mejor se adapte a tu consulta.
|
||
</p>
|
||
|
||
<ul class="contacto-canales">
|
||
<li class="canal-item">
|
||
<span class="canal-icono canal-email"></span>
|
||
<div class="canal-contenido">
|
||
<strong>Email</strong>
|
||
<a href="mailto:contacto@amoryroma.com">contacto@amoryroma.com</a>
|
||
</div>
|
||
</li>
|
||
<li class="canal-item">
|
||
<span class="canal-icono canal-whatsapp"></span>
|
||
<div class="canal-contenido">
|
||
<strong>WhatsApp</strong>
|
||
<a href="https://wa.me/543886118304" target="_blank" rel="noopener">+54 9 388 6118304</a>
|
||
</div>
|
||
</li>
|
||
<li class="canal-item">
|
||
<span class="canal-icono canal-instagram"></span>
|
||
<div class="canal-contenido">
|
||
<strong>Instagram</strong>
|
||
<a href="https://www.instagram.com/amoryroma.creativo" target="_blank" rel="noopener">@amoryroma.creativo</a>
|
||
</div>
|
||
</li>
|
||
<li class="canal-item">
|
||
<span class="canal-icono canal-linkedin"></span>
|
||
<div class="canal-contenido">
|
||
<strong>LinkedIn</strong>
|
||
<a href="https://www.linkedin.com/company/amoryroma-estudiocreativo/" target="_blank" rel="noopener">Amor & Roma - Estudio creativo</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="contacto-horario">
|
||
<strong>Horario de atención</strong>
|
||
<p>Lunes a Viernes · 9:00 a 18:00 hs (GMT-3)</p>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- COLUMNA DERECHA: Formulario -->
|
||
<form class="contacto-form" id="form-contacto" action="#" method="POST" novalidate>
|
||
<h2 class="contacto-form-titulo">Contanos sobre tu marca</h2>
|
||
<p class="contacto-form-subtitulo">Cuanta más información nos des, más precisa será nuestra lectura inicial.</p>
|
||
|
||
<!-- Fila 1: Nombre y Empresa -->
|
||
<div class="form-row form-row-2">
|
||
<div class="form-group">
|
||
<label for="nombre">Nombre completo <span class="form-required">*</span></label>
|
||
<input type="text" id="nombre" name="nombre" required placeholder="Tu nombre">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="empresa">Empresa / Marca</label>
|
||
<input type="text" id="empresa" name="empresa" placeholder="Nombre de tu marca">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Fila 2: Email y Teléfono -->
|
||
<div class="form-row form-row-2">
|
||
<div class="form-group">
|
||
<label for="email">Email <span class="form-required">*</span></label>
|
||
<input type="email" id="email" name="email" required placeholder="tu@email.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="telefono">Teléfono / WhatsApp</label>
|
||
<input type="tel" id="telefono" name="telefono" placeholder="+54 9 11 ...">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Fila 3: Servicio de interés -->
|
||
<div class="form-group">
|
||
<label for="servicio">¿Qué servicio te interesa? <span class="form-required">*</span></label>
|
||
<select id="servicio" name="servicio" required>
|
||
<option value="" disabled selected>Seleccioná una opción</option>
|
||
<option value="branding">Branding & Identidad de Marca</option>
|
||
<option value="web">Desarrollo Web a Medida</option>
|
||
<option value="rrss">Gestión de Redes Sociales (Plan recurrente)</option>
|
||
<option value="automatizaciones">Automatizaciones & Flujos</option>
|
||
<option value="paid">Paid Media & Campañas</option>
|
||
<option value="ecosistema">Ecosistema Digital Completo</option>
|
||
<option value="otro">Otro / Aún no lo tengo claro</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Fila 4: Etapa del proyecto -->
|
||
<div class="form-group">
|
||
<label for="etapa">¿En qué etapa está tu proyecto?</label>
|
||
<select id="etapa" name="etapa">
|
||
<option value="" disabled selected>Seleccioná una opción</option>
|
||
<option value="idea">Solo tengo la idea</option>
|
||
<option value="inicio">Estoy empezando (sin marca definida)</option>
|
||
<option value="marcha">Ya está en marcha, necesito orden</option>
|
||
<option value="redisenio">Quiero rediseñar / reposicionar</option>
|
||
<option value="escalar">Quiero escalar lo que ya tengo</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Fila 5: Presupuesto -->
|
||
<div class="form-group">
|
||
<label for="presupuesto">Rango de inversión mensual estimado</label>
|
||
<select id="presupuesto" name="presupuesto">
|
||
<option value="" disabled selected>Seleccioná un rango</option>
|
||
<option value="esencial">Hasta $250.000 (Esencial)</option>
|
||
<option value="impulso">$250.000 – $500.000 (Impulso)</option>
|
||
<option value="premium">$500.000 – $800.000 (Premium)</option>
|
||
<option value="elite">Más de $800.000 (Élite)</option>
|
||
<option value="proyecto">Es un proyecto cerrado (one-off)</option>
|
||
<option value="no-se">Prefiero que lo evalúen ustedes</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Fila 6: Mensaje -->
|
||
<div class="form-group">
|
||
<label for="mensaje">Contanos sobre tu proyecto <span class="form-required">*</span></label>
|
||
<textarea id="mensaje" name="mensaje" rows="5" required placeholder="Objetivos, desafíos, referencias, lo que quieras compartir..."></textarea>
|
||
</div>
|
||
|
||
<!-- Fila 7: Cómo nos conoció -->
|
||
<div class="form-group">
|
||
<label for="origen">¿Cómo nos conociste?</label>
|
||
<select id="origen" name="origen">
|
||
<option value="" disabled selected>Seleccioná una opción</option>
|
||
<option value="instagram">Instagram</option>
|
||
<option value="linkedin">LinkedIn</option>
|
||
<option value="referido">Me recomendaron</option>
|
||
<option value="google">Búsqueda en Google</option>
|
||
<option value="otro">Otro</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Checkbox de consentimiento -->
|
||
<div class="form-consentimiento">
|
||
<input type="checkbox" id="consentimiento" name="consentimiento" required>
|
||
<label for="consentimiento">
|
||
Acepto que mis datos sean utilizados para contactarme respecto a mi consulta. <span class="form-required">*</span>
|
||
</label>
|
||
</div>
|
||
<!-- Honeypot anti-spam: invisible para humanos -->
|
||
<div class="form-honeypot" aria-hidden="true">
|
||
<label for="website">No completar este campo</label>
|
||
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary btn-form-enviar">
|
||
Enviar consulta
|
||
<span class="btn-arrow">→</span>
|
||
</button>
|
||
|
||
<p class="form-nota">
|
||
<small>Te respondemos en menos de 48 horas hábiles. Sin spam, sin llamadas en frío.</small>
|
||
</p>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECCIÓN 3: QUÉ PASA DESPUÉS -->
|
||
<section class="proceso-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Qué pasa después de tu mensaje</h2>
|
||
<p class="section-subtitle"></p>
|
||
|
||
</div>
|
||
|
||
<div class="proceso-grid">
|
||
<div class="proceso-paso">
|
||
<div class="proceso-numero">01</div>
|
||
<h3>Lectura inicial</h3>
|
||
<p>Analizamos tu mensaje y tu situación actual. Si vemos que podemos aportar valor real, te agendamos una llamada de diagnóstico.</p>
|
||
</div>
|
||
<div class="proceso-paso">
|
||
<div class="proceso-numero">02</div>
|
||
<h3>Diagnóstico estratégico</h3>
|
||
<p>Sesión de 30–45 minutos para entender en profundidad tu marca, objetivos y desafíos. Sin costo y sin compromiso.</p>
|
||
</div>
|
||
<div class="proceso-paso">
|
||
<div class="proceso-numero">03</div>
|
||
<h3>Propuesta a medida</h3>
|
||
<p>Te enviamos una propuesta detallada con alcance, tiempos, inversión y entregables. Solo avanzamos si hay encaje mutuo.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECCIÓN 4: NOTAS IMPORTANTES -->
|
||
<section class="notas-section">
|
||
<div class="notas-container">
|
||
<div class="nota-item">
|
||
<strong>Presupuesto publicitario aparte</strong>
|
||
<p>La inversión en Meta Ads, Google Ads u otras plataformas se abona directamente a cada proveedor. Nuestros honorarios cubren estrategia, creatividades y optimización.</p>
|
||
</div>
|
||
<div class="nota-item">
|
||
<strong>Capacidad controlada</strong>
|
||
<p>Trabajamos con un número limitado de cuentas por mes para garantizar la calidad boutique. Si no podemos tomar tu proyecto ahora, te lo decimos con transparencia.</p>
|
||
</div>
|
||
<div class="nota-item">
|
||
<strong>Cero plantillas</strong>
|
||
<p>Cada propuesta es única. No vendemos paquetes cerrados: diseñamos la solución que tu marca necesita en su etapa actual.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECCIÓN 5: CTA FINAL -->
|
||
<section class="cta-section">
|
||
<div class="cta-card">
|
||
<h2 class="cta-title">¿Preferís una conversación directa?</h2>
|
||
<p class="cta-subtitle">Agendá una llamada de 15 minutos sin compromiso. Ideal si tenés dudas o querés validar si somos el equipo adecuado para tu proyecto.</p>
|
||
<div class="cta-buttons">
|
||
<a href="https://calendly.com/amoryroma" target="_blank" rel="noopener" class="btn btn-cta-primary">Agendar llamada</a>
|
||
<a href="https://wa.me/543886118304" target="_blank" rel="noopener" class="btn btn-cta-secondary">Escribir por WhatsApp</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- MODAL DE ÉXITO -->
|
||
<div id="modal-contacto" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="modal-titulo">
|
||
<div class="modal-card">
|
||
<div class="modal-icono" aria-hidden="true">✓</div>
|
||
<h2 id="modal-titulo" class="modal-titulo">¡Mensaje enviado!</h2>
|
||
<p class="modal-mensaje">Gracias por escribirnos. Te contactaremos en menos de 48 horas hábiles.</p>
|
||
<button type="button" class="modal-cerrar">Volver al inicio</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<div id="footer-container"></div>
|
||
|
||
<script src="scripts/main.js"></script>
|
||
<script src="scripts/contacto.js"></script>
|
||
<script src="scripts/fluid.js"></script>
|
||
</body>
|
||
</html> |