fanfuso/ayr2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

blog+contacto php listo

Browse Source
This commit is contained in:
fanfuso
2026-09-20 13:28:57 -03:00
parent cd67fca3dc
commit cfb97b486e
24 changed files with 8970 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog.php
+194
View File
@@ -0,0 +1,194 @@
<?php
require_once 'config/db.php';
// Obtener artículos publicados
$stmt = $pdo->prepare("
SELECT p.*, u.nombre as autor_nombre
FROM blog_posts p
LEFT JOIN admin_users u ON p.autor_id = u.id
WHERE p.estado = 'publicado'
ORDER BY p.created_at DESC
");
$stmt->execute();
$posts = $stmt->fetchAll();
// Obtener destacados
$stmt = $pdo->prepare("
SELECT p.*, u.nombre as autor_nombre
FROM blog_posts p
LEFT JOIN admin_users u ON p.autor_id = u.id
WHERE p.estado = 'publicado' AND p.destacado = 1
ORDER BY p.vistas DESC
LIMIT 3
");
$stmt->execute();
$destacados = $stmt->fetchAll();
?>
<!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="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>
<!-- SECCIÓN 2: HEADER DE FILTROS -->
<section class="blog-filters-section" id="blog-filters-header">
<div class="filters-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>
</select>
</div>
</div>
<!-- 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>
<!-- DESTACADOS -->
<?php if (!empty($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">
<?php foreach ($destacados as $post): ?>
<article class="featured-card" data-categories="<?= htmlspecialchars($post['categoria']) ?>">
<div class="featured-image">
<img src="<?= htmlspecialchars($post['imagen']) ?>" alt="<?= htmlspecialchars($post['titulo']) ?>">
<span class="featured-badge">Destacado</span>
</div>
<div class="featured-content">
<div class="featured-meta">
<span class="category-tag <?= htmlspecialchars($post['categoria']) ?>"><?= ucfirst(htmlspecialchars($post['categoria'])) ?></span>
<time datetime="<?= $post['created_at'] ?>"><?= date('d M Y', strtotime($post['created_at'])) ?></time>
</div>
<h3 class="featured-title"><?= htmlspecialchars($post['titulo']) ?></h3>
<p class="featured-excerpt"><?= htmlspecialchars($post['extracto']) ?></p>
<div class="featured-footer">
<span class="reading-time">⏱ <?= $post['tiempo_lectura'] ?> min de lectura</span>
<a href="articulo.php?id=<?= $post['id'] ?>" class="btn-read">Leer artículo →</a>
</div>
</div>
</article>
<?php endforeach; ?>
</div>
</section>
<?php endif; ?>
<!-- GRID DE ARTÍCULOS -->
<section class="blog-grid-section">
<div class="blog-grid" id="blog-grid">
<?php foreach ($posts as $post): ?>
<article class="blog-card" data-categories="<?= htmlspecialchars($post['categoria']) ?>">
<div class="card-image">
<img src="<?= htmlspecialchars($post['imagen']) ?>" alt="<?= htmlspecialchars($post['titulo']) ?>">
<span class="card-category <?= htmlspecialchars($post['categoria']) ?>"><?= ucfirst(htmlspecialchars($post['categoria'])) ?></span>
</div>
<div class="card-content">
<div class="card-meta">
<time datetime="<?= $post['created_at'] ?>"><?= date('d M Y', strtotime($post['created_at'])) ?></time>
<span class="reading-time-mini"><?= $post['tiempo_lectura'] ?> min</span>
</div>
<h3 class="card-title"><?= htmlspecialchars($post['titulo']) ?></h3>
<p class="card-excerpt"><?= htmlspecialchars($post['extracto']) ?></p>
<a href="articulo.php?id=<?= $post['id'] ?>" class="card-link">Leer artículo</a>
</div>
</article>
<?php endforeach; ?>
</div>
<?php if (empty($posts)): ?>
<div class="empty-state" id="empty-state">
<div class="empty-icon">📝</div>
<h3>Aún no hay artículos publicados</h3>
<p>Volvé pronto para encontrar contenido de valor sobre branding, web y marketing digital.</p>
</div>
<?php endif; ?>
</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 style="padding: 0.85rem; border: 1.5px solid rgba(0, 63, 82, 0.2); border-radius: 24px; min-width: 300px;">
<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>
</body>
</html>