252 lines
11 KiB
HTML
252 lines
11 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="Blog de Amor y Roma. Estrategia, branding, desarrollo web y marketing digital con esencia y solidez.">
|
|
<title>Blog | Amor y Roma — Recursos y Estrategias</title>
|
|
<link rel="stylesheet" href="style/main.css">
|
|
<link rel="stylesheet" href="style/blog.css">
|
|
</head>
|
|
<body>
|
|
<div id="fluid-bg" aria-hidden="true">
|
|
<canvas id="fluidCanvas"></canvas>
|
|
</div>
|
|
<div id="menu-container"></div>
|
|
|
|
<main>
|
|
<!-- HERO -->
|
|
<section class="blog-hero-compact">
|
|
<div class="hero-compact-content">
|
|
<span class="badge-filosofia">Ideas que construyen marcas</span>
|
|
<h1 class="hero-compact-title">Estrategia, diseño y tecnología explicados sin tecnicismos</h1>
|
|
<p class="hero-compact-subtitle">
|
|
Consejos prácticos de branding, web y marketing digital para hacer crecer tu negocio con esencia y estructura.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FILTROS -->
|
|
<section class="blog-filters-section" id="blog-filters-header">
|
|
<div class="filters-container">
|
|
<div class="filters-top-row">
|
|
<div class="search-wrapper-compact">
|
|
<span class="search-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="11" cy="11" r="8"/>
|
|
<path d="m21 21-4.35-4.35"/>
|
|
</svg>
|
|
</span>
|
|
<input type="text" id="blog-search" placeholder="Buscá por tema: branding, web, redes..." autocomplete="off" aria-label="Buscar artículos">
|
|
<button class="search-clear" id="search-clear" type="button" aria-label="Limpiar búsqueda">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M18 6 6 18M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="filter-group-compact">
|
|
<button class="filter-btn active" data-filter="all">Todos</button>
|
|
<button class="filter-btn" data-filter="destacados">Destacados</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filters-bottom-row">
|
|
<div class="filter-categories-compact">
|
|
<button class="category-btn active" data-category="all">Todas</button>
|
|
<button class="category-btn" data-category="branding">Branding</button>
|
|
<button class="category-btn" data-category="web">Web</button>
|
|
<button class="category-btn" data-category="redes">Redes</button>
|
|
<button class="category-btn" data-category="automatizaciones">Automatizaciones</button>
|
|
<button class="category-btn" data-category="paid">Paid Media</button>
|
|
<button class="category-btn" data-category="estrategia">Estrategia</button>
|
|
<button class="category-btn" data-category="casos">Casos</button>
|
|
</div>
|
|
|
|
<div class="filter-secondary-compact">
|
|
<select id="sort-select" class="sort-select-compact">
|
|
<option value="recent">Más recientes</option>
|
|
<option value="popular">Más populares</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="results-info-compact">
|
|
<span id="results-count">Mostrando <strong>todos</strong> los artículos</span>
|
|
<button class="reset-filters-compact" id="reset-filters">Limpiar filtros</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- DESTACADOS -->
|
|
<section class="featured-posts" id="featured-posts">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Más leídos</h2>
|
|
<p class="section-subtitle">Los artículos que más están ayudando a marcas como la tuya.</p>
|
|
</div>
|
|
|
|
<div class="featured-grid">
|
|
<!-- Artículo Destacado 1 -->
|
|
<article class="featured-card" data-categories="branding" data-featured="true">
|
|
<div class="featured-image">
|
|
<img src="assets/blog/logo-marca.jpg" alt="Tu logo no es tu marca">
|
|
<span class="featured-badge">Destacado</span>
|
|
</div>
|
|
<div class="featured-content">
|
|
<div class="featured-meta">
|
|
<span class="category-tag branding">Branding</span>
|
|
<time datetime="2024-01-18">18 Ene 2024</time>
|
|
</div>
|
|
<h3 class="featured-title">Tu logo no es tu marca (y por qué importa)</h3>
|
|
<p class="featured-excerpt">
|
|
Muchos emprendedores confunden el símbolo con la sustancia. Tener un logo bonito no es tener una marca.
|
|
</p>
|
|
<div class="featured-footer">
|
|
<span class="reading-time">⏱ 6 min de lectura</span>
|
|
<a href="articulos/to-logo-no-es-tu-marca.html" class="btn-read">Leer artículo →</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Artículo Destacado 2 -->
|
|
<article class="featured-card" data-categories="web" data-featured="true">
|
|
<div class="featured-image">
|
|
<img src="assets/blog/landing-page.jpg" alt="Landing pages que convierten">
|
|
<span class="featured-badge">Destacado</span>
|
|
</div>
|
|
<div class="featured-content">
|
|
<div class="featured-meta">
|
|
<span class="category-tag web">Web</span>
|
|
<time datetime="2024-01-10">10 Ene 2024</time>
|
|
</div>
|
|
<h3 class="featured-title">Landing pages que convierten: 7 principios probados</h3>
|
|
<p class="featured-excerpt">
|
|
No es magia, es método. Una landing page efectiva no depende de la suerte ni de tendencias pasajeras.
|
|
</p>
|
|
<div class="featured-footer">
|
|
<span class="reading-time"> 8 min de lectura</span>
|
|
<a href="articulos/landing-pages-que-convierten.html" class="btn-read">Leer artículo →</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Artículo Destacado 3 -->
|
|
<article class="featured-card" data-categories="automatizaciones" data-featured="true">
|
|
<div class="featured-image">
|
|
<img src="assets/blog/automatizacion.jpg" alt="Automatizaciones en Instagram">
|
|
<span class="featured-badge">Destacado</span>
|
|
</div>
|
|
<div class="featured-content">
|
|
<div class="featured-meta">
|
|
<span class="category-tag automatizaciones">Automatizaciones</span>
|
|
<time datetime="2024-01-05">5 Ene 2024</time>
|
|
</div>
|
|
<h3 class="featured-title">Automatizaciones en Instagram: de 0 a 100 leads/mes</h3>
|
|
<p class="featured-excerpt">
|
|
Responder el mismo mensaje 50 veces al día no es escalable. Las automatizaciones bien hechas te permiten captar prospectos.
|
|
</p>
|
|
<div class="featured-footer">
|
|
<span class="reading-time">⏱ 9 min de lectura</span>
|
|
<a href="articulos/automatizaciones-instagram.html" class="btn-read">Leer artículo →</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- GRID DE ARTÍCULOS
|
|
<section class="blog-grid-section">
|
|
<div class="blog-grid" id="blog-grid">
|
|
|
|
<article class="blog-card" data-categories="branding" data-featured="true">
|
|
<div class="card-image">
|
|
<img src="assets/blog/logo-marca.jpg" alt="Tu logo no es tu marca">
|
|
<span class="card-category branding">Branding</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-meta">
|
|
<time datetime="2024-01-18">18 Ene 2024</time>
|
|
<span class="reading-time-mini">6 min</span>
|
|
</div>
|
|
<h3 class="card-title">Tu logo no es tu marca (y por qué importa)</h3>
|
|
<p class="card-excerpt">
|
|
Muchos emprendedores confunden el símbolo con la sustancia. Tener un logo bonito no es tener una marca.
|
|
</p>
|
|
<a href="articulos/tu-logo-no-es-tu-marca.html" class="card-link">Leer artículo</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="blog-card" data-categories="web" data-featured="true">
|
|
<div class="card-image">
|
|
<img src="assets/blog/landing-page.jpg" alt="Landing pages que convierten">
|
|
<span class="card-category web">Web</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-meta">
|
|
<time datetime="2024-01-10">10 Ene 2024</time>
|
|
<span class="reading-time-mini">8 min</span>
|
|
</div>
|
|
<h3 class="card-title">Landing pages que convierten: 7 principios probados</h3>
|
|
<p class="card-excerpt">
|
|
No es magia, es método. Una landing page efectiva no depende de la suerte.
|
|
</p>
|
|
<a href="articulos/landing-pages-que-convierten.html" class="card-link">Leer artículo</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="blog-card" data-categories="automatizaciones" data-featured="true">
|
|
<div class="card-image">
|
|
<img src="assets/blog/automatizacion.jpg" alt="Automatizaciones en Instagram">
|
|
<span class="card-category automatizaciones">Automatizaciones</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-meta">
|
|
<time datetime="2024-01-05">5 Ene 2024</time>
|
|
<span class="reading-time-mini">9 min</span>
|
|
</div>
|
|
<h3 class="card-title">Automatizaciones en Instagram: de 0 a 100 leads/mes</h3>
|
|
<p class="card-excerpt">
|
|
Responder el mismo mensaje 50 veces al día no es escalable.
|
|
</p>
|
|
<a href="articulos/automatizaciones-instagram.html" class="card-link">Leer artículo</a>
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
|
|
<div class="empty-state" id="empty-state" style="display: none;">
|
|
<div class="empty-icon"></div>
|
|
<h3>No encontramos artículos con esos filtros</h3>
|
|
<p>Probá con otros términos o limpiá los filtros para ver todo el contenido.</p>
|
|
<button class="btn btn-primary" id="empty-reset">Ver todos los artículos</button>
|
|
</div>
|
|
|
|
<div class="load-more-container">
|
|
<button class="btn btn-secondary" id="load-more">Cargar más artículos</button>
|
|
</div>
|
|
</section> -->
|
|
|
|
<!-- NEWSLETTER -->
|
|
<section class="newsletter-section">
|
|
<div class="newsletter-card">
|
|
<div class="newsletter-content">
|
|
<h2 class="newsletter-title">Ideas frescas en tu inbox</h2>
|
|
<p class="newsletter-subtitle">
|
|
Suscribite y recibí nuestras mejores estrategias de branding, web y marketing digital.
|
|
</p>
|
|
</div>
|
|
<form class="newsletter-form" id="newsletter-form">
|
|
<input type="email" placeholder="Tu email profesional" required>
|
|
<button type="submit" class="btn btn-primary">Suscribirme</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="footer-container"></div>
|
|
|
|
<script src="scripts/main.js"></script>
|
|
<script src="scripts/blog.js"></script>
|
|
<script src="scripts/fluid.js"></script>
|
|
</body>
|
|
</html> |