243 lines
12 KiB
HTML
243 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="Conoce la filosofía, metodología y principios de Amor y Roma, agencia boutique de marketing digital. Marcas con esencia, construidas con estrategia.">
|
|
<title>Nosotros | Amor y Roma — Agencia Boutique</title>
|
|
<link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
|
|
<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">
|
|
<link rel="stylesheet" href="style/nosotros.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 / FILOSOFÍA -->
|
|
<section class="hero-section nosotros-hero">
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">Amor&Roma</h1>
|
|
<p class="hero-subtitle">
|
|
No somos una agencia tradicional. <br>Combinamos el arte del marketing digital con la ciencia de los datos.
|
|
</p>
|
|
<div class="hero-cta-group">
|
|
<a href="#nosotros-dualidad" class="btn btn-primary">Descubre nuestra dualidad</a>
|
|
<a href="contacto.html" class="btn btn-secondary">Hablemos de tu proyecto</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECCIÓN 2: LA DUALIDAD DE MARCA -->
|
|
<section id="nosotros-dualidad" class="dualidad-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Nuestra Dualidad Estratégica</h2>
|
|
<p class="section-subtitle">El nombre de nuestra agencia no responde a una visión romántica tradicional, sino a dos pilares operativos inseparables.</p>
|
|
</div>
|
|
<div class="dualidad-grid">
|
|
<article class="dualidad-card card-amor">
|
|
<div class="card-icon icon-amor"></div>
|
|
<h3>Amor</h3>
|
|
<span class="card-tag">La Pasión y el Arte</span>
|
|
<p>Representa el instinto creativo, la intuición visual, la dirección de arte meticulosa, la empatía con la visión del cliente y la estética no negociable. <br>Es el alma y la identidad de cada marca.</p>
|
|
</article>
|
|
<article class="dualidad-card card-roma">
|
|
<div class="card-icon icon-roma"></div>
|
|
<h3>Roma</h3>
|
|
<span class="card-tag">La Construcción y la Estructura</span>
|
|
<p>Representa la arquitectura, el método, la ingeniería de procesos, la estrategia a largo plazo y la infraestructura digital orientada a resultados. <br>Es el imperio que sostiene esa visión.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECCIÓN: QUIÉNES SOMOS / EQUIPO -->
|
|
<section id="nosotros-equipo" class="equipo-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Mentes creativas, con <span class="text-gradient">mucha energía.</span></h2>
|
|
<p class="section-subtitle">Combinamos el arte del Marketing con la Ciencia de los datos.</p>
|
|
</div>
|
|
|
|
<div class="equipo-grid">
|
|
<!-- PATRICIA -->
|
|
<article class="equipo-card">
|
|
<div class="equipo-firma">Patricia Pugliese</div>
|
|
<span class="equipo-rol">Estrategia & Creatividad</span>
|
|
<p class="equipo-descripcion">
|
|
Investigación, branding, identidad visual y todo lo que da forma a una marca con personalidad.
|
|
</p>
|
|
</article>
|
|
|
|
<!-- FRANCISCO -->
|
|
<article class="equipo-card">
|
|
<div class="equipo-firma">Francisco Anfuso</div>
|
|
<span class="equipo-rol">Desarrollo & Tecnología</span>
|
|
<p class="equipo-descripcion">
|
|
Diseño web, desarrollo, automatizaciones y soluciones técnicas que funcionan sin complicaciones.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
|
|
<p class="equipo-colaboradores">
|
|
Trabajamos en equipo ayudando a las PyMEs a competir y crecer. </p>
|
|
</section>
|
|
|
|
<!-- SECCIÓN 3: PRINCIPIOS BOUTIQUE -->
|
|
<section id="nosotros-principios" class="principios-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">El Posicionamiento "Boutique"</h2>
|
|
<p class="section-subtitle">Ser una agencia boutique implica tres principios rectores que protegen la calidad y el resultado de tu proyecto.</p>
|
|
</div>
|
|
<div class="principios-grid">
|
|
<div class="principio-item">
|
|
<div class="principio-numero">01</div>
|
|
<h4>Cero plantillas prefabricadas</h4>
|
|
<p>Cada diseño, arquitectura web o plan de contenidos se crea a medida de la identidad, necesidades y madurez real de tu negocio.</p>
|
|
</div>
|
|
<div class="principio-item">
|
|
<div class="principio-numero">02</div>
|
|
<h4>Capacidad controlada de cuentas</h4>
|
|
<p>Priorizamos la profundidad operativa sobre el volumen desmedido de clientes, garantizando atención directa y personalización real.</p>
|
|
</div>
|
|
<div class="principio-item">
|
|
<div class="principio-numero">03</div>
|
|
<h4>Foco visual y de contenido</h4>
|
|
<p>Aunque la automatización es clave, nuestro valor diferencial perceptible está en el criterio estético, la narrativa visual y la calidad de producción.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECCIÓN 4: TRANSPARENCIA -->
|
|
<section id="nosotros-transparencia" class="transparencia-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Transparencia antes de la primera reunión</h2>
|
|
<p class="section-subtitle">Los números, dichos de entrada, no como parte de una negociación, sino como punto de partida.</p>
|
|
</div>
|
|
|
|
<div class="transparencia-grid">
|
|
<!-- Tarjeta 1: INVERSIÓN -->
|
|
<article class="transparencia-card">
|
|
<div class="transparencia-icono">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M12 2v20M2 12h20" stroke-linecap="round"/>
|
|
<circle cx="12" cy="12" r="10" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<p class="transparencia-titulo">INVERSIÓN</p>
|
|
<p class="transparencia-dato">Desde $250.000/mes</p>
|
|
<p class="transparencia-texto">
|
|
Planes desde <strong>$250.000</strong> (Esencia) hasta <strong>$1.000.000</strong> (Élite). El armado inicial —branding, sitio web— se presupuesta por proyecto.
|
|
</p>
|
|
</article>
|
|
|
|
<!-- Tarjeta 2: TIEMPOS -->
|
|
<article class="transparencia-card">
|
|
<div class="transparencia-icono">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<circle cx="12" cy="12" r="10" stroke-linecap="round"/>
|
|
<path d="M12 6v6l4 2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<p class="transparencia-titulo">TIEMPOS</p>
|
|
<p class="transparencia-dato">15-30 días</p>
|
|
<p class="transparencia-texto">
|
|
Presencia digital lista en <strong>15-30 días</strong>. Resultados de posicionamiento sostenido en <strong>3-6 meses</strong>. Sin promesas de magia inmediata.
|
|
</p>
|
|
</article>
|
|
|
|
<!-- Tarjeta 3: CONTRATO -->
|
|
<article class="transparencia-card">
|
|
<div class="transparencia-icono">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-linecap="round"/>
|
|
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<p class="transparencia-titulo">CONTRATO</p>
|
|
<p class="transparencia-dato">3 meses · luego mensual</p>
|
|
<p class="transparencia-texto">
|
|
Compromiso mínimo de <strong>3 meses</strong> para que la estrategia tome forma, luego renovación mensual. Cancelación con <strong>30 días de aviso</strong>.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECCIÓN 5: CASOS TESTIGO / ARQUETIPOS -->
|
|
<section id="nosotros-casos" class="casos-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Matriz de Soluciones</h2>
|
|
<p class="section-subtitle">Nuestra experiencia define arquetipos de solución que comercializamos con total solvencia operativa.</p>
|
|
</div>
|
|
|
|
<div class="casos-grid-simetrico">
|
|
<!-- ARQUETIPO 1 -->
|
|
<article class="caso-card">
|
|
<div class="caso-header">
|
|
<span class="caso-badge">Mordi - El mundo en un bocado</span>
|
|
<h3 class="caso-titulo">Identidad Integral</h3>
|
|
</div>
|
|
<p class="caso-descripcion">Desarrollo de marca completo, mascota propia y administración continua de redes.</p>
|
|
<div class="caso-leccion">
|
|
<strong>Lección:</strong> Capacidad de crear activos creativos de alto impacto y sostenerlos con pauta publicitaria.
|
|
</div>
|
|
</article>
|
|
|
|
<!-- ARQUETIPO 2 -->
|
|
<article class="caso-card">
|
|
<div class="caso-header">
|
|
<span class="caso-badge">ArWorks - higiene y seguridad</span>
|
|
<h3 class="caso-titulo">Infraestructura B2B</h3>
|
|
</div>
|
|
<p class="caso-descripcion">Consultora de Seguridad: Sitio web corporativo a medida y arquitectura sobria.</p>
|
|
<div class="caso-leccion">
|
|
<strong>Lección:</strong> Validación de desarrollo web enfocado en transmitir seriedad, confianza y soporte a procesos complejos.
|
|
</div>
|
|
</article>
|
|
|
|
<!-- ARQUETIPO 3 (INSÍGNIA) -->
|
|
<article class="caso-card caso-insignia">
|
|
<div class="caso-header">
|
|
<span class="caso-badge caso-badge-insignia">vetta io</span>
|
|
<h3 class="caso-titulo">Ecosistema Digital Completo</h3>
|
|
</div>
|
|
<p class="caso-descripcion">Empresa de Tecnología: Branding + Web a medida + RRSS activas.</p>
|
|
<div class="caso-leccion caso-leccion-insignia">
|
|
<strong>Lección:</strong> Nuestro servicio estrella. Integra identidad desde cero, presencia web sólida y canal de comunicación activo.
|
|
</div>
|
|
</article>
|
|
|
|
<!-- ARQUETIPO 4 -->
|
|
<article class="caso-card">
|
|
<div class="caso-header">
|
|
<span class="caso-badge">ide - consultores</span>
|
|
<h3 class="caso-titulo">Profesionalización de Servicios</h3>
|
|
</div>
|
|
<p class="caso-descripcion">Consultores Independientes: Web a medida + Gestión estratégica de RRSS.</p>
|
|
<div class="caso-leccion">
|
|
<strong>Lección:</strong> El modelo estándar para pequeñas firmas: plataforma para captar y validar, redes para nutrir y generar confianza.
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECCIÓN 6: CTA FINAL -->
|
|
<section class="cta-section">
|
|
<div class="cta-card">
|
|
<h2 class="cta-title">¿Listo para construir tu imperio con esencia?</h2>
|
|
<p class="cta-subtitle">Agendemos una reunión. Sin plantillas, sin compromisos, solo estrategia a medida.</p>
|
|
<div class="cta-buttons">
|
|
<a href="contacto.html" class="btn btn-cta-primary">Hablemos de tu proyecto</a>
|
|
<a href="index.html#portfolio" class="btn btn-cta-secondary">Ver Casos de Éxito</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="footer-container"></div>
|
|
|
|
<script src="scripts/main.js"></script>
|
|
<script src="scripts/fluid.js"></script>
|
|
</body>
|
|
</html> |