File: /home/durgeshpandey215/www/ipsol.skilladders.com/NA-blog-details.php
<?php
require_once 'controller/security_headers.php';
require_once 'controller/DB_Config.php';
$con = OpenCon();
// 1. Fetch Current Article
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
// Fetch next/prev as well
$stmt = $con->prepare("SELECT * FROM blog_details WHERE id = ? AND delete_status = 'N'");
$stmt->bind_param("i", $id);
$stmt->execute();
$result = $stmt->get_result();
if($result->num_rows > 0){
$row = $result->fetch_assoc();
} else {
echo "<script>window.location.href='blog.php';</script>";
exit();
}
$stmt->close();
// 2. Fetch Recent Posts for Sidebar
$recent_stmt = $con->prepare("SELECT id, title, date, img_file FROM blog_details WHERE id != ? AND delete_status = 'N' ORDER BY date DESC LIMIT 3");
$recent_stmt->bind_param("i", $id);
$recent_stmt->execute();
$recent_result = $recent_stmt->get_result();
$side_posts = [];
while($r = $recent_result->fetch_assoc()){
$side_posts[] = $r;
}
$recent_stmt->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($row['title']); ?> - 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'],
},
boxShadow: {
'soft': '0 4px 20px -2px rgba(0, 0, 0, 0.05)',
}
}
}
}
</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: #FFFFFF; color: #1e293b; }
h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; }
/* Typography Details */
.article-content p { margin-bottom: 24px; line-height: 1.8; font-size: 1.125rem; color: #334155; }
.article-content h2 { font-size: 2rem; font-weight: 700; color: #0f172a; margin-top: 48px; margin-bottom: 24px; letter-spacing: -0.025em; }
.article-content h3 { font-size: 1.5rem; font-weight: 600; color: #1e293b; margin-top: 32px; margin-bottom: 16px; }
.article-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 24px; color: #334155; }
.article-content li { margin-bottom: 8px; }
.article-content strong { color: #0f172a; font-weight: 600; }
.article-content blockquote { border-left: 4px solid #2957A4; padding-left: 20px; font-style: italic; color: #475569; margin: 32px 0; }
.article-content img { border-radius: 12px; width: 100%; margin: 32px 0; }
/* Sticky Sidebar enhancement */
.sticky-custom { position: sticky; top: 120px; }
</style>
</head>
<body class="antialiased flex flex-col min-h-screen">
<?php include 'header_v2.php'; ?>
<main class="flex-grow pt-10 pb-24">
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
<!-- 1. Header Section: Clean & Minimal -->
<div class="max-w-5xl mb-12">
<!-- Breadcrumb -->
<div class="flex items-center gap-2 text-sm text-slate-500 font-medium mb-6">
<a href="blog.php" class="hover:text-brand-blue transition flex items-center gap-1"><i class="fa fa-arrow-left"></i> Back to Blog</a>
<span class="text-slate-300">|</span>
<span class="text-brand-blue font-bold tracking-wide uppercase text-xs">Technology</span>
</div>
<!-- Title -->
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-[1.1] mb-8 tracking-tight">
<?php echo htmlspecialchars($row['title']); ?>
</h1>
<!-- Author & Meta -->
<div class="flex flex-wrap items-center gap-6 border-b border-gray-100 pb-8">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-100 overflow-hidden">
<img src="img/favicon.png" class="w-full h-full object-contain">
</div>
<div>
<p class="text-sm font-bold text-slate-900">IP Solutions</p>
<p class="text-xs text-slate-500">Editorial Team</p>
</div>
</div>
<span class="hidden sm:block w-px h-8 bg-gray-200"></span>
<div class="flex items-center gap-6 text-sm text-slate-500 font-medium">
<span class="flex items-center gap-2"><i class="fa fa-calendar text-brand-blue"></i> <?php echo htmlspecialchars($row['date']); ?></span>
<span class="flex items-center gap-2"><i class="fa fa-clock-o text-brand-blue"></i> 5 min read</span>
</div>
<!-- Social Share (Top) -->
<div class="ml-auto flex items-center gap-2">
<span class="text-xs font-bold text-slate-400 uppercase mr-2 hidden sm:block">Share:</span>
<a href="#" class="w-8 h-8 rounded-full bg-slate-50 text-slate-500 hover:bg-[#3b5998] hover:text-white flex items-center justify-center transition"><i class="fa fa-facebook"></i></a>
<a href="#" class="w-8 h-8 rounded-full bg-slate-50 text-slate-500 hover:bg-[#1da1f2] hover:text-white flex items-center justify-center transition"><i class="fa fa-twitter"></i></a>
<a href="#" class="w-8 h-8 rounded-full bg-slate-50 text-slate-500 hover:bg-[#0a66c2] hover:text-white flex items-center justify-center transition"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<!-- 2. Main Layout Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20">
<!-- Left: Content (8 columns) -->
<article class="lg:col-span-8">
<!-- Featured Image (Full Width of column) -->
<div class="rounded-2xl overflow-hidden aspect-video bg-slate-100 mb-10 shadow-sm">
<img src="img/blog_img/<?php echo $row['img_file']?>" alt="<?php echo htmlspecialchars($row['title']); ?>" class="w-full h-full object-cover">
</div>
<!-- The Content -->
<div class="article-content max-w-none">
<?php echo nl2br($row['description']); ?>
</div>
<!-- Gallery (Optional) -->
<?php if($row['a_img_file'] || $row['b_img_file'] || $row['c_img_file']): ?>
<div class="my-12">
<h3 class="text-2xl font-bold text-slate-900 mb-6">Gallery</h3>
<div class="grid grid-cols-2 gap-4">
<?php if($row['a_img_file']): ?><img src="img/blog_img/<?php echo $row['a_img_file']?>" class="rounded-xl shadow-sm hover:shadow-md transition"><?php endif; ?>
<?php if($row['b_img_file']): ?><img src="img/blog_img/<?php echo $row['b_img_file']?>" class="rounded-xl shadow-sm hover:shadow-md transition"><?php endif; ?>
<?php if($row['c_img_file']): ?><img src="img/blog_img/<?php echo $row['c_img_file']?>" class="col-span-2 rounded-xl shadow-sm hover:shadow-md transition"><?php endif; ?>
</div>
</div>
<?php endif; ?>
<!-- Tags -->
<div class="mt-12 pt-8 border-t border-gray-100 flex flex-wrap gap-3">
<span class="px-4 py-2 bg-slate-50 text-slate-600 rounded-full text-sm font-medium hover:bg-slate-100 transition cursor-pointer">#Networking</span>
<span class="px-4 py-2 bg-slate-50 text-slate-600 rounded-full text-sm font-medium hover:bg-slate-100 transition cursor-pointer">#Cisco</span>
<span class="px-4 py-2 bg-slate-50 text-slate-600 rounded-full text-sm font-medium hover:bg-slate-100 transition cursor-pointer">#Security</span>
</div>
<!-- Navigation / Prev-Next (Optional placeholder) -->
<div class="mt-10 grid grid-cols-2 gap-4">
<a href="blog.php" class="p-6 rounded-xl border border-gray-100 hover:border-brand-blue/30 hover:bg-blue-50/30 transition group text-left">
<span class="block text-xs font-bold text-slate-400 uppercase mb-1">Previous Article</span>
<span class="block text-slate-800 font-bold group-hover:text-brand-blue transition">Explore More Insights</span>
</a>
<a href="blog.php" class="p-6 rounded-xl border border-gray-100 hover:border-brand-blue/30 hover:bg-blue-50/30 transition group text-right">
<span class="block text-xs font-bold text-slate-400 uppercase mb-1">Next Article</span>
<span class="block text-slate-800 font-bold group-hover:text-brand-blue transition">View Latest Trends</span>
</a>
</div>
</article>
<!-- Right: Sidebar (4 columns) -->
<aside class="lg:col-span-4">
<div class="sticky-custom space-y-8">
<!-- Search -->
<div class="bg-gray-50 p-6 rounded-2xl">
<form action="blog.php" method="GET" class="flex gap-2">
<input type="text" placeholder="Search..." class="w-full bg-white border-0 rounded-xl px-4 py-3 text-sm font-medium focus:ring-2 focus:ring-brand-blue/20 shadow-sm">
<button class="w-12 h-12 rounded-xl bg-brand-blue text-white flex items-center justify-center hover:bg-blue-700 transition"><i class="fa fa-search"></i></button>
</form>
</div>
<!-- CTA Card -->
<div class="bg-[#0B0F19] p-8 rounded-2xl text-center relative overflow-hidden group">
<div class="absolute top-0 right-0 w-32 h-32 bg-brand-blue/20 rounded-full blur-[40px]"></div>
<div class="relative z-10">
<h4 class="text-xl font-bold text-white mb-3">Ready to Upgrade?</h4>
<p class="text-slate-400 text-sm mb-6">Join our professional networking courses and boost your career today.</p>
<a href="contact.php" class="block w-full py-3 bg-brand-blue text-white rounded-xl font-bold hover:bg-blue-600 transition">Contact Us</a>
</div>
</div>
<!-- Recent Posts -->
<div>
<h4 class="font-bold text-slate-900 text-lg mb-6 flex items-center gap-2">
Trending Now
</h4>
<div class="space-y-6">
<?php foreach($side_posts as $post): ?>
<a href="blog-details.php?id=<?php echo $post['id']; ?>" class="flex gap-4 group">
<div class="w-20 h-20 rounded-lg overflow-hidden shrink-0 bg-slate-100">
<img src="img/blog_img/<?php echo $post['img_file']?>" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
</div>
<div>
<span class="text-[10px] font-bold text-brand-blue uppercase tracking-wider mb-1 block">Article</span>
<h5 class="text-sm font-bold text-slate-800 leading-snug group-hover:text-brand-blue transition line-clamp-2">
<?php echo htmlspecialchars($post['title']); ?>
</h5>
</div>
</a>
<?php endforeach; ?>
</div>
</div>
<!-- Categories/Tags Cloud -->
<div>
<h4 class="font-bold text-slate-900 text-lg mb-4">Popular Topics</h4>
<div class="flex flex-wrap gap-2">
<a href="#" class="px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-bold text-slate-600 hover:border-brand-blue hover:text-brand-blue transition">CCNA</a>
<a href="#" class="px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-bold text-slate-600 hover:border-brand-blue hover:text-brand-blue transition">Cyber Security</a>
<a href="#" class="px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-bold text-slate-600 hover:border-brand-blue hover:text-brand-blue transition">Cloud</a>
<a href="#" class="px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-bold text-slate-600 hover:border-brand-blue hover:text-brand-blue transition">Placement</a>
</div>
</div>
</div>
</aside>
</div>
</div>
</main>
<?php include 'footer_v2.php'; ?>
</body>
</html>