271 lines
12 KiB
HTML
271 lines
12 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="">
|
|
<title>Inicio - A&R</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
|
|
<link rel="stylesheet" href="style/main.css">
|
|
</head>
|
|
<body>
|
|
<div id="menu-container"></div>
|
|
|
|
<main>
|
|
<!-- Sección Hero -->
|
|
<section id="hero" class="hero-section">
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">Marcas con esencia, construidas con estrategia.</h1>
|
|
<p class="hero-subtitle">Tenemos las disciplinas que los negocios necesitan para crecer sin perder lo que los hace únicos.</p>
|
|
<div class="hero-cta-group">
|
|
<a href="#" class="btn btn-primary hero-cta-primary">Hablemos</a>
|
|
<a href="inicio.html#servicios" class="btn btn-secondary hero-cta-secondary">Conocé más</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sección 2: Servicios -->
|
|
<section id="servicios" class="servicios-section">
|
|
<div class="servicios-container">
|
|
<!-- Columna Izquierda: Texto introductorio -->
|
|
<div class="servicios-intro">
|
|
<h2 class="servicios-title">¿Qué necesita hoy tu negocio?</h2>
|
|
<p class="servicios-subtitle">Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.</p>
|
|
<a href="servicios.html" class="btn btn-secondary">Ver todos los servicios</a>
|
|
</div>
|
|
|
|
<!-- Columna Derecha: Acordeón interactivo -->
|
|
<div class="servicios-accordion" id="servicios-accordion">
|
|
<!-- Item 1 -->
|
|
<div class="servicio-item" data-index="0">
|
|
<div class="servicio-header">
|
|
<span class="servicio-icon icon-branding" aria-hidden="true"></span>
|
|
<h3 class="servicio-title-short">Construir una marca</h3>
|
|
</div>
|
|
<div class="servicio-content">
|
|
<span class="servicio-icon-large icon-branding" aria-hidden="true"></span>
|
|
<h3 class="servicio-title-long">Construcción de Identidad Estratégica</h3>
|
|
<p class="servicio-description">Definimos el ADN de tu marca, su posicionamiento y el camino para conectar con tu audiencia ideal de manera auténtica y memorable.</p>
|
|
<a href="servicios.html#estrategia" class="btn btn-primary">Conocer más</a>
|
|
<button class="servicio-close" aria-label="Cerrar">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 2 -->
|
|
<div class="servicio-item" data-index="1">
|
|
<div class="servicio-header">
|
|
<span class="servicio-icon icon-rrss" aria-hidden="true"></span>
|
|
<h3 class="servicio-title-short">Mejorar presencia digital</h3>
|
|
</div>
|
|
<div class="servicio-content">
|
|
<span class="servicio-icon-large icon-rrss" aria-hidden="true"></span>
|
|
<h3 class="servicio-title-long">Comunidades que Convierten</h3>
|
|
<p class="servicio-description">Creamos contenido de valor y gestionamos tus redes para construir una comunidad activa, fiel y comprometida con tu marca.</p>
|
|
<a href="servicios.html#redes" class="btn btn-primary">Conocer más</a>
|
|
<button class="servicio-close" aria-label="Cerrar">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 3 -->
|
|
<div class="servicio-item" data-index="2">
|
|
<div class="servicio-header">
|
|
<span class="servicio-icon icon-web" aria-hidden="true"></span>
|
|
<h3 class="servicio-title-short">Generar Contenido</h3>
|
|
</div>
|
|
<div class="servicio-content">
|
|
<span class="servicio-icon-large icon-web" aria-hidden="true"></span>
|
|
<h3 class="servicio-title-long">Experiencias Digitales Impactantes</h3>
|
|
<p class="servicio-description">Diseñamos y desarrollamos sitios web y plataformas digitales que no solo se ven bien, sino que generan resultados tangibles.</p>
|
|
<a href="servicios.html#digital" class="btn btn-primary">Conocer más</a>
|
|
<button class="servicio-close" aria-label="Cerrar">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 4 -->
|
|
<div class="servicio-item" data-index="3">
|
|
<div class="servicio-header">
|
|
<span class="servicio-icon icon-auto" aria-hidden="true"></span>
|
|
<h3 class="servicio-title-short">Automatizar procesos</h3>
|
|
</div>
|
|
<div class="servicio-content">
|
|
<span class="servicio-icon-large icon-auto" aria-hidden="true"></span>
|
|
<h3 class="servicio-title-long">Historias que Enamoran</h3>
|
|
<p class="servicio-description">Producimos contenido audiovisual y gráfico de alta calidad que cuenta la historia de tu marca y cautiva a tu audiencia.</p>
|
|
<a href="servicios.html#contenido" class="btn btn-primary">Conocer más</a>
|
|
<button class="servicio-close" aria-label="Cerrar">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 5 -->
|
|
<div class="servicio-item" data-index="4">
|
|
<div class="servicio-header">
|
|
<span class="servicio-icon icon-paid" aria-hidden="true"></span>
|
|
<h3 class="servicio-title-short">Conseguir más clientes</h3>
|
|
</div>
|
|
<div class="servicio-content">
|
|
<span class="servicio-icon-large icon-paid" aria-hidden="true"></span>
|
|
<h3 class="servicio-title-long">Campañas que Escalan Resultados</h3>
|
|
<p class="servicio-description">Gestionamos campañas de paid media en Meta, Google y LinkedIn para maximizar tu ROI y alcanzar a los clientes correctos.</p>
|
|
<a href="servicios.html#pauta" class="btn btn-primary">Conocer más</a>
|
|
<button class="servicio-close" aria-label="Cerrar">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 6 -->
|
|
<div class="servicio-item" data-index="5">
|
|
<div class="servicio-header">
|
|
<span class="servicio-icon icon-add" aria-hidden="true"></span>
|
|
<h3 class="servicio-title-short">Consultoría de Marketing</h3>
|
|
</div>
|
|
<div class="servicio-content">
|
|
<span class="servicio-icon-large icon-add" aria-hidden="true"></span>
|
|
<h3 class="servicio-title-long">Asesoramiento Estratégico Integral</h3>
|
|
<p class="servicio-description">Te acompañamos en la toma de decisiones clave, optimizando tus recursos y alineando tu marketing con los objetivos de tu negocio.</p>
|
|
<a href="servicios.html#consultoria" class="btn btn-primary">Conocer más</a>
|
|
<button class="servicio-close" aria-label="Cerrar">✕</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sección 3: Diagnóstico -->
|
|
<section id="diagnostico" class="diagnostico-section">
|
|
<div class="diagnostico-header">
|
|
<h2 class="diagnostico-title">¿Qué necesita hoy tu negocio?</h2>
|
|
<p class="diagnostico-subtitle">Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.</p>
|
|
</div>
|
|
|
|
<div class="diagnostico-card">
|
|
<!-- Barra de Progreso -->
|
|
<div class="progreso-wrapper">
|
|
<div class="progreso-barra">
|
|
<div class="progreso-barra-completado" id="progreso-completado"></div>
|
|
</div>
|
|
<div class="progreso-texto" id="progreso-texto">Pregunta 1 de 4</div>
|
|
</div>
|
|
|
|
<!-- Contenedor de Preguntas -->
|
|
<div id="cuestionario-contenedor">
|
|
<!-- Las preguntas se generan dinámicamente con JavaScript -->
|
|
</div>
|
|
|
|
<!-- Botón Reiniciar -->
|
|
<button class="btn-reiniciar" id="btn-reiniciar">
|
|
Reiniciar Diagnóstico
|
|
</button>
|
|
|
|
<!-- Contenedor de Resultados (oculto inicialmente) -->
|
|
<div id="resultado-contenedor" class="resultado-contenedor" style="display: none;">
|
|
<!-- El resultado se genera dinámicamente con JavaScript -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sección 4: Metodología -->
|
|
<section id="metodologia" class="metodologia-section">
|
|
<div class="metodologia-header">
|
|
<h2 class="metodologia-title">Método A&R</h2>
|
|
<p class="metodologia-subtitle">Tu proceso paso a paso sin sorpresas</p>
|
|
</div>
|
|
|
|
<div class="metodologia-grid">
|
|
<!-- Paso 1: Contacto -->
|
|
<div class="paso-item" data-paso="0">
|
|
<div class="paso-arco">
|
|
<span class="arco-svg" aria-hidden="true"></span>
|
|
<span class="paso-icono icon-contacto" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="paso-info">
|
|
<h3 class="paso-titulo">Contacto</h3>
|
|
<p class="paso-subtitulo">Reunión de brief</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Paso 2: Propuesta -->
|
|
<div class="paso-item" data-paso="1">
|
|
<div class="paso-arco">
|
|
<span class="arco-svg" aria-hidden="true"></span>
|
|
<span class="paso-icono icon-propuesta" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="paso-info">
|
|
<h3 class="paso-titulo">Propuesta</h3>
|
|
<p class="paso-subtitulo">Plan de trabajo</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Paso 3: Diseño -->
|
|
<div class="paso-item" data-paso="2">
|
|
<div class="paso-arco">
|
|
<span class="arco-svg" aria-hidden="true"></span>
|
|
<span class="paso-icono icon-diseno" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="paso-info">
|
|
<h3 class="paso-titulo">Diseño</h3>
|
|
<p class="paso-subtitulo">Dirección de arte</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Paso 4: Producción -->
|
|
<div class="paso-item" data-paso="3">
|
|
<div class="paso-arco">
|
|
<span class="arco-svg" aria-hidden="true"></span>
|
|
<span class="paso-icono icon-produccion" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="paso-info">
|
|
<h3 class="paso-titulo">Producción</h3>
|
|
<p class="paso-subtitulo">Desarrollo</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Paso 5: Revisión -->
|
|
<div class="paso-item" data-paso="4">
|
|
<div class="paso-arco">
|
|
<span class="arco-svg" aria-hidden="true"></span>
|
|
<span class="paso-icono icon-revision" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="paso-info">
|
|
<h3 class="paso-titulo">Revisión</h3>
|
|
<p class="paso-subtitulo">Ajustes finales</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Paso 6: Lanzamiento -->
|
|
<div class="paso-item" data-paso="5">
|
|
<div class="paso-arco">
|
|
<span class="arco-svg" aria-hidden="true"></span>
|
|
<span class="paso-icono icon-lanzamiento" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="paso-info">
|
|
<h3 class="paso-titulo">Lanzamiento</h3>
|
|
<p class="paso-subtitulo">Entrega</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sección 5 -->
|
|
<section id="inicio-section-5">
|
|
<h2>Sección 5</h2>
|
|
<p>Contenido pendiente de definir.</p>
|
|
</section>
|
|
|
|
<!-- Sección 6 -->
|
|
<section id="inicio-section-6">
|
|
<h2>Sección 6</h2>
|
|
<p>Contenido pendiente de definir.</p>
|
|
</section>
|
|
|
|
<!-- Sección 7 -->
|
|
<section id="inicio-section-7">
|
|
<h2>Sección 7</h2>
|
|
<p>Contenido pendiente de definir.</p>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="footer-container"></div>
|
|
|
|
<script src="scripts/main.js"></script>
|
|
<script src="scripts/efecto.js"></script>
|
|
</body>
|
|
</html> |