<!-- Hero Split Carousel -->
<section class="container py-5">
<div id="premiumHeroCarousel" class="carousel slide carousel-fade shadow-lg rounded-5 overflow-hidden" data-bs-ride="carousel">
<!-- Progress Indicators -->
<div class="carousel-indicators mb-4">
<button type="button" data-bs-target="#premiumHeroCarousel" data-bs-slide-to="0" class="active rounded-pill" style="width: 30px; height: 6px;"></button>
<button type="button" data-bs-target="#premiumHeroCarousel" data-bs-slide-to="1" class="rounded-pill" style="width: 30px; height: 6px;"></button>
<button type="button" data-bs-target="#premiumHeroCarousel" data-bs-slide-to="2" class="rounded-pill" style="width: 30px; height: 6px;"></button>
</div>
<div class="carousel-inner">
<!-- Slide 1: Modern Tech -->
<div class="carousel-item active" data-bs-interval="5000">
<div class="row g-0 vh-75 min-vh-500">
<div class="col-lg-6 d-flex align-items-center bg-white p-5">
<div class="px-md-4 animate-up">
<span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill mb-3 fw-bold">Innovation 2024</span>
<h1 class="display-2 fw-black text-dark mb-4">Smart <span class="text-primary text-gradient">Solutions</span></h1>
<p class="lead text-secondary mb-5">Experience the next generation of seamless living with our integrated AI ecosystem designed for your comfort.</p>
<div class="d-flex flex-wrap gap-3">
<a href="#" class="btn btn-primary btn-lg px-5 rounded-pill shadow-lg">Get Started</a>
<a href="#" class="btn btn-outline-dark btn-lg px-4 rounded-pill">Watch Video <i class="bi bi-play-circle ms-1"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 position-relative overflow-hidden card-img-zoom">
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80&w=1200" class="w-100 h-100 object-fit-cover" alt="Modern Tech">
</div>
</div>
</div>
<!-- Slide 2: Design Focused -->
<div class="carousel-item" data-bs-interval="5000">
<div class="row g-0 vh-75 min-vh-500">
<div class="col-lg-6 d-flex align-items-center bg-dark text-white p-5">
<div class="px-md-4">
<h1 class="display-2 fw-black mb-4">Ultra <span class="text-info">Minimal</span></h1>
<p class="lead opacity-75 mb-5">Minimalist design meets maximum performance. Beautifully crafted hardware that fits perfectly into your lifestyle.</p>
<a href="#" class="btn btn-info text-white btn-lg px-5 rounded-pill shadow">Explore Design</a>
</div>
</div>
<div class="col-lg-6 position-relative overflow-hidden card-img-zoom">
<img src="https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?auto=format&fit=crop&q=80&w=1200" class="w-100 h-100 object-fit-cover" alt="Design Focused">
</div>
</div>
</div>
<!-- Slide 3: Performance -->
<div class="carousel-item" data-bs-interval="5000">
<div class="row g-0 vh-75 min-vh-500">
<div class="col-lg-6 d-flex align-items-center bg-light p-5">
<div class="px-md-4">
<h1 class="display-2 fw-black text-dark mb-4">Elite <span class="text-danger">Power</span></h1>
<p class="lead text-secondary mb-5">Unmatched processing speeds for creators, developers, and visionaries built on robust architecture.</p>
<button class="btn btn-danger btn-lg px-5 rounded-pill shadow">Try Beta Now</button>
</div>
</div>
<div class="col-lg-6 position-relative overflow-hidden card-img-zoom">
<img src="https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?auto=format&fit=crop&q=80&w=1200" class="w-100 h-100 object-fit-cover" alt="Performance">
</div>
</div>
</div>
</div>
<!-- Float Nav Controls -->
<button class="carousel-control-prev w-auto ms-4" type="button" data-bs-target="#premiumHeroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon bg-white text-dark shadow rounded-circle p-4 border" aria-hidden="true" style="filter: invert(1);"></span>
</button>
<button class="carousel-control-next w-auto me-4" type="button" data-bs-target="#premiumHeroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon bg-white text-dark shadow rounded-circle p-4 border" aria-hidden="true" style="filter: invert(1);"></span>
</button>
</div>
</section>
<style>
/* Custom Typography */
.fw-black {
font-weight: 900;
letter-spacing: -2px;
}
.text-gradient {
background: linear-gradient(45deg, #0d6efd, #0dcaf0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Container Sizing */
.vh-75 {
height: 75vh;
}
.min-vh-500 {
min-height: 550px;
}
/* Animations */
.carousel-item.active .animate-up {
animation: heroUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.carousel-item.active .card-img-zoom img {
animation: imgZoom 6s linear infinite alternate;
}
@keyframes heroUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes imgZoom {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
/* Slick Controls */
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-size: 40%;
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
transform: scale(1.2);
background-color: #0d6efd !important;
filter: invert(0) !important;
border-color: #0d6efd !important;
}
/* Indicators Styling */
.carousel-indicators .active {
background-color: #0d6efd;
}
/* Mobile Compatibility */
@media (max-width: 991px) {
.vh-75 {
height: auto;
}
.col-lg-6 {
text-align: center;
}
.d-flex {
justify-content: center;
}
.display-2 {
font-size: 3rem;
}
.min-vh-500 {
min-height: auto;
}
.carousel-control-prev,
.carousel-control-next {
display: none;
}
}
</style>