Use these Tailwind CSS hero section examples to add important messaging, product photos, and call-to-actions to the top of your website. These hero examples include a variety of different styles and layouts.
<div class="bg-[url(https://images.unsplash.com/photo-1559163499-413811fb2344?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)] bg-no-repeat bg-cover bg-center h-full flex items-center justify-center">
<div class="absolute inset-0 bg-black/70"></div>
<div class="max-w-7xl mx-auto px-6 py-20 text-center">
<div class="navbar navbar-expand-lg mx-auto py-5 fixed top-0 left-0 right-0 z-20">
<a class="navbar-brand flex items-center gap-2" href="#">
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg" alt="Logo" class="w-8 h-8" />
<h5 class="mb-0 text-white/80 font-semibold flex">hummingbird</h5>
</a>
<a href="#" class="btn btn-primary px-6 rounded-full lg:order-1">Login</a>
<div class="collapse navbar-collapse py-6 lg:py-0 grow-0 bg-black lg:bg-transparent rounded-lg" id="navbarNavAltMarkup">
<div class="navbar-nav lg:gap-8">
<a class="nav-link text-white/70 active:text-white active" aria-current="page" href="#">Home</a>
<a class="nav-link text-white/70 active:text-white" href="#">Features</a>
<a class="nav-link text-white/70 active:text-white" href="#">Pricing</a>
</div>
</div>
</div>
<div class="relative z-1 max-w-4xl">
<span class="badge badge-outline-primary px-2 py-1.5 mb-10">Launch better products, faster</span>
<h1 class="text-5xl md:text-7xl font-semibold text-white leading-none mb-6">Future of digital business</h1>
<p class="md:text-lg text-white/70">Accelerate development with tools that eliminate repetitive tasks, reduce complexity, and provide the flexibility needed to grow your product as your business evolves.</p>
<div class="flex items-center justify-center gap-4 mb-14">
<div class="avatar-group justify-center">
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_1.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_2.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_3.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_4.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm">
<div class="avatar-name bg-primary text-base"><span>+99</span></div>
</div>
</div>
<div class="border-l border-white ps-4">
<p class="text-xs text-white mb-0">trusted by clients</p>
<div class="flex">
<svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg>
</div>
</div>
</div>
<div class="flex gap-3 flex-wrap justify-center">
<a href="#" class="btn btn-primary btn-lg">Get started</a>
<a href="#" class="btn btn-outline btn-lg">View docs</a>
</div>
</div>
</div>
</div>
<div class="h-full gap-6 flex relative">
<div class="max-w-4xl py-20 px-6 flex flex-col items-center lg:items-start justify-center text-center lg:text-start">
<a class="flex items-center gap-2 no-underline mb-12" href="#">
<img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg" alt="Logo" class="w-8 h-8" />
<h6 class="mb-0 text-muted font-semibold flex">hummingbird</h6>
</a>
<span class="badge badge-outline-primary px-2 py-1.5 mb-10">Launch better products, faster</span>
<h1 class="text-5xl md:text-7xl font-semibold leading-none mb-6">Future of your digital business</h1>
<p class="md:text-lg text-muted">Accelerate development with tools that eliminate repetitive tasks, reduce complexity, and provide the flexibility needed to grow your product as your business evolves.</p>
<div class="flex items-center justify-center gap-4 mb-14 ms-3">
<div class="avatar-group justify-center">
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_1.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_2.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_3.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_4.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm">
<div class="avatar-name bg-primary text-base"><span>+99</span></div>
</div>
</div>
<div class="border-l border-subtle ps-4">
<p class="text-xs text-muted mb-0">trusted by clients</p>
<div class="flex">
<svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg>
</div>
</div>
</div>
<div class="flex gap-3">
<a href="#" class="btn btn-primary btn-lg">Get started</a>
<a href="#" class="btn btn-outline btn-lg">View docs</a>
</div>
</div>
<img class="hidden lg:block w-[47vw] object-cover" src="https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?q=80&w=1055&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
<div class="max-w-7xl mx-auto">
<nav class="navbar navbar-expand-lg border-b border-subtle px-6 py-4">
<a class="navbar-brand flex items-center gap-2 me-8" href="#">
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHero3" aria-controls="navbarHero3" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg" alt="Logo" class="w-8 h-8" />
<h5 class="mb-0 font-semibold flex">hummingbird</h5>
</a>
<button class="btn btn-primary rounded-full px-6 lg:order-1">Login</button>
<div class="collapse navbar-collapse" id="navbarHero3">
<ul class="navbar-nav me-auto mb-2 lg:mb-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#">Company</a></li>
</ul>
</div>
</nav>
<div class="py-15 px-6">
<div class="max-w-4xl text-center mx-auto">
<span class="badge badge-outline-primary px-2 py-1.5 mb-8">Launch better products, faster</span>
<h1 class="text-5xl font-semibold leading-none mb-6">Future of digital business</h1>
<p class="">Accelerate development with tools that eliminate repetitive tasks, reduce complexity, and provide the flexibility needed to grow your product as your business evolves.</p>
<div class="flex items-center justify-center gap-4 mb-14 ms-3">
<div class="avatar-group justify-center">
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_1.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_2.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_3.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_4.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm">
<div class="avatar-name bg-primary text-base"><span>+99</span></div>
</div>
</div>
<div class="border-l border-subtle ps-4">
<p class="text-xs text-muted mb-0">trusted by clients</p>
<div class="flex">
<svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg>
</div>
</div>
</div>
<div class="flex gap-3 flex-wrap justify-center">
<a href="#" class="btn btn-primary btn-lg">Get started</a>
<a href="#" class="btn btn-outline btn-lg">View docs</a>
</div>
</div>
<div class="max-w-5xl mx-auto p-3 rounded-2xl shadow my-10"><img class="h-75 object-cover w-full rounded-2xl" src="https://images.unsplash.com/photo-1603201667141-5a2d4c673378?q=80&w=2096&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" /></div>
<div class="grid grid-cols-5 max-w-5xl gap-6 mx-auto items-center text-center">
<img src="https://www.adobe.com/federal/assets/svgs/adobe-logo.svg" alt="" class="size-20 mx-auto" />
<img src="https://static.xx.fbcdn.net/rsrc.php/y9/r/tL_v571NdZ0.svg" alt="" class="size-20 mx-auto" />
<img src="https://themewagon.com/wp-content/uploads/2021/03/Frame-172-1.png" alt="" class="h-8 mx-auto" />
<img src="https://onesuite.io/wp-content/uploads/2024/09/OneSuite-Logo.png" alt="" class="h-12 mx-auto" />
<img src="https://onedesk.so/_astro/logo.BAosC44E.png" alt="" class="h-4 mx-auto" />
</div>
</div>
</div>
<div class="max-w-7xl mx-auto">
<nav class="navbar navbar-expand-lg border-b border-subtle px-6 py-4">
<a class="navbar-brand flex items-center gap-2 me-8" href="#">
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHero4" aria-controls="navbarHero4" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg" alt="Logo" class="w-8 h-8" />
<h5 class="mb-0 font-semibold hidden sm:block">hummingbird</h5>
</a>
<div class="flex gap-2 lg:order-1">
<button class="btn btn-subtle-primary btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<button class="btn btn-subtle-primary btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M17 18a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2c0-1.11.89-2 2-2M1 2h3.27l.94 2H20a1 1 0 0 1 1 1c0 .17-.05.34-.12.5l-3.58 6.47c-.34.61-1 1.03-1.75 1.03H8.1l-.9 1.63l-.03.12a.25.25 0 0 0 .25.25H19v2H7a2 2 0 0 1-2-2c0-.35.09-.68.24-.96l1.36-2.45L3 4H1zm6 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2c0-1.11.89-2 2-2m9-7l2.78-5H6.14l2.36 5z" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarHero4">
<ul class="navbar-nav me-auto mb-2 lg:mb-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#">Company</a></li>
</ul>
</div>
</nav>
<div class="px-6 pt-10 pb-6">
<div class="md:flex items-center justify-between gap-4 mb-10">
<h2 class="font-normal mb-6 md:mb-0">Refined Design for a Modern Lifestyle.</h2>
<a href="#" class="btn btn-primary btn-lg rounded-full text-nowrap">
Shop now
<svg class="flex-1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z" stroke-width="0.5" stroke="currentColor"></path></svg>
</a>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="h-100 rounded-2xl overflow-hidden relative lg:col-span-2">
<img src="https://images.unsplash.com/photo-1772182104431-5a00158fd8e2?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="h-full w-full object-cover" />
<div class="absolute inset-0 bg-linear-to-t from-black to-transparent p-8 flex justify-end items-start flex-col">
<h3 class="max-md:text-2xl text-warning font-medium mb-0">Whooping 60% Off</h3>
<span class="text-lg text-white">on everyday items</span>
<a href="#" class="btn btn-warning btn-lg px-8 mt-6 rounded-full">Shop</a>
</div>
</div>
<div class="h-100 rounded-2xl overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1758186334264-d1ab8a079aa2?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="h-full w-full object-cover" />
<div class="absolute inset-0 bg-linear-to-t from-black to-transparent p-8 flex justify-end items-start flex-col">
<h3 class="max-md:text-2xl text-primary font-medium mb-0">Get 20% Off</h3>
<span class="text-lg text-white">on iPhone 17</span>
<a href="#" class="btn btn-primary btn-lg px-8 mt-6 rounded-full">Buy</a>
</div>
</div>
<div class="h-100 rounded-2xl overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1434493789847-2f02dc6ca35d?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="h-full w-full object-cover" />
<div class="absolute inset-0 bg-linear-to-t from-black to-transparent p-8 flex justify-end items-start flex-col">
<h3 class="max-md:text-2xl text-info font-medium mb-0">Smart watch 15% Off</h3>
<span class="text-lg text-white">for today</span>
<a href="#" class="btn btn-info btn-lg px-8 mt-6 rounded-full">Buy</a>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg max-w-7xl mx-auto ps-6 pe-3">
<a class="navbar-brand flex items-center gap-2" href="#">
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHero5" aria-controls="navbarHero5" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg" alt="Logo" class="w-8 h-8" />
<h5 class="mb-0 font-semibold hidden sm:block">hummingbird</h5>
</a>
<div class="flex lg:order-1">
<button class="btn btn-icon btn-icon-neutral">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M13 21q-.425 0-.712-.288T12 20t.288-.712T13 19h6V5h-6q-.425 0-.712-.288T12 4t.288-.712T13 3h6q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm-1.825-8H4q-.425 0-.712-.288T3 12t.288-.712T4 11h7.175L9.3 9.125q-.275-.275-.275-.675t.275-.7t.7-.313t.725.288L14.3 11.3q.3.3.3.7t-.3.7l-3.575 3.575q-.3.3-.712.288T9.3 16.25q-.275-.3-.262-.712t.287-.688z" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<button class="btn btn-icon btn-icon-neutral">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M10 21h4c0 1.1-.9 2-2 2s-2-.9-2-2m11-2v1H3v-1l2-2v-6c0-3.1 2-5.8 5-6.7V4c0-1.1.9-2 2-2s2 .9 2 2v.3c3 .9 5 3.6 5 6.7v6zm-4-8c0-2.8-2.2-5-5-5s-5 2.2-5 5v7h10z" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<button class="btn btn-icon btn-icon-neutral">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarHero5">
<ul class="navbar-nav mx-auto lg:gap-4 mb-2 lg:mb-0">
<li class="nav-item"><a class="nav-link text-sm active:text-primary active" aria-current="page" href="#">Hotel</a></li>
<li class="nav-item"><a class="nav-link text-sm active:text-primary">Flight</a></li>
<li class="nav-item"><a class="nav-link text-sm active:text-primary">Trip</a></li>
<li class="nav-item"><a class="nav-link text-sm active:text-primary">Event</a></li>
<li class="nav-item"><a class="nav-link text-sm active:text-primary">Package</a></li>
</ul>
</div>
</nav>
<div class="relative h-150 w-full overflow-hidden">
<video autoplay loop muted playsinline class="absolute inset-0 w-full h-full object-cover">
<source src="https://www.pexels.com/download/video/8968044/" type="video/mp4" />
Your browser does not support the video tag.
</video>
<div class="absolute inset-0 bg-black/50 flex items-center justify-center">
<div class="text-white text-center px-6">
<h1 class="max-md:text-5xl font-normal">
Discover Your
<br />
Next
<span class="text-warning">Adventure</span>
</h1>
<p class="mb-6 md:text-lg">Explore the world with our exclusive travel deals and packages.</p>
<a href="#" class="btn btn-primary btn-lg rounded-full text-nowrap">Book Now</a>
</div>
</div>
</div>