<section class="container py-4 pt-lg-5 mt-2">
<div class="row g-4 align-items-center">
<!-- Sidebar Categories (Desktop Only) -->
<div class="col-lg-3 d-none d-lg-block">
<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
<div class="bg-primary p-3">
<h6 class="text-white mb-0 fw-bold"><i class="bi bi-list me-2"></i> Shop Categories</h6>
</div>
<ul class="list-group list-group-flush sidebar-nav">
<li class="list-group-item border-0 py-3"><a href="#" class="text-decoration-none text-dark"><i class="bi bi-laptop me-3"></i>Electronics</a></li>
<li class="list-group-item border-0 py-3"><a href="#" class="text-decoration-none text-dark"><i class="bi bi-watch me-3"></i>Smart Gadgets</a></li>
<li class="list-group-item border-0 py-3"><a href="#" class="text-decoration-none text-dark"><i class="bi bi-camera me-3"></i>Photography</a></li>
<li class="list-group-item border-0 py-3"><a href="#" class="text-decoration-none text-dark"><i class="bi bi-headphones me-3"></i>Audio Gear</a></li>
<li class="list-group-item border-0 py-3"><a href="#" class="text-decoration-none text-dark"><i class="bi bi-controller me-3"></i>Gaming Zone</a></li>
<li class="list-group-item border-0 py-3"><a href="#" class="text-decoration-none text-primary fw-bold">View All Categories</a></li>
</ul>
</div>
</div>
<!-- Main Slider -->
<div class="col-lg-7 col-md-8">
<div id="heroEcommerceSlider" class="carousel slide carousel-fade shadow-sm rounded-5 overflow-hidden border" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroEcommerceSlider" data-bs-slide-to="0" class="active rounded-circle"></button>
<button type="button" data-bs-target="#heroEcommerceSlider" data-bs-slide-to="1" class="rounded-circle"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active bg-white" data-bs-interval="5000">
<div class="row align-items-center p-4 p-lg-5">
<div class="col-md-7 ps-lg-4 text-center text-md-start">
<span class="badge bg-danger mb-3 px-3 py-2 rounded-pill">UP TO 50% OFF</span>
<h1 class="display-4 fw-black text-dark mb-3">Premium <br><span class="text-primary">Audio Pods</span></h1>
<p class="text-muted mb-4 lead">Noise cancelling, high fidelity sound with 40h battery life.</p>
<a href="#" class="btn btn-primary btn-lg px-4 rounded-pill shadow">Shop Collection</a>
</div>
<div class="col-md-5 text-center mt-4 mt-md-0">
<img src="https://images.unsplash.com/photo-1546435770-a3e426bf472b?auto=format&fit=crop&q=80&w=400" class="img-fluid rounded-4 animate-float" alt="Headphones">
</div>
</div>
</div>
<div class="carousel-item bg-light-subtle" data-bs-interval="5000">
<div class="row align-items-center p-4 p-lg-5">
<div class="col-md-7 ps-lg-4 text-center text-md-start">
<span class="badge bg-primary mb-3 px-3 py-2 rounded-pill">BEST SELLERS</span>
<h1 class="display-4 fw-black text-dark mb-3">Smart Home <br><span class="text-warning">Hub Max</span></h1>
<p class="text-muted mb-4 lead">Voice controlled assistant for your kitchen and living room.</p>
<a href="#" class="btn btn-dark btn-lg px-4 rounded-pill shadow">Order Now</a>
</div>
<div class="col-md-5 text-center mt-4 mt-md-0">
<img src="https://images.unsplash.com/photo-1589492477829-5e65395b66cc?auto=format&fit=crop&q=80&w=400" class="img-fluid rounded-4 animate-float" alt="Smart Device">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Side Banners -->
<div class="col-lg-2 col-md-4">
<div class="row g-4">
<div class="col-12">
<div class="card border-0 rounded-4 overflow-hidden shadow-sm text-white position-relative hover-overlay h-100">
<img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?auto=format&fit=crop&q=80&w=300" class="card-img" alt="Sunglasses">
<div class="card-img-overlay bg-dark bg-opacity-25 d-flex flex-column justify-content-end p-3 h-100 mt-5">
<p class="mb-0 small fw-bold">Accessories</p>
<h5 class="fw-bold fs-6">Classic Style</h5>
</div>
</div>
</div>
<div class="col-12">
<div class="card border-0 rounded-4 overflow-hidden shadow-sm text-white position-relative hover-overlay h-100">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&q=80&w=300" class="card-img" alt="Sneakers">
<div class="card-img-overlay bg-dark bg-opacity-25 d-flex flex-column justify-content-end p-3 h-100 mt-5">
<p class="mb-0 small fw-bold">Footwear</p>
<h5 class="fw-bold fs-6">Runner X1</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service features band -->
<div class="row mt-5 g-4 py-4 bg-white shadow-sm rounded-4 text-center border mx-0">
<div class="col-md-3 col-6">
<i class="bi bi-truck fs-3 text-primary mb-2"></i>
<h6 class="fw-bold mb-0 small">Free Delivery</h6>
<p class="text-muted x-small mb-0">Orders over $100</p>
</div>
<div class="col-md-3 col-6">
<i class="bi bi-arrow-repeat fs-3 text-primary mb-2"></i>
<h6 class="fw-bold mb-0 small">90 Day Return</h6>
<p class="text-muted x-small mb-0">No questions asked</p>
</div>
<div class="col-md-3 col-6 border-start-md">
<i class="bi bi-shield-check fs-3 text-primary mb-2"></i>
<h6 class="fw-bold mb-0 small">Secure Payment</h6>
<p class="text-muted x-small mb-0">100% safe checkout</p>
</div>
<div class="col-md-3 col-6 border-start-md">
<i class="bi bi-headset fs-3 text-primary mb-2"></i>
<h6 class="fw-bold mb-0 small">24/7 Support</h6>
<p class="text-muted x-small mb-0">Ready to help</p>
</div>
</div>
</section>
<style>
.fw-black {
font-weight: 900;
}
.x-small {
font-size: 0.75rem;
}
.sidebar-nav .list-group-item {
transition: 0.2s;
}
.sidebar-nav .list-group-item:hover {
background-color: #f8f9fa;
padding-left: 1.5rem !important;
}
#heroEcommerceSlider {
min-height: 400px;
}
.carousel-indicators [data-bs-target] {
width: 10px;
height: 10px;
background-color: #0d6efd;
}
.animate-float {
animation: floatImg 4s ease-in-out infinite;
}
@keyframes floatImg {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
.hover-overlay:hover img {
transform: scale(1.1);
transition: 0.5s ease;
}
.card-img {
height: 190px;
object-fit: cover;
}
@media (min-width: 768px) {
.border-start-md {
border-left: 1px solid #dee2e6 !important;
}
}
</style>