Hero
Hero section
Hero #1
<div class="swiper-container swiper" id="swiper-5" data-pagination-type=""
data-speed="800" data-space-between="100" data-pagination="false"
data-navigation="true" data-autoplay="true" data-effect="fade"
data-autoplay-delay="3000"
data-breakpoints='{"480": {"slidesPerView": 2}, "768": {"slidesPerView": 3}, "1024": {"slidesPerView": 1}}'>
<div class="swiper-wrapper pb-lg-8">
<div class="swiper-slide w-100 bg-light bg-opacity-50 border-bottom">
<div
class="container d-flex flex-column justify-content-center h-100">
<div class="row align-items-center py-8">
<div class="col-lg-5">
<div class="">
<span class="badge bg-info">New Arrival</span>
<h1 class="mb-3 mt-4 display-5 fw-bold">Classic
Designs for Timeless Spaces</h1>
<p class="mb-4 pe-lg-6">Discover the latest trends
in home décor! Our New Arrivals
collection features
stylish furniture and accessories to refresh
your space</p>
<a href="#" class="btn btn-outline-primary">Discover
More</a>
</div>
</div>
<div class="offset-lg-1 col-lg-6">
<div class="position-relative">
<img src="../../assets/images/slider/slider-img-1.png"
alt="slider image" class="img-fluid" />
<div
class="bg-white py-3 px-3 d-inline-flex flex-column position-absolute bottom-0 end-25 mb-4 shadow-sm">
<h3 class="mb-1 fs-5">Modern Sofa</h3>
<div
class="small d-flex gap-2 align-items-center">
<span>$259.00</span>
<a href="#!" class="text-link">+Add to
cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide w-100 bg-light bg-opacity-50 border-bottom">
<div
class="container d-flex flex-column justify-content-center h-100">
<div class="row align-items-center py-8">
<div class="col-lg-5">
<div class="">
<span class="small text-dark fw-bold">Limited-Time
Offer</span>
<h2 class="mb-3 mt-4 display-5 fw-bold pe-lg-10">
Get
<span
class="border-bottom border-4 border-warning">20%</span>
off on select items!
</h2>
<p class="mb-4">Get 20% off on select items! Shop
now and take advantage of our
limited-time offer to
upgrade your home with stunning designs.</p>
<a href="#" class="btn btn-primary">Get Yours
Now</a>
<a href="#" class="btn btn-outline-primary">Discover
More</a>
</div>
</div>
<div class="offset-lg-1 col-lg-6">
<div class="position-relative">
<img src="../../assets/images/slider/slider-img-2.png"
alt="slider image" class="img-fluid" />
<div
class="bg-white py-3 px-3 d-inline-flex flex-column position-absolute bottom-0 end-25 mb-4 shadow-sm">
<h3 class="mb-1 fs-5">Office Chair</h3>
<div
class="small d-flex gap-2 align-items-center">
<span>$259.00</span>
<a href="#!" class="text-link">+Add to
cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide w-100 bg-light bg-opacity-50 border-bottom">
<div
class="container d-flex flex-column justify-content-center h-100">
<div class="row align-items-center py-8">
<div class="col-lg-5">
<div class="">
<span class="small text-dark fw-bold">Free
Shipping</span>
<h2 class="mb-3 mt-4 display-5 fw-bold">Minimalist
Furniture</h2>
<p class="pe-lg-10 mb-4">Enjoy free shipping on all
orders over $100! Shop your favorite
pieces now and
have them delivered straight to your door at no
extra cost.</p>
<ul
class="list-unstyled d-flex flex-column gap-2 mb-4">
<li class="lh-base">
<svg width="16" height="16"
viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.3335 12.0003V4.00033C9.3335 3.6467 9.19302 3.30756 8.94297 3.05752C8.69292 2.80747 8.35378 2.66699 8.00016 2.66699H2.66683C2.31321 2.66699 1.97407 2.80747 1.72402 3.05752C1.47397 3.30756 1.3335 3.6467 1.3335 4.00033V11.3337C1.3335 11.5105 1.40373 11.68 1.52876 11.8051C1.65378 11.9301 1.82335 12.0003 2.00016 12.0003H3.3335"
stroke="#211F1C"
stroke-linecap="round"
stroke-linejoin="round" />
<path d="M10 12H6" stroke="#211F1C"
stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12.6668 11.9997H14.0002C14.177 11.9997 14.3465 11.9294 14.4716 11.8044C14.5966 11.6794 14.6668 11.5098 14.6668 11.333V8.89967C14.6666 8.74838 14.6148 8.60168 14.5202 8.48367L12.2002 5.58367C12.1378 5.50559 12.0587 5.44253 11.9687 5.39914C11.8787 5.35575 11.7801 5.33315 11.6802 5.33301H9.3335"
stroke="#211F1C"
stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M11.3333 13.3337C12.0697 13.3337 12.6667 12.7367 12.6667 12.0003C12.6667 11.2639 12.0697 10.667 11.3333 10.667C10.597 10.667 10 11.2639 10 12.0003C10 12.7367 10.597 13.3337 11.3333 13.3337Z"
stroke="#211F1C"
stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M4.66683 13.3337C5.40321 13.3337 6.00016 12.7367 6.00016 12.0003C6.00016 11.2639 5.40321 10.667 4.66683 10.667C3.93045 10.667 3.3335 11.2639 3.3335 12.0003C3.3335 12.7367 3.93045 13.3337 4.66683 13.3337Z"
stroke="#211F1C"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Free shipping
</li>
<li class="lh-base">
<svg width="16" height="16"
viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_273_4929)">
<path
d="M10.0002 14.6664C9.82335 14.6664 9.65378 14.5962 9.52876 14.4712C9.40373 14.3462 9.3335 14.1766 9.3335 13.9998V11.3331C9.33348 11.2234 9.36055 11.1153 9.4123 11.0186C9.46405 10.9218 9.53889 10.8393 9.63016 10.7784L11.6302 9.44511C11.7397 9.37202 11.8685 9.33301 12.0002 9.33301C12.1319 9.33301 12.2606 9.37202 12.3702 9.44511L14.3702 10.7784C14.4614 10.8393 14.5363 10.9218 14.588 11.0186C14.6398 11.1153 14.6668 11.2234 14.6668 11.3331V13.9998C14.6668 14.1766 14.5966 14.3462 14.4716 14.4712C14.3465 14.5962 14.177 14.6664 14.0002 14.6664H10.0002Z"
stroke="#211F1C"
stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12.0002 6.66634C12.0002 5.25185 11.4383 3.8953 10.4381 2.89511C9.43787 1.89491 8.08132 1.33301 6.66683 1.33301C5.25234 1.33301 3.89579 1.89491 2.89559 2.89511C1.8954 3.8953 1.3335 5.25185 1.3335 6.66634C1.3335 9.99501 5.02616 13.4617 6.26616 14.5323C6.38174 14.619 6.52235 14.6658 6.66683 14.6657"
stroke="#211F1C"
stroke-linecap="round"
stroke-linejoin="round" />
<path d="M12 14.667V12.667"
stroke="#211F1C"
stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M6.6665 8.66699C7.77107 8.66699 8.6665 7.77156 8.6665 6.66699C8.6665 5.56242 7.77107 4.66699 6.6665 4.66699C5.56193 4.66699 4.6665 5.56242 4.6665 6.66699C4.6665 7.77156 5.56193 8.66699 6.6665 8.66699Z"
stroke="#211F1C"
stroke-linecap="round"
stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_273_4929">
<rect width="16" height="16"
fill="white" />
</clipPath>
</defs>
</svg>
Convenient Shipping
</li>
</ul>
<a href="#" class="btn btn-outline-primary">Shop
Decoration</a>
</div>
</div>
<div class="offset-lg-1 col-lg-6">
<div class="position-relative">
<img src="../../assets/images/slider/slider-img-3.png"
alt="slider image" class="img-fluid" />
<div
class="bg-white py-3 px-3 d-inline-flex flex-column position-absolute bottom-0 end-25 mb-4 shadow-sm">
<h3 class="mb-1 fs-5">Wooden Table</h3>
<div
class="small d-flex gap-2 align-items-center">
<span>$259.00</span>
<a href="#!" class="text-link">+Add to
cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Add more slides as needed -->
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div
class="swiper-navigation position-absolute end-25 bottom-10 me-md-n10 mb-8">
<div
class="swiper-button-next btn btn-icon btn-sm btn-outline-primary rounded-circle">
</div>
<div
class="swiper-button-prev me-2 btn btn-icon btn-sm btn-outline-primary rounded-circle">
</div>
</div>
</div>