fanfuso/ayr2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

estructura de nosotros y contacto

Browse Source
This commit is contained in:
ppugliese
2026-09-20 08:28:34 -03:00
parent c193e4acd9
commit 2a0cfbde0e
13 changed files with 4194 additions and 1939 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contacto.html
+225 -39
View File
@@ -3,62 +3,245 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>Contacto - [Nombre de la agencia]</title>
<meta name="description" content="Contactá a Amor y Roma. Contanos sobre tu proyecto y coordinemos un diagnóstico estratégico sin compromiso.">
<title>Contacto | Amor y Roma — Agencia Boutique</title>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div id="menu-container"></div>
<main>
<!-- Sección 1: Encabezado -->
<section id="contacto-section-1">
<h2>Contacto</h2>
<p>Contenido pendiente de definir.</p>
<!-- 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: Formulario de contacto -->
<section id="contacto-section-2">
<h3>Escríbenos</h3>
<form class="contact-form" id="contact-form" novalidate>
<label for="contact-name">Nombre</label>
<input type="text" id="contact-name" name="name" required>
<!-- 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>
<label for="contact-email">Email</label>
<input type="email" id="contact-email" name="email" required>
<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">hola@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 11 0000-0000</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>
<label for="contact-phone">Teléfono (opcional)</label>
<input type="tel" id="contact-phone" name="phone">
<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>
<label for="contact-subject">Asunto</label>
<input type="text" id="contact-subject" name="subject" required>
<!-- 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>
<label for="contact-message">Mensaje</label>
<textarea id="contact-message" name="message" rows="5" required></textarea>
<!-- 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>
<button type="submit">Enviar mensaje</button>
</form>
<!-- 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>
<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: Redes sociales -->
<section id="contacto-section-3">
<h3>Síguenos</h3>
<ul class="contact-social">
<li><a href="#" target="_blank" rel="noopener">[Red 1]</a></li>
<li><a href="#" target="_blank" rel="noopener">[Red 2]</a></li>
<li><a href="#" target="_blank" rel="noopener">[Red 3]</a></li>
</ul>
<!-- 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: WhatsApp directo -->
<section id="contacto-section-4">
<h3>¿Prefieres WhatsApp?</h3>
<a class="whatsapp-link"
href="https://wa.me/[NUMERO]?text=[MENSAJE_PREDEFINIDO]"
target="_blank"
rel="noopener">
Escríbenos por WhatsApp
</a>
<!-- 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>
</main>
@@ -66,5 +249,8 @@
<script src="scripts/main.js"></script>
<script src="scripts/efecto.js"></script>
<script src="scripts/contacto.js"></script>
<link rel="stylesheet" href="style/contacto.css">
</body>
</html>