<?php
session_start();
require_once 'admin-panal/includes/db.php';
$blogsQuery = $pdo->query("SELECT * FROM blogs WHERE is_published = 1 ORDER BY created_at DESC");
$blogs = $blogsQuery->fetchAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z2X2T395KZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Z2X2T395KZ');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Our Blog — Elegance of India</title>
<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=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<style>
body {
font-family: 'Roboto', sans-serif;
color: #444;
line-height: 1.8;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.blog-card {
border: 1px solid #eaeaea;
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
background: #fff;
display: flex;
flex-direction: column;
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.blog-img-wrap {
width: 100%;
height: 220px;
overflow: hidden;
background: #fafafa;
}
.blog-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.blog-card:hover .blog-img-wrap img {
transform: scale(1.05);
}
.blog-body {
padding: 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.blog-date {
font-size: 0.85rem;
color: #c9a96e;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.blog-title {
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 1.4rem;
color: #111;
margin-bottom: 12px;
line-height: 1.3;
}
.blog-title a {
color: inherit;
text-decoration: none;
transition: color 0.3s;
}
.blog-title a:hover {
color: #c9a96e;
}
.blog-desc {
color: #666;
font-size: 0.95rem;
line-height: 1.8;
margin-bottom: 20px;
flex-grow: 1;
}
.blog-read-more {
display: inline-block;
font-size: 0.9rem;
color: #111;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
border-bottom: 1px solid #111;
padding-bottom: 2px;
transition: color 0.3s, border-color 0.3s;
align-self: flex-start;
}
.blog-read-more:hover {
color: #c9a96e;
border-color: #c9a96e;
}
.empty-blog {
text-align: center;
padding: 80px 20px;
background: #fafafa;
border-radius: 8px;
color: #666;
}
.empty-blog i {
font-size: 3rem;
color: #ddd;
margin-bottom: 20px;
}
</style>
</head>
<body>
<?php include 'inc/header.php'; ?>
<div class="page-header" style="background: #fdfbf8; padding: 60px 0; text-align: center; border-bottom: 1px solid #eee;">
<div class="container">
<h1 style="font-family: 'Playfair Display', serif; font-size: 3rem; margin-bottom: 10px;">Our Blogs</h1>
<p style="color: #888; letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem;">Stories, Styles & Elegance</p>
</div>
</div>
<div class="blogs-section" style="padding: 60px 0 100px; background: #fff;">
<div class="container">
<?php if (empty($blogs)): ?>
<div class="empty-blog">
<i class="fas fa-book-open"></i>
<h3>No articles published yet</h3>
<p>Check back later for inspiration and stories.</p>
</div>
<?php else: ?>
<div class="blog-grid">
<?php foreach ($blogs as $blog): ?>
<article class="blog-card">
<a href="blog-details.php?slug=<?= htmlspecialchars($blog['slug']) ?>" class="blog-img-wrap">
<?php if (!empty($blog['image_url'])): ?>
<img src="<?= htmlspecialchars($blog['image_url']) ?>" alt="<?= htmlspecialchars($blog['title']) ?>" loading="lazy" />
<?php else: ?>
<div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#ccc;">
<i class="fas fa-image" style="font-size:3rem;"></i>
</div>
<?php endif; ?>
</a>
<div class="blog-body">
<div class="blog-date"><?= date('F j, Y', strtotime($blog['created_at'])) ?></div>
<h2 class="blog-title">
<a href="blog-details.php?slug=<?= htmlspecialchars($blog['slug']) ?>">
<?= htmlspecialchars($blog['title']) ?>
</a>
</h2>
<p class="blog-desc"><?= htmlspecialchars($blog['short_description'] ?? mb_substr(strip_tags($blog['content']), 0, 150) . '...') ?></p>
<a href="blog-details.php?slug=<?= htmlspecialchars($blog['slug']) ?>" class="blog-read-more">Read Article</a>
</div>
</article>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php include 'inc/footer.php'; ?>
</body>
</html>