ppugliese/new_amoryroma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
77e85a332870347ef7e19ea4fd6cc457e59a6cfb
new_amoryroma/servicios.html
T
ppugliese 77e85a3328 botones
2026-09-08 10:29:49 -03:00

256 lines
14 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="es-AR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servicios — Amor y Roma</title>
<meta name="description" content="Branding, Redes Sociales, Desarrollo Web, Automatizaciones y Paid Media. Soluciones digitales diseñadas para hacer crecer tu marca.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="site-header">
<div class="container nav-row">
<a href="index.html" class="logo-mark" aria-label="Amor y Roma — inicio">
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
</svg>
<span class="wordmark">amor&amp;roma</span>
</a>
<nav class="nav-links" aria-label="Navegación principal">
<a href="index.html">Inicio</a>
<a href="servicios.html" aria-current="page">Servicios</a>
<a href="planes.html">Planes</a>
<a href="portfolio.html">Portfolio</a>
<a href="nosotros.html">Nosotros</a>
<a href="metodo.html">Método</a>
<a href="contacto.html">Contacto</a>
</nav>
<div class="nav-actions">
<a href="diagnostico.html" class="btn btn-primary">Hablemos</a>
<button class="theme-toggle" data-theme-toggle type="button" aria-label="Cambiar tema claro/oscuro">
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
</button>
<button class="nav-toggle" data-nav-toggle type="button" aria-label="Abrir menú" aria-expanded="false">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
</button>
</div>
</div>
<div class="mobile-menu" data-mobile-menu>
<a href="index.html">Inicio</a>
<a href="servicios.html">Servicios</a>
<a href="planes.html">Planes</a>
<a href="portfolio.html">Portfolio</a>
<a href="nosotros.html">Nosotros</a>
<a href="metodo.html">Método</a>
<a href="diagnostico.html">Diagnóstico</a>
<a href="contacto.html">Contacto</a>
</div>
</header>
<main>
<section class="section-tight">
<div class="container">
<p class="eyebrow">SERVICIOS</p>
<h1 style="font-size:var(--step-4); max-width:20ch;">Soluciones digitales diseñadas para hacer <span class="grad-word">crecer</span> tu marca.</h1>
<p class="lede" style="margin-top:1rem;">No vendemos piezas sueltas: cada servicio resuelve un problema concreto de tu negocio, y puede combinarse con otros según tu etapa.</p>
<a href="diagnostico.html" class="btn btn-primary" style="margin-top:1.5rem;">Encontrá tu solución</a>
</div>
</section>
<!-- SELECTOR DE NECESIDADES -->
<section class="section-tight" style="background:var(--bg-sunken);">
<div class="container">
<h3>¿Qué necesita hoy tu negocio?</h3>
<div class="grid grid-4" style="margin-top:var(--space-3);">
<a href="diagnostico.html?interes=marca" class="card" style="text-align:center;">Construir una marca</a>
<a href="diagnostico.html?interes=presencia" class="card" style="text-align:center;">Mejorar presencia digital</a>
<a href="diagnostico.html?interes=contenido" class="card" style="text-align:center;">Generar contenido</a>
<a href="diagnostico.html?interes=web" class="card" style="text-align:center;">Crear una web</a>
<a href="diagnostico.html?interes=captacion" class="card" style="text-align:center;">Conseguir clientes</a>
<a href="diagnostico.html?interes=automatizacion" class="card" style="text-align:center;">Automatizar procesos</a>
<a href="diagnostico.html?interes=varias" class="card" style="text-align:center;">Escalar campañas</a>
</div>
</div>
</section>
<!-- BRANDING -->
<section id="branding">
<div class="container">
<div class="grid grid-2" style="align-items:center;">
<div>
<p class="eyebrow">01 · BRANDING &amp; IDENTIDAD</p>
<h2 style="max-width:16ch;">La esencia visual y conceptual de tu marca.</h2>
<p class="lede" style="margin-top:1rem;">Diagnóstico de marca, propuesta de valor, personalidad y todo el sistema de identidad que sostiene tu comunicación.</p>
<a href="diagnostico.html?interes=marca" class="btn btn-primary" style="margin-top:1.5rem;">Construir mi marca</a>
</div>
<ul class="grid grid-2" style="font-family:var(--font-small); font-size:0.9rem;">
<li class="card">Diagnóstico de marca</li>
<li class="card">Propuesta de valor</li>
<li class="card">Logotipo e isotipo</li>
<li class="card">Sistema cromático</li>
<li class="card">Tipografía</li>
<li class="card">Personajes / mascotas</li>
<li class="card">Manual de identidad</li>
<li class="card">Kit de plantillas</li>
</ul>
</div>
</div>
</section>
<!-- REDES -->
<section id="redes" style="background:var(--bg-sunken);">
<div class="container">
<div class="grid grid-2" style="align-items:center;">
<ul class="grid grid-2" style="font-family:var(--font-small); font-size:0.9rem; order:2;">
<li class="card">Estrategia y grilla</li>
<li class="card">Copywriting</li>
<li class="card">Dirección de arte</li>
<li class="card">Reels / TikTok</li>
<li class="card">Historias</li>
<li class="card">Moderación</li>
<li class="card">Reporting</li>
<li class="card">Paid Media según plan</li>
</ul>
<div style="order:1;">
<p class="eyebrow">02 · REDES SOCIALES &amp; CONTENIDO</p>
<h2 style="max-width:16ch;">Contenido con criterio, no solo calendario.</h2>
<p class="lede" style="margin-top:1rem;">Estrategia, dirección de arte y gestión pensadas para generar comunidad real, no solo publicaciones.</p>
<a href="planes.html" class="btn btn-primary" style="margin-top:1.5rem;">Ver planes</a>
</div>
</div>
</div>
</section>
<!-- WEB -->
<section id="web">
<div class="container">
<p class="eyebrow">03 · DESARROLLO WEB</p>
<h2 style="max-width:25ch;">Activos digitales construidos alrededor de tu embudo.</h2>
<div class="grid grid-3" style="margin-top:var(--space-4);">
<div class="card">
<h4 style="font-size:1.05rem;">Landing Pages</h4>
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.5rem;">Para campañas y lanzamientos puntuales.</p>
</div>
<div class="card">
<h4 style="font-size:1.05rem;">Sitios corporativos</h4>
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.5rem;">Para empresas y organizaciones B2B.</p>
</div>
<div class="card">
<h4 style="font-size:1.05rem;">Catálogos / E-commerce</h4>
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.5rem;">Para comercialización digital directa.</p>
</div>
</div>
<p style="margin-top:var(--space-3); color:var(--text-soft); font-size:0.92rem;">Mobile first · velocidad · SEO técnico · analítica · Meta Pixel · integración con WhatsApp API.</p>
<a href="diagnostico.html?interes=web" class="btn btn-primary" style="margin-top:1.5rem;">Quiero una web</a>
</div>
</section>
<!-- AUTOMATIZACIONES -->
<section id="automatizaciones" style="background:var(--bg-sunken);">
<div class="container">
<p class="eyebrow">04 · AUTOMATIZACIONES</p>
<h2 style="max-width:18ch;">De la conversación a la venta, sin perder oportunidades.</h2>
<div class="timeline" style="margin-top:var(--space-4); grid-template-columns:repeat(5,1fr) !important;">
<div class="step"><h4 style="font-style:italicl; font-size:1rem;">Interacción</h4></div>
<div class="step"><h4 style="font-style:italic; font-size:1rem;">Cualificación</h4></div>
<div class="step"><h4 style="font-style:italic; font-size:1rem;">Lead</h4></div>
<div class="step"><h4 style="font-style:italic; font-size:1rem;">Notificación</h4></div>
<div class="step"><h4 style="font-style:italic; font-size:1rem;">Seguimiento</h4></div>
</div>
<p style="margin-top:var(--space-3); color:var(--text-soft); font-size:0.92rem;">Instagram · Facebook · WhatsApp · captación · cualificación · notificaciones internas.</p>
<a href="diagnostico.html?interes=automatizacion" class="btn btn-primary" style="margin-top:1.5rem;">Quiero automatizar</a>
</div>
</section>
<!-- PAID MEDIA -->
<section id="paid-media">
<div class="container">
<p class="eyebrow">05 · PAID MEDIA</p>
<h2 style="max-width:18ch;">Publicidad que se optimiza, no que se apaga.</h2>
<p class="lede" style="margin-top:1rem;">Auditoría, definición de públicos, conversiones, creatividades, testing y optimización continua.</p>
<p style="margin-top:0.8rem; color:var(--text-soft); font-size:0.85rem;">La inversión publicitaria (Meta Ads, Google Ads) corre por cuenta del cliente; nuestros honorarios cubren estrategia, configuración, creatividades y optimización.</p>
<a href="diagnostico.html?interes=captacion" class="btn btn-primary" style="margin-top:1.5rem;">Quiero generar oportunidades</a>
</div>
</section>
<!-- SOLUCIONES INTEGRALES -->
<section style="background:var(--c-plum-2); color:var(--c-mist);">
<div class="container">
<h2 style="max-width:18ch; color:var(--c-mist);">Las marcas no crecen por piezas aisladas.</h2>
<p class="lede" style="margin-top:1rem; color:#c9c2d6;">A veces la solución está en conectar varias disciplinas.</p>
<div class="grid grid-4" style="margin-top:var(--space-4);">
<div class="card" style="background:rgba(255,255,255,0.06); border-color:rgba(234,240,238,0.18); color:var(--c-mist);">Branding + Redes</div>
<div class="card" style="background:rgba(255,255,255,0.06); border-color:rgba(234,240,238,0.18); color:var(--c-mist);">Branding + Web + Redes</div>
<div class="card" style="background:rgba(255,255,255,0.06); border-color:rgba(234,240,238,0.18); color:var(--c-mist);">Web + Automatización + Paid Media</div>
<div class="card" style="background:rgba(255,255,255,0.06); border-color:rgba(234,240,238,0.18); color:var(--c-mist);">Ecosistema Digital completo</div>
</div>
<a href="diagnostico.html?interes=varias" class="btn btn-primary" style="margin-top:var(--space-4);">Encontrar mi combinación</a>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="foot-grid">
<div>
<div class="logo-mark" style="color:var(--c-mist);">
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="height:30px;">
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
</svg>
<span class="wordmark" style="color:var(--c-mist);">amor&amp;roma</span>
</div>
<p style="margin-top:0.8rem; color:#c9c2d6; font-style:italic; font-family:var(--font-display);">Marcas con esencia, construidas con estrategia.</p>
</div>
<div>
<h5>Navegación</h5>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="planes.html">Planes</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="metodo.html">Método</a></li>
<li><a href="diagnostico.html">Diagnóstico</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</div>
<div>
<h5>Servicios</h5>
<ul>
<li><a href="servicios.html#branding">Branding</a></li>
<li><a href="servicios.html#redes">Redes</a></li>
<li><a href="servicios.html#web">Web</a></li>
<li><a href="servicios.html#automatizaciones">Automatizaciones</a></li>
<li><a href="servicios.html#paid-media">Paid Media</a></li>
</ul>
</div>
<div>
<h5>Contacto <span style="opacity:.6; font-weight:400;">(datos de prueba)</span></h5>
<ul>
<li><a href="mailto:hola@amoryroma.com.ar">hola@amoryroma.com.ar</a></li>
<li><a href="https://wa.me/5491100000000" target="_blank" rel="noopener">+54 9 11 0000-0000</a></li>
<li><a href="https://instagram.com/amoryroma" target="_blank" rel="noopener">Instagram</a></li>
<li><a href="https://linkedin.com/company/amoryroma" target="_blank" rel="noopener">LinkedIn</a></li>
</ul>
</div>
</div>
<div class="foot-bottom">
<span>© <span data-year></span> Amor y Roma — Estudio Creativo. www.amoryroma.com.ar</span>
<span>Política de privacidad · Términos y condiciones · Cookies</span>
</div>
</div>
</footer>
<a class="whatsapp-float" href="https://wa.me/5491100000000" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
<svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16.01 3C9.38 3 4 8.38 4 15.01c0 2.26.61 4.38 1.68 6.2L4 29l7.98-1.64a11.9 11.9 0 004.03.7c6.63 0 12.01-5.38 12.01-12.05C28.02 8.38 22.64 3 16.01 3zm0 21.8c-1.98 0-3.85-.55-5.44-1.5l-.39-.23-4.86 1 1.03-4.72-.25-.4a9.7 9.7 0 01-1.5-5.15c0-5.4 4.39-9.79 9.8-9.79 5.4 0 9.79 4.39 9.79 9.79.01 5.4-4.38 9.79-9.78 10zM21.4 18c-.28-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.28-.72.9-.88 1.09-.16.19-.32.2-.6.07-.28-.14-1.17-.43-2.23-1.37-.83-.74-1.38-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.13-.13.28-.33.42-.5.14-.16.19-.28.28-.47.09-.19.05-.35-.02-.5-.07-.14-.63-1.52-.87-2.08-.23-.55-.46-.47-.63-.48h-.54c-.19 0-.5.07-.76.35-.26.28-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2 3.05 4.85 4.27.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.66-.68 1.9-1.34.24-.66.24-1.22.17-1.34-.07-.12-.25-.19-.53-.33z"/></svg>
</a>
<script src="js/main.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink