nosotros + blog en curso
This commit is contained in:
@@ -3,66 +3,341 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<title>Blog - [Nombre de la agencia]</title>
|
||||
<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="menu-container"></div>
|
||||
|
||||
<main>
|
||||
<!-- Sección 1: Encabezado del blog -->
|
||||
<section id="blog-section-1">
|
||||
<h2>Blog</h2>
|
||||
<p>Contenido pendiente de definir.</p>
|
||||
</section>
|
||||
<!-- SECCIÓN 1: HERO COMPACTO -->
|
||||
<section class="blog-hero-compact">
|
||||
<div class="hero-compact-content">
|
||||
<span class="badge-filosofia"></span>
|
||||
<h1 class="hero-compact-title">Ideas que construyen marcas</h1>
|
||||
<p class="hero-compact-subtitle">
|
||||
Estrategia, diseño y tecnología explicados sin tecnicismos innecesarios.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sección 2: Filtros dinámicos -->
|
||||
<section id="blog-section-2">
|
||||
<div class="blog-filters">
|
||||
<label for="filter-category">Categoría:</label>
|
||||
<select id="filter-category">
|
||||
<option value="">Todas</option>
|
||||
<!-- Las opciones se cargarán dinámicamente -->
|
||||
<!-- SECCIÓN 2: HEADER DE FILTROS (STICKY CON BUSCADOR) -->
|
||||
<section class="blog-filters-header" id="blog-filters-header">
|
||||
<div class="filters-header-container">
|
||||
|
||||
<!-- Fila superior: Buscador + Filtros principales -->
|
||||
<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>
|
||||
|
||||
<!-- Fila inferior: Categorías + Ordenamiento -->
|
||||
<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>
|
||||
<option value="alphabetical">A-Z</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="filter-date-from">Desde:</label>
|
||||
<input type="date" id="filter-date-from">
|
||||
<!-- Info de resultados -->
|
||||
<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>
|
||||
|
||||
<label for="filter-date-to">Hasta:</label>
|
||||
<input type="date" id="filter-date-to">
|
||||
<!-- SECCIÓN 3: ARTÍCULOS 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>
|
||||
|
||||
<button type="button" id="btn-apply-filters">Aplicar filtros</button>
|
||||
<button type="button" id="btn-clear-filters">Limpiar</button>
|
||||
<div class="featured-grid">
|
||||
<!-- Artículo destacado 1 -->
|
||||
<article class="featured-card" data-categories="branding estrategia" data-tags="identidad, marca, posicionamiento" data-featured="true">
|
||||
<div class="featured-image">
|
||||
<img src="../assets/blog/branding-completo.jpg" alt="Guía completa de branding">
|
||||
<span class="featured-badge">Más leído</span>
|
||||
</div>
|
||||
<div class="featured-content">
|
||||
<div class="featured-meta">
|
||||
<span class="category-tag branding">Branding</span>
|
||||
<time datetime="2024-01-15">15 Ene 2024</time>
|
||||
</div>
|
||||
<h3 class="featured-title">Guía completa: Cómo construir una identidad de marca que perdure</h3>
|
||||
<p class="featured-excerpt">
|
||||
Desde el diagnóstico inicial hasta el manual de identidad. Todo lo que necesitás saber para crear una marca con esencia y solidez estratégica.
|
||||
</p>
|
||||
<div class="featured-footer">
|
||||
<span class="reading-time">⏱ 12 min de lectura</span>
|
||||
<a href="#" class="btn-read">Leer artículo →</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Artículo destacado 2 -->
|
||||
<article class="featured-card" data-categories="web" data-tags="landing page, conversión, diseño" data-featured="true">
|
||||
<div class="featured-image">
|
||||
<img src="../assets/blog/landing-page.jpg" alt="Landing pages">
|
||||
</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">
|
||||
Estructura, copy y diseño working together para transformar visitantes en clientes reales.
|
||||
</p>
|
||||
<div class="featured-footer">
|
||||
<span class="reading-time">⏱ 8 min de lectura</span>
|
||||
<a href="#" class="btn-read">Leer artículo →</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Artículo destacado 3 -->
|
||||
<article class="featured-card" data-categories="automatizaciones" data-tags="instagram, chatbots, leads" data-featured="true">
|
||||
<div class="featured-image">
|
||||
<img src="../assets/blog/automatizacion.jpg" alt="Automatizaciones">
|
||||
</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">
|
||||
Flujos inteligentes que trabajan 24/7 mientras vos te enfocás en lo que mejor sabés hacer.
|
||||
</p>
|
||||
<div class="featured-footer">
|
||||
<span class="reading-time"> 9 min de lectura</span>
|
||||
<a href="#" class="btn-read">Leer artículo →</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECCIÓN 4: GRID DE ARTÍCULOS -->
|
||||
<section class="blog-grid-section">
|
||||
<div class="blog-grid" id="blog-grid">
|
||||
|
||||
<!-- ARTÍCULO 1 -->
|
||||
<article class="blog-card" data-categories="redes estrategia" data-tags="contenido, planificación, calendario" data-featured="false">
|
||||
<div class="card-image">
|
||||
<img src="../assets/blog/contenido-redes.jpg" alt="Contenido para redes">
|
||||
<span class="card-category redes">Redes</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-meta">
|
||||
<time datetime="2024-01-20">20 Ene 2024</time>
|
||||
<span class="reading-time-mini">8 min</span>
|
||||
</div>
|
||||
<h3 class="card-title">Planificación de contenido: el método de los 3 pilares</h3>
|
||||
<p class="card-excerpt">
|
||||
Cómo estructurar tu calendario editorial para mantener coherencia sin volverte loco.
|
||||
</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Contenido</span>
|
||||
<span class="tag">Planificación</span>
|
||||
</div>
|
||||
<a href="#" class="card-link">Leer artículo</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- ARTÍCULO 2 -->
|
||||
<article class="blog-card" data-categories="branding" data-tags="logo, identidad, diseño" data-featured="false">
|
||||
<div class="card-image">
|
||||
<img src="../assets/blog/logo-design.jpg" alt="Diseño de logo">
|
||||
<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">
|
||||
La diferencia entre un símbolo bonito y una identidad estratégica que realmente funciona.
|
||||
</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Logo</span>
|
||||
<span class="tag">Identidad</span>
|
||||
</div>
|
||||
<a href="#" class="card-link">Leer artículo</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- ARTÍCULO 3 -->
|
||||
<article class="blog-card" data-categories="web paid" data-tags="seo, google ads, tráfico" data-featured="false">
|
||||
<div class="card-image">
|
||||
<img src="../assets/blog/seo-web.jpg" alt="SEO">
|
||||
<span class="card-category web">Web</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-meta">
|
||||
<time datetime="2024-01-12">12 Ene 2024</time>
|
||||
<span class="reading-time-mini">10 min</span>
|
||||
</div>
|
||||
<h3 class="card-title">SEO vs Paid Media: cuándo usar cada uno</h3>
|
||||
<p class="card-excerpt">
|
||||
No son enemigos, son complementarios. Te explicamos cómo combinarlos estratégicamente.
|
||||
</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">SEO</span>
|
||||
<span class="tag">Google Ads</span>
|
||||
</div>
|
||||
<a href="#" class="card-link">Leer artículo</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- ARTÍCULO 4 -->
|
||||
<article class="blog-card" data-categories="casos estrategia" data-tags="caso de éxito, tecnología, ecosistema" data-featured="false">
|
||||
<div class="card-image">
|
||||
<img src="../assets/blog/caso-tech.jpg" alt="Caso de éxito">
|
||||
<span class="card-category casos">Casos</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-meta">
|
||||
<time datetime="2024-01-08">8 Ene 2024</time>
|
||||
<span class="reading-time-mini">7 min</span>
|
||||
</div>
|
||||
<h3 class="card-title">Caso de éxito: Ecosistema digital para startup tech</h3>
|
||||
<p class="card-excerpt">
|
||||
Cómo construimos una presencia integral desde cero: branding, web y redes en 90 días.
|
||||
</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Caso de Éxito</span>
|
||||
<span class="tag">Tecnología</span>
|
||||
</div>
|
||||
<a href="#" class="card-link">Leer artículo</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- ARTÍCULO 5 -->
|
||||
<article class="blog-card" data-categories="automatizaciones redes" data-tags="manychat, instagram, ventas" data-featured="false">
|
||||
<div class="card-image">
|
||||
<img src="../assets/blog/chatbot.jpg" alt="Chatbot">
|
||||
<span class="card-category automatizaciones">Automatizaciones</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-meta">
|
||||
<time datetime="2024-01-03">3 Ene 2024</time>
|
||||
<span class="reading-time-mini">9 min</span>
|
||||
</div>
|
||||
<h3 class="card-title">Chatbots que no parecen robots: la clave está en el copy</h3>
|
||||
<p class="card-excerpt">
|
||||
Cómo escribir flujos de conversación que suenen humanos y realmente vendan.
|
||||
</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">ManyChat</span>
|
||||
<span class="tag">Ventas</span>
|
||||
</div>
|
||||
<a href="#" class="card-link">Leer artículo</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- ARTÍCULO 6 -->
|
||||
<article class="blog-card" data-categories="estrategia branding" data-tags="posicionamiento, competencia, diferenciación" data-featured="false">
|
||||
<div class="card-image">
|
||||
<img src="../assets/blog/posicionamiento.jpg" alt="Posicionamiento">
|
||||
<span class="card-category estrategia">Estrategia</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-meta">
|
||||
<time datetime="2023-12-28">28 Dic 2023</time>
|
||||
<span class="reading-time-mini">11 min</span>
|
||||
</div>
|
||||
<h3 class="card-title">Posicionamiento: cómo destacar en un mercado saturado</h3>
|
||||
<p class="card-excerpt">
|
||||
Estrategias prácticas para encontrar tu espacio único y volverte inolvidable.
|
||||
</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Posicionamiento</span>
|
||||
<span class="tag">Diferenciación</span>
|
||||
</div>
|
||||
<a href="#" class="card-link">Leer artículo</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<!-- ESTADO VACÍO (cuando no hay resultados) -->
|
||||
<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>
|
||||
|
||||
<!-- PAGINACIÓN / CARGAR MÁS -->
|
||||
<div class="load-more-container">
|
||||
<button class="btn btn-secondary" id="load-more">Cargar más artículos</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sección 3: Listado de artículos -->
|
||||
<section id="blog-section-3">
|
||||
<div class="blog-list" id="blog-list">
|
||||
<!-- Los artículos se inyectarán aquí desde PHP/DB -->
|
||||
<p>Cargando artículos...</p>
|
||||
<!-- SECCIÓN 5: 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.
|
||||
Sin spam, solo contenido de valor.
|
||||
</p>
|
||||
</div>
|
||||
<form class="newsletter-form" id="newsletter-form">
|
||||
<button type="submit" class="btn btn-primary">Tu email profesional</button>
|
||||
<button type="submit" class="btn btn-primary">Suscribirme</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sección 4: Paginación -->
|
||||
<section id="blog-section-4">
|
||||
<nav class="blog-pagination" id="blog-pagination" aria-label="Paginación del blog">
|
||||
<!-- Controles de paginación -->
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<!-- Sección 5: CTA / Suscripción -->
|
||||
<section id="blog-section-5">
|
||||
<h2>Suscríbete</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>
|
||||
<script src="scripts/blog.js"></script>
|
||||
<link rel="stylesheet" href="style/blog.css">
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user