<!-- i. Breadcrumb Section -->
<section class="py-3 bg-light border-bottom">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="index.html" class="text-decoration-none">Home</a></li>
<li class="breadcrumb-item active fw-bold text-primary" aria-current="page">Insights & Articles</li>
</ol>
</nav>
</div>
</section>
<!-- v. Trending Posts Slider (Bootstrap Carousel) -->
<section class="py-5 bg-white">
<div class="container">
<h4 class="fw-bold mb-4"><i class="bi bi-fire text-danger me-2"></i>Trending Now</h4>
<div id="trendingCarousel" class="carousel slide rounded-4 shadow-sm overflow-hidden" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="height: 350px;">
<img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=1200" class="d-block w-100 h-100 object-fit-cover" alt="Trending 1">
<div class="carousel-caption d-none d-md-block text-start start-0 bottom-0 w-100 p-5 bg-gradient-dark">
<span class="badge bg-danger mb-2">Editor's Choice</span>
<h2 class="fw-bold">Securing Modern Web Applications: A Comprehensive Guide</h2>
<p>Essential practices for developers to prevent common security vulnerabilities.</p>
</div>
</div>
<div class="carousel-item" style="height: 350px;">
<img src="https://miro.medium.com/v2/resize:fit:1200/1*FU1Znu39t43bkZWUqkf6sg.jpeg" class="d-block w-100 h-100 object-fit-cover" alt="Trending 2">
<div class="carousel-caption d-none d-md-block text-start start-0 bottom-0 w-100 p-5 bg-gradient-dark">
<span class="badge bg-primary mb-2">Design Trend</span>
<h2 class="fw-bold">Why Minimalism still Dominates UI Design in 2024</h2>
<p>Exploring the psychological impact of clean interfaces on user conversion rates.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#trendingCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon bg-dark p-3 rounded-circle"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#trendingCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon bg-dark p-3 rounded-circle"></span>
</button>
</div>
</div>
</section>
<!-- Main Blog Content Section -->
<section class="py-5 bg-light">
<div class="container">
<div class="row g-5">
<!-- ii. Latest Tech/Design Posts -->
<div class="col-lg-8">
<h3 class="fw-bold mb-4 border-start border-primary border-4 ps-3">Latest Posts</h3>
<!-- Blog Post 1 -->
<article class="card border-0 shadow-sm rounded-4 overflow-hidden mb-5 hover-lift">
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=800" class="card-img-top" alt="Tech Post">
<div class="card-body p-4 p-md-5">
<div class="d-flex align-items-center mb-3 text-secondary small">
<span class="me-3"><i class="bi bi-calendar3 me-1"></i> Oct 24, 2023</span>
<span class="me-3"><i class="bi bi-person me-1"></i> By Alex Rivera</span>
<span><i class="bi bi-chat-dots me-1"></i> 15 Comments</span>
</div>
<h2 class="card-title fw-bold mb-3 h3">Building Scalable Architecture with Node.js</h2>
<p class="card-text text-muted mb-4">Learn how to structure your backend projects for growth, performance, and long-term maintainability using enterprise patterns.</p>
<!-- iv. Post Tags -->
<div class="mb-4">
<span class="badge bg-light text-dark border me-1">#NodeJS</span>
<span class="badge bg-light text-dark border me-1">#Backend</span>
<span class="badge bg-light text-dark border me-1">#Microservices</span>
</div>
<a href="#" class="btn btn-primary rounded-pill px-4">Continue Reading</a>
</div>
</article>
<!-- iv. Comments Section (Preview) -->
<div class="bg-white p-4 p-md-5 rounded-4 shadow-sm border mb-4">
<h4 class="fw-bold mb-4">Comments (2)</h4>
<div class="d-flex mb-4">
<img src="https://i.pravatar.cc/50?u=1" class="rounded-circle me-3" width="50" height="50" alt="User">
<div class="bg-light p-3 rounded-3 flex-grow-1">
<h6 class="fw-bold mb-1">John Doe</h6>
<p class="small text-muted mb-0">Great insights! I've been struggling with microservices architecture lately, and this cleared up a lot.</p>
</div>
</div>
<div class="text-end">
<button class="btn btn-outline-primary btn-sm rounded-pill px-4">Leave a Comment</button>
</div>
</div>
</div>
<!-- iii. Categories Sidebar -->
<div class="col-lg-4">
<div class="sticky-top" style="top: 100px;">
<!-- Search Widget -->
<div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
<h5 class="fw-bold mb-3">Find Article</h5>
<div class="input-group">
<input type="text" class="form-control rounded-pill-start" placeholder="Keyword...">
<button class="btn btn-primary rounded-pill-end"><i class="bi bi-search"></i></button>
</div>
</div>
<!-- Categories Widget -->
<div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
<h5 class="fw-bold mb-3">Categories</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 py-2">
<a href="#" class="text-decoration-none text-dark hover-primary-text"><i class="bi bi-chevron-right me-2 small"></i> Web Development</a>
<span class="badge bg-primary-subtle text-primary rounded-pill">25</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 py-2">
<a href="#" class="text-decoration-none text-dark hover-primary-text"><i class="bi bi-chevron-right me-2 small"></i> UI/UX Design</a>
<span class="badge bg-primary-subtle text-primary rounded-pill">18</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 py-2">
<a href="#" class="text-decoration-none text-dark hover-primary-text"><i class="bi bi-chevron-right me-2 small"></i> DevOps</a>
<span class="badge bg-primary-subtle text-primary rounded-pill">09</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 py-2">
<a href="#" class="text-decoration-none text-dark hover-primary-text"><i class="bi bi-chevron-right me-2 small"></i> Career Tips</a>
<span class="badge bg-primary-subtle text-primary rounded-pill">12</span>
</li>
</ul>
</div>
<!-- Tags Widget -->
<div class="card border-0 shadow-sm rounded-4 p-4">
<h5 class="fw-bold mb-3">Popular Tags</h5>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-sm btn-light border px-3 rounded-pill text-dark small">JavaScript</a>
<a href="#" class="btn btn-sm btn-light border px-3 rounded-pill text-dark small">Figma</a>
<a href="#" class="btn btn-sm btn-light border px-3 rounded-pill text-dark small">Python</a>
<a href="#" class="btn btn-sm btn-light border px-3 rounded-pill text-dark small">React</a>
<a href="#" class="btn btn-sm btn-light border px-3 rounded-pill text-dark small">Azure</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.bg-gradient-dark {
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}
.hover-lift {
transition: transform 0.3s ease-out;
}
.hover-lift:hover {
transform: translateY(-8px);
}
.rounded-pill-start {
border-top-left-radius: 50rem !important;
border-bottom-left-radius: 50rem !important;
padding-left: 1.5rem;
}
.rounded-pill-end {
border-top-right-radius: 50rem !important;
border-bottom-right-radius: 50rem !important;
padding-right: 1.5rem;
}
.hover-primary-text:hover {
color: #0d6efd !important;
}
.object-fit-cover {
object-fit: cover;
}
</style>