ECOMMERCE/resources/views/blog/grid-v2.blade.php

641 lines
37 KiB
PHP

@extends('layouts.landing', ['title' => 'Blog Grid View v.2'])
@section('content')
<!-- Shopping cart offcanvas (Empty state) -->
<div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1" aria-labelledby="shoppingCartLabel"
style="width: 500px">
<div class="offcanvas-header py-3 pt-lg-4">
<h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body text-center">
<svg class="d-block mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 29.5 30">
<path class="text-body-tertiary"
d="M17.8 4c.4 0 .8-.3.8-.8v-2c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v2c0 .4.3.8.8.8zm3.2.6c.4.2.8 0 1-.4l.4-.9c.2-.4 0-.8-.4-1s-.8 0-1 .4l-.4.9c-.2.4 0 .9.4 1zm-7.5-.4c.2.4.6.6 1 .4s.6-.6.4-1l-.4-.9c-.2-.4-.6-.6-1-.4s-.6.6-.4 1l.4.9z"
fill="currentColor" />
<path class="text-body-emphasis"
d="M10.7 24.5c-1.5 0-2.8 1.2-2.8 2.8S9.2 30 10.7 30s2.8-1.2 2.8-2.8-1.2-2.7-2.8-2.7zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.5 1.2-1.2 1.2zm11.1-4c-1.5 0-2.8 1.2-2.8 2.8a2.73 2.73 0 0 0 2.8 2.8 2.73 2.73 0 0 0 2.8-2.8c0-1.6-1.3-2.8-2.8-2.8zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.6 1.2-1.2 1.2zM8.7 18h16c.3 0 .6-.2.7-.5l4-10c.2-.5-.2-1-.7-1H9.3c-.4 0-.8.3-.8.8s.4.7.8.7h18.3l-3.4 8.5H9.3L5.5 1C5.4.7 5.1.5 4.8.5h-4c-.5 0-.8.3-.8.7s.3.8.8.8h3.4l3.7 14.6a3.24 3.24 0 0 0-2.3 3.1C5.5 21.5 7 23 8.7 23h16c.4 0 .8-.3.8-.8s-.3-.8-.8-.8h-16a1.79 1.79 0 0 1-1.8-1.8c0-1 .9-1.6 1.8-1.6z"
fill="currentColor" />
</svg>
<h6 class="mb-2">Your shopping cart is currently empty!</h6>
<p class="fs-sm mb-4">Explore our wide range of products and add items to your cart to proceed with your
purchase.</p>
<a class="btn btn-dark rounded-pill" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Continue shopping</a>
</div>
</div>
@include('layouts.partials/navbar2')
<main class="content-wrapper">
<!-- Featured post with video -->
<section class="container py-4 py-md-5 my-sm-3 my-md-0">
<div class="row row-cols-1 row-cols-md-2 g-0 overflow-hidden rounded-5">
<!-- Video -->
<div class="col position-relative">
<div class="ratio ratio-4x3"></div>
<img src="/img/blog/grid/v2/video01.jpg"
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Image">
<div class="position-absolute start-0 bottom-0 d-flex align-items-end w-100 h-100 z-2 p-4">
<a class="btn btn-lg btn-light rounded-pill m-md-2"
href="https://www.youtube.com/watch?v=X7lCwxswYnE" data-glightbox data-gallery="video1">
<i class="ci-play fs-lg ms-n1 me-2"></i>
Play
</a>
</div>
</div>
<!-- Title + text -->
<div class="col bg-dark py-5 px-4 px-xl-5" data-bs-theme="dark">
<div class="py-md-4 py-lg-5 px-md-4 px-lg-5 my-xl-4 my-xxl-5">
<div class="nav mb-3">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Home decoration</a>
</div>
<h1>Decorate your home in easy steps</h1>
<p class="text-body pb-sm-2 pb-lg-0 mb-4 mb-lg-5">Decorating your home can be a fun and creative
process that transforms your living space.</p>
<a class="btn btn-lg btn-outline-light rounded-pill" href="#!">Learn more</a>
</div>
</div>
</div>
</section>
<!-- Grid with filters -->
<section class="container pt-1 pt-md-2 pt-lg-3 pt-xl-4 pt-xxl-5">
<!-- Category filters -->
<nav class="overflow-x-auto mb-3" data-simplebar data-simplebar-auto-hide="false">
<ul class="nav nav-pills flex-nowrap text-nowrap py-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#!">All</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!">Home decoration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!">Furniture</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!">Interior design</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!">Lighting</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!">Design trends</a>
</li>
</ul>
</nav>
<!-- Posts grid -->
<div class="row row-cols-1 row-cols-sm-2 gy-5">
<!-- Article -->
<article class="col">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
<img src="/img/blog/grid/v2/01.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior design</a>
</div>
<h3 class="h5 mb-3">
<a class="hover-effect-underline" href="#!">Creating a cozy and inviting home: Interior
design ideas</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Harry Mitchell</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">October 13, 2024</span>
</div>
</div>
</article>
<!-- Article -->
<article class="col">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
<img src="/img/blog/grid/v2/02.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Lighting</a>
</div>
<h3 class="h5 mb-3">
<a class="hover-effect-underline" href="#!">Illuminate your space with these mesmerizing
lighting ideas</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Olivia Anderson</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">October 10, 2024</span>
</div>
</div>
</article>
<!-- Article -->
<article class="col">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
<img src="/img/blog/grid/v2/03.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Furniture</a>
</div>
<h3 class="h5 mb-3">
<a class="hover-effect-underline" href="#!">Incorporating retro furniture in your
interior
design</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Emily Davies</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">September 29, 2024</span>
</div>
</div>
</article>
<!-- Article -->
<article class="col">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
<img src="/img/blog/grid/v2/04.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior design</a>
</div>
<h3 class="h5 mb-3">
<a class="hover-effect-underline" href="#!">Creating an eclectic interior design style
</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Mason Taylor</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">September 17, 2024</span>
</div>
</div>
</article>
</div>
<!-- Load more button -->
<div class="d-flex flex-column flex-sm-row justify-content-center pt-5">
<button type="button" class="btn btn-lg btn-outline-dark rounded-pill">Load more</button>
</div>
</section>
<!-- Featured in category posts (Carousel) -->
<section class="container py-5 mt-1 my-sm-2 my-md-3 my-lg-4 my-xl-5">
<div class="row py-2 py-xxl-3">
<div class="col-lg-3 pb-2 mb-4">
<h2 class="text-center text-lg-start mb-lg-5">Retro elements in interior design</h2>
<!-- External slider prev/next buttons -->
<div class="d-flex justify-content-center justify-content-lg-start gap-2">
<button type="button" id="prev"
class="btn btn-lg btn-icon btn-outline-secondary rounded-circle animate-slide-start me-1"
aria-label="Prev">
<i class="ci-chevron-left fs-xl animate-target"></i>
</button>
<button type="button" id="next"
class="btn btn-lg btn-icon btn-outline-secondary rounded-circle animate-slide-end"
aria-label="Next">
<i class="ci-chevron-right fs-xl animate-target"></i>
</button>
</div>
</div>
<div class="col-lg-9">
<!-- Slider -->
<div class="swiper"
data-swiper='{
"slidesPerView": 1,
"spaceBetween": 24,
"navigation": {
"prevEl": "#prev",
"nextEl": "#next"
},
"scrollbar": {
"el": ".swiper-scrollbar"
},
"breakpoints": {
"500": {
"slidesPerView": 2
},
"768": {
"slidesPerView": 3
}
}
}'>
<div class="swiper-wrapper pb-3 mb-2 mb-sm-3 mb-md-4">
<!-- Article -->
<article class="swiper-slide">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
<img src="/img/blog/grid/v2/09.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Home
decoration</a>
</div>
<h3 class="h6 mb-3">
<a class="hover-effect-underline" href="#!">Decorate your home for the
festive season in 3 easy steps</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Ava
Johnson</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">September 11, 2024</span>
</div>
</div>
</article>
<!-- Article -->
<article class="swiper-slide">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
<img src="/img/blog/grid/v2/10.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0"
href="#!">Furniture</a>
</div>
<h3 class="h6 mb-3">
<a class="hover-effect-underline" href="#!">Furnishing your space: a guide to
choosing the perfect furniture pieces</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Oliver
Harris</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">September 5, 2024</span>
</div>
</div>
</article>
<!-- Article -->
<article class="swiper-slide">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
<img src="/img/blog/grid/v2/11.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior
design</a>
</div>
<h3 class="h6 mb-3">
<a class="hover-effect-underline" href="#!">Transform your living space with
these chic interior design tips</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Ethan
Miller</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">August 23, 2024</span>
</div>
</div>
</article>
<!-- Article -->
<article class="swiper-slide">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
<img src="/img/blog/grid/v2/12.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Lighting</a>
</div>
<h3 class="h6 mb-3">
<a class="hover-effect-underline" href="#!">Brighten up your home with these
stunning lighting hacks</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Emily
Davies</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">August 18, 2024</span>
</div>
</div>
</article>
<!-- Article -->
<article class="swiper-slide">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
<img src="/img/blog/grid/v2/13.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Home
decoration</a>
</div>
<h3 class="h6 mb-3">
<a class="hover-effect-underline" href="#!">Elevate your space with trendy
home decoration ideas</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Olivia
Anderson</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">August 9, 2024</span>
</div>
</div>
</article>
<!-- Article -->
<article class="swiper-slide">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
<img src="/img/blog/grid/v2/14.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Design
trends</a>
</div>
<h3 class="h6 mb-3">
<a class="hover-effect-underline" href="#!">Discover the latest captivating
home design trends shaping spaces</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Harry
Mitchell</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">July 27, 2024</span>
</div>
</div>
</article>
</div>
<!-- Slider scrollbar -->
<div class="swiper-scrollbar position-static" style="height: .125rem"></div>
</div>
</div>
</div>
</section>
<!-- Featured post with video -->
<section class="bg-body-tertiary py-5">
<div class="container py-2 py-md-3 py-lg-4 py-xl-5">
<div class="row align-items-center">
<!-- Video -->
<div class="col-md-6 col-lg-7 col-xl-8 mb-4 mb-md-0">
<div class="position-relative">
<div class="ratio" style="--cz-aspect-ratio: calc(600 / 856 * 100%)">
<img src="/img/blog/grid/v2/video02.jpg" class="rounded-5" alt="Image">
</div>
<div class="position-absolute start-0 bottom-0 d-flex align-items-end w-100 h-100 z-2 p-4">
<a class="btn btn-lg btn-light rounded-pill m-md-2"
href="https://www.youtube.com/watch?v=Z1xX1Kt9NkU" data-glightbox
data-gallery="video2">
<i class="ci-play fs-lg ms-n1 me-2"></i>
Play
</a>
</div>
</div>
</div>
<!-- Title + text -->
<div class="col-md-6 col-lg-5 col-xl-4">
<div class="ps-md-4 ps-lg-5">
<div class="nav mb-3">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Design trends</a>
</div>
<h1 class="mb-4 mb-lg-5">Interior design trends for French windows</h1>
<a class="btn btn-lg btn-outline-dark rounded-pill" href="#!">Learn more</a>
</div>
</div>
</div>
</div>
</section>
<!-- Posts grid -->
<section class="container py-5 mb-1 my-sm-2 my-md-3 my-lg-4 my-xl-5">
<div class="row row-cols-1 row-cols-sm-2 gy-5 py-2 py-xxl-3">
<!-- Article -->
<article class="col">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
<img src="/img/blog/grid/v2/05.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Home decoration</a>
</div>
<h3 class="h5 mb-3">
<a class="hover-effect-underline" href="#!">Unlock the secrets to stunning home
decoration</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Mason Taylor</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">July 16, 2024</span>
</div>
</div>
</article>
<!-- Article -->
<article class="col">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
<img src="/img/blog/grid/v2/06.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Furniture</a>
</div>
<h3 class="h5 mb-3">
<a class="hover-effect-underline" href="#!">Maximizing small spaces: Furniture selection
tips</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Ava Johnson</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">July 8, 2024</span>
</div>
</div>
</article>
<!-- Article -->
<article class="col">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
<img src="/img/blog/grid/v2/07.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior design</a>
</div>
<h3 class="h5 mb-3">
<a class="hover-effect-underline" href="#!">Feng shui your home: Interior design tips for
positive energy</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Emily Davies</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">June 27, 2024</span>
</div>
</div>
</article>
<!-- Article -->
<article class="col">
<a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
style="--cz-aspect-ratio: calc(466 / 636 * 100%)">
<img src="/img/blog/grid/v2/08.jpg" class="hover-effect-target" alt="Image">
</a>
<div class="pt-4">
<div class="nav pb-2 mb-1">
<a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Design trends</a>
</div>
<h3 class="h5 mb-3">
<a class="hover-effect-underline" href="#!">Minimalism made easy: Interior design for a
simplistic lifestyle</a>
</h3>
<div class="nav align-items-center gap-2 fs-xs">
<a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Harry Mitchell</a>
<hr class="vr my-1 mx-1">
<span class="text-body-secondary">June 19, 2024</span>
</div>
</div>
</article>
</div>
</section>
</main>
<!-- Page footer -->
<footer class="footer bg-dark pb-4 py-lg-5" data-bs-theme="dark">
<div class="container pt-5 pt-lg-4 mt-sm-2 mt-md-3">
<div class="row pb-5">
<!-- Subscription + Social account links -->
<div class="col-md col-xl-8 order-md-2">
<div class="text-center px-sm-4 mx-auto" style="max-width: 568px">
<h3 class="pb-1 mb-2">Stay in touch with us</h3>
<p class="fs-sm text-body pb-2 pb-sm-3">Receive the latest updates about our products &amp;
promotions</p>
<form class="needs-validation position-relative" novalidate>
<input type="email" class="form-control form-control-lg rounded-pill text-start"
placeholder="You email" aria-label="Your email address" required>
<div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
<button type="submit"
class="btn btn-icon fs-xl btn-dark rounded-circle position-absolute top-0 end-0 mt-1 me-1"
aria-label="Submit your email address" data-bs-theme="light">
<i class="ci-arrow-up-right"></i>
</button>
</form>
<div class="d-flex justify-content-center gap-2 pt-4 pt-md-5 mt-1 mt-md-0">
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
data-bs-toggle="tooltip"
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
title="YouTube" aria-label="Follow us on YouTube">
<i class="ci-youtube"></i>
</a>
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
data-bs-toggle="tooltip"
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
title="Facebook" aria-label="Follow us on Facebook">
<i class="ci-facebook"></i>
</a>
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
data-bs-toggle="tooltip"
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
title="Instagram" aria-label="Follow us on Instagram">
<i class="ci-instagram"></i>
</a>
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
data-bs-toggle="tooltip"
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
title="Telegram" aria-label="Follow us on Telegram">
<i class="ci-telegram"></i>
</a>
<a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
data-bs-toggle="tooltip"
data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
title="Pinterest" aria-label="Follow us on Pinterest">
<i class="ci-pinterest"></i>
</a>
</div>
</div>
</div>
<!-- Category links -->
<div class="col-md-auto col-xl-2 text-center order-md-1 pt-4 pt-md-0">
<ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
<li class="animate-underline my-1 mx-2 m-md-0">
<a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bedroom</a>
</li>
<li class="animate-underline my-1 mx-2 m-md-0">
<a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Living room</a>
</li>
<li class="animate-underline my-1 mx-2 m-md-0">
<a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bathroom</a>
</li>
<li class="animate-underline my-1 mx-2 m-md-0">
<a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Decoration</a>
</li>
<li class="animate-underline my-1 mx-2 m-md-0">
<a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Kitchen</a>
</li>
<li class="animate-underline my-1 mx-2 m-md-0">
<a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Sale</a>
</li>
</ul>
</div>
<!-- Customer links -->
<div class="col-md-auto col-xl-2 text-center order-md-3 pt-3 pt-md-0">
<ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
<li class="animate-underline my-1 mx-2 m-md-0">
<a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Shipping
options</a>
</li>
<li class="animate-underline my-1 mx-2 m-md-0">
<a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Tracking a
package</a>
</li>
<li class="animate-underline my-1 mx-2 m-md-0">
<a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Help center</a>
</li>
<li class="animate-underline my-1 mx-2 m-md-0">
<a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Contact us</a>
</li>
<li class="animate-underline my-1 mx-2 m-md-0">
<a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Product
returns</a>
</li>
<li class="animate-underline my-1 mx-2 m-md-0">
<a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Locations</a>
</li>
</ul>
</div>
</div>
<!-- Copyright -->
<p class="fs-xs text-body text-center pt-lg-4 mt-n2 mt-md-0 mb-0">
&copy; All rights reserved. Made by <span class="animate-underline"><a
class="animate-target text-white text-decoration-none" href="https://coderthemes.com/"
target="_blank" rel="noreferrer">Coderthemes</a></span>
</p>
</div>
</footer>
@endsection
@section('scripts')
@endsection