Hero Sections
Ready to use Tailwind CSS hero section components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
The hero is basically the first thing someone sees when they land on your page, so it kind of has to work. We have a good range here, simple centered text, split layouts with an image on one side, heroes with app screenshots, phone mockups, a signup form baked in, and a few with a logo strip underneath. Some are on dark backgrounds, some light. All of them are responsive so they won't fall apart on a phone. You copy the HTML, drop it in, swap the text and colors, and you're mostly done.
Tailwind
<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
</div>
<div class="lg:hidden">
<button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-8">
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Services</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Pricing</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">About</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
<a href="#" class="inline-block rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
<a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden" role="dialog" aria-modal="true">
<div id="backdrop" class="fixed inset-0 z-50"></div>
<div class="fixed inset-0 z-50 w-full bg-white sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between px-6 py-4">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
<button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="divide-y divide-gray-900/10 px-6">
<div class="space-y-0.5 py-5">
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Services</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Pricing</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">About</a>
</div>
<div class="space-y-3 py-6">
<a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
<a href="#" class="block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
</div>
</div>
</div>
</div>
</header>
<div class="relative isolate overflow-hidden pt-12 lg:pt-16">
<div aria-hidden="true" class="absolute -top-[40rem] left-1/2 -z-10 h-[80rem] w-[80rem] -translate-x-1/2 rounded-full bg-hero-grid bg-[length:70px_70px] mask-image-radial-gradient"></div>
<div class="px-6 lg:px-8">
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
<div class="relative flex items-center justify-center gap-3 rounded-lg bg-white p-1 pr-2.5 text-sm font-medium leading-6 text-gray-600 shadow-sm ring-1 ring-gray-900/10 hover:bg-gray-50">
<span class="inline-block rounded-md bg-white px-2 ring-1 ring-inset ring-gray-900/10">New release</span>
<a href="#" class="inline-flex items-center justify-center gap-1">
<span class="absolute inset-0" aria-hidden="true"></span>
Explore our latest features
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="sm:text-center">
<h1 class="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">Achieve more with less effort</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">Simplify your workflows and automate daily tasks with ease, saving time to focus on what matters most for your business.</p>
</div>
<div class="mt-10 flex items-center justify-start gap-6 sm:justify-center">
<a href="#" class="inline-flex items-center justify-center gap-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" />
<path d="M10.9 8.8L10.6577 8.66152C10.1418 8.36676 9.5 8.73922 9.5 9.33333L9.5 14.6667C9.5 15.2608 10.1418 15.6332 10.6577 15.3385L10.9 15.2L15.1 12.8C15.719 12.4463 15.719 11.5537 15.1 11.2L10.9 8.8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Demo
</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more</a>
</div>
</div>
</div>
</div>
</div>const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");
// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");
// Function to open the mobile menu
function openMenu() {
if (mobileMenu) {
mobileMenu.classList.remove("hidden");
mobileMenu.setAttribute("aria-hidden", "false");
}
if (backdrop) {
backdrop.classList.remove("hidden");
backdrop.setAttribute("aria-hidden", "false");
}
closeMenuButton.focus(); // Focus the close button for better accessibility
}
// Function to close the mobile menu
function closeMenu() {
if (mobileMenu) {
mobileMenu.classList.add("hidden");
mobileMenu.setAttribute("aria-hidden", "true");
}
if (backdrop) {
backdrop.classList.add("hidden");
backdrop.setAttribute("aria-hidden", "true");
}
mobileMenuButton.focus(); // Return focus to the open button
}
// Event listeners for opening and closing the menu
if (mobileMenuButton) {
mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}
// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeMenu();
}
});<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
</div>
<div class="lg:hidden">
<button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-8">
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Services</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Pricing</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">About</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
<a href="#" class="inline-block rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
<a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden" role="dialog" aria-modal="true">
<div id="backdrop" class="fixed inset-0 z-50"></div>
<div class="fixed inset-0 z-50 w-full bg-white sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between px-6 py-4">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
<button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="divide-y divide-gray-900/10 px-6">
<div class="space-y-0.5 py-5">
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Services</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Pricing</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">About</a>
</div>
<div class="space-y-3 py-6">
<a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
<a href="#" class="block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
</div>
</div>
</div>
</div>
</header>
<div class="relative isolate overflow-hidden pt-12 lg:pt-16">
<div aria-hidden="true" class="absolute -top-[30rem] left-1/2 -z-10 h-[80rem] w-[80rem] -translate-x-1/2 bg-hero-dots bg-[size:25px_25px] mask-image-radial-gradient"></div>
<div class="py-24 sm:py-32 lg:py-24">
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl lg:flex-none">
<div class="hidden sm:mb-8 sm:flex sm:justify-center lg:justify-start">
<div class="relative flex items-center justify-center gap-3 rounded-lg bg-white p-1 pr-2.5 text-sm font-medium leading-6 text-gray-600 shadow-sm ring-1 ring-gray-900/10 hover:bg-gray-50">
<span class="inline-block rounded-md bg-white px-2 ring-1 ring-inset ring-gray-900/10">New release</span>
<a href="#" class="inline-flex items-center justify-center gap-1">
<span class="absolute inset-0" aria-hidden="true"></span>
Explore our latest features
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="text-center lg:text-start">
<h1 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-6xl">Stay organized, deliver faster</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">Organize tasks, track progress, and collaborate with clients seamlessly. Stay ahead of your workload and deliver high-quality results on time, every time.</p>
</div>
<div class="mt-10 flex items-center justify-center gap-6 lg:justify-start">
<a href="#" class="inline-flex items-center justify-center gap-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" />
<path d="M10.9 8.8L10.6577 8.66152C10.1418 8.36676 9.5 8.73922 9.5 9.33333L9.5 14.6667C9.5 15.2608 10.1418 15.6332 10.6577 15.3385L10.9 15.2L15.1 12.8C15.719 12.4463 15.719 11.5537 15.1 11.2L10.9 8.8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Demo
</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more</a>
</div>
</div>
<div class="relative mt-16 lg:ml-10 lg:mt-0 xl:ml-32">
<div class="-m-2 mx-auto max-w-2xl rounded-xl bg-gray-100 p-2 shadow-lg ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:mx-0 lg:max-w-none lg:rounded-3xl lg:p-4">
<img width="1920" height="1139" class="h-auto w-full rounded-md bg-gray-900/10 ring-1 ring-gray-900/10 lg:h-[38rem] lg:w-auto lg:max-w-none lg:rounded-lg" src="https://htmlwind.com/assets/images/dashboard-screenshot.webp" alt="dashboard screenshot" />
</div>
</div>
</div>
</div>
</div>
</div>const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");
// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");
// Function to open the mobile menu
function openMenu() {
if (mobileMenu) {
mobileMenu.classList.remove("hidden");
mobileMenu.setAttribute("aria-hidden", "false");
}
if (backdrop) {
backdrop.classList.remove("hidden");
backdrop.setAttribute("aria-hidden", "false");
}
closeMenuButton.focus(); // Focus the close button for better accessibility
}
// Function to close the mobile menu
function closeMenu() {
if (mobileMenu) {
mobileMenu.classList.add("hidden");
mobileMenu.setAttribute("aria-hidden", "true");
}
if (backdrop) {
backdrop.classList.add("hidden");
backdrop.setAttribute("aria-hidden", "true");
}
mobileMenuButton.focus(); // Return focus to the open button
}
// Event listeners for opening and closing the menu
if (mobileMenuButton) {
mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}
// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeMenu();
}
});<div class="bg-gray-900">
<header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
</div>
<div class="lg:hidden">
<button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-200">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-8">
<a href="#" class="text-sm font-semibold leading-6 text-white">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-white">Services</a>
<a href="#" class="text-sm font-semibold leading-6 text-white">Pricing</a>
<a href="#" class="text-sm font-semibold leading-6 text-white">About</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
<a href="#" class="inline-block rounded-md bg-gray-900 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-white">Login</a>
<a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden" role="dialog" aria-modal="true">
<div id="backdrop" class="fixed inset-0 z-50"></div>
<div class="fixed inset-0 z-50 w-full bg-gray-900 sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-white/10">
<div class="flex items-center justify-between px-6 py-4">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
<button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-200">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="divide-y divide-white/10 px-6">
<div class="space-y-0.5 py-5">
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-white hover:bg-gray-800">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-white hover:bg-gray-800">Services</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-white hover:bg-gray-800">Pricing</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-white hover:bg-gray-800">About</a>
</div>
<div class="space-y-3 py-6">
<a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
<a href="#" class="block rounded-md bg-gray-900 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-white">Login</a>
</div>
</div>
</div>
</div>
</header>
<div class="relative isolate overflow-hidden pt-12 lg:pt-16">
<div aria-hidden="true" class="absolute -top-[30rem] left-1/2 -z-10 h-[80rem] w-[80rem] -translate-x-1/2 bg-hero-dots-light bg-[size:25px_25px] opacity-10 mask-image-radial-gradient"></div>
<div class="py-24 sm:py-32 lg:py-24">
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl lg:flex-none">
<div class="hidden sm:mb-8 sm:flex sm:justify-center lg:justify-start">
<div class="relative flex items-center justify-center gap-3 rounded-lg bg-gray-900 p-1 pr-2.5 text-sm font-medium leading-6 text-gray-300 shadow-sm ring-1 ring-white/10 hover:bg-gray-800">
<span class="inline-block rounded-md bg-gray-900 px-2 ring-1 ring-inset ring-white/10">New release</span>
<a href="#" class="inline-flex items-center justify-center gap-1">
<span class="absolute inset-0" aria-hidden="true"></span>
Explore our latest features
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<div class="text-center lg:text-start">
<h1 class="text-4xl font-semibold tracking-tight text-white sm:text-6xl">Stay organized, deliver faster</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">Organize tasks, track progress, and collaborate with clients seamlessly. Stay ahead of your workload and deliver high-quality results on time, every time.</p>
</div>
<div class="mt-10 flex items-center justify-center gap-6 lg:justify-start">
<a href="#" class="inline-flex items-center justify-center gap-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" />
<path d="M10.9 8.8L10.6577 8.66152C10.1418 8.36676 9.5 8.73922 9.5 9.33333L9.5 14.6667C9.5 15.2608 10.1418 15.6332 10.6577 15.3385L10.9 15.2L15.1 12.8C15.719 12.4463 15.719 11.5537 15.1 11.2L10.9 8.8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Demo
</a>
<a href="#" class="text-sm font-semibold leading-6 text-white">Learn more</a>
</div>
</div>
<div class="relative mt-16 lg:ml-10 lg:mt-0 xl:ml-32">
<div class="-m-2 mx-auto max-w-2xl rounded-xl bg-white/10 p-2 shadow-lg ring-1 ring-inset ring-white/10 lg:-m-4 lg:mx-0 lg:max-w-none lg:rounded-3xl lg:p-4">
<img width="1920" height="1139" class="h-auto w-full rounded-md bg-gray-600 ring-1 ring-white/10 lg:h-[38rem] lg:w-auto lg:max-w-none lg:rounded-lg" src="https://htmlwind.com/assets/images/dark-dashboard-screenshot.webp" alt="dashboard screenshot" />
</div>
</div>
</div>
</div>
</div>
</div>const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");
// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");
// Function to open the mobile menu
function openMenu() {
if (mobileMenu) {
mobileMenu.classList.remove("hidden");
mobileMenu.setAttribute("aria-hidden", "false");
}
if (backdrop) {
backdrop.classList.remove("hidden");
backdrop.setAttribute("aria-hidden", "false");
}
closeMenuButton.focus(); // Focus the close button for better accessibility
}
// Function to close the mobile menu
function closeMenu() {
if (mobileMenu) {
mobileMenu.classList.add("hidden");
mobileMenu.setAttribute("aria-hidden", "true");
}
if (backdrop) {
backdrop.classList.add("hidden");
backdrop.setAttribute("aria-hidden", "true");
}
mobileMenuButton.focus(); // Return focus to the open button
}
// Event listeners for opening and closing the menu
if (mobileMenuButton) {
mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}
// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeMenu();
}
});<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
</div>
<div class="lg:hidden">
<button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-8">
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Services</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Pricing</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">About</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
<a href="#" class="inline-block rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
<a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden" role="dialog" aria-modal="true">
<div id="backdrop" class="fixed inset-0 z-50"></div>
<div class="fixed inset-0 z-50 w-full bg-white sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between px-6 py-4">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
<button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="divide-y divide-gray-900/10 px-6">
<div class="space-y-0.5 py-5">
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Services</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Pricing</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">About</a>
</div>
<div class="space-y-3 py-6">
<a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
<a href="#" class="block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
</div>
</div>
</div>
</div>
</header>
<div class="pt-12 lg:pt-20">
<div class="relative overflow-hidden">
<div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-8">
<div class="px-6 lg:col-span-7 lg:px-8 xl:col-span-6">
<div class="mx-auto max-w-2xl py-24 sm:py-32 lg:mx-0 lg:max-w-xl lg:py-40">
<h1 class="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">Achieve more with less effort</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">Simplify your workflows and automate daily tasks with ease, saving time to focus on what matters most for your business.</p>
<ul class="mt-12 space-y-4 text-lg leading-8 text-gray-600">
<li class="relative pl-10">
<span class="absolute left-0 top-0.5 flex h-7 w-7 items-center justify-center rounded-full bg-green-100">
<svg class="h-4 w-4 text-green-600" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></polyline>
</svg>
</span>
Automate tasks to save time
</li>
<li class="relative pl-10">
<span class="absolute left-0 top-0.5 flex h-7 w-7 items-center justify-center rounded-full bg-green-100">
<svg class="h-4 w-4 text-green-600" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></polyline>
</svg>
</span>
Customize workflows easily
</li>
<li class="relative pl-10">
<span class="absolute left-0 top-0.5 flex h-7 w-7 items-center justify-center rounded-full bg-green-100">
<svg class="h-4 w-4 text-green-600" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></polyline>
</svg>
</span>
Work with your team in real-time
</li>
</ul>
<div class="mt-12 flex items-center justify-start gap-6">
<a href="#" class="inline-flex items-center justify-center gap-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" />
<path d="M10.9 8.8L10.6577 8.66152C10.1418 8.36676 9.5 8.73922 9.5 9.33333L9.5 14.6667C9.5 15.2608 10.1418 15.6332 10.6577 15.3385L10.9 15.2L15.1 12.8C15.719 12.4463 15.719 11.5537 15.1 11.2L10.9 8.8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Demo
</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more</a>
</div>
</div>
</div>
<div class="relative lg:relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:col-span-6 xl:mr-0">
<div class="mx-auto aspect-[4/3] w-full sm:aspect-[3/2] lg:absolute lg:aspect-auto lg:h-full">
<img class="h-full w-full object-cover object-center" src="https://images.unsplash.com/photo-1542330952-bffc55e812b2?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");
// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");
// Function to open the mobile menu
function openMenu() {
if (mobileMenu) {
mobileMenu.classList.remove("hidden");
mobileMenu.setAttribute("aria-hidden", "false");
}
if (backdrop) {
backdrop.classList.remove("hidden");
backdrop.setAttribute("aria-hidden", "false");
}
closeMenuButton.focus(); // Focus the close button for better accessibility
}
// Function to close the mobile menu
function closeMenu() {
if (mobileMenu) {
mobileMenu.classList.add("hidden");
mobileMenu.setAttribute("aria-hidden", "true");
}
if (backdrop) {
backdrop.classList.add("hidden");
backdrop.setAttribute("aria-hidden", "true");
}
mobileMenuButton.focus(); // Return focus to the open button
}
// Event listeners for opening and closing the menu
if (mobileMenuButton) {
mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}
// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeMenu();
}
});<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
</div>
<div class="lg:hidden">
<button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-8">
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Services</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Pricing</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">About</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
<a href="#" class="inline-block rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
<a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden" role="dialog" aria-modal="true">
<div id="backdrop" class="fixed inset-0 z-50"></div>
<div class="fixed inset-0 z-50 w-full bg-white sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between px-6 py-4">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
<button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="divide-y divide-gray-900/10 px-6">
<div class="space-y-0.5 py-5">
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Services</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Pricing</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">About</a>
</div>
<div class="space-y-3 py-6">
<a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
<a href="#" class="block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
</div>
</div>
</div>
</div>
</header>
<div class="relative isolate overflow-hidden pt-12 lg:pt-16">
<div aria-hidden="true" class="absolute -top-[40rem] left-1/2 -z-10 h-[80rem] w-[80rem] -translate-x-1/2 rounded-full bg-hero-grid bg-[length:70px_70px] mask-image-radial-gradient"></div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="py-24 sm:py-32 lg:pb-0">
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
<div class="relative flex items-center justify-center gap-3 rounded-lg bg-white p-1 pr-2.5 text-sm font-medium leading-6 text-gray-600 shadow-sm ring-1 ring-gray-900/10 hover:bg-gray-50">
<span class="inline-block rounded-md bg-white px-2 ring-1 ring-inset ring-gray-900/10">New release</span>
<a href="#" class="inline-flex items-center justify-center gap-1">
<span class="absolute inset-0" aria-hidden="true"></span>
Explore our latest features
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<h1 class="text-pretty text-center text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">Manage projects like a pro</h1>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">Organize tasks, track progress, and collaborate with clients effortlessly. Stay on top of deadlines and deliver your best work every time.</p>
<div class="mt-10 flex items-center justify-center gap-6">
<a href="#" class="inline-flex items-center justify-center gap-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" />
<path d="M10.9 8.8L10.6577 8.66152C10.1418 8.36676 9.5 8.73922 9.5 9.33333L9.5 14.6667C9.5 15.2608 10.1418 15.6332 10.6577 15.3385L10.9 15.2L15.1 12.8C15.719 12.4463 15.719 11.5537 15.1 11.2L10.9 8.8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Demo
</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more</a>
</div>
<div class="mt-16 sm:mt-24 lg:mb-[-15%]">
<div class="-m-2 rounded-xl bg-gray-100 p-2 shadow-lg ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-3xl lg:p-4">
<img width="1920" height="1139" class="h-auto w-full rounded-md bg-gray-900/10 ring-1 ring-gray-900/10 lg:rounded-lg" src="https://htmlwind.com/assets/images/dashboard-screenshot.webp" alt="dashboard screenshot" />
</div>
</div>
</div>
</div>
</div>
</div>const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");
// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");
// Function to open the mobile menu
function openMenu() {
if (mobileMenu) {
mobileMenu.classList.remove("hidden");
mobileMenu.setAttribute("aria-hidden", "false");
}
if (backdrop) {
backdrop.classList.remove("hidden");
backdrop.setAttribute("aria-hidden", "false");
}
closeMenuButton.focus(); // Focus the close button for better accessibility
}
// Function to close the mobile menu
function closeMenu() {
if (mobileMenu) {
mobileMenu.classList.add("hidden");
mobileMenu.setAttribute("aria-hidden", "true");
}
if (backdrop) {
backdrop.classList.add("hidden");
backdrop.setAttribute("aria-hidden", "true");
}
mobileMenuButton.focus(); // Return focus to the open button
}
// Event listeners for opening and closing the menu
if (mobileMenuButton) {
mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}
// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeMenu();
}
});<div class="bg-gray-900">
<header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
</div>
<div class="lg:hidden">
<button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-200">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-8">
<a href="#" class="text-sm font-semibold leading-6 text-white">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-white">Services</a>
<a href="#" class="text-sm font-semibold leading-6 text-white">Pricing</a>
<a href="#" class="text-sm font-semibold leading-6 text-white">About</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
<a href="#" class="inline-block rounded-md bg-gray-900 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-white">Login</a>
<a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
</div>
</nav>
<div id="mobile-menu" class="hidden lg:hidden" role="dialog" aria-modal="true">
<div id="backdrop" class="fixed inset-0 z-50 hidden"></div>
<div class="fixed inset-0 z-50 w-full bg-gray-900 sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-white/10">
<div class="flex items-center justify-between px-6 py-4">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
<button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-200">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
<div class="divide-y divide-white/10 px-6">
<div class="space-y-0.5 py-5">
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-white hover:bg-gray-800">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-white hover:bg-gray-800">Services</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-white hover:bg-gray-800">Pricing</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-white hover:bg-gray-800">About</a>
</div>
<div class="space-y-3 py-6">
<a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
<a href="#" class="block rounded-md bg-gray-900 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-white">Login</a>
</div>
</div>
</div>
</div>
</header>
<div class="relative isolate overflow-hidden pt-12 lg:pt-16">
<div aria-hidden="true" class="absolute -top-[40rem] left-1/2 -z-10 h-[80rem] w-[80rem] -translate-x-1/2 rounded-full bg-hero-grid-light bg-[length:70px_70px] opacity-15 mask-image-radial-gradient"></div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="py-24 sm:py-32 lg:pb-0">
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
<div class="relative flex items-center justify-center gap-3 rounded-lg bg-gray-900 p-1 pr-2.5 text-sm font-medium leading-6 text-gray-300 shadow-sm ring-1 ring-white/10 hover:bg-gray-800">
<span class="inline-block rounded-md bg-gray-900 px-2 ring-1 ring-inset ring-white/10">New release</span>
<a href="#" class="inline-flex items-center justify-center gap-1">
<span class="absolute inset-0" aria-hidden="true"></span>
Explore our latest features
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<h1 class="text-pretty text-center text-4xl font-semibold tracking-tight text-white sm:text-6xl">Manage projects like a pro</h1>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-300">Organize tasks, track progress, and collaborate with clients effortlessly. Stay on top of deadlines and deliver your best work every time.</p>
<div class="mt-10 flex items-center justify-center gap-6">
<a href="#" class="inline-flex items-center justify-center gap-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" />
<path d="M10.9 8.8L10.6577 8.66152C10.1418 8.36676 9.5 8.73922 9.5 9.33333L9.5 14.6667C9.5 15.2608 10.1418 15.6332 10.6577 15.3385L10.9 15.2L15.1 12.8C15.719 12.4463 15.719 11.5537 15.1 11.2L10.9 8.8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Demo
</a>
<a href="#" class="text-sm font-semibold leading-6 text-white">Learn more</a>
</div>
<div class="mt-16 sm:mt-24 lg:mb-[-15%]">
<div class="-m-2 rounded-xl bg-white/10 p-2 shadow-lg ring-1 ring-inset ring-white/10 lg:-m-4 lg:rounded-3xl lg:p-4">
<img width="1920" height="1139" class="h-auto w-full rounded-md bg-gray-600 ring-1 ring-white/10 lg:rounded-lg" src="https://htmlwind.com/assets/images/dark-dashboard-screenshot.webp" alt="dashboard screenshot" />
</div>
</div>
</div>
</div>
</div>
</div>const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");
// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");
// Function to open the mobile menu
function openMenu() {
if (mobileMenu) {
mobileMenu.classList.remove("hidden");
mobileMenu.setAttribute("aria-hidden", "false");
}
if (backdrop) {
backdrop.classList.remove("hidden");
backdrop.setAttribute("aria-hidden", "false");
}
closeMenuButton.focus(); // Focus the close button for better accessibility
}
// Function to close the mobile menu
function closeMenu() {
if (mobileMenu) {
mobileMenu.classList.add("hidden");
mobileMenu.setAttribute("aria-hidden", "true");
}
if (backdrop) {
backdrop.classList.add("hidden");
backdrop.setAttribute("aria-hidden", "true");
}
mobileMenuButton.focus(); // Return focus to the open button
}
// Event listeners for opening and closing the menu
if (mobileMenuButton) {
mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}
// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeMenu();
}
});<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
</div>
<div class="lg:hidden">
<button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-8">
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Services</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Pricing</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">About</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
<a href="#" class="inline-block rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
<a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden" role="dialog" aria-modal="true">
<div id="backdrop" class="fixed inset-0 z-50"></div>
<div class="fixed inset-0 z-50 w-full bg-white sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between px-6 py-4">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
<button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="divide-y divide-gray-900/10 px-6">
<div class="space-y-0.5 py-5">
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Services</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Pricing</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">About</a>
</div>
<div class="space-y-3 py-6">
<a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
<a href="#" class="block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
</div>
</div>
</div>
</div>
</header>
<div class="relative isolate overflow-hidden pt-12 lg:pt-16">
<div aria-hidden="true" class="absolute -top-[30rem] left-1/2 -z-10 h-[80rem] w-[80rem] -translate-x-1/2 bg-hero-dots bg-[size:25px_25px] mask-image-radial-gradient"></div>
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-10 lg:px-8 lg:py-24">
<div class="mx-auto max-w-2xl py-24 sm:py-32 lg:mx-0 lg:flex-1 lg:py-0">
<h1 class="max-w-2xl text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">Simplify your bill payments</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">Easily pay all your bills in one place. Stay organized and in control of your payments with just a few taps.</p>
<div class="mt-10 flex flex-wrap items-center justify-start gap-3">
<a href="#">
<span class="sr-only">Download on the App Store</span>
<svg class="h-10 sm:h-11 w-auto" viewBox="0 0 540 156" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M537 138.009C537 146.323 530.126 153.057 521.623 153.057H18.3973C9.8985 153.057 3 146.323 3 138.009V18.0105C3 9.70101 9.8985 2.9434 18.3973 2.9434H521.619C530.126 2.9434 536.996 9.70101 536.996 18.0105L537 138.009Z" fill="black" />
<path d="M520 3.12488C529.26 3.12488 536.795 10.4715 536.795 19.5V136.5C536.795 145.529 529.26 152.875 520 152.875H20C10.74 152.875 3.205 145.529 3.205 136.5V19.5C3.205 10.4715 10.74 3.12488 20 3.12488H520ZM520 1.52588e-05H20C9.005 1.52588e-05 0 8.77989 0 19.5V136.5C0 147.22 9.005 156 20 156H520C530.995 156 540 147.22 540 136.5V19.5C540 8.77989 530.995 1.52588e-05 520 1.52588e-05Z" fill="#A6A6A6" />
<path d="M120.512 77.1576C120.396 64.5879 131.068 58.4727 131.556 58.188C125.512 49.5963 116.144 48.4224 112.852 48.3288C104.984 47.5215 97.352 52.9191 93.344 52.9191C89.256 52.9191 83.084 48.4068 76.432 48.5394C67.872 48.6681 59.864 53.5002 55.472 61.0038C46.408 76.3035 53.168 98.787 61.852 111.154C66.196 117.211 71.272 123.973 77.916 123.735C84.416 123.474 86.844 119.695 94.688 119.695C102.46 119.695 104.74 123.735 111.516 123.583C118.492 123.474 122.884 117.499 127.076 111.388C132.096 104.446 134.112 97.6092 134.192 97.2582C134.028 97.2036 120.644 92.2233 120.512 77.1576Z" fill="white" />
<path d="M107.712 40.1934C111.208 35.9307 113.6 30.1314 112.936 24.2463C107.876 24.4647 101.548 27.6588 97.904 31.8279C94.68 35.5017 91.8 41.5233 92.544 47.1861C98.228 47.5995 104.064 44.3898 107.712 40.1934Z" fill="white" />
<path d="M196.2 39.0351C196.2 43.6254 194.788 47.0808 191.968 49.4013C189.356 51.5424 185.644 52.6149 180.836 52.6149C178.452 52.6149 176.412 52.5135 174.704 52.3107V27.2298C176.932 26.8788 179.332 26.6994 181.924 26.6994C186.504 26.6994 189.956 27.6705 192.284 29.6127C194.892 31.8084 196.2 34.9479 196.2 39.0351ZM191.78 39.1482C191.78 36.1725 190.972 33.891 189.356 32.2998C187.74 30.7125 185.38 29.9169 182.272 29.9169C180.952 29.9169 179.828 30.0027 178.896 30.1821V49.2492C179.412 49.3272 180.356 49.3623 181.728 49.3623C184.936 49.3623 187.412 48.4926 189.156 46.7532C190.9 45.0138 191.78 42.4788 191.78 39.1482Z" fill="white" />
<path d="M219.636 43.0443C219.636 45.8718 218.808 48.1884 217.152 50.0058C215.416 51.8739 213.116 52.806 210.244 52.806C207.476 52.806 205.272 51.9129 203.628 50.1189C201.988 48.3288 201.168 46.0707 201.168 43.3485C201.168 40.5015 202.012 38.1654 203.708 36.3519C205.404 34.5384 207.684 33.6297 210.556 33.6297C213.324 33.6297 215.548 34.5228 217.232 36.3129C218.832 38.0523 219.636 40.2987 219.636 43.0443ZM215.288 43.1769C215.288 41.4804 214.912 40.0257 214.164 38.8128C213.284 37.3464 212.032 36.6132 210.404 36.6132C208.72 36.6132 207.44 37.3464 206.56 38.8128C205.808 40.0257 205.436 41.5038 205.436 43.251C205.436 44.9475 205.812 46.4022 206.56 47.6151C207.468 49.0815 208.732 49.8147 210.364 49.8147C211.964 49.8147 213.22 49.0698 214.124 47.5761C214.9 46.3398 215.288 44.8734 215.288 43.1769Z" fill="white" />
<path d="M251.06 34.0041L245.16 52.3887H241.32L238.876 44.4054C238.256 42.4125 237.752 40.4313 237.36 38.4657H237.284C236.92 40.4859 236.416 42.4632 235.768 44.4054L233.172 52.3887H229.288L223.74 34.0041H228.048L230.18 42.744C230.696 44.811 231.12 46.7805 231.46 48.6447H231.536C231.848 47.1081 232.364 45.1503 233.092 42.783L235.768 34.008H239.184L241.748 42.5958C242.368 44.6901 242.872 46.7064 243.26 48.6486H243.376C243.66 46.7571 244.088 44.7408 244.656 42.5958L246.944 34.008H251.06V34.0041Z" fill="white" />
<path d="M272.792 52.3887H268.6V41.8587C268.6 38.6139 267.336 36.9915 264.8 36.9915C263.556 36.9915 262.552 37.4361 261.772 38.3292C261 39.2223 260.608 40.2753 260.608 41.4804V52.3848H256.416V39.2574C256.416 37.6428 256.364 35.8917 256.264 33.9963H259.948L260.144 36.8706H260.26C260.748 35.9775 261.476 35.2404 262.432 34.6515C263.568 33.9651 264.84 33.618 266.232 33.618C267.992 33.618 269.456 34.1718 270.62 35.2833C272.068 36.6444 272.792 38.6763 272.792 41.3751V52.3887V52.3887Z" fill="white" />
<path d="M284.352 52.3887H280.164V25.5684H284.352V52.3887Z" fill="white" />
<path d="M309.032 43.0443C309.032 45.8718 308.204 48.1884 306.548 50.0058C304.812 51.8739 302.508 52.806 299.64 52.806C296.868 52.806 294.664 51.9129 293.024 50.1189C291.384 48.3288 290.564 46.0707 290.564 43.3485C290.564 40.5015 291.408 38.1654 293.104 36.3519C294.8 34.5384 297.08 33.6297 299.948 33.6297C302.72 33.6297 304.94 34.5228 306.628 36.3129C308.228 38.0523 309.032 40.2987 309.032 43.0443ZM304.68 43.1769C304.68 41.4804 304.304 40.0257 303.556 38.8128C302.68 37.3464 301.424 36.6132 299.8 36.6132C298.112 36.6132 296.832 37.3464 295.956 38.8128C295.204 40.0257 294.832 41.5038 294.832 43.251C294.832 44.9475 295.208 46.4022 295.956 47.6151C296.864 49.0815 298.128 49.8147 299.76 49.8147C301.36 49.8147 302.612 49.0698 303.516 47.5761C304.296 46.3398 304.68 44.8734 304.68 43.1769Z" fill="white" />
<path d="M329.32 52.3887H325.556L325.244 50.271H325.128C323.84 51.9597 322.004 52.806 319.62 52.806C317.84 52.806 316.4 52.2483 315.316 51.1407C314.332 50.1345 313.84 48.8826 313.84 47.3967C313.84 45.1503 314.8 43.4382 316.732 42.2526C318.66 41.067 321.372 40.4859 324.864 40.5132V40.17C324.864 37.7481 323.56 36.5391 320.948 36.5391C319.088 36.5391 317.448 36.9954 316.032 37.9002L315.18 35.217C316.932 34.1601 319.096 33.6297 321.648 33.6297C326.576 33.6297 329.048 36.1647 329.048 41.2347V48.0051C329.048 49.842 329.14 51.3045 329.32 52.3887ZM324.968 46.0707V43.2354C320.344 43.1574 318.032 44.3937 318.032 46.9404C318.032 47.8998 318.296 48.6174 318.836 49.0971C319.376 49.5768 320.064 49.8147 320.884 49.8147C321.804 49.8147 322.664 49.53 323.448 48.9645C324.236 48.3951 324.72 47.6736 324.9 46.7883C324.944 46.5894 324.968 46.3476 324.968 46.0707Z" fill="white" />
<path d="M353.14 52.3887H349.42L349.224 49.4364H349.108C347.92 51.6828 345.896 52.806 343.052 52.806C340.78 52.806 338.888 51.9363 337.388 50.1969C335.888 48.4575 335.14 46.1994 335.14 43.4265C335.14 40.4508 335.952 38.0406 337.584 36.1998C339.164 34.4838 341.1 33.6258 343.404 33.6258C345.936 33.6258 347.708 34.4565 348.716 36.1218H348.796V25.5684H352.992V47.4357C352.992 49.2258 353.04 50.8755 353.14 52.3887ZM348.796 44.6355V41.5701C348.796 41.0397 348.756 40.6107 348.68 40.2831C348.444 39.3003 347.936 38.4735 347.164 37.8066C346.384 37.1397 345.444 36.8043 344.36 36.8043C342.796 36.8043 341.572 37.4088 340.672 38.6217C339.78 39.8346 339.328 41.3829 339.328 43.2744C339.328 45.0918 339.756 46.566 340.616 47.7009C341.524 48.9099 342.748 49.5144 344.28 49.5144C345.656 49.5144 346.756 49.0113 347.592 48.0012C348.4 47.0691 348.796 45.9459 348.796 44.6355Z" fill="white" />
<path d="M388.992 43.0443C388.992 45.8718 388.164 48.1884 386.508 50.0058C384.772 51.8739 382.476 52.806 379.6 52.806C376.836 52.806 374.632 51.9129 372.984 50.1189C371.344 48.3288 370.524 46.0707 370.524 43.3485C370.524 40.5015 371.368 38.1654 373.064 36.3519C374.76 34.5384 377.04 33.6297 379.916 33.6297C382.68 33.6297 384.908 34.5228 386.588 36.3129C388.188 38.0523 388.992 40.2987 388.992 43.0443ZM384.648 43.1769C384.648 41.4804 384.272 40.0257 383.524 38.8128C382.64 37.3464 381.392 36.6132 379.76 36.6132C378.08 36.6132 376.8 37.3464 375.916 38.8128C375.164 40.0257 374.792 41.5038 374.792 43.251C374.792 44.9475 375.168 46.4022 375.916 47.6151C376.824 49.0815 378.088 49.8147 379.72 49.8147C381.32 49.8147 382.58 49.0698 383.484 47.5761C384.256 46.3398 384.648 44.8734 384.648 43.1769Z" fill="white" />
<path d="M411.532 52.3887H407.344V41.8587C407.344 38.6139 406.08 36.9915 403.54 36.9915C402.296 36.9915 401.292 37.4361 400.516 38.3292C399.74 39.2223 399.352 40.2753 399.352 41.4804V52.3848H395.156V39.2574C395.156 37.6428 395.108 35.8917 395.008 33.9963H398.688L398.884 36.8706H399C399.492 35.9775 400.22 35.2404 401.172 34.6515C402.312 33.9651 403.58 33.618 404.976 33.618C406.732 33.618 408.196 34.1718 409.36 35.2833C410.812 36.6444 411.532 38.6763 411.532 41.3751V52.3887V52.3887Z" fill="white" />
<path d="M439.744 37.0656H435.128V45.9966C435.128 48.2664 435.948 49.4013 437.572 49.4013C438.324 49.4013 438.948 49.3389 439.44 49.2102L439.548 52.3107C438.72 52.6149 437.632 52.767 436.292 52.767C434.636 52.767 433.348 52.2756 432.416 51.2928C431.48 50.31 431.016 48.6564 431.016 46.3359V37.0656H428.26V34.0041H431.016V30.6345L435.124 29.4255V34.0002H439.74V37.0656H439.744Z" fill="white" />
<path d="M461.936 52.3887H457.74V41.9367C457.74 38.6412 456.476 36.9915 453.944 36.9915C452 36.9915 450.672 37.947 449.944 39.858C449.82 40.2597 449.748 40.7511 449.748 41.3283V52.3848H445.56V25.5684H449.748V36.6483H449.828C451.148 34.632 453.04 33.6258 455.492 33.6258C457.228 33.6258 458.664 34.1796 459.804 35.2911C461.224 36.6756 461.936 38.7348 461.936 41.457V52.3887V52.3887Z" fill="white" />
<path d="M484.828 42.3267C484.828 43.0599 484.772 43.6761 484.672 44.1792H472.1C472.156 45.9966 472.756 47.3811 473.92 48.3405C474.984 49.1985 476.356 49.6275 478.036 49.6275C479.896 49.6275 481.592 49.3389 483.12 48.7578L483.776 51.597C481.988 52.3536 479.884 52.7319 477.448 52.7319C474.528 52.7319 472.228 51.8934 470.564 50.2164C468.892 48.5394 468.064 46.2891 468.064 43.4655C468.064 40.6926 468.836 38.3838 470.392 36.543C472.016 34.5774 474.212 33.5946 476.984 33.5946C479.696 33.5946 481.756 34.5774 483.148 36.543C484.272 38.103 484.828 40.0335 484.828 42.3267ZM480.828 41.2698C480.86 40.0569 480.584 39.0117 480.016 38.1303C479.288 36.9954 478.18 36.426 476.68 36.426C475.312 36.426 474.196 36.9798 473.344 38.0913C472.648 38.9766 472.236 40.0335 472.1 41.2698H480.828Z" fill="white" />
<path d="M214.58 122.866H205.496L200.52 107.62H183.224L178.484 122.866H169.64L186.776 70.9643H197.36L214.58 122.866ZM199.02 101.224L194.52 87.6719C194.044 86.2874 193.152 83.027 191.836 77.8946H191.676C191.152 80.102 190.308 83.3624 189.148 87.6719L184.728 101.224H199.02V101.224Z" fill="white" />
<path d="M258.648 103.693C258.648 110.058 256.884 115.089 253.356 118.782C250.196 122.07 246.272 123.712 241.588 123.712C236.532 123.712 232.9 121.941 230.688 118.4H230.528V138.115H222V97.7613C222 93.7599 221.892 89.6532 221.684 85.4412H229.184L229.66 91.3731H229.82C232.664 86.9037 236.98 84.6729 242.772 84.6729C247.3 84.6729 251.08 86.4162 254.104 89.9067C257.136 93.4011 258.648 97.9953 258.648 103.693ZM249.96 103.997C249.96 100.355 249.12 97.3518 247.432 94.9884C245.588 92.5236 243.112 91.2912 240.008 91.2912C237.904 91.2912 235.992 91.9776 234.284 93.3309C232.572 94.6959 231.452 96.4782 230.928 98.6856C230.664 99.7152 230.532 100.558 230.532 101.221V107.461C230.532 110.183 231.388 112.48 233.1 114.356C234.812 116.232 237.036 117.168 239.772 117.168C242.984 117.168 245.484 115.959 247.272 113.549C249.064 111.134 249.96 107.952 249.96 103.997Z" fill="white" />
<path d="M302.796 103.693C302.796 110.058 301.032 115.089 297.5 118.782C294.344 122.07 290.42 123.712 285.736 123.712C280.68 123.712 277.048 121.941 274.84 118.4H274.68V138.115H266.152V97.7613C266.152 93.7599 266.044 89.6532 265.836 85.4412H273.336L273.812 91.3731H273.972C276.812 86.9037 281.128 84.6729 286.924 84.6729C291.448 84.6729 295.228 86.4162 298.26 89.9067C301.28 93.4011 302.796 97.9953 302.796 103.693ZM294.108 103.997C294.108 100.355 293.264 97.3518 291.576 94.9884C289.732 92.5236 287.264 91.2912 284.156 91.2912C282.048 91.2912 280.14 91.9776 278.428 93.3309C276.716 94.6959 275.6 96.4782 275.076 98.6856C274.816 99.7152 274.68 100.558 274.68 101.221V107.461C274.68 110.183 275.536 112.48 277.24 114.356C278.952 116.228 281.176 117.168 283.92 117.168C287.132 117.168 289.632 115.959 291.42 113.549C293.212 111.134 294.108 107.952 294.108 103.997Z" fill="white" />
<path d="M352.156 108.311C352.156 112.726 350.584 116.317 347.428 119.09C343.96 122.121 339.132 123.634 332.928 123.634C327.2 123.634 322.608 122.557 319.132 120.401L321.108 113.47C324.852 115.678 328.96 116.785 333.436 116.785C336.648 116.785 339.148 116.076 340.944 114.664C342.732 113.252 343.624 111.357 343.624 108.993C343.624 106.887 342.888 105.113 341.412 103.674C339.944 102.235 337.492 100.897 334.068 99.6606C324.748 96.2715 320.092 91.3068 320.092 84.7782C320.092 80.5116 321.724 77.0133 324.992 74.2911C328.248 71.565 332.592 70.2039 338.024 70.2039C342.868 70.2039 346.892 71.0268 350.104 72.6687L347.972 79.4469C344.972 77.8557 341.58 77.0601 337.784 77.0601C334.784 77.0601 332.44 77.7816 330.76 79.2168C329.34 80.4999 328.628 82.0638 328.628 83.9163C328.628 85.9677 329.44 87.6642 331.072 88.998C332.492 90.2304 335.072 91.5642 338.816 93.0033C343.396 94.8012 346.76 96.9033 348.924 99.3135C351.08 101.716 352.156 104.723 352.156 108.311Z" fill="white" />
<path d="M380.352 91.6811H370.952V109.851C370.952 114.473 372.608 116.782 375.928 116.782C377.452 116.782 378.716 116.653 379.716 116.395L379.952 122.71C378.272 123.322 376.06 123.63 373.32 123.63C369.952 123.63 367.32 122.628 365.42 120.627C363.528 118.622 362.576 115.261 362.576 110.538V91.6733H356.976V85.4333H362.576V78.581L370.952 76.1162V85.4333H380.352V91.6811Z" fill="white" />
<path d="M422.764 103.845C422.764 109.598 421.076 114.321 417.708 118.014C414.176 121.816 409.488 123.712 403.644 123.712C398.012 123.712 393.528 121.891 390.184 118.248C386.84 114.605 385.168 110.007 385.168 104.465C385.168 98.6661 386.888 93.9159 390.34 90.2226C393.784 86.5254 398.432 84.6768 404.276 84.6768C409.908 84.6768 414.44 86.4981 417.86 90.1446C421.132 93.6819 422.764 98.2488 422.764 103.845ZM413.916 104.114C413.916 100.663 413.16 97.7028 411.628 95.2341C409.84 92.2467 407.284 90.7569 403.972 90.7569C400.544 90.7569 397.94 92.2506 396.152 95.2341C394.62 97.7067 393.864 100.714 393.864 104.27C393.864 107.722 394.62 110.682 396.152 113.147C397.996 116.134 400.572 117.624 403.896 117.624C407.152 117.624 409.708 116.103 411.552 113.069C413.124 110.553 413.916 107.562 413.916 104.114Z" fill="white" />
<path d="M450.484 92.7537C449.64 92.6016 448.74 92.5236 447.796 92.5236C444.796 92.5236 442.476 93.6273 440.844 95.8386C439.424 97.7886 438.712 100.253 438.712 103.229V122.866H430.188L430.268 97.227C430.268 92.9136 430.16 88.9863 429.948 85.4451H437.376L437.688 92.6055H437.924C438.824 90.1446 440.244 88.1634 442.188 86.6775C444.088 85.3398 446.14 84.6729 448.352 84.6729C449.14 84.6729 449.852 84.7275 450.484 84.825V92.7537Z" fill="white" />
<path d="M488.624 102.383C488.624 103.873 488.524 105.128 488.312 106.154H462.728C462.828 109.851 464.064 112.679 466.44 114.629C468.596 116.372 471.384 117.246 474.808 117.246C478.596 117.246 482.052 116.657 485.16 115.475L486.496 121.247C482.864 122.791 478.576 123.56 473.628 123.56C467.676 123.56 463.004 121.852 459.604 118.439C456.212 115.027 454.512 110.444 454.512 104.695C454.512 99.0522 456.092 94.3527 459.256 90.6048C462.568 86.6034 467.044 84.6027 472.676 84.6027C478.208 84.6027 482.396 86.6034 485.24 90.6048C487.492 93.7833 488.624 97.7145 488.624 102.383ZM480.492 100.226C480.548 97.7613 479.992 95.6319 478.836 93.834C477.36 91.5213 475.092 90.3669 472.04 90.3669C469.252 90.3669 466.984 91.494 465.252 93.756C463.832 95.5539 462.988 97.7106 462.728 100.222H480.492V100.226Z" fill="white" />
</svg>
</a>
<a href="#">
<span class="sr-only">Get it on Google Play</span>
<svg class="h-10 sm:h-11 w-auto" viewBox="0 0 540 156" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M520 156H20C9.005 156 0 147.22 0 136.5V19.5C0 8.77989 9.005 1.52588e-05 20 1.52588e-05H520C530.995 1.52588e-05 540 8.77989 540 19.5V136.5C540 147.22 530.995 156 520 156Z" fill="black" />
<path d="M520 3.12488C529.26 3.12488 536.795 10.4715 536.795 19.5V136.5C536.795 145.529 529.26 152.875 520 152.875H20C10.74 152.875 3.205 145.529 3.205 136.5V19.5C3.205 10.4715 10.74 3.12488 20 3.12488H520ZM520 1.52588e-05H20C9.005 1.52588e-05 0 8.77989 0 19.5V136.5C0 147.22 9.005 156 20 156H520C530.995 156 540 147.22 540 136.5V19.5C540 8.77989 530.995 1.52588e-05 520 1.52588e-05Z" fill="#A6A6A6" />
<path d="M41.74 29.4011C40.565 30.6003 39.885 32.4675 39.885 34.8855V121.134C39.885 123.552 40.565 125.419 41.74 126.618L42.03 126.882L91.6 78.5703V77.4296L42.03 29.1183L41.74 29.4011Z" fill="url(#paint0_linear_303_2352)" />
<path d="M108.105 94.6822L91.5999 78.5703V77.4296L108.125 61.3177L108.495 61.5273L128.065 72.3839C133.65 75.4649 133.65 80.5349 128.065 83.6354L108.495 94.4726L108.105 94.6822V94.6822Z" fill="url(#paint1_linear_303_2352)" />
<path d="M108.495 94.4726L91.6 78L41.74 126.618C43.595 128.52 46.62 128.749 50.06 126.847L108.495 94.4726" fill="url(#paint2_linear_303_2352)" />
<path d="M108.495 61.5274L50.06 29.1525C46.62 27.2708 43.595 27.4999 41.74 29.4011L91.6 78L108.495 61.5274Z" fill="url(#paint3_linear_303_2352)" />
<path d="M189.67 39.9506C189.67 43.2071 188.67 45.8152 186.7 47.7604C184.435 50.0662 181.485 51.2265 177.87 51.2265C174.415 51.2265 171.465 50.0467 169.045 47.7214C166.62 45.3619 165.41 42.4661 165.41 39C165.41 35.5339 166.62 32.6381 169.045 30.2981C171.465 27.9533 174.415 26.7735 177.87 26.7735C179.59 26.7735 181.23 27.1196 182.795 27.7631C184.355 28.4115 185.625 29.289 186.545 30.3712L184.455 32.4285C182.85 30.5809 180.665 29.6693 177.87 29.6693C175.35 29.6693 173.165 30.5272 171.31 32.2579C169.475 33.9934 168.555 36.2407 168.555 39C168.555 41.7592 169.475 44.0261 171.31 45.7616C173.165 47.4727 175.35 48.3502 177.87 48.3502C180.545 48.3502 182.795 47.4727 184.57 45.7421C185.74 44.5965 186.405 43.017 186.58 40.9987H177.87V38.181H189.49C189.63 38.7904 189.67 39.3802 189.67 39.9506V39.9506Z" fill="white" stroke="white" stroke-width="0.16" stroke-miterlimit="10" />
<path d="M208.105 30.1811H197.19V37.5911H207.03V40.4089H197.19V47.8189H208.105V50.6902H194.1V27.3098H208.105V30.1811Z" fill="white" stroke="white" stroke-width="0.16" stroke-miterlimit="10" />
<path d="M221.115 50.6902H218.025V30.1811H211.33V27.3098H227.815V30.1811H221.115V50.6902V50.6902Z" fill="white" stroke="white" stroke-width="0.16" stroke-miterlimit="10" />
<path d="M239.745 50.6902V27.3098H242.83V50.6902H239.745Z" fill="white" stroke="white" stroke-width="0.16" stroke-miterlimit="10" />
<path d="M256.505 50.6902H253.44V30.1811H246.72V27.3098H263.225V30.1811H256.505V50.6902Z" fill="white" stroke="white" stroke-width="0.16" stroke-miterlimit="10" />
<path d="M294.435 47.6824C292.07 50.0467 289.14 51.2265 285.645 51.2265C282.13 51.2265 279.2 50.0467 276.835 47.6824C274.475 45.3229 273.3 42.4271 273.3 39C273.3 35.5729 274.475 32.6771 276.835 30.3176C279.2 27.9532 282.13 26.7735 285.645 26.7735C289.12 26.7735 292.05 27.9532 294.415 30.3371C296.795 32.7161 297.97 35.5924 297.97 39C297.97 42.4271 296.795 45.3229 294.435 47.6824ZM279.12 45.7226C280.9 47.4727 283.065 48.3502 285.645 48.3502C288.205 48.3502 290.39 47.4727 292.15 45.7226C293.925 43.9725 294.825 41.7251 294.825 39C294.825 36.2749 293.925 34.0275 292.15 32.2774C290.39 30.5273 288.205 29.6497 285.645 29.6497C283.065 29.6497 280.9 30.5273 279.12 32.2774C277.345 34.0275 276.445 36.2749 276.445 39C276.445 41.7251 277.345 43.9725 279.12 45.7226V45.7226Z" fill="white" stroke="white" stroke-width="0.16" stroke-miterlimit="10" />
<path d="M302.305 50.6902V27.3098H306.055L317.715 45.4935H317.85L317.715 40.9987V27.3098H320.8V50.6902H317.58L305.37 31.6095H305.235L305.37 36.1237V50.6902H302.305V50.6902Z" fill="white" stroke="white" stroke-width="0.16" stroke-miterlimit="10" />
<path
d="M272.54 84.8348C263.145 84.8348 255.47 91.8061 255.47 101.424C255.47 110.965 263.145 118.009 272.54 118.009C281.955 118.009 289.63 110.965 289.63 101.424C289.63 91.8061 281.955 84.8348 272.54 84.8348ZM272.54 111.477C267.385 111.477 262.95 107.328 262.95 101.424C262.95 95.4428 267.385 91.3673 272.54 91.3673C277.695 91.3673 282.15 95.4428 282.15 101.424C282.15 107.328 277.695 111.477 272.54 111.477V111.477ZM235.295 84.8348C225.88 84.8348 218.225 91.8061 218.225 101.424C218.225 110.965 225.88 118.009 235.295 118.009C244.705 118.009 252.365 110.965 252.365 101.424C252.365 91.8061 244.705 84.8348 235.295 84.8348ZM235.295 111.477C230.135 111.477 225.685 107.328 225.685 101.424C225.685 95.4428 230.135 91.3673 235.295 91.3673C240.45 91.3673 244.885 95.4428 244.885 101.424C244.885 107.328 240.45 111.477 235.295 111.477ZM190.975 89.9195V96.9687H208.24C207.735 100.908 206.385 103.803 204.315 105.822C201.795 108.259 197.87 110.965 190.975 110.965C180.35 110.965 172.03 102.604 172.03 92.2448C172.03 81.8855 180.35 73.5248 190.975 73.5248C196.72 73.5248 200.9 75.7137 203.985 78.551L209.08 73.5833C204.765 69.5663 199.025 66.4805 190.975 66.4805C176.405 66.4805 164.16 78.0391 164.16 92.2448C164.16 106.451 176.405 118.009 190.975 118.009C198.85 118.009 204.765 115.494 209.415 110.775C214.18 106.129 215.665 99.5963 215.665 94.3216C215.665 92.6836 215.525 91.1772 215.275 89.9195H190.975ZM372.205 95.3843C370.8 91.6745 366.465 84.8348 357.635 84.8348C348.885 84.8348 341.6 91.5575 341.6 101.424C341.6 110.716 348.81 118.009 358.475 118.009C366.29 118.009 370.8 113.363 372.655 110.658L366.855 106.889C364.92 109.649 362.285 111.477 358.475 111.477C354.69 111.477 351.975 109.785 350.235 106.451L372.99 97.2709L372.205 95.3843V95.3843ZM349.005 100.908C348.81 94.5117 354.1 91.2357 357.89 91.2357C360.86 91.2357 363.38 92.6836 364.22 94.7555L349.005 100.908V100.908ZM330.51 117H337.99V68.2501H330.51V117ZM318.26 88.5301H318.01C316.33 86.5898 313.125 84.8348 309.065 84.8348C300.545 84.8348 292.755 92.1278 292.755 101.478C292.755 110.775 300.545 118.009 309.065 118.009C313.125 118.009 316.33 116.24 318.01 114.241H318.26V116.62C318.26 122.962 314.785 126.37 309.18 126.37C304.61 126.37 301.775 123.152 300.605 120.447L294.1 123.094C295.975 127.491 300.94 132.902 309.18 132.902C317.95 132.902 325.35 127.871 325.35 115.63V85.844H318.26V88.5301V88.5301ZM309.705 111.477C304.55 111.477 300.235 107.27 300.235 101.478C300.235 95.633 304.55 91.3673 309.705 91.3673C314.785 91.3673 318.79 95.633 318.79 101.478C318.79 107.27 314.785 111.477 309.705 111.477V111.477ZM407.225 68.2501H389.335V117H396.795V98.5287H407.225C415.51 98.5287 423.635 92.6836 423.635 83.387C423.635 74.0952 415.49 68.2501 407.225 68.2501V68.2501ZM407.42 91.7476H396.795V75.0312H407.42C412.99 75.0312 416.17 79.5406 416.17 83.387C416.17 87.1602 412.99 91.7476 407.42 91.7476ZM453.535 84.7422C448.145 84.7422 442.54 87.0627 440.235 92.2058L446.855 94.9115C448.28 92.2058 450.9 91.3283 453.67 91.3283C457.54 91.3283 461.465 93.5952 461.525 97.5976V98.1094C460.175 97.3489 457.285 96.2228 453.73 96.2228C446.6 96.2228 439.335 100.05 439.335 107.192C439.335 113.724 445.175 117.931 451.74 117.931C456.76 117.931 459.53 115.723 461.27 113.154H461.525V116.922H468.73V98.2216C468.73 89.5782 462.11 84.7422 453.535 84.7422ZM452.635 111.457C450.195 111.457 446.795 110.277 446.795 107.328C446.795 103.555 451.035 102.107 454.705 102.107C457.99 102.107 459.53 102.814 461.525 103.745C460.94 108.259 456.955 111.457 452.635 111.457V111.457ZM494.98 85.8098L486.405 106.943H486.15L477.285 85.8098H469.24L482.56 115.343L474.96 131.776H482.755L503.28 85.8098H494.98V85.8098ZM427.735 117H435.215V68.2501H427.735V117Z"
fill="white"
/>
<defs>
<linearGradient id="paint0_linear_303_2352" x1="87.1988" y1="122.032" x2="21.7684" y2="54.9241" gradientUnits="userSpaceOnUse">
<stop stop-color="#00A0FF" />
<stop offset="0.0066" stop-color="#00A1FF" />
<stop offset="0.2601" stop-color="#00BEFF" />
<stop offset="0.5122" stop-color="#00D2FF" />
<stop offset="0.7604" stop-color="#00DFFF" />
<stop offset="1" stop-color="#00E3FF" />
</linearGradient>
<linearGradient id="paint1_linear_303_2352" x1="135.337" y1="77.9945" x2="38.5499" y2="77.9945" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFE000" />
<stop offset="0.4087" stop-color="#FFBD00" />
<stop offset="0.7754" stop-color="#FFA500" />
<stop offset="1" stop-color="#FF9C00" />
</linearGradient>
<linearGradient id="paint2_linear_303_2352" x1="99.308" y1="69.0452" x2="10.5791" y2="-21.9588" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF3A44" />
<stop offset="1" stop-color="#C31162" />
</linearGradient>
<linearGradient id="paint3_linear_303_2352" x1="29.1892" y1="155.313" x2="68.8106" y2="114.676" gradientUnits="userSpaceOnUse">
<stop stop-color="#32A071" />
<stop offset="0.0685" stop-color="#2DA771" />
<stop offset="0.4762" stop-color="#15CF74" />
<stop offset="0.8009" stop-color="#06E775" />
<stop offset="1" stop-color="#00F076" />
</linearGradient>
</defs>
</svg>
</a>
</div>
<div class="mt-10 flex flex-wrap items-center justify-start gap-4">
<div class="flex flex-none items-center -space-x-3.5">
<div class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
</div>
<div>
<div class="flex items-center justify-start gap-3" role="group" aria-label="User rating">
<div class="flex items-center justify-center gap-1.5" role="img" aria-label="5 out of 5 stars">
<svg class="h-4 w-4 text-amber-400" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" aria-hidden="true">
<path fill="currentColor" d="M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15 C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343 c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957 c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25 c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657 C63.951,25.771,64.131,24.987,63.893,24.277z" />
</svg>
<svg class="h-4 w-4 text-amber-400" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" aria-hidden="true">
<path fill="currentColor" d="M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15 C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343 c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957 c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25 c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657 C63.951,25.771,64.131,24.987,63.893,24.277z" />
</svg>
<svg class="h-4 w-4 text-amber-400" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" aria-hidden="true">
<path fill="currentColor" d="M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15 C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343 c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957 c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25 c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657 C63.951,25.771,64.131,24.987,63.893,24.277z" />
</svg>
<svg class="h-4 w-4 text-amber-400" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" aria-hidden="true">
<path fill="currentColor" d="M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15 C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343 c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957 c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25 c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657 C63.951,25.771,64.131,24.987,63.893,24.277z" />
</svg>
<svg class="h-4 w-4 text-amber-400" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" aria-hidden="true">
<path fill="currentColor" d="M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15 C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343 c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957 c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25 c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657 C63.951,25.771,64.131,24.987,63.893,24.277z" />
</svg>
</div>
<p class="text-abse font-semibold leading-7 text-gray-900" aria-label="Rating: 5.0">5.0</p>
</div>
<p class="text-base font-medium leading-7 text-gray-600">from 150+ reviews</p>
</div>
</div>
</div>
<div class="-mb-[20rem] lg:mb-0 lg:flex-1">
<div class="relative mx-auto w-full max-w-[22rem]">
<svg role="img" class="h-auto w-full drop-shadow-xl" viewBox="0 0 1427 2951" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>App screenshot</title>
<path d="M0 848C0 845.239 2.23858 843 5 843H26V1065H5C2.23858 1065 0 1062.76 0 1060V848Z" fill="#424242" />
<path d="M0 1128C0 1125.24 2.23858 1123 5 1123H26V1345H5C2.23858 1345 0 1342.76 0 1340V1128Z" fill="#424242" />
<path d="M0 611C0 608.239 2.23858 606 5 606H26V743H5C2.23858 743 0 740.761 0 738V611Z" fill="#424242" />
<path d="M1427 925C1427 922.239 1424.76 920 1422 920H1399V1269H1422C1424.76 1269 1427 1266.76 1427 1264V925Z" fill="#424242" />
<rect x="10" width="1405" height="2951" rx="246" fill="#333333" />
<rect x="10" y="312" width="48" height="21" fill="#242424" />
<rect x="10" y="2639" width="48" height="21" fill="#242424" />
<rect x="1367" y="312" width="48" height="21" fill="#242424" />
<rect x="1367" y="2639" width="48" height="21" fill="#242424" />
<rect x="26" y="16" width="1373" height="2919" rx="230" fill="#121515" />
<rect x="573" y="22" width="279" height="10" rx="5" fill="#262C2D" />
<mask id="mask0_43_49" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="58" y="48" width="1309" height="2855">
<rect x="58" y="48" width="1309" height="2855" rx="198" fill="white" />
</mask>
<g mask="url(#mask0_43_49)">
<rect x="58" y="48" width="1309" height="2857" fill="url(#pattern0_43_49)" />
<rect x="508" y="92" width="410" height="120" rx="60" fill="#121515" />
<circle cx="862" cy="152" r="24" fill="#262C2D" />
<circle cx="862" cy="152" r="15.6" fill="#121515" />
<circle cx="862" cy="158" r="4.8" fill="#636F73" />
</g>
<defs>
<pattern id="pattern0_43_49" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_43_49" transform="matrix(0.00170514 0 0 0.00078125 -0.00386954 0)" />
</pattern>
<image
id="image0_43_49"
width="591"
height="1280"
href="https://htmlwind.com/assets/images/app-screenshot.webp"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");
// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");
// Function to open the mobile menu
function openMenu() {
if (mobileMenu) {
mobileMenu.classList.remove("hidden");
mobileMenu.setAttribute("aria-hidden", "false");
}
if (backdrop) {
backdrop.classList.remove("hidden");
backdrop.setAttribute("aria-hidden", "false");
}
closeMenuButton.focus(); // Focus the close button for better accessibility
}
// Function to close the mobile menu
function closeMenu() {
if (mobileMenu) {
mobileMenu.classList.add("hidden");
mobileMenu.setAttribute("aria-hidden", "true");
}
if (backdrop) {
backdrop.classList.add("hidden");
backdrop.setAttribute("aria-hidden", "true");
}
mobileMenuButton.focus(); // Return focus to the open button
}
// Event listeners for opening and closing the menu
if (mobileMenuButton) {
mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}
// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeMenu();
}
});<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
</div>
<div class="lg:hidden">
<button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-8">
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Services</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Pricing</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">About</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
<a href="#" class="inline-block rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
<a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden" role="dialog" aria-modal="true">
<div id="backdrop" class="fixed inset-0 z-50"></div>
<div class="fixed inset-0 z-50 w-full bg-white sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between px-6 py-4">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
<button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="divide-y divide-gray-900/10 px-6">
<div class="space-y-0.5 py-5">
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Services</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Pricing</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">About</a>
</div>
<div class="space-y-3 py-6">
<a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
<a href="#" class="block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
</div>
</div>
</div>
</div>
</header>
<div class="relative isolate overflow-hidden pt-12 lg:pt-16">
<div aria-hidden="true" class="absolute -top-[30rem] left-1/2 -z-10 h-[80rem] w-[80rem] -translate-x-1/2 bg-hero-dots bg-[size:25px_25px] mask-image-radial-gradient"></div>
<div class="py-24 sm:py-32 lg:py-16">
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:justify-center lg:gap-x-8 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:w-1/2 lg:max-w-none">
<div class="lg:max-w-xl">
<div class="text-center lg:text-start">
<h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">Achieve more with less effort</h1>
<p class="mt-6 text-lg leading-8 text-gray-600 mx-auto max-w-xl lg:mx-0 lg:max-w-lg">Simplify your workflows and automate daily tasks with ease, saving time to focus on what matters most for your business.</p>
</div>
<div class="mt-10 flex items-center justify-center gap-6 lg:justify-start">
<a href="#" class="inline-flex items-center justify-center gap-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" />
<path d="M10.9 8.8L10.6577 8.66152C10.1418 8.36676 9.5 8.73922 9.5 9.33333L9.5 14.6667C9.5 15.2608 10.1418 15.6332 10.6577 15.3385L10.9 15.2L15.1 12.8C15.719 12.4463 15.719 11.5537 15.1 11.2L10.9 8.8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Demo
</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more</a>
</div>
<div class="mt-14">
<p class="text-center text-base leading-7 text-gray-600 lg:text-start">Trusted by companies across the globe</p>
<div class="mt-6 flex flex-wrap justify-center gap-x-8 gap-y-4 lg:justify-start lg:gap-4">
<div class="flex items-center justify-center">
<img class="max-h-10 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-214.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center">
<img class="max-h-10 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-221.svg" alt="Logoipsum" />
</div>
<div class="flex items-center justify-center">
<img class="max-h-10 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-216.svg" alt="Logoipsum" />
</div>
</div>
</div>
</div>
</div>
<div class="mx-auto mt-16 h-[18rem] sm:h-[26rem] max-w-2xl lg:mt-0 lg:h-[40rem] lg:w-1/2 lg:max-w-none">
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
</div>
</div>
</div>
</div>const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");
// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");
// Function to open the mobile menu
function openMenu() {
if (mobileMenu) {
mobileMenu.classList.remove("hidden");
mobileMenu.setAttribute("aria-hidden", "false");
}
if (backdrop) {
backdrop.classList.remove("hidden");
backdrop.setAttribute("aria-hidden", "false");
}
closeMenuButton.focus(); // Focus the close button for better accessibility
}
// Function to close the mobile menu
function closeMenu() {
if (mobileMenu) {
mobileMenu.classList.add("hidden");
mobileMenu.setAttribute("aria-hidden", "true");
}
if (backdrop) {
backdrop.classList.add("hidden");
backdrop.setAttribute("aria-hidden", "true");
}
mobileMenuButton.focus(); // Return focus to the open button
}
// Event listeners for opening and closing the menu
if (mobileMenuButton) {
mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}
// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeMenu();
}
});<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
</div>
<div class="lg:hidden">
<button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-8">
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Services</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Pricing</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">About</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
<a href="#" class="inline-block rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
<a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden" role="dialog" aria-modal="true">
<div id="backdrop" class="fixed inset-0 z-50"></div>
<div class="fixed inset-0 z-50 w-full bg-white sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between px-6 py-4">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
<button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="divide-y divide-gray-900/10 px-6">
<div class="space-y-0.5 py-5">
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Services</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Pricing</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">About</a>
</div>
<div class="space-y-3 py-6">
<a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
<a href="#" class="block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
</div>
</div>
</div>
</div>
</header>
<div class="overflow-hidden pt-12 lg:pt-16">
<div class="py-24 sm:py-32 lg:py-16">
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:justify-center lg:gap-x-8 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:w-1/2 lg:max-w-none">
<div class="lg:max-w-xl">
<div class="text-center lg:text-start">
<h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">Connect your team, boost productivity</h1>
<p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600 lg:mx-0 lg:max-w-lg">Streamline communication with messaging, channels, and file sharing. Collaborate easily, stay aligned, and focus on your goals.</p>
</div>
<div class="mt-10 flex items-center justify-center gap-6 lg:justify-start">
<a href="#" class="inline-flex items-center justify-center gap-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" />
<path d="M10.9 8.8L10.6577 8.66152C10.1418 8.36676 9.5 8.73922 9.5 9.33333L9.5 14.6667C9.5 15.2608 10.1418 15.6332 10.6577 15.3385L10.9 15.2L15.1 12.8C15.719 12.4463 15.719 11.5537 15.1 11.2L10.9 8.8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Demo
</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more</a>
</div>
</div>
</div>
<div class="relative mx-auto mt-16 h-[18rem] max-w-2xl sm:h-[26rem] lg:mt-0 lg:h-[40rem] lg:w-1/2 lg:max-w-none">
<img class="h-full w-full rounded-tl-[4rem] object-cover sm:rounded-tl-[8rem] lg:rounded-tl-[10rem]" src="https://images.unsplash.com/photo-1623121739158-80a9b0e6d2c7?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<img width="480" height="208" class="absolute -left-16 bottom-10 hidden h-auto w-96 lg:block" src="https://htmlwind.com/assets/images/notifications.png" alt="" />
</div>
</div>
</div>
</div>
</div>const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");
// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");
// Function to open the mobile menu
function openMenu() {
if (mobileMenu) {
mobileMenu.classList.remove("hidden");
mobileMenu.setAttribute("aria-hidden", "false");
}
if (backdrop) {
backdrop.classList.remove("hidden");
backdrop.setAttribute("aria-hidden", "false");
}
closeMenuButton.focus(); // Focus the close button for better accessibility
}
// Function to close the mobile menu
function closeMenu() {
if (mobileMenu) {
mobileMenu.classList.add("hidden");
mobileMenu.setAttribute("aria-hidden", "true");
}
if (backdrop) {
backdrop.classList.add("hidden");
backdrop.setAttribute("aria-hidden", "true");
}
mobileMenuButton.focus(); // Return focus to the open button
}
// Event listeners for opening and closing the menu
if (mobileMenuButton) {
mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}
// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeMenu();
}
});<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
</div>
<div class="lg:hidden">
<button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-8">
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Services</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Pricing</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">About</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
<a href="#" class="inline-block rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
<a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden" role="dialog" aria-modal="true">
<div id="backdrop" class="fixed inset-0 z-50"></div>
<div class="fixed inset-0 z-50 w-full bg-white sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between px-6 py-4">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
<button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="divide-y divide-gray-900/10 px-6">
<div class="space-y-0.5 py-5">
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Services</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Pricing</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">About</a>
</div>
<div class="space-y-3 py-6">
<a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
<a href="#" class="block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
</div>
</div>
</div>
</div>
</header>
<div class="relative isolate overflow-hidden pt-12 lg:pt-16">
<div aria-hidden="true" class="absolute -top-[40rem] left-1/2 -z-10 h-[80rem] w-[80rem] -translate-x-1/2 rounded-full bg-hero-grid bg-[length:70px_70px] mask-image-radial-gradient"></div>
<div class="py-24 sm:py-32 lg:py-16">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:flex lg:max-w-none lg:items-center lg:gap-x-14">
<div class="max-w-xl lg:shrink-0 xl:max-w-2xl">
<div class="hidden sm:mb-8 sm:flex">
<div class="relative flex items-center justify-center gap-3 rounded-lg bg-white p-1 pr-2.5 text-sm font-medium leading-6 text-gray-600 shadow-sm ring-1 ring-gray-900/10 hover:bg-gray-50">
<span class="inline-block rounded-md bg-white px-2 ring-1 ring-inset ring-gray-900/10">New release</span>
<a href="#" class="inline-flex items-center justify-center gap-1">
<span class="absolute inset-0" aria-hidden="true"></span>
Explore our latest features
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<h1 class="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">Achieve more with less effort</h1>
<p class="mt-6 text-lg leading-8 text-gray-600 sm:max-w-md lg:max-w-none">Simplify your workflows and automate daily tasks with ease, saving time to focus on what matters most for your business.</p>
<div class="mt-10 flex items-center justify-start gap-6">
<a href="#" class="inline-flex items-center justify-center gap-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" />
<path d="M10.9 8.8L10.6577 8.66152C10.1418 8.36676 9.5 8.73922 9.5 9.33333L9.5 14.6667C9.5 15.2608 10.1418 15.6332 10.6577 15.3385L10.9 15.2L15.1 12.8C15.719 12.4463 15.719 11.5537 15.1 11.2L10.9 8.8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Demo
</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more</a>
</div>
</div>
<div class="mt-14 space-y-3 sm:-mt-16 sm:ml-32 lg:ml-0 lg:mt-0 lg:space-y-4">
<div class="ml-32 flex gap-x-3 lg:gap-x-4">
<div class="relative aspect-video h-32 shrink-0 overflow-hidden rounded-2xl lg:h-40">
<div aria-hidden="true" class="absolute inset-0 h-full w-full rounded-2xl ring-1 ring-inset ring-white/30"></div>
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
<div class="relative aspect-video h-32 shrink-0 overflow-hidden rounded-2xl lg:h-40">
<div aria-hidden="true" class="absolute inset-0 h-full w-full rounded-2xl ring-1 ring-inset ring-white/30"></div>
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1516062423079-7ca13cdc7f5a?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
<div class="relative aspect-video h-32 shrink-0 overflow-hidden rounded-2xl lg:h-40">
<div aria-hidden="true" class="absolute inset-0 h-full w-full rounded-2xl ring-1 ring-inset ring-white/30"></div>
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
</div>
<div class="flex gap-x-3 lg:gap-x-4">
<div class="relative aspect-video h-32 shrink-0 overflow-hidden rounded-2xl lg:h-40">
<div aria-hidden="true" class="absolute inset-0 h-full w-full rounded-2xl ring-1 ring-inset ring-white/30"></div>
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
<div class="relative aspect-video h-32 shrink-0 overflow-hidden rounded-2xl lg:h-40">
<div aria-hidden="true" class="absolute inset-0 h-full w-full rounded-2xl ring-1 ring-inset ring-white/30"></div>
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1552581234-26160f608093?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
<div class="relative aspect-video h-32 shrink-0 overflow-hidden rounded-2xl lg:h-40">
<div aria-hidden="true" class="absolute inset-0 h-full w-full rounded-2xl ring-1 ring-inset ring-white/30"></div>
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1507209696998-3c532be9b2b5?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
</div>
<div class="ml-16 flex gap-x-3 lg:gap-x-4">
<div class="relative aspect-video h-32 shrink-0 overflow-hidden rounded-2xl lg:h-40">
<div aria-hidden="true" class="absolute inset-0 h-full w-full rounded-2xl ring-1 ring-inset ring-white/30"></div>
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1559523182-a284c3fb7cff?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
<div class="relative aspect-video h-32 shrink-0 overflow-hidden rounded-2xl lg:h-40">
<div aria-hidden="true" class="absolute inset-0 h-full w-full rounded-2xl ring-1 ring-inset ring-white/30"></div>
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1542744095-fcf48d80b0fd?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
<div class="relative aspect-video h-32 shrink-0 overflow-hidden rounded-2xl lg:h-40">
<div aria-hidden="true" class="absolute inset-0 h-full w-full rounded-2xl ring-1 ring-inset ring-white/30"></div>
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1556761175-b413da4baf72?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
</div>
<div class="-ml-16 flex gap-x-3 lg:gap-x-4">
<div class="relative aspect-video h-32 shrink-0 overflow-hidden rounded-2xl lg:h-40">
<div aria-hidden="true" class="absolute inset-0 h-full w-full rounded-2xl ring-1 ring-inset ring-white/30"></div>
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
<div class="relative aspect-video h-32 shrink-0 overflow-hidden rounded-2xl lg:h-40">
<div aria-hidden="true" class="absolute inset-0 h-full w-full rounded-2xl ring-1 ring-inset ring-white/30"></div>
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1606857521015-7f9fcf423740?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
<div class="relative aspect-video h-32 shrink-0 overflow-hidden rounded-2xl lg:h-40">
<div aria-hidden="true" class="absolute inset-0 h-full w-full rounded-2xl ring-1 ring-inset ring-white/30"></div>
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1600427652630-f97cc4db10cd?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");
// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");
// Function to open the mobile menu
function openMenu() {
if (mobileMenu) {
mobileMenu.classList.remove("hidden");
mobileMenu.setAttribute("aria-hidden", "false");
}
if (backdrop) {
backdrop.classList.remove("hidden");
backdrop.setAttribute("aria-hidden", "false");
}
closeMenuButton.focus(); // Focus the close button for better accessibility
}
// Function to close the mobile menu
function closeMenu() {
if (mobileMenu) {
mobileMenu.classList.add("hidden");
mobileMenu.setAttribute("aria-hidden", "true");
}
if (backdrop) {
backdrop.classList.add("hidden");
backdrop.setAttribute("aria-hidden", "true");
}
mobileMenuButton.focus(); // Return focus to the open button
}
// Event listeners for opening and closing the menu
if (mobileMenuButton) {
mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}
// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeMenu();
}
});<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
</div>
<div class="lg:hidden">
<button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-8">
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Services</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Pricing</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">About</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
<a href="#" class="inline-block rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
<a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden" role="dialog" aria-modal="true">
<div id="backdrop" class="fixed inset-0 z-50"></div>
<div class="fixed inset-0 z-50 w-full bg-white sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between px-6 py-4">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
<button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="divide-y divide-gray-900/10 px-6">
<div class="space-y-0.5 py-5">
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Services</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Pricing</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">About</a>
</div>
<div class="space-y-3 py-6">
<a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
<a href="#" class="block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
</div>
</div>
</div>
</div>
</header>
<div class="pt-12 lg:pt-20">
<div class="relative isolate overflow-hidden">
<div class="mx-auto max-w-7xl">
<div class="relative isolate lg:w-full lg:max-w-2xl">
<svg class="absolute inset-y-0 -right-20 -z-10 hidden h-full lg:block" viewBox="0 0 1467 2315" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M0.665039 0H1466.17L1160.5 2315H0.665039V0Z" fill="white" />
</svg>
<div class="px-6 lg:px-8">
<div class="mx-auto max-w-2xl py-24 sm:py-32 lg:mx-0 lg:max-w-xl lg:py-56">
<div class="hidden sm:mb-8 sm:flex">
<div class="relative flex items-center justify-center gap-3 rounded-lg bg-white p-1 pr-2.5 text-sm font-medium leading-6 text-gray-600 shadow-sm ring-1 ring-gray-900/10 hover:bg-gray-50">
<span class="inline-block rounded-md bg-white px-2 ring-1 ring-inset ring-gray-900/10">New release</span>
<a href="#" class="inline-flex items-center justify-center gap-1">
<span class="absolute inset-0" aria-hidden="true"></span>
Explore our latest features
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<h1 class="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">Achieve more with less effort</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">Simplify your workflows and automate daily tasks with ease, saving time to focus on what matters most for your business.</p>
<div class="mt-10 flex items-center justify-start gap-6">
<a href="#" class="inline-flex items-center justify-center gap-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" />
<path d="M10.9 8.8L10.6577 8.66152C10.1418 8.36676 9.5 8.73922 9.5 9.33333L9.5 14.6667C9.5 15.2608 10.1418 15.6332 10.6577 15.3385L10.9 15.2L15.1 12.8C15.719 12.4463 15.719 11.5537 15.1 11.2L10.9 8.8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Demo
</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more</a>
</div>
</div>
</div>
</div>
<div class="lg:absolute lg:inset-0 lg:left-1/2 lg:-z-10 lg:w-1/2">
<div class="mx-auto aspect-[4/3] w-full sm:aspect-[3/2] lg:absolute lg:aspect-auto lg:h-full">
<img class="h-full w-full object-cover object-center" src="https://images.unsplash.com/photo-1531537571171-a707bf2683da?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");
// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");
// Function to open the mobile menu
function openMenu() {
if (mobileMenu) {
mobileMenu.classList.remove("hidden");
mobileMenu.setAttribute("aria-hidden", "false");
}
if (backdrop) {
backdrop.classList.remove("hidden");
backdrop.setAttribute("aria-hidden", "false");
}
closeMenuButton.focus(); // Focus the close button for better accessibility
}
// Function to close the mobile menu
function closeMenu() {
if (mobileMenu) {
mobileMenu.classList.add("hidden");
mobileMenu.setAttribute("aria-hidden", "true");
}
if (backdrop) {
backdrop.classList.add("hidden");
backdrop.setAttribute("aria-hidden", "true");
}
mobileMenuButton.focus(); // Return focus to the open button
}
// Event listeners for opening and closing the menu
if (mobileMenuButton) {
mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}
// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeMenu();
}
});Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
</div>
<div class="lg:hidden">
<button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-8">
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Services</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">Pricing</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-700">About</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
<a href="#" class="inline-block rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
<a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden" role="dialog" aria-modal="true">
<div id="backdrop" class="fixed inset-0 z-50"></div>
<div class="fixed inset-0 z-50 w-full bg-white sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between px-6 py-4">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
</a>
<button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="divide-y divide-gray-900/10 px-6">
<div class="space-y-0.5 py-5">
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Services</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Pricing</a>
<a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">About</a>
</div>
<div class="space-y-3 py-6">
<a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
<a href="#" class="block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
</div>
</div>
</div>
</div>
</header>
<div class="relative isolate overflow-hidden pt-12 lg:pt-16">
<div aria-hidden="true" class="absolute left-0 bottom-0 sm:bottom-auto sm:top-72 -z-30 h-80 w-80 sm:h-[40rem] sm:w-[40rem] -translate-x-1/2 rounded-full bg-gradient-to-b from-pink-400 to-amber-300/40 opacity-50 blur-3xl sm:blur-[8rem]"></div>
<div aria-hidden="true" class="absolute right-0 translate-x-1/2 top-0 -z-20 h-80 w-80 rounded-full bg-gradient-to-b from-pink-500 to-amber-400/40 opacity-50 blur-3xl"></div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="py-24 sm:py-32 lg:pb-0">
<h1 class="text-pretty text-center text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">Manage projects like a pro</h1>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">Organize tasks, track progress, and collaborate with clients effortlessly. Stay on top of deadlines and deliver your best work every time.</p>
<form method="POST" action="#" class="mx-auto mt-10 sm:max-w-md">
<div class="flex flex-col flex-wrap gap-4 sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<button type="submit" class="flex-none rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</button>
</div>
</form>
<div class="relative mx-auto -mb-[20rem] mt-16 max-w-4xl sm:mt-24 lg:-mb-8">
<div class="-m-2 mr-32 hidden rounded-3xl bg-gray-900 p-2 shadow-lg lg:block">
<img width="1920" height="1139" class="h-auto w-full rounded-2xl bg-white/10" src="https://htmlwind.com/assets/images/dashboard-screenshot.webp" alt="dashboard screenshot" />
</div>
<div class="lg:absolute lg:right-0 lg:top-28 mx-auto max-w-[18rem] lg:max-w-[14rem]">
<div class="-m-2 rounded-[2rem] bg-gray-900 p-2 shadow-lg">
<img width="880" height="1912" class="h-auto w-full rounded-3xl bg-white/10" src="https://htmlwind.com/assets/images/mobile-dashboard-screenshot.webp" alt="mobile dashboard screenshot" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");
// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");
// Function to open the mobile menu
function openMenu() {
if (mobileMenu) {
mobileMenu.classList.remove("hidden");
mobileMenu.setAttribute("aria-hidden", "false");
}
if (backdrop) {
backdrop.classList.remove("hidden");
backdrop.setAttribute("aria-hidden", "false");
}
closeMenuButton.focus(); // Focus the close button for better accessibility
}
// Function to close the mobile menu
function closeMenu() {
if (mobileMenu) {
mobileMenu.classList.add("hidden");
mobileMenu.setAttribute("aria-hidden", "true");
}
if (backdrop) {
backdrop.classList.add("hidden");
backdrop.setAttribute("aria-hidden", "true");
}
mobileMenuButton.focus(); // Return focus to the open button
}
// Event listeners for opening and closing the menu
if (mobileMenuButton) {
mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}
// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closeMenu();
}
});Frequently asked questions
-
Centered text, image on the right, split-screen, heroes with a big screenshot behind or below the text, phone mockup variants, ones with a small logo cloud underneath, and a signup form version. A handful also come in dark mode.
-
Yeah, they're all responsive. The two-column ones stack vertically on small screens, and the text sizes scale down properly. Nothing breaks.
-
They're just built dark, the background is dark-colored HTML, not a theme switch. If you want a toggle you'd need to wire that up yourself.
-
The heroes include a full navigation header with a mobile menu toggle. The vanilla JavaScript for opening and closing the mobile menu is already included in the component, no setup needed.
-
v3 by default. There's a toggle at the top of the page that rewrites the class names to v4 syntax if you need it.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.