IT Agency Landing Page
Technology Used:
Tailwindcss v3
AlpineJs v3
JS
<!-- AOS CDN -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<!-- ******* -->
<!-- SPLIDE CDN-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.15/dist/css/splide.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.15/dist/js/splide.min.js"></script>
<!-- ********* -->
<!-- ALPINEJS -->
<script src="//unpkg.com/alpinejs" defer></script>
<!-- ******** -->
<!-- OVERWRITING SPLIDE STYLES -->
<style>
.splide__arrow {
top: 0;
}
button.splide__arrow--prev {
left: auto;
right: 3rem;
background-color: #F9FAFB;
padding: .2rem;
}
button.splide__arrow--next {
right: 1rem;
background-color: #F9FAFB;
padding: .2rem;
}
</style>
<!-- ************************** -->
<!--👇 NAVBAR COMPONENT 👇-->
<nav x-data aria-label="Site Navbar">
<div class="border-b bg-white">
<div class="mx-auto max-w-screen-xl px-4 py-4">
<div class="flex items-center justify-between gap-x-8">
<a class="flex cursor-pointer items-center gap-x-1">
<img width="28" height="28" class="object-cover" src="https://ankitcodes.com/uploads/fAPFuFMfl3vI8NS7wgTPopqD9FBtgt-metaZmF2aWNvbi5wbmc=-.png" alt="logo" />
<span class="text-lg font-black text-zinc-800">CODES</span>
</a>
<ul class="flex items-center gap-x-6">
<li class="hidden md:block">
<a class="cursor-pointer border-t-4 border-white py-5 text-sm text-gray-900 outline-zinc-800 transition-all duration-300 hover:border-zinc-800 hover:text-zinc-800">Home</a>
</li>
<li class="hidden md:block">
<a class="cursor-pointer border-t-4 border-white py-5 text-sm text-gray-900 outline-zinc-800 transition-all duration-300 hover:border-zinc-800 hover:text-zinc-800">About Us</a>
</li>
<li class="hidden md:block">
<a class="cursor-pointer border-t-4 border-white py-5 text-sm text-gray-900 outline-zinc-800 transition-all duration-300 hover:border-zinc-800 hover:text-zinc-800">Service</a>
</li>
<li class="hidden md:block">
<a class="cursor-pointer border-t-4 border-white py-5 text-sm text-gray-900 outline-zinc-800 transition-all duration-300 hover:border-zinc-800 hover:text-zinc-800">Blog</a>
</li>
<li class="hidden md:block">
<a class="cursor-pointer border-t-4 border-white py-5 text-sm text-gray-900 outline-zinc-800 transition-all duration-300 hover:border-zinc-800 hover:text-zinc-800">Contacts</a>
</li>
</ul>
<ul class="flex items-center gap-x-6">
<li class="flex items-center gap-x-4">
<button>
<a class="flex cursor-pointer items-center gap-x-2 font-medium text-zinc-800">
<div class="rounded-full bg-zinc-800 p-2 text-gray-50 shadow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
<path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
<path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
</svg>
</div>
<span>Get in touch</span>
</a>
</button>
<button
@click="
$refs.dropdown.classList.toggle('h-[180px]')
$refs.menu.classList.toggle('hidden')
$refs.close.classList.toggle('hidden')
"
class="block cursor-pointer p-2 text-sm font-medium text-zinc-800 hover:text-zinc-800/70 md:hidden"
>
<svg x-ref="menu" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg x-ref="close" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="hidden h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</li>
</ul>
</div>
</div>
<div x-ref="dropdown" class="duration-900 h-0 overflow-y-hidden transition-all md:hidden">
<hr />
<ul class="mx-auto max-w-screen-xl px-4 py-4">
<li>
<a class="block cursor-pointer rounded-full p-2 text-center text-sm font-medium hover:bg-zinc-800 hover:text-gray-50">HOME</a>
</li>
<li>
<a class="block cursor-pointer rounded-full p-2 text-center text-sm font-medium hover:bg-zinc-800 hover:text-gray-50">PRODUCTS</a>
</li>
<li>
<a class="block cursor-pointer rounded-full p-2 text-center text-sm font-medium hover:bg-zinc-800 hover:text-gray-50">SERVICE</a>
</li>
<li>
<a class="block cursor-pointer rounded-full p-2 text-center text-sm font-medium hover:bg-zinc-800 hover:text-gray-50">CONTACTS</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- ******************* -->
<main class="overflow-x-hidden">
<!--👇 HERO SECTION 👇-->
<header class="bg-gradient-to-br from-zinc-50 to-zinc-100">
<div class="mx-auto max-w-screen-xl px-8 py-12 sm:py-0">
<div class="grid grid-cols-12 items-center">
<div class="col-span-12 sm:col-span-6" data-aos="fade-up">
<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://ankitcodes.com/component-img/transparent-person-1.webp" alt="" />
</div>
</div>
</div>
</header>
<!-- **************** -->
<!--👇 ABOUT SECTION 👇-->
<section class="mt-6 sm:mt-12">
<div class="mx-auto max-w-screen-xl px-4 py-12">
<div class="flex flex-col gap-y-8 sm:flex-row sm:items-center sm:gap-8 md:gap-10">
<div class="sm:w-1/2">
<img class="aspect-[2/2] w-full rounded-xl object-cover" src="https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
</div>
<div class="sm:w-1/2" data-aos="fade-up">
<div class="w-full">
<div class="border-l-2 border-pink-200 pl-3 text-sm font-medium text-gray-900">ABOUT US</div>
<h3 class="mt-2 text-2xl font-bold md:text-3xl lg:text-5xl">IT strategy consulting. The latest tech.</h3>
<p class="mt-4 text-sm text-gray-800">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi modi quo, laborum beatae voluptate saepe reprehenderit, itaque nostrum veniam quas, voluptatum sit perspiciatis repellendus quidem labore officia nesciunt hic dignissimos magni?</p>
<button class="mt-4">
<a class="inline-flex items-center gap-x-2">
<div class="rounded-full bg-zinc-600 p-2 text-gray-50 shadow">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
</svg>
</div>
<span class="text-md font-medium text-zinc-600">Talk to us</span>
</a>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- ***************** -->
<!--👇 CLIENT SUCCESS SECTION 👇-->
<section class="mt-6 sm:mt-12">
<div class="mx-auto max-w-screen-xl px-4 py-12">
<div class="flex flex-col gap-y-8 sm:flex-row sm:items-center sm:gap-8 md:gap-10">
<div class="sm:w-1/2" data-aos="fade-up">
<div class="w-full">
<div class="border-l-2 border-pink-200 pl-3 text-sm font-medium text-gray-900">CLIENT SUCCESS</div>
<h3 class="mt-2 text-2xl font-bold md:text-3xl lg:text-5xl">Transforming businesses, one success story at a time</h3>
<p class="mt-4 text-sm text-gray-800 md:text-base">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi modi quo, laborum beatae voluptate saepe reprehenderit, itaque nostrum veniam quas, voluptatum sit perspiciatis repellendus quidem labore officia nesciunt hic dignissimos magni?</p>
<p class="mt-4 font-medium text-zinc-600">"Working with <strong>ankitcodes</strong> has been a game changer for our business."</p>
<div class="mt-4 flex items-center gap-x-1">
<img width="44" height="44" class="aspect-square rounded-full border-2 object-cover" src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="profile" />
<div class="">
<div class="text-base font-medium text-gray-900">Ankit Thapa</div>
<div class="text-sm font-medium text-gray-400">CEO at ankitcodes</div>
</div>
</div>
</div>
</div>
<div class="sm:w-1/2">
<img width="1080" height="1080" class="aspect-[2/2] w-full rounded-xl object-cover" src="https://images.pexels.com/photos/3194519/pexels-photo-3194519.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
</div>
</div>
</div>
</section>
<!-- ************************** -->
<!--👇 SOCIAL PROOF SECTION 👇-->
<section class="mt-12 bg-gradient-to-br from-blue-50 to-zinc-100 sm:mt-24">
<div class="mx-auto max-w-screen-xl px-4 py-24">
<div class="flex flex-col gap-y-8 md:flex-row md:items-center md:gap-12">
<div class="md:w-1/2" data-aos="fade-right">
<div class="w-full">
<div class="border-l-2 border-pink-200 pl-3 text-sm font-medium text-gray-900">JOIN FACTS & FIGURES</div>
<h3 class="mt-2 text-2xl font-bold md:text-3xl lg:text-5xl">IT strategy consulting. The latest tech.</h3>
<p class="mt-4 text-sm text-gray-800">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi modi quo, laborum beatae voluptate saepe reprehenderit, itaque nostrum veniam quas, voluptatum sit perspiciatis repellendus quidem labore officia nesciunt hic dignissimos magni?</p>
<button class="mt-4">
<a class="inline-flex items-center gap-x-2">
<div class="rounded-full bg-zinc-600 p-2 text-gray-50 shadow">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
</svg>
</div>
<span class="text-md font-medium text-zinc-600">Talk to us</span>
</a>
</button>
</div>
</div>
<div class="md:w-1/2">
<div class="grid w-full grid-cols-12">
<div class="col-span-6">
<div class="p-4 text-center sm:p-8" data-aos="zoom-out">
<div class="text-2xl font-bold sm:text-4xl lg:text-5xl">70%</div>
<div class="sm:text-md mt-2 text-sm font-medium text-gray-700">Improvement work</div>
</div>
</div>
<div class="col-span-6">
<div class="p-4 text-center sm:p-8" data-aos="zoom-out">
<div class="text-2xl font-bold sm:text-4xl lg:text-5xl">1500</div>
<div class="sm:text-md mt-2 text-sm font-medium text-gray-700">Happy clients and HR Teams</div>
</div>
</div>
<div class="col-span-6">
<div class="p-4 text-center sm:p-8" data-aos="zoom-out">
<div class="text-2xl font-bold sm:text-4xl lg:text-5xl">120</div>
<div class="sm:text-md mt-2 text-sm font-medium text-gray-700">Great team members</div>
</div>
</div>
<div class="col-span-6">
<div class="p-4 text-center sm:p-8" data-aos="zoom-out">
<div class="text-2xl font-bold sm:text-4xl lg:text-5xl">350</div>
<div class="sm:text-md mt-2 text-sm font-medium text-gray-700">Full-time employees</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ************************ -->
<!--👇 ABOUT SECTION 👇-->
<section class="mt-6 sm:mt-24">
<div class="mx-auto max-w-screen-xl px-4 py-12">
<div class="mb-2 border-l-2 border-pink-200 pl-3 text-sm font-medium text-gray-900" data-aos="fade-up">WHAT WE OFFER</div>
<div class="max-w-screen-md" data-aos="fade-up">
<h3 class="text-2xl font-bold md:text-3xl lg:text-5xl">Our IT consulting services</h3>
<p class="mt-4 text-sm text-gray-800">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi modi quo, laborum beatae voluptate saepe reprehenderit, itaque nostrum veniam quas, voluptatum sit perspiciatis repellendus quidem labore officia nesciunt hic dignissimos magni?</p>
</div>
<div class="mt-8" data-aos="fade-up">
<div class="flex flex-col md:flex-row">
<div class="md:mr-4 md:w-[600px]">
<button data-ref="1" onclick="removeTabClass(this)" class="tab-btn text-md m-2 ml-0 mt-0 inline-block text-right font-medium text-zinc-600 hover:text-zinc-600 md:w-full">Emergency support</button>
<button data-ref="2" onclick="removeTabClass(this)" class="tab-btn text-md m-2 ml-0 mt-0 inline-block text-right font-medium text-gray-600 hover:text-zinc-600 md:w-full">Remote office support</button>
<button data-ref="3" onclick="removeTabClass(this)" class="tab-btn text-md m-2 ml-0 mt-0 inline-block text-right font-medium text-gray-600 hover:text-zinc-600 md:w-full">Network administration</button>
<button data-ref="4" onclick="removeTabClass(this)" class="tab-btn text-md m-2 ml-0 mt-0 inline-block text-right font-medium text-gray-600 hover:text-zinc-600 md:w-full">Office systems</button>
<button data-ref="5" onclick="removeTabClass(this)" class="tab-btn text-md m-2 ml-0 mt-0 inline-block text-right font-medium text-gray-600 hover:text-zinc-600 md:w-full">Cloud configuration</button>
</div>
<div class="border-gray-200 md:border-l-2 md:px-4">
<div data-id="1" class="tab-body">
<h4 class="text-2xl"><strong>Emergency Support</strong></h4>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
</div>
<div data-id="2" class="tab-body hidden">
<h4 class="text-2xl"><strong>Remote office support</strong></h4>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
</div>
<div data-id="3" class="tab-body hidden">
<h4 class="text-2xl">
<strong>Network administration</strong>
</h4>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
</div>
<div data-id="4" class="tab-body hidden">
<h4 class="text-2xl"><strong>Office systems</strong></h4>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
</div>
<div data-id="5" class="tab-body hidden">
<h4 class="text-2xl"><strong>Cloud configuration</strong></h4>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
<p class="mt-2 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur obcaecati consequuntur quas incidunt ratione minus, ut officiis hic exercitationem. Eos itaque quas officiis placeat porro minima aliquid asperiores reiciendis provident.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ***************** -->
<!--👇 WHAT WE OFFER SECTION 👇-->
<section class="mt-6 sm:mt-12">
<div class="relative py-12">
<img class="h-96 w-full object-cover" src="https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="team member" />
<div class="absolute top-[50%] left-[50%] z-20 w-full -translate-x-[50%] -translate-y-[50%]">
<div class="mx-auto max-w-lg px-4 sm:px-0" data-aos="zoom-out">
<div class="rounded-xl bg-zinc-800/80 p-6 text-center">
<strong class="text-base text-gray-50">500 LOYAL CLIENTS</strong>
<h3 class="text-2xl font-medium text-gray-50 md:text-4xl">Over a decade of stellar software solutions</h3>
<button>
<a class="mt-4 flex items-center gap-x-1 rounded-lg bg-gray-50 px-5 py-3 font-medium text-zinc-600 transition-all duration-200 hover:bg-gray-900 hover:text-gray-50">
<span>Let's Talk</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
</svg>
</a>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- ************************ -->
<!--👇 OUR CLIENTS SECTION 👇-->
<section class="mt-6 sm:mt-12">
<div class="mx-auto max-w-screen-xl px-4 py-12">
<div data-aos="fade-up">
<div class="border-l-2 border-pink-200 pl-3 text-sm font-medium text-gray-900">OUR CLIENTS</div>
<h3 class="mt-2 max-w-sm text-2xl font-bold md:max-w-md md:text-3xl lg:max-w-lg lg:text-5xl">Trusted by thousands of leading businesses</h3>
</div>
<div class="mt-8 grid grid-cols-12 gap-2 sm:gap-8" data-aos="fade-up">
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
<div class="cursor-pointer opacity-70 transition-all duration-200 hover:opacity-100">
<img class="aspect-[2/1] object-cover" src="https://images.pexels.com/photos/2235130/pexels-photo-2235130.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="logo" />
</div>
</div>
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
<div class="cursor-pointer opacity-70 transition-all duration-200 hover:opacity-100">
<img class="aspect-[2/1] object-cover" src="https://images.pexels.com/photos/1091028/pexels-photo-1091028.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="logo" />
</div>
</div>
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
<div class="cursor-pointer opacity-70 transition-all duration-200 hover:opacity-100">
<img class="aspect-[2/1] object-cover" src="https://images.pexels.com/photos/208474/pexels-photo-208474.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="logo" />
</div>
</div>
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
<div class="cursor-pointer opacity-70 transition-all duration-200 hover:opacity-100">
<img class="aspect-[2/1] object-cover" src="https://images.pexels.com/photos/351263/pexels-photo-351263.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="logo" />
</div>
</div>
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
<div class="cursor-pointer opacity-70 transition-all duration-200 hover:opacity-100">
<img class="aspect-[2/1] object-cover" src="https://images.pexels.com/photos/3070071/pexels-photo-3070071.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="logo" />
</div>
</div>
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
<div class="cursor-pointer opacity-70 transition-all duration-200 hover:opacity-100">
<img class="aspect-[2/1] object-cover" src="https://images.pexels.com/photos/430205/pexels-photo-430205.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="logo" />
</div>
</div>
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
<div class="cursor-pointer opacity-70 transition-all duration-200 hover:opacity-100">
<img class="aspect-[2/1] object-cover" src="https://images.pexels.com/photos/2180780/pexels-photo-2180780.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="logo" />
</div>
</div>
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
<div class="cursor-pointer opacity-70 transition-all duration-200 hover:opacity-100">
<img class="aspect-[2/1] object-cover" src="https://images.pexels.com/photos/170809/pexels-photo-170809.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="logo" />
</div>
</div>
</div>
</div>
</section>
<!-- ************************ -->
<!--👇 TESTIMONIAL SECTION 👇-->
<section class="mt-6 sm:mt-12">
<div class="mx-auto max-w-screen-xl px-4 py-12">
<div data-aos="fade-up">
<div id="testimonial-slider" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div>
<div class="relative rounded-xl bg-gradient-to-b from-gray-50 to-zinc-100 p-8">
<p class="text-base font-medium text-gray-800">"I recently hired a freelance web developer to create a new website for my small business and was thoroughly impressed with the results. The developer was professional, responsive, and able to bring my vision to life. They were also able to complete the project within the agreed upon timeline and budget, which was greatly appreciated. Overall, I am extremely satisfied with the work that was completed and would highly recommend this freelancer to anyone in need of web development services. They exceeded my expectations and I look forward to working with them again in the future."</p>
<div class="absolute -bottom-3 left-6 z-20 h-8 w-8 rotate-[-45deg] bg-zinc-100"></div>
</div>
<div class="mt-7 flex items-center gap-x-1">
<img width="44" height="44" class="aspect-[2/2] rounded-full border-2 object-cover" src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="profile" />
<div>
<div class="text-base font-medium text-gray-900">Ashish Jha</div>
<div class="text-sm font-medium text-gray-400">CEO at KITWOSD</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- ************************ -->
<!--👇 CONTACT SECTION 👇-->
<section class="mt-6">
<div class="mx-auto max-w-screen-xl px-4 py-12">
<div class="flex flex-col gap-y-8 sm:flex-row sm:gap-8 md:gap-10">
<div class="sm:mt-12 sm:w-1/2" data-aos="fade-right">
<div class="w-full lg:pr-12">
<div class="border-l-2 border-pink-200 pl-3 text-sm font-medium text-gray-900">GET IN TOUCH</div>
<h3 class="mt-2 text-2xl font-bold md:text-3xl lg:text-5xl">Tell us about your project</h3>
<p class="mt-4 text-sm text-gray-800 md:text-base">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi modi quo, laborum beatae voluptate saepe reprehenderit, itaque nostrum veniam quas, voluptatum sit perspiciatis repellendus quidem labore officia nesciunt hic dignissimos magni?</p>
</div>
</div>
<div class="sm:w-1/2" data-aos="zoom-out">
<div class="rounded-lg border bg-white p-8 shadow lg:p-12">
<form>
<div>
<label>
<input type="text" class="mb-2 w-full border-0 border-b border-red-500 py-2 text-base outline-none ring-0 transition-all duration-200 focus:border-gray-900 focus:bg-blue-50 focus:outline-0 focus:ring-0" placeholder="Name *" />
<div class="text-sm text-red-500">The name field is required</div>
</label>
</div>
<div class="mt-3">
<label>
<input type="email" class="mb-2 w-full border-0 border-b py-2 text-base outline-none ring-0 transition-all duration-200 focus:border-gray-900 focus:bg-blue-50 focus:outline-0 focus:ring-0" placeholder="Email *" />
</label>
</div>
<div class="mt-3">
<label>
<input type="number" class="mb-2 w-full border-0 border-b py-2 text-base outline-none ring-0 transition-all duration-200 focus:border-gray-900 focus:bg-blue-50 focus:outline-0 focus:ring-0" placeholder="Phone Number *" />
</label>
</div>
<div class="mt-3">
<label>
<textarea class="mb-2 w-full border-0 border-b py-2 text-base outline-none ring-0 transition-all duration-200 focus:border-gray-900 focus:bg-blue-50 focus:outline-0 focus:ring-0" placeholder="Project Description *"></textarea>
</label>
</div>
<div>
<button>
<a class="mt-4 flex items-center gap-x-1 rounded-lg bg-zinc-600 px-5 py-3 font-medium text-gray-50 transition-all duration-200 hover:bg-gray-900">
<span>Talk to Us</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
</svg>
</a>
</button>
</div>
<div class="mt-6">
<div class="text-sm text-gray-600">
By sending this form I confirm that I have read and accept
<a class="cursor-pointer font-medium text-zinc-600 hover:underline">ankitcodes terms and conditions</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- ************************ -->
<!--👇 CTA SECTION 👇-->
<section class="bg-gradient-to-br from-zinc-50 to-zinc-100 md:-mt-32">
<div class="mx-auto max-w-screen-xl px-8 py-12 sm:py-0">
<div class="grid grid-cols-12 items-center">
<div class="col-span-12 hidden sm:col-span-6 sm:block">
<img src="https://ankitcodes.com/component-img/transparent-person-1.webp" alt="" />
</div>
<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 in a 360° manner</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>
</div>
</section>
<!-- *************** -->
</main>
<!--👇 CONTACT SECTION 👇-->
<footer aria-label="Site footer" class="bg-white px-8 py-24">
<div class="mx-auto max-w-screen-xl">
<div class="grid grid-cols-12 gap-y-8 sm:gap-8">
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<ul class="flex flex-col gap-y-2">
<li class="text-lg font-medium text-gray-900">COMPANY</li>
<li>
<a class="cursor-pointer text-sm text-gray-700 hover:text-gray-700/60">About</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-700 hover:text-gray-700/60">How it works</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-700 hover:text-gray-700/60">Careers</a>
</li>
</ul>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<ul class="flex flex-col gap-y-2">
<li class="text-lg font-medium text-gray-900">HELP</li>
<li>
<a class="cursor-pointer text-sm text-gray-700 hover:text-gray-700/60">Contact us</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-700 hover:text-gray-700/60">FAQ</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-700 hover:text-gray-700/60">Legal & Privacy</a>
</li>
</ul>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3">
<ul class="flex flex-col gap-y-2">
<li class="text-lg font-medium text-gray-900">SERVICES</li>
<li>
<a class="cursor-pointer text-sm text-gray-700 hover:text-gray-700/60">Ecommerce Development</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-700 hover:text-gray-700/60">Content Writing</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-700 hover:text-gray-700/60">Digital Marketing</a>
</li>
<li>
<a class="cursor-pointer text-sm text-gray-700 hover:text-gray-700/60">Website Design</a>
</li>
</ul>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-3">
<div>
<a class="flex cursor-pointer items-center gap-x-1">
<img class="h-8 w-8" src="https://ankitcodes.com/uploads/fAPFuFMfl3vI8NS7wgTPopqD9FBtgt-metaZmF2aWNvbi5wbmc=-.png" alt="" />
<span class="text-sm font-black">TECH.</span>
</a>
<div class="mt-3 text-sm">654 Shadow Brook St. Palatine, IL 60067</div>
<a class="my-3 block cursor-pointer text-sm font-medium">+1 123 12 12 123</a>
<a class="cursor-pointer font-medium text-zinc-500 underline hover:text-zinc-500/60 focus:text-zinc-500/60">youremail@gmail.com</a>
<ul class="mt-6 flex gap-6">
<li>
<a href="/" rel="noreferrer" target="_blank" class="text-gray-700 transition hover:text-gray-700/60 focus:text-gray-700/60">
<span class="sr-only">Facebook</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="/" rel="noreferrer" target="_blank" class="text-gray-700 transition hover:text-gray-700/60 focus:text-gray-700/60">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="/" rel="noreferrer" target="_blank" class="text-gray-700 transition hover:text-gray-700/60 focus:text-gray-700/60">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</li>
<li>
<a href="/" rel="noreferrer" target="_blank" class="text-gray-700 transition hover:text-gray-700/60 focus:text-gray-700/60">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="/" rel="noreferrer" target="_blank" class="text-gray-700 transition hover:text-gray-700/60 focus:text-gray-700/60">
<span class="sr-only">Dribbble</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="mt-12">
<div class="text-sm font-medium text-gray-800">© 2022 All right reserved | Made by ankitcodes</div>
<div class="mt-4 text-sm text-gray-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eveniet deserunt nisi, eligendi blanditiis sequi officiis laudantium voluptatum reprehenderit esse ipsa animi minus. Illum vero, voluptatem cumque quas obcaecati quis.</div>
</div>
</div>
</footer>
<!-- ************************ -->
<script>
AOS.init();
document.addEventListener("DOMContentLoaded", function () {
if (document.querySelector("#testimonial-slider")) {
new Splide("#testimonial-slider", {
type: "loop",
perPage: 1,
autoplay: true,
interval: 4000,
flickMaxPages: 3,
updateOnMove: true,
pagination: false,
gap: "1rem",
}).mount();
}
});
function removeTabClass(e) {
document.querySelectorAll(".tab-btn").forEach((item) => {
item.classList.remove("text-zinc-600");
item.classList.remove("text-gray-600");
item.classList.add("text-gray-600");
});
e.classList.remove("text-gray-600");
e.classList.add("text-zinc-600");
document.querySelectorAll(".tab-body").forEach((item) => {
item.classList.add("hidden");
if (e.getAttribute("data-ref") == item.getAttribute("data-id")) {
item.classList.remove("hidden");
}
});
}
</script>