<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.15/dist/js/splide.min.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.15/dist/css/splide.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.15/dist/css/splide-core.min.css"
/>
<!-- --- -->
<!-- Styles -->
<style>
.splide__arrow--prev,
.splide__arrow--next {
background-color: #fff !important;
}
</style>
<!-- ----- --->
<header>
<div id="slider" class="splide">
<div class="splide__track">
<ul class="splide__list">
<!-- Slider #1 -->
<li class="splide__slide">
<div class="bg-gradient-to-br from-zinc-50 to-zinc-100">
<div class="mx-auto max-w-screen-xl px-8">
<div class="grid grid-cols-12 items-center">
<div class="col-span-12 sm:col-span-6">
<div class="flex flex-col gap-y-4 py-8 sm:p-0">
<div
class="border-l-4 border-zinc-300 pl-4 text-xs font-medium text-gray-700 sm:text-sm md:text-lg"
>
CONSULTING SERVICES
</div>
<h1
class="text-xl font-bold text-gray-700 sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl"
>
IT Consulting services
</h1>
<p class="sm:text-md text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Itaque earum cumque temporibus minus quisquam
libero ad eius fuga id laborum?
</p>
<a
class="group flex cursor-pointer items-center gap-x-2"
>
<div
class="inline-block rounded-full border bg-white p-2 shadow-lg shadow-zinc-300 transition-all group-hover:bg-zinc-200 sm:p-3"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-8 w-8 rounded-full bg-zinc-700 p-2 text-gray-50 sm:h-10 sm:w-10 sm:p-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
/>
</svg>
</div>
<div
class="text-sm font-medium text-zinc-600 group-hover:text-gray-700 sm:text-lg"
>
Free consultation
</div>
</a>
</div>
</div>
<div class="col-span-12 hidden sm:col-span-6 sm:block">
<img
src="https://ld-wt73.template-help.com/tf/strategytech/images/person-01-805x900.png"
alt=""
/>
</div>
</div>
</div>
</div>
</li>
<!-- Slider #2 -->
<li class="splide__slide">
<div class="bg-gradient-to-br from-red-50 to-red-100">
<div class="mx-auto max-w-screen-xl px-8">
<div class="grid grid-cols-12 items-center">
<div class="col-span-12 sm:col-span-6">
<div class="flex flex-col gap-y-4 py-8 sm:p-0">
<div
class="border-l-4 border-red-300 pl-4 text-xs font-medium text-gray-700 sm:text-sm md:text-lg"
>
CONSULTING SERVICES
</div>
<h1
class="text-xl font-bold text-gray-700 sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl"
>
IT Consulting services
</h1>
<p class="sm:text-md text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Itaque earum cumque temporibus minus quisquam
libero ad eius fuga id laborum?
</p>
<a
class="group flex cursor-pointer items-center gap-x-2"
>
<div
class="inline-block rounded-full border bg-white p-2 shadow-lg shadow-red-300 transition-all group-hover:bg-red-200 sm:p-3"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-8 w-8 rounded-full bg-red-700 p-2 text-gray-50 sm:h-10 sm:w-10 sm:p-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
/>
</svg>
</div>
<div
class="text-sm font-medium text-red-600 group-hover:text-gray-700 sm:text-lg"
>
Free consultation
</div>
</a>
</div>
</div>
<div class="col-span-12 hidden sm:col-span-6 sm:block">
<img
src="https://ld-wt73.template-help.com/tf/strategytech/images/person-01-805x900.png"
alt=""
/>
</div>
</div>
</div>
</div>
</li>
<!-- Slider #3 -->
<li class="splide__slide">
<div class="bg-gradient-to-br from-yellow-50 to-yellow-100">
<div class="mx-auto max-w-screen-xl px-8">
<div class="grid grid-cols-12 items-center">
<div class="col-span-12 sm:col-span-6">
<div class="flex flex-col gap-y-4 py-8 sm:p-0">
<div
class="border-l-4 border-yellow-300 pl-4 text-xs font-medium text-gray-700 sm:text-sm md:text-lg"
>
CONSULTING SERVICES
</div>
<h1
class="text-xl font-bold text-gray-700 sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl"
>
IT Consulting services
</h1>
<p class="sm:text-md text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Itaque earum cumque temporibus minus quisquam
libero ad eius fuga id laborum?
</p>
<a
class="group flex cursor-pointer items-center gap-x-2"
>
<div
class="inline-block rounded-full border bg-white p-2 shadow-lg shadow-yellow-300 transition-all group-hover:bg-yellow-200 sm:p-3"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="h-8 w-8 rounded-full bg-yellow-700 p-2 text-gray-50 sm:h-10 sm:w-10 sm:p-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
/>
</svg>
</div>
<div
class="text-sm font-medium text-yellow-600 group-hover:text-gray-700 sm:text-lg"
>
Free consultation
</div>
</a>
</div>
</div>
<div class="col-span-12 hidden sm:col-span-6 sm:block">
<img
src="https://ld-wt73.template-help.com/tf/strategytech/images/person-01-805x900.png"
alt=""
/>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</header>
<!-- Script -->
<script>
document.addEventListener("DOMContentLoaded", function () {
new Splide("#slider", {
type: "loop",
perPage: 1,
autoplay: true,
interval: 5000,
updateOnMove: true,
pagination: false,
}).mount();
})
</script>
<!-- ------ -->
