File: /home/durgeshpandey215/public_html/ipsol.skilladders.com/NA-blog.php
<?php
require_once 'controller/security_headers.php';
require_once 'controller/DB_Config.php';
$con = OpenCon();
// Fetch all categories (mock or real)
$categories = [
'Networking' => 12,
'Cloud Computing' => 8,
'Cyber Security' => 5,
'Career Guide' => 15,
'Cisco Certifications' => 10
];
// Pagination Logic
$page = isset($_GET['page']) && is_numeric($_GET['page']) ? (int)$_GET['page'] : 1;
if ($page < 1) $page = 1;
// Define Limits
$grid_limit = 6;
$is_search = isset($_GET['q']) && !empty($_GET['q']);
$search_query = $is_search ? trim($_GET['q']) : '';
// Function to preserve query params in pagination links
function get_pagination_url($page_num) {
$params = $_GET;
$params['page'] = $page_num;
return '?' . http_build_query($params);
}
// Build SQL for Count
if ($is_search) {
$count_sql = "SELECT COUNT(*) as total FROM blog_details WHERE delete_status = 'N' AND (title LIKE ? OR description LIKE ?)";
$stmt = $con->prepare($count_sql);
$like_term = "%" . $search_query . "%";
$stmt->bind_param("ss", $like_term, $like_term);
$stmt->execute();
$count_result = $stmt->get_result();
$total_records = $count_result->fetch_assoc()['total'];
$stmt->close();
} else {
$count_sql = "SELECT COUNT(*) as total FROM blog_details WHERE delete_status = 'N'";
$count_result = $con->query($count_sql);
$total_records = $count_result->fetch_assoc()['total'];
}
// Calculate Offset & Limit
if ($page == 1) {
$offset = 0;
// On page 1, if not searching, we show 1 featured + 6 grid = 7 total.
// If searching, we skip specific "featured" formatting usually, or keep it.
// Let's keep the design consistent: First result is always "Featured" style.
$limit = 7;
} else {
// On subsequent pages, we show 6 grid items.
// Offset calculation:
// Page 1 took 7 items (0 to 6).
// Page 2 starts at 7.
// Page 3 starts at 7 + 6 = 13.
$offset = 7 + ($page - 2) * $grid_limit;
$limit = $grid_limit;
}
// Just in case total records are few
$total_pages = 1;
if ($total_records > 7) {
$total_pages = 1 + ceil(($total_records - 7) / $grid_limit);
}
// Fetch Posts
if ($is_search) {
$sql = "SELECT * FROM blog_details WHERE delete_status = 'N' AND (title LIKE ? OR description LIKE ?) ORDER BY date DESC LIMIT ? OFFSET ?";
$stmt = $con->prepare($sql);
$like_term = "%" . $search_query . "%";
$stmt->bind_param("ssii", $like_term, $like_term, $limit, $offset);
$stmt->execute();
$result = $stmt->get_result();
$posts = [];
while($row = $result->fetch_assoc()) {
$posts[] = $row;
}
$stmt->close();
} else {
$sql = "SELECT * FROM blog_details WHERE delete_status = 'N' ORDER BY date DESC LIMIT $limit OFFSET $offset";
$result = $con->query($sql);
$posts = [];
while($row = $result->fetch_assoc()) {
$posts[] = $row;
}
}
// Logic for Splitting Featured vs Grid
$featured = null;
$grid_posts = [];
if (count($posts) > 0) {
// If on Page 1, the first post is featured
if ($page == 1) {
$featured = array_shift($posts);
$grid_posts = $posts; // The rest go to grid
} else {
// On other pages, all are grid posts
$grid_posts = $posts;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog - IP Solutions</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
blue: '#2957A4',
dark: '#0B0F19',
gray: '#F3F4F6',
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
heading: ['Outfit', 'sans-serif'],
}
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { font-family: 'Inter', sans-serif; background-color: #F8FAFC; color: #1e293b; }
h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; }
/* Custom Scrollbar for sidebar */
.sidebar-sticky { position: sticky; top: 120px; }
</style>
</head>
<body class="antialiased flex flex-col min-h-screen">
<?php include 'header_v2.php'; ?>
<!-- 1. Rich Header Section -->
<div class="relative bg-slate-900 border-b border-gray-200 overflow-hidden">
<!-- Photo Background -->
<div class="absolute inset-0 pointer-events-none">
<img src="img/hero/IMG_20260201_124244.jpg.jpeg" class="absolute inset-0 w-full h-full object-cover opacity-40">
<div class="absolute inset-0 bg-slate-900/70 mix-blend-multiply"></div>
<div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/80 to-transparent"></div>
</div>
<div class="relative z-10 max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
<span class="inline-block px-3 py-1 mb-4 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-300 text-xs font-bold uppercase tracking-widest backdrop-blur-sm">
Our Latest Thinking
</span>
<h1 class="text-4xl md:text-6xl font-extrabold text-white tracking-tight mb-6">
Insights & Updates
</h1>
<p class="text-lg text-slate-400 max-w-2xl mx-auto font-light leading-relaxed">
Explore the latest trends in networking, cloud computing, and IT certifications. Stay ahead of the curve with expert analysis.
</p>
</div>
</div>
<!-- 2. Main Layout (Content + Sidebar) -->
<main class="flex-grow py-16">
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
<!-- CONTENT COLUMN (8 cols) -->
<div class="lg:col-span-8 space-y-12">
<?php if ($featured): ?>
<!-- Featured Post Card (Horizontal) -->
<div class="bg-white border border-gray-200 rounded-3xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow group">
<div class="grid md:grid-cols-2">
<a href="blog-details.php?id=<?php echo $featured['id'];?>" class="block h-64 md:h-auto overflow-hidden relative">
<div class="absolute inset-0 bg-slate-900/10 group-hover:bg-transparent transition z-10"></div>
<img src="img/blog_img/<?php echo $featured['img_file']?>" alt="<?php echo $featured['title']; ?>" class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
<div class="absolute top-4 left-4 z-20 bg-brand-blue text-white px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wide shadow-lg">Featured</div>
</a>
<div class="p-8 flex flex-col justify-center">
<div class="flex items-center gap-3 text-xs font-bold text-slate-400 mb-4">
<span><i class="fa fa-calendar"></i> <?php echo $featured['date']?></span>
<span class="w-1 h-1 bg-slate-300 rounded-full"></span>
<span>5 min read</span>
</div>
<h2 class="text-2xl font-bold text-slate-900 mb-4 leading-tight group-hover:text-brand-blue transition">
<a href="blog-details.php?id=<?php echo $featured['id'];?>">
<?php echo $featured['title']; ?>
</a>
</h2>
<p class="text-slate-500 mb-6 text-sm leading-relaxed line-clamp-3">
<?php echo $featured['summery'];?>
</p>
<a href="blog-details.php?id=<?php echo $featured['id'];?>" class="inline-flex items-center text-sm font-bold text-brand-blue hover:gap-2 transition-all">
Read Full Story <i class="fa fa-arrow-right ml-1"></i>
</a>
</div>
</div>
</div>
<?php endif; ?>
<!-- Grid for remaining posts -->
<?php if (count($grid_posts) > 0): ?>
<div class="grid md:grid-cols-2 gap-8">
<?php foreach($grid_posts as $row): ?>
<article class="flex flex-col bg-white border border-gray-200 rounded-2xl overflow-hidden hover:shadow-xl transition-all duration-300 group">
<!-- Image -->
<a href="blog-details.php?id=<?php echo $row['id'];?>" class="h-48 overflow-hidden relative">
<img src="img/blog_img/<?php echo $row['img_file']?>" alt="<?php echo $row['title']; ?>" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-60"></div>
<span class="absolute bottom-3 left-3 text-white text-[10px] font-bold uppercase tracking-wider bg-black/30 backdrop-blur px-2 py-1 rounded border border-white/20">Article</span>
</a>
<!-- Content -->
<div class="p-6 flex flex-col flex-1">
<div class="flex items-center gap-2 text-[11px] font-bold text-slate-400 mb-3 uppercase tracking-wider">
<span class="text-brand-blue">News</span>
<span class="w-1 h-1 bg-slate-300 rounded-full"></span>
<span><?php echo $row['date']?></span>
</div>
<h3 class="text-lg font-bold text-slate-900 mb-3 leading-snug group-hover:text-brand-blue transition line-clamp-2">
<a href="blog-details.php?id=<?php echo $row['id'];?>">
<?php echo $row['title']; ?>
</a>
</h3>
<p class="text-slate-500 text-sm leading-relaxed mb-6 line-clamp-3">
<?php echo $row['summery'];?>
</p>
<div class="mt-auto pt-4 border-t border-gray-100 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-slate-100 overflow-hidden"><img src="img/favicon.png" class="w-full h-full object-contain"></div>
<span class="text-xs font-bold text-slate-500">Admin</span>
</div>
<a href="blog-details.php?id=<?php echo $row['id'];?>" class="w-8 h-8 rounded-full bg-slate-50 text-slate-400 flex items-center justify-center group-hover:bg-brand-blue group-hover:text-white transition"><i class="fa fa-arrow-right -rotate-45 group-hover:rotate-0 transition-transform"></i></a>
</div>
</div>
</article>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php if (!$featured && count($grid_posts) === 0): ?>
<div class="bg-white rounded-3xl p-12 text-center border border-dashed border-gray-300">
<div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4 text-slate-400">
<i class="fa fa-folder-open-o text-2xl"></i>
</div>
<h3 class="text-lg font-bold text-slate-900">No Content Found</h3>
<p class="text-slate-500">We haven't published any articles yet.</p>
</div>
<?php endif; ?>
<!-- Dynamic Pagination -->
<?php if($total_pages > 1): ?>
<div class="flex justify-center gap-2 pt-8">
<!-- Prev -->
<?php if($page > 1): ?>
<a href="<?php echo get_pagination_url($page - 1); ?>" class="w-10 h-10 rounded-lg border border-gray-200 flex items-center justify-center text-slate-500 hover:border-brand-blue hover:text-brand-blue hover:bg-white transition">
<i class="fa fa-chevron-left"></i>
</a>
<?php endif; ?>
<!-- Numbers -->
<?php
// Simple algorithm to show some range of pages
$start_p = max(1, $page - 2);
$end_p = min($total_pages, $page + 2);
// Always show first
if($start_p > 1) {
echo '<a href="'.get_pagination_url(1).'" class="w-10 h-10 rounded-lg border border-gray-200 flex items-center justify-center text-slate-600 font-bold hover:border-brand-blue hover:text-brand-blue hover:bg-white transition">1</a>';
if($start_p > 2) echo '<span class="w-10 h-10 flex items-center justify-center text-slate-400">...</span>';
}
for($i = $start_p; $i <= $end_p; $i++):
$activeClass = ($i == $page) ? 'bg-brand-blue text-white shadow-lg shadow-blue-500/30 border-transparent pointer-events-none' : 'border-gray-200 text-slate-600 hover:border-brand-blue hover:text-brand-blue hover:bg-white';
?>
<a href="<?php echo get_pagination_url($i); ?>" class="w-10 h-10 rounded-lg border flex items-center justify-center font-bold transition <?php echo $activeClass; ?>">
<?php echo $i; ?>
</a>
<?php endfor; ?>
<!-- Always show last -->
<?php
if($end_p < $total_pages) {
if($end_p < $total_pages - 1) echo '<span class="w-10 h-10 flex items-center justify-center text-slate-400">...</span>';
echo '<a href="'.get_pagination_url($total_pages).'" class="w-10 h-10 rounded-lg border border-gray-200 flex items-center justify-center text-slate-600 font-bold hover:border-brand-blue hover:text-brand-blue hover:bg-white transition">'.$total_pages.'</a>';
}
?>
<!-- Next -->
<?php if($page < $total_pages): ?>
<a href="<?php echo get_pagination_url($page + 1); ?>" class="w-10 h-10 rounded-lg border border-gray-200 flex items-center justify-center text-slate-500 hover:border-brand-blue hover:text-brand-blue hover:bg-white transition">
<i class="fa fa-chevron-right"></i>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<!-- SIDEBAR COLUMN (4 cols) -->
<aside class="lg:col-span-4 space-y-8">
<!-- Search Widget -->
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
<h4 class="font-bold text-slate-900 mb-4">Search</h4>
<form action="" method="GET" class="relative">
<input type="text" name="q" value="<?php echo htmlspecialchars($search_query); ?>" placeholder="Type keywords..." class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-brand-blue focus:bg-white transition">
<button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-brand-blue"><i class="fa fa-search"></i></button>
</form>
</div>
<!-- Newsletter Widget -->
<div class="bg-[#2957A4] p-8 rounded-2xl text-center text-white relative overflow-hidden shadow-lg shadow-blue-200">
<div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
<div class="relative z-10">
<div class="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fa fa-paper-plane-o text-2xl text-white"></i>
</div>
<h4 class="text-xl font-bold mb-2 font-heading">Subscribe Now</h4>
<p class="text-blue-100 text-sm mb-6">Get the latest updates delivered directly to your inbox.</p>
<form class="space-y-3">
<input type="email" placeholder="Your email address" class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm text-white placeholder:text-blue-200 focus:outline-none focus:bg-white/20 transition backdrop-blur-sm">
<button type="button" class="w-full bg-white text-[#2957A4] font-bold py-3 rounded-xl hover:bg-blue-50 transition shadow-sm">Sign Up</button>
</form>
</div>
</div>
</aside>
</div>
</div>
</main>
<?php include 'footer_v2.php'; ?>
</body>
</html>