version 1
This commit is contained in:
+674
@@ -0,0 +1,674 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Amor & Roma — Estudio Creativo</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ===== CANVAS PARA EFECTO DE HUMO ===== -->
|
||||
<canvas id="fluidCanvas"></canvas>
|
||||
|
||||
<!-- ===== OVERLAY ===== -->
|
||||
<div class="overlay" id="overlay" onclick="toggleMenu()"></div>
|
||||
|
||||
<!-- ===== MENU BOTTOM SHEET ===== -->
|
||||
<nav class="sheet" id="sheet">
|
||||
<div class="sheet-handle"></div>
|
||||
<div class="sheet-top">
|
||||
<div class="logo">
|
||||
<a href="index.html">
|
||||
<img src="logo_ciruela.png" alt="Amor & Roma" class="logo-img">
|
||||
</a>
|
||||
</div>
|
||||
<button class="close-btn" onclick="toggleMenu()">✕</button>
|
||||
</div>
|
||||
<div class="sheet-body">
|
||||
<div class="sheet-col">
|
||||
<div class="sheet-col-title">Soluciones Web</div>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Diseño Web</span>
|
||||
<span class="sheet-link-desc">Sitios informativos modernos</span>
|
||||
</a>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">E-commerce</span>
|
||||
<span class="sheet-link-desc">Tiendas online con todas las funcionalidades</span>
|
||||
</a>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Google Ads</span>
|
||||
<span class="sheet-link-desc">Publicidad en Search y Display</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="sheet-col">
|
||||
<div class="sheet-col-title">Redes Sociales</div>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Community Manager</span>
|
||||
<span class="sheet-link-desc">Administración profesional de redes</span>
|
||||
</a>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Creación de Contenido</span>
|
||||
<span class="sheet-link-desc">Contenido original y atractivo</span>
|
||||
</a>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Meta Ads</span>
|
||||
<span class="sheet-link-desc">Publicidad en Facebook e Instagram</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="sheet-col">
|
||||
<div class="sheet-col-title">Branding</div>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Diseño de Logos</span>
|
||||
<span class="sheet-link-desc">Personalizados y profesionales</span>
|
||||
</a>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Identidad de Marca</span>
|
||||
<span class="sheet-link-desc">Creación y desarrollo de marca</span>
|
||||
</a>
|
||||
<a href="#contacto" onclick="toggleMenu()" class="sheet-link highlight">
|
||||
<span class="sheet-link-icon">✉</span>
|
||||
<span class="sheet-link-main">Contacto</span>
|
||||
<span class="sheet-link-desc">Empezá tu proyecto</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ===== HEADER ===== -->
|
||||
<header>
|
||||
<div class="logo">
|
||||
<img src="logo_frio.png" alt="Amor & Roma" class="logo-img">
|
||||
</div>
|
||||
<button class="menu-btn" onclick="toggleMenu()" aria-label="Abrir menú">
|
||||
<span class="bars"><span></span><span></span><span></span></span>
|
||||
<span class="menu-label">Menú</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- ===== HERO ===== -->
|
||||
<section class="hero" id="inicio">
|
||||
<div class="hero-content">
|
||||
<div class="eyebrow">Estudio Creativo · Agencia Boutique</div>
|
||||
<h1>Marcas con <span class="grad-word">esencia,</span><br>construidas con <span class="grad-word">estrategia.</span></h1>
|
||||
<p>Branding, diseño web y marketing digital para negocios que quieren crecer sin perder lo que los hace únicos.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#servicios" class="btn btn-solid">Ver servicios</a>
|
||||
<a href="#contacto" class="btn btn-outline">Contactanos</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#servicios" class="home-btn" aria-label="Ir a servicios">✦</a>
|
||||
<div class="scroll-hint"><div class="line"></div>Scroll</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== SERVICIOS ===== -->
|
||||
<section class="servicios" id="servicios">
|
||||
<div class="eyebrow">Lo que hacemos</div>
|
||||
<h2>Servicios pensados para marcas con <span class="grad-word">esencia.</span></h2>
|
||||
<p class="lede">Cuatro disciplinas que trabajan juntas, no por separado — cada proyecto se arma con la combinación justa para tu marca.</p>
|
||||
<div class="tabs">
|
||||
<button class="tab active" onclick="showTab(0,this)"><span class="num">01</span>Branding</button>
|
||||
<button class="tab" onclick="showTab(1,this)"><span class="num">02</span>Diseño Web</button>
|
||||
<button class="tab" onclick="showTab(2,this)"><span class="num">03</span>Marketing Digital</button>
|
||||
<button class="tab" onclick="showTab(3,this)"><span class="num">04</span>IA & Automatización</button>
|
||||
</div>
|
||||
<div class="panel active" data-panel="0">
|
||||
<div class="panel-copy">
|
||||
<h3>Identidad con <em>alma,</em><br>no solo con estilo.</h3>
|
||||
<p>Construimos el sistema visual y verbal que sostiene tu marca: desde el naming y el logo hasta el tono de voz con el que hablás en cada canal.</p>
|
||||
<a href="#contacto" class="btn btn-outline">Quiero mi identidad de marca →</a>
|
||||
</div>
|
||||
<div class="panel-list">
|
||||
<div class="item"><span class="icon-min">✦</span> Naming y concepto de marca</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Diseño de logo e isotipo</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Paleta, tipografía y manual de marca</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Tono de voz y guía de comunicación</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel" data-panel="1">
|
||||
<div class="panel-copy">
|
||||
<h3>Sitios que <em>convierten,</em><br>no solo que se ven bien.</h3>
|
||||
<p>Diseño y desarrollo de sitios web a medida — rápidos, responsivos y pensados para que quien llega, actúe.</p>
|
||||
<a href="#contacto" class="btn btn-outline">Quiero mi sitio web →</a>
|
||||
</div>
|
||||
<div class="panel-list">
|
||||
<div class="item"><span class="icon-min">✦</span> Landing pages y sitios institucionales</div>
|
||||
<div class="item"><span class="icon-min">✦</span> UX/UI a medida</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Optimización SEO técnica</div>
|
||||
<div class="item"><span class="icon-min">✦</span> E-commerce y tiendas online</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel" data-panel="2">
|
||||
<div class="panel-copy">
|
||||
<h3>Presencia <em>constante,</em><br>estrategia real.</h3>
|
||||
<p>Gestión de redes, contenido y pauta — con reportes claros para que sepas siempre qué está funcionando y por qué.</p>
|
||||
<a href="#contacto" class="btn btn-outline">Quiero mi estrategia digital →</a>
|
||||
</div>
|
||||
<div class="panel-list">
|
||||
<div class="item"><span class="icon-min">✦</span> Community management</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Publicidad en Meta e Instagram Ads</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Estrategia de contenido y calendario</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Reportes mensuales de performance</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel" data-panel="3">
|
||||
<div class="panel-copy">
|
||||
<h3>Tecnología al servicio<br>de <em>tu tiempo.</em></h3>
|
||||
<p>Automatizamos lo repetitivo para que tu equipo se enfoque en lo estratégico — sin perder el trato cercano con tus clientes.</p>
|
||||
<a href="#contacto" class="btn btn-outline">Quiero automatizar procesos →</a>
|
||||
</div>
|
||||
<div class="panel-list">
|
||||
<div class="item"><span class="icon-min">✦</span> Chatbots y respuestas automáticas</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Automatización de leads y seguimiento</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Integraciones con CRM y WhatsApp</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Consultoría en IA aplicada a tu negocio</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#planes" class="home-btn" aria-label="Ir a planes">✦</a>
|
||||
</section>
|
||||
|
||||
<!-- ===== PLANES ===== -->
|
||||
<section class="planes" id="planes">
|
||||
<div class="eyebrow">Inversión</div>
|
||||
<h2>Un plan para cada <span class="grad-word">etapa</span> de tu marca.</h2>
|
||||
<p class="lede">Cuatro niveles pensados para acompañar tu crecimiento — desde presencia digital consistente hasta gestión integral de marca.</p>
|
||||
<div class="plans-grid">
|
||||
<div class="plan-card">
|
||||
<div class="plan-name">Esencial</div>
|
||||
<div class="plan-stars">★</div>
|
||||
<div class="plan-obj">Establecer una presencia digital profesional y consistente.</div>
|
||||
<ul class="plan-feats">
|
||||
<li>2 redes sociales</li>
|
||||
<li>8 publicaciones + 8 historias / mes</li>
|
||||
<li>1 diseño de marca (logo)</li>
|
||||
<li>Reunión mensual de estrategia</li>
|
||||
<li>Reporte mensual de métricas</li>
|
||||
</ul>
|
||||
<a href="#contacto" class="plan-cta">+Info</a>
|
||||
</div>
|
||||
<div class="plan-card">
|
||||
<div class="plan-name">Impulso</div>
|
||||
<div class="plan-stars">★★</div>
|
||||
<div class="plan-obj">Aumentar visibilidad, interacción y generación de leads calificados.</div>
|
||||
<ul class="plan-feats">
|
||||
<li>2 redes · 12 publicaciones + 4 reels</li>
|
||||
<li>Logo + paleta de colores</li>
|
||||
<li>1 campaña Meta Ads + retargeting</li>
|
||||
<li>Automatización de respuestas frecuentes</li>
|
||||
<li>Gestión de Meta Business Suite</li>
|
||||
</ul>
|
||||
<a href="#contacto" class="plan-cta">+Info</a>
|
||||
</div>
|
||||
<div class="plan-card reco">
|
||||
<div class="badge">Más Popular</div>
|
||||
<div class="plan-name">Premium</div>
|
||||
<div class="plan-stars">★★★</div>
|
||||
<div class="plan-obj">Consolidar y expandir la empresa comercialmente.</div>
|
||||
<ul class="plan-feats">
|
||||
<li>3 redes · 16 publicaciones + 8 reels</li>
|
||||
<li>Sesión de fotos/video quincenal</li>
|
||||
<li>2 campañas Meta Ads + Google Ads</li>
|
||||
<li>Respuestas con IA 24/7</li>
|
||||
<li>Reporte semanal + reunión mensual</li>
|
||||
<li>Soporte prioritario</li>
|
||||
</ul>
|
||||
<a href="#contacto" class="plan-cta">+Info</a>
|
||||
</div>
|
||||
<div class="plan-card">
|
||||
<div class="plan-name">Elite</div>
|
||||
<div class="plan-stars">★★★★</div>
|
||||
<div class="plan-obj">Máximo posicionamiento y gestión integral de marca.</div>
|
||||
<ul class="plan-feats">
|
||||
<li>4 redes · 20 publicaciones + 16 reels</li>
|
||||
<li>Dirección creativa integral de marca</li>
|
||||
<li>3 campañas + TikTok Ads + Google Ads</li>
|
||||
<li>Estrategia 360° con planificación mensual</li>
|
||||
<li>Gestión de reputación online</li>
|
||||
</ul>
|
||||
<a href="#contacto" class="plan-cta">+Info</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#cotizador" class="btn btn-outline plan-main-cta">Consulta tu plan ideal</a>
|
||||
<a href="#proceso" class="home-btn" aria-label="Ir a proceso">✦</a>
|
||||
</section>
|
||||
|
||||
<!-- ===== SERVICIOS A LA CARTA ===== -->
|
||||
<section class="servicios-carta" id="servicios-carta">
|
||||
<div class="eyebrow">Servicios a la carta</div>
|
||||
<h2>Para complementar cualquier <span class="grad-word">plan,</span><br>o contratar de forma <span class="grad-word">independiente.</span></h2>
|
||||
<p class="lede">Elegí los servicios que necesitás, sin compromiso mensual. Todo lo que tu marca necesita, a tu ritmo.</p>
|
||||
<div class="acc" id="acc">
|
||||
<div class="acc-item open">
|
||||
<div class="acc-head" onclick="toggleAcc(this)">
|
||||
<div class="acc-head-left"><span class="acc-num">01</span><span class="acc-name">Diseño Web & Desarrollo</span></div>
|
||||
<div class="acc-toggle">+</div>
|
||||
</div>
|
||||
<div class="acc-body">
|
||||
<div class="acc-body-inner">
|
||||
<div class="service-row"><b>Landing Page Profesional</b>Diseño de una sección, UI/UX + SEO básico <span class="price">Desde $350.000</span></div>
|
||||
<div class="service-row"><b>Sitio Institucional (hasta 7 secciones)</b>Inicio, Servicios, Nosotros, Blog, Contacto <span class="price">Desde $600.000</span></div>
|
||||
<div class="service-row"><b>E-commerce</b>Tienda online autoadministrable con pasarela de pago <span class="price">Desde $900.000</span></div>
|
||||
<div class="service-row"><b>Mantenimiento Web</b>Backups, seguridad y soporte técnico <span class="price">Desde $50.000/mes</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acc-item">
|
||||
<div class="acc-head" onclick="toggleAcc(this)">
|
||||
<div class="acc-head-left"><span class="acc-num">02</span><span class="acc-name">Branding e Identidad Visual</span></div>
|
||||
<div class="acc-toggle">+</div>
|
||||
</div>
|
||||
<div class="acc-body">
|
||||
<div class="acc-body-inner">
|
||||
<div class="service-row"><b>Diseño de Logotipo</b>3 propuestas + revisiones <span class="price">Desde $180.000</span></div>
|
||||
<div class="service-row"><b>Manual de Marca Completo</b>Logo, paleta, tipografías, tono de voz <span class="price">Desde $300.000</span></div>
|
||||
<div class="service-row"><b>Rediseño de Identidad Visual</b>Actualización de marca existente <span class="price">A cotizar</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acc-item">
|
||||
<div class="acc-head" onclick="toggleAcc(this)">
|
||||
<div class="acc-head-left"><span class="acc-num">03</span><span class="acc-name">Publicidad Digital Avanzada</span></div>
|
||||
<div class="acc-toggle">+</div>
|
||||
</div>
|
||||
<div class="acc-body">
|
||||
<div class="acc-body-inner">
|
||||
<div class="service-row"><b>Campaña Google Ads</b>Búsqueda y display <span class="price">Desde $150.000/mes</span></div>
|
||||
<div class="service-row"><b>Campaña TikTok Ads</b>Alcance a audiencias jóvenes <span class="price">Desde $120.000/mes</span></div>
|
||||
<div class="service-row"><b>Auditoría de Campañas</b>Análisis y oportunidades de mejora <span class="price">Desde $90.000</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acc-item">
|
||||
<div class="acc-head" onclick="toggleAcc(this)">
|
||||
<div class="acc-head-left"><span class="acc-num">04</span><span class="acc-name">Diseño Digital & Gráfico</span></div>
|
||||
<div class="acc-toggle">+</div>
|
||||
</div>
|
||||
<div class="acc-body">
|
||||
<div class="acc-body-inner">
|
||||
<div class="service-row"><b>Infografías</b>Comunicación visual de datos y procesos <span class="price">Desde $80.000/u</span></div>
|
||||
<div class="service-row"><b>Plantillas para Redes</b>Set editable de 5 piezas <span class="price">Desde $100.000</span></div>
|
||||
<div class="service-row"><b>Material Impreso</b>Flyers, folletos, tarjetas <span class="price">A cotizar</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acc-item">
|
||||
<div class="acc-head" onclick="toggleAcc(this)">
|
||||
<div class="acc-head-left"><span class="acc-num">05</span><span class="acc-name">Producción Audiovisual</span></div>
|
||||
<div class="acc-toggle">+</div>
|
||||
</div>
|
||||
<div class="acc-body">
|
||||
<div class="acc-body-inner">
|
||||
<div class="service-row"><b>Sesión Fotográfica</b>Producto, instalaciones o equipo <span class="price">A cotizar</span></div>
|
||||
<div class="service-row"><b>Reel / Video Corto</b>Hasta 30 segundos, con edición <span class="price">Desde $120.000</span></div>
|
||||
<div class="service-row"><b>Pack de 3 Reels</b>Contenido consistente de alto impacto <span class="price">Desde $300.000</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#cifras" class="home-btn" aria-label="Ir a cifras">✦</a>
|
||||
</section>
|
||||
|
||||
<!-- ===== PROCESO ===== -->
|
||||
<section class="proceso" id="proceso">
|
||||
<div class="eyebrow">Cómo trabajamos</div>
|
||||
<h2>Tu proyecto, paso a paso, y sin <span class="grad-word">sorpresas.</span></h2>
|
||||
<p class="lede">Un proceso claro y colaborativo — sabés exactamente qué pasa en cada etapa, sin plantillas genéricas.</p>
|
||||
<div class="arcade-grid">
|
||||
<div class="column">
|
||||
<div class="arch"><span class="num">01</span></div>
|
||||
<div class="cat">Contacto</div>
|
||||
<div class="step-title">Reunión de brief</div>
|
||||
<div class="step-desc">Nos contás tu marca y objetivos.</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="arch"><span class="num">02</span></div>
|
||||
<div class="cat">Propuesta</div>
|
||||
<div class="step-title">Plan de trabajo</div>
|
||||
<div class="step-desc">Entregables, inversión y tiempos.</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="arch"><span class="num">03</span></div>
|
||||
<div class="cat">Diseño</div>
|
||||
<div class="step-title">Dirección de arte</div>
|
||||
<div class="step-desc">Concepto visual a tu aprobación.</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="arch"><span class="num">04</span></div>
|
||||
<div class="cat">Producción</div>
|
||||
<div class="step-title">Desarrollo</div>
|
||||
<div class="step-desc">Construimos con seguimiento.</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="arch"><span class="num">05</span></div>
|
||||
<div class="cat">Revisión</div>
|
||||
<div class="step-title">Ajustes finales</div>
|
||||
<div class="step-desc">Tu feedback moldea el resultado.</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="arch final"><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2.4"><path d="M5 12l5 5L19 7"/></svg></div>
|
||||
<div class="cat">Lanzamiento</div>
|
||||
<div class="step-title">Entrega</div>
|
||||
<div class="step-desc">Accesos y capacitación completa.</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#cifras" class="home-btn" aria-label="Ir a cifras">✦</a>
|
||||
</section>
|
||||
|
||||
<!-- ===== CIFRAS ===== -->
|
||||
<section class="cifras" id="cifras">
|
||||
<div class="eyebrow">Inversión & tiempos</div>
|
||||
<h2>Transparencia antes de la <span class="grad-word">primera reunión.</span></h2>
|
||||
<p class="lede">Los números, dichos de entrada — no como parte de una negociación, sino como punto de partida.</p>
|
||||
<div class="cifras-grid">
|
||||
<div class="cifra-card">
|
||||
<div class="cifra-icon"></div>
|
||||
<div class="cifra-label">Inversión</div>
|
||||
<div class="cifra-value">Desde $250.000/mes</div>
|
||||
<div class="cifra-desc">Planes desde <b>$250.000</b> (Esencial) hasta <b>$1.000.000</b> (Elite). El armado inicial —branding, sitio web— se presupuesta por proyecto.</div>
|
||||
</div>
|
||||
<div class="cifra-card">
|
||||
<div class="cifra-icon"></div>
|
||||
<div class="cifra-label">Tiempos</div>
|
||||
<div class="cifra-value">15–30 días</div>
|
||||
<div class="cifra-desc">Presencia digital lista en <b>15-30 días</b>. Resultados de posicionamiento sostenido en <b>3-6 meses</b>. Sin promesas de magia inmediata.</div>
|
||||
</div>
|
||||
<div class="cifra-card">
|
||||
<div class="cifra-icon"></div>
|
||||
<div class="cifra-label">Contrato</div>
|
||||
<div class="cifra-value">3 meses · luego mensual</div>
|
||||
<div class="cifra-desc">Compromiso mínimo de <b>3 meses</b> para que la estrategia tome forma, luego renovación mensual. Cancelación <b>con 30 días de aviso</b>.</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#cotizador" class="home-btn" aria-label="Ir a cotizador">✦</a>
|
||||
</section>
|
||||
|
||||
<!-- ===== COTIZADOR ===== -->
|
||||
<section class="cotizador" id="cotizador">
|
||||
<div class="eyebrow">Cotizador</div>
|
||||
<h2>¿Cuál es tu <span class="grad-word">plan ideal</span><span class="signopreg">?</span></h2>
|
||||
<p class="lede">3 preguntas rápidas y te decimos qué plan se ajusta mejor a tu marca.</p>
|
||||
<div class="card">
|
||||
<div class="progress">
|
||||
<div class="seg"><i id="p1"></i></div>
|
||||
<div class="seg"><i id="p2"></i></div>
|
||||
<div class="seg"><i id="p3"></i></div>
|
||||
</div>
|
||||
<div class="step active" data-step="0">
|
||||
<div class="q-num">Pregunta 01</div>
|
||||
<div class="q-title">¿Cómo describirías el momento de tu negocio?</div>
|
||||
<div class="options" data-q="0">
|
||||
<div class="opt" data-val="1"><div class="opt-title">Recién empezando</div><div class="opt-sub">Necesito presencia digital desde cero</div></div>
|
||||
<div class="opt" data-val="2"><div class="opt-title">En crecimiento</div><div class="opt-sub">Ya tengo redes, quiero más alcance</div></div>
|
||||
<div class="opt" data-val="3"><div class="opt-title">Establecido</div><div class="opt-sub">Busco consolidar y vender más</div></div>
|
||||
<div class="opt" data-val="4"><div class="opt-title">Consolidado</div><div class="opt-sub">Quiero gestión integral de marca</div></div>
|
||||
</div>
|
||||
<div class="nav-row"><span></span><button class="btn btn-cotizador" onclick="next()" disabled id="next0">Siguiente →</button></div>
|
||||
</div>
|
||||
<div class="step" data-step="1">
|
||||
<div class="q-num">Pregunta 02</div>
|
||||
<div class="q-title">¿Qué es lo que más necesitás hoy?</div>
|
||||
<div class="options" data-q="1">
|
||||
<div class="opt" data-val="1"><div class="opt-title">Presencia en redes</div><div class="opt-sub">Contenido consistente y profesional</div></div>
|
||||
<div class="opt" data-val="2"><div class="opt-title">Más leads y ventas</div><div class="opt-sub">Publicidad digital que convierta</div></div>
|
||||
<div class="opt" data-val="3"><div class="opt-title">Producción de contenido</div><div class="opt-sub">Fotos, video y piezas de calidad</div></div>
|
||||
<div class="opt" data-val="4"><div class="opt-title">Todo integrado</div><div class="opt-sub">Estrategia 360° gestionada por otros</div></div>
|
||||
</div>
|
||||
<div class="nav-row"><button class="btn btn-cotizador-back" onclick="prev()">← Atrás</button><button class="btn btn-cotizador" onclick="next()" disabled id="next1">Siguiente →</button></div>
|
||||
</div>
|
||||
<div class="step" data-step="2">
|
||||
<div class="q-num">Pregunta 03</div>
|
||||
<div class="q-title">¿Cuál es tu presupuesto mensual aproximado?</div>
|
||||
<div class="options" data-q="2">
|
||||
<div class="opt" data-val="1"><div class="opt-title">Hasta $300.000</div><div class="opt-sub">ARS / mes</div></div>
|
||||
<div class="opt" data-val="2"><div class="opt-title">$300.000 – $450.000</div><div class="opt-sub">ARS / mes</div></div>
|
||||
<div class="opt" data-val="3"><div class="opt-title">$450.000 – $700.000</div><div class="opt-sub">ARS / mes</div></div>
|
||||
<div class="opt" data-val="4"><div class="opt-title">Más de $700.000</div><div class="opt-sub">ARS / mes</div></div>
|
||||
</div>
|
||||
<div class="nav-row"><button class="btn btn-cotizador-back" onclick="prev()">← Atrás</button><button class="btn btn-cotizador" onclick="showResult()" disabled id="next2">Ver resultado →</button></div>
|
||||
</div>
|
||||
<div class="result" id="result">
|
||||
<div class="result-badge">Tu plan recomendado</div>
|
||||
<div class="result-plan" id="rp-name">—</div>
|
||||
<div class="result-price" id="rp-price">—</div>
|
||||
<p class="result-desc" id="rp-desc">—</p>
|
||||
<div class="result-actions">
|
||||
<a class="btn btn-solid" href="#contacto">Quiero este plan</a>
|
||||
<button class="btn btn-cotizador-restart" onclick="restart()">Volver a empezar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#nosotros" class="home-btn" aria-label="Ir a nosotros">✦</a>
|
||||
</section>
|
||||
|
||||
<!-- ===== NOSOTROS ===== -->
|
||||
<section class="quienes" id="nosotros">
|
||||
<div class="eyebrow">Nosotros</div>
|
||||
<h2>Un equipo chico, con <span class="grad-word">mucha energía.</span></h2>
|
||||
<p class="lede">Creemos que las marcas se construyen con escucha, estrategia y mucho amor por lo que hacemos.</p>
|
||||
<div class="team-grid team-grid-simple">
|
||||
<div class="team-card-simple">
|
||||
<div class="team-name">Patricia Pugliese</div>
|
||||
<div class="team-role">Estrategia & Creatividad</div>
|
||||
<div class="team-detail">Investigación, branding, identidad visual y todo lo que da forma a una marca con personalidad.</div>
|
||||
</div>
|
||||
<div class="team-card-simple">
|
||||
<div class="team-name">Francisco Anfuso</div>
|
||||
<div class="team-role">Desarrollo & Tecnología</div>
|
||||
<div class="team-detail">Diseño web, desarrollo, automatizaciones y soluciones técnicas que funcionan sin complicaciones.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-footer">
|
||||
<p class="team-footer-text">Y como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta.</p>
|
||||
</div>
|
||||
<a href="#faq" class="home-btn" aria-label="Ir a FAQ">✦</a>
|
||||
</section>
|
||||
|
||||
<!-- ===== FAQ ===== -->
|
||||
<section class="faq" id="faq">
|
||||
<div class="eyebrow">Preguntas Frecuentes</div>
|
||||
<h2>Todo lo que necesitás saber <span class="grad-word">antes de empezar.</span></h2>
|
||||
<p class="lede">Respondemos las dudas más comunes para que llegues con confianza al primer encuentro.</p>
|
||||
<div class="faq-grid">
|
||||
<div class="faq-item open">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q">¿Cómo funciona el proceso de trabajo?</span>
|
||||
<span class="faq-toggle">−</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>Empezamos con una llamada de descubrimiento para conocer tu negocio, objetivos y desafíos. Luego armamos una propuesta a medida, la ejecutamos con entregas parciales y ajustamos hasta que estés 100% conforme. Todo con comunicación clara y tiempos acordados.</p></div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q">¿Qué incluye exactamente cada plan?</span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>Cada plan tiene un desglose detallado en la sección de Planes. Pero en resumen: incluyen gestión de redes, diseño de marca, publicidad digital, automatizaciones y reportes. Si necesitás algo específico que no esté listado, lo sumamos a medida.</p></div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q">¿Puedo contratar servicios sueltos sin un plan mensual?</span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>¡Sí! En la sección "Servicios a la carta" tenés disponibles branding, diseño web, campañas puntuales y producción de contenido. Podés contratarlos de forma independiente, sin compromiso mensual.</p></div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q">¿Qué resultados puedo esperar?</span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>Depende del punto de partida, pero nuestros clientes suelen ver aumento en alcance, engagement y generación de leads en los primeros 3 meses. Compartimos reportes mensuales para que siempre sepas cómo evoluciona tu marca.</p></div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q">¿Trabajan con negocios de cualquier rubro?</span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>Trabajamos con marcas de moda, gastronomía, tecnología, salud, educación y más. Lo importante es que tengas claros tus valores y quieras construir una marca con identidad propia — el rubro es secundario.</p></div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q">¿Cómo facturan? ¿Hay algún costo de inicio?</span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>Facturamos con factura electrónica tipo C o E. No hay costo de inicio: los planes se abonan mes a mes, con un 50% de anticipo en proyectos puntuales (como diseño web o branding completo).</p></div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q">¿Puedo cambiar de plan o cancelar cuando quiera?</span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>Por supuesto. Podés subir o bajar de plan con 15 días de aviso. Si querés cancelar, también con 15 días de anticipación. Sin letra chica ni permanencias forzadas.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#contacto" class="home-btn" aria-label="Ir a contacto">✦</a>
|
||||
</section>
|
||||
|
||||
<!-- ===== CONTACTO ===== -->
|
||||
<section class="contacto" id="contacto">
|
||||
<div class="eyebrow">Contacto</div>
|
||||
<h2>¿Empezamos a <span class="grad-word">construir</span> tu marca?</h2>
|
||||
<p class="lede">Completá el formulario o escribinos directo — te respondemos en menos de 24 horas.</p>
|
||||
<div class="contact-grid">
|
||||
<div class="contact-form-wrap">
|
||||
<form class="contact-form" id="contactForm" onsubmit="return handleSubmit(event)">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="nombre">Nombre completo <span class="req">*</span></label>
|
||||
<input type="text" id="nombre" name="nombre" required placeholder="Tu nombre">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email <span class="req">*</span></label>
|
||||
<input type="email" id="email" name="email" required placeholder="tu@email.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="empresa">Empresa / Emprendimiento</label>
|
||||
<input type="text" id="empresa" name="empresa" placeholder="Nombre de tu marca">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="telefono">Teléfono</label>
|
||||
<input type="tel" id="telefono" name="telefono" placeholder="+54 9 388 000-0000">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group full">
|
||||
<label for="servicio">¿Qué servicio te interesa? <span class="req">*</span></label>
|
||||
<div class="filter-tags" id="servicioFilter">
|
||||
<button type="button" class="filter-tag active" data-value="todos" onclick="selectFilter(event)">Todos</button>
|
||||
<button type="button" class="filter-tag" data-value="branding" onclick="selectFilter(event)">Branding</button>
|
||||
<button type="button" class="filter-tag" data-value="web" onclick="selectFilter(event)">Diseño Web</button>
|
||||
<button type="button" class="filter-tag" data-value="marketing" onclick="selectFilter(event)">Marketing Digital</button>
|
||||
<button type="button" class="filter-tag" data-value="ia" onclick="selectFilter(event)">IA & Automatización</button>
|
||||
<button type="button" class="filter-tag" data-value="otro" onclick="selectFilter(event)">Otro</button>
|
||||
</div>
|
||||
<input type="hidden" id="servicioSeleccionado" name="servicio" value="todos">
|
||||
<input type="text" id="servicioOtro" name="servicio_otro" placeholder="Especificá cuál..." style="display:none; margin-top:10px; width:100%;">
|
||||
</div>
|
||||
<div class="form-group full">
|
||||
<label for="mensaje">¿Qué necesitás? <span class="req">*</span></label>
|
||||
<textarea id="mensaje" name="mensaje" required placeholder="Contanos sobre tu proyecto, tus objetivos y lo que estás buscando..." rows="5"></textarea>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group" style="flex:1;">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" required>
|
||||
<span>Acepto la <a href="#" style="color:var(--bordo);">política de privacidad</a></span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-solid" style="padding:14px 44px;">Enviar mensaje</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="contact-direct">
|
||||
<div class="contact-card">
|
||||
<div class="contact-icon">📧</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-label">Email</div>
|
||||
<a href="mailto:contacto@amoryroma.com.ar">contacto@amoryroma.com.ar</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-card">
|
||||
<div class="contact-icon">💬</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-label">WhatsApp</div>
|
||||
<a href="https://wa.me/5493886118304" target="_blank">+54 9 388 611-8304</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-card">
|
||||
<div class="contact-icon">📱</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-label">Redes</div>
|
||||
<div class="contact-socials">
|
||||
<a href="https://www.instagram.com/amoryroma.creativo/" target="_blank">Instagram</a>
|
||||
<a href="https://www.linkedin.com/in/patricia-pugliese/" target="_blank">LinkedIn</a>
|
||||
<a href="https://web.facebook.com/amoryroma.creativo" target="_blank">Facebook</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-card">
|
||||
<div class="contact-icon">📍</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-label">Argentina</div>
|
||||
<span style="font-size:13px; color:var(--dusty);">Trabajamos remoto worldwide</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#inicio" class="home-btn" aria-label="Volver arriba">✦</a>
|
||||
</section>
|
||||
|
||||
<!-- ===== FOOTER ===== -->
|
||||
<footer class="footer">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-brand">
|
||||
<div class="footer-logo"><img src="logo_frio.png" alt="Amor & Roma" style="height:36px;width:auto;"></div>
|
||||
<p class="footer-desc">Branding, diseño web y marketing digital para marcas con esencia.</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<div class="footer-col">
|
||||
<h4>Navegación</h4>
|
||||
<a href="#servicios">Servicios</a>
|
||||
<a href="#planes">Planes</a>
|
||||
<a href="#nosotros">Nosotros</a>
|
||||
<a href="#cifras">Cifras</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
<a href="#contacto">Contacto</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>Servicios</h4>
|
||||
<a href="#servicios">Branding</a>
|
||||
<a href="#servicios">Diseño Web</a>
|
||||
<a href="#servicios">Marketing Digital</a>
|
||||
<a href="#servicios">IA & Automatización</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>Contacto</h4>
|
||||
<a href="mailto:contacto@amoryroma.com.ar">contacto@amoryroma.com.ar</a>
|
||||
<a href="https://wa.me/5493886118304" target="_blank">+54 9 388 611-8304</a>
|
||||
<div class="footer-socials">
|
||||
<a href="https://www.instagram.com/amoryroma.creativo/" target="_blank" aria-label="Instagram">IG</a>
|
||||
<a href="https://www.linkedin.com/in/patricia-pugliese/" target="_blank" aria-label="LinkedIn">IN</a>
|
||||
<a href="https://web.facebook.com/amoryroma.creativo" target="_blank" aria-label="Facebook">FB</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span>© 2026 Amor & Roma — Estudio Creativo. Todos los derechos reservados.</span>
|
||||
<span class="footer-legal"><a href="#">Política de privacidad</a><a href="#">Términos y condiciones</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ===== SCRIPTS ===== -->
|
||||
<script src="scripts.js"></script>
|
||||
<script src="fluid.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user