136 lines
7.2 KiB
PHP
136 lines
7.2 KiB
PHP
<?php
|
|
require_once __DIR__ . '/blog/config.php';
|
|
$db = getDB();
|
|
|
|
// Get the latest 3 posts
|
|
$stmt = $db->query("SELECT p.*, c.name AS category_name, c.slug AS category_slug
|
|
FROM blog_posts p
|
|
LEFT JOIN blog_categories c ON p.category_id = c.id
|
|
WHERE p.status = 'published'
|
|
ORDER BY p.published_at DESC LIMIT 3");
|
|
$latestPosts = $stmt->fetchAll();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<title>Blog - TRIMAPE</title>
|
|
<?php include 'css-columna.htm'; ?>
|
|
<style>
|
|
.hero { position: relative; width: 100%; height: 50vh; overflow: hidden; }
|
|
.hero .imgback { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
|
|
.zoom-container { position: relative; overflow: hidden; border-radius: 10px; }
|
|
.zoom-effect { transition: transform .3s ease; transform-origin: center center; }
|
|
.zoom-container:hover .zoom-effect { transform: scale(1.1); }
|
|
.zoom-container:hover p::after { content: ''; display: block; width: 100%; height: 3px; background-color: green; position: absolute; bottom: -5px; left: 0; animation: slideLine .5s ease-in-out forwards; }
|
|
@keyframes slideLine {
|
|
from { width: 0; }
|
|
to { width: 100%; }
|
|
}
|
|
p { position: relative; z-index: 1; border-bottom: 3px solid transparent; transition: border-color .5s ease; }
|
|
.zoom-container:hover p { border-color: green; }
|
|
.texto-cajas-centro { text-align: center; position: relative; display: inline-block; }
|
|
.line { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 0; height: 5px; background-color: green; transition: width .3s ease; }
|
|
.texto-cajas-centro:hover .line { width: 80%; }
|
|
.img-cover { width: 100%; height: 230px; object-fit: cover; }
|
|
@media (min-width:576px) {
|
|
.img-cover { width: 100%; height: 128px; object-fit: cover; }
|
|
}
|
|
@media (min-width:758px) {
|
|
.img-cover { width: 100%; height: 160px; object-fit: cover; }
|
|
}
|
|
@media (min-width:992px) {
|
|
.img-cover { width: 100%; height: 178px; object-fit: cover; }
|
|
}
|
|
@media (min-width:1200px) {
|
|
.img-cover { width: 100%; height: 218px; object-fit: cover; }
|
|
}
|
|
a .fw-bold { color: #000; text-decoration: none; }
|
|
a:hover .fw-bold { text-decoration-line: underline; text-decoration-color: #1e90ff; text-underline-position: under; text-underline-offset: 1px; text-decoration-thickness: 4px; }
|
|
.texto-little { font-size: .725rem; }
|
|
.texto-footer-title { color: #1e90ff; font-weight: 700; }
|
|
.brillodiv { background: #000; background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 25%, rgba(0, 181, 250, .4) 50%, rgba(2, 0, 96, .5) 100%); background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 25%, rgba(0, 181, 250, .4) 50%, rgba(2, 0, 96, .5) 100%); background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 25%, rgba(0, 181, 250, .4) 50%, rgba(2, 0, 96, .5) 100%); background-size: 400% 400%; background-repeat: no-repeat; display: flex; width: 100%; height: 100%; max-width: 100vw; justify-content: center; align-items: center; color: #fff; position: relative; cursor: pointer; z-index: 1; }
|
|
.animate { animation: gradientAnimation 5s ease forwards; }
|
|
@keyframes gradientAnimation {
|
|
0% { background-position: 0 0; text-shadow: none; }
|
|
50% { background-position: 100% 100%; text-shadow: 0 0 20px #000; }
|
|
100% { background-position: 0 0; text-shadow: none; }
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<?php include 'menu-general.htm'; ?>
|
|
|
|
<div class="hero" id="hero">
|
|
<video autoplay loop muted playsinline class="w-100 imgback">
|
|
<source src="./assets/videos/obra-civil-1.webm" type="video/mp4">
|
|
Tu navegador no soporta videos en HTML5.
|
|
</video>
|
|
<div class="container position-relative d-flex flex-column justify-content-center align-items-center h-100">
|
|
<div class="text-center text-white">
|
|
<h1 class="mb-1 pt-5 texto-sombra fw-bold z-2">BLOG</h1>
|
|
<p class="texto-sombra fw-bold z-2">TRIMAPE | EXCELENCIA EN MANTENIMIENTOS</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid text-uppercase">
|
|
<div class="container py-4">
|
|
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" aria-label="breadcrumb">
|
|
<ol class="breadcrumb texto-bread">
|
|
<li class="breadcrumb-item texto-bread"><a href="<?= SITE_URL ?>">Portada</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Blog</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<?php if (empty($latestPosts)): ?>
|
|
<div class="text-center py-5">
|
|
<h4 class="fw-bold" style="color: #0a1d3b;">Próximamente</h4>
|
|
<p class="text-muted">Estamos preparando contenido increíble para ti. ¡Vuelve pronto!</p>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="card-group">
|
|
<?php foreach ($latestPosts as $post): ?>
|
|
<div class="card p-4 m-3 border shadow">
|
|
<a href="<?= BLOG_URL ?>/<?= e($post['slug']) ?>" class="link-underline link-underline-opacity-0 link-dark">
|
|
<div class="zoom-container rounded">
|
|
<?php if ($post['cover_image']): ?>
|
|
<img src="<?= e($post['cover_image']) ?>" class="zoom-effect img-cover" alt="<?= e($post['title']) ?>">
|
|
<?php else: ?>
|
|
<div class="zoom-effect img-cover d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #0a1d3b, #1186cc);">
|
|
<img src="<?= SITE_URL ?>/assets/img/trimape-logo-512-300x300.png" alt="TRIMAPE" style="width: 80px; opacity: 0.5;">
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="card-title fw-bold" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
|
|
<?= e($post['title']) ?>
|
|
</h6>
|
|
<p class="card-text text-end pt-4"><small class="text-muted">Leer post</small></p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<div class="text-center mt-4">
|
|
<a href="<?= BLOG_URL ?>/" class="btn px-4 py-2 text-white fw-bold" style="background: linear-gradient(135deg, #0e55bb, #1186cc); border-radius: 8px;">
|
|
Ver todos los artículos
|
|
</a>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<?php include 'contacto-div.htm'; ?>
|
|
<?php include 'footer.htm'; ?>
|
|
<?php include 'footer-scripts.htm'; ?>
|
|
</body>
|
|
</html>
|