Explore a variety of Hummingbird pricing plan examples and templates to help you build responsive and visually appealing web pages. These pricing plans include a range of different styles and structures to suit various types of websites and applications.
<div class="max-w-7xl mx-auto py-10 px-6">
<h5 class="font-semibold">Pricing Options</h5>
<p class="text-muted">
Get the power, control, and customization you need to manage your
<br />
team’s and organization’s projects.
</p>
<a class="link-primary link-hover" href="#">Have questions? Chat with us</a>
<div class="grid lg:grid-cols-3 mt-8 items-center">
<div class="card bg-default rounded-4xl border-0 max-w-100 sm:max-w-140 w-full mx-auto">
<div class="card-body text-center p-10">
<div class="h-8 mb-10 hidden lg:block"></div>
<div class="sm:flex lg:block gap-8">
<svg class="text-info-light mx-auto sm:mx-0 lg:mx-auto mb-8 sm:mb-0 lg:mb-8" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 21 21"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m1.5 9l16-6.535L14.7 17zm16-6.5l-11 10m0 0v5l3-3" stroke-width="1"></path></svg>
<div>
<div class="text-center sm:flex lg:block items-center gap-4 mb-12 sm:mb-4 lg:mb-12">
<h6 class="sm:mb-0 lg:mb-2">Starter</h6>
<h4 class="text-default sm:mb-0 lg:mb-2">Free</h4>
</div>
<ul class="list-none ps-0 w-max sm:w-auto lg:w-max mx-auto sm:columns-2 lg:columns-1">
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Unlimited leads
</li>
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Unlimited emails
</li>
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
No HB's branding
</li>
<li class="flex items-center gap-1 py-1.25 text-subtle">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M7 13q-.425 0-.712-.288T6 12t.288-.712T7 11h10q.425 0 .713.288T18 12t-.288.713T17 13z" stroke-width="0.5" stroke="currentColor"></path></svg>
Email automation
</li>
<li class="flex items-center gap-1 py-1.25 text-subtle">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M7 13q-.425 0-.712-.288T6 12t.288-.712T7 11h10q.425 0 .713.288T18 12t-.288.713T17 13z" stroke-width="0.5" stroke="currentColor"></path></svg>
Custom fields
</li>
<li class="flex items-center gap-1 py-1.25 text-subtle">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M7 13q-.425 0-.712-.288T6 12t.288-.712T7 11h10q.425 0 .713.288T18 12t-.288.713T17 13z" stroke-width="0.5" stroke="currentColor"></path></svg>
Pro templates
</li>
<li class="flex items-center gap-1 py-1.25 text-subtle">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M7 13q-.425 0-.712-.288T6 12t.288-.712T7 11h10q.425 0 .713.288T18 12t-.288.713T17 13z" stroke-width="0.5" stroke="currentColor"></path></svg>
Export leads and reports
</li>
</ul>
<button class="btn btn-subtle-primary w-full mt-9">Start free trial</button>
</div>
</div>
</div>
</div>
<div class="card bg-subtle rounded-4xl border-0 max-w-100 sm:max-w-140 w-full mx-auto">
<div class="card-body text-center p-10">
<div class="bg-warning-light/15 text-warning-dark font-medium h-8 border border-warning-light/20 flex items-center justify-center px-3 rounded-full mb-10 sm:mb-4 lg:mb-10 sm:w-max lg:w-auto sm:ms-24 lg:ms-auto">Best value</div>
<div class="sm:flex lg:block gap-8">
<svg class="text-warning-light mx-auto sm:mx-0 lg:mx-auto mb-8 sm:mb-0 lg:mb-8" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24"><path fill="currentColor" d="M6.327 19q-.212 0-.356-.144t-.144-.357t.144-.356t.356-.143h11.346q.213 0 .356.144t.144.357t-.144.356t-.356.143zm.777-2.884q-.59 0-1.028-.37t-.562-.94L4.32 8.475q-.05.02-.112.022q-.063.003-.113.003q-.471 0-.783-.32T3 7.404q0-.473.313-.804q.312-.33.784-.33t.803.33q.33.331.33.804q0 .104-.008.193t-.059.176l2.76 1.111q.192.077.385.02q.192-.058.326-.231l2.702-3.66q-.217-.142-.344-.376q-.127-.233-.127-.503q0-.472.331-.803q.33-.331.803-.331q.472 0 .804.33t.332.8q0 .284-.127.512q-.127.23-.344.371l2.702 3.66q.134.173.326.23q.193.059.385-.018l2.76-1.112q-.027-.08-.047-.175q-.02-.096-.02-.194q0-.473.312-.804q.312-.33.784-.33t.803.33q.331.331.331.804q0 .454-.332.775t-.806.321q-.038 0-.086-.012t-.106-.013l-1.184 6.33q-.125.572-.562.941t-1.028.37zm.019-1h9.754q.212 0 .385-.135t.211-.346l1.13-5.656l-2.15.846q-.514.217-1.043.075t-.862-.61L12 5.804L9.452 9.29q-.333.468-.862.61t-1.044-.075l-2.15-.846l1.131 5.656q.038.211.211.346t.385.135m4.877 0" stroke-width="0.5" stroke="currentColor"></path></svg>
<div>
<div class="text-center sm:flex lg:block items-center gap-4 mb-12 sm:mb-4 lg:mb-12">
<h6 class="sm:mb-0 lg:mb-2">Pricing Pro</h6>
<h4 class="text-default mb-12 sm:mb-0 lg:mb-12 flex items-center gap-2 justify-center">
$19.99
<span class="text-xs font-normal">/ month</span>
</h4>
</div>
<ul class="list-none ps-0 w-max sm:w-auto lg:w-max mx-auto sm:columns-2 lg:columns-1">
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Unlimited leads
</li>
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Unlimited emails
</li>
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
No HB's branding
</li>
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Email automation
</li>
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Custom fields
</li>
<li class="flex items-center gap-1 py-1.25 text-subtle">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M7 13q-.425 0-.712-.288T6 12t.288-.712T7 11h10q.425 0 .713.288T18 12t-.288.713T17 13z" stroke-width="0.5" stroke="currentColor"></path></svg>
Pro templates
</li>
<li class="flex items-center gap-1 py-1.25 text-subtle">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M7 13q-.425 0-.712-.288T6 12t.288-.712T7 11h10q.425 0 .713.288T18 12t-.288.713T17 13z" stroke-width="0.5" stroke="currentColor"></path></svg>
Export leads and reports
</li>
</ul>
<button class="btn btn-primary w-full mt-9">Sign up</button>
</div>
</div>
</div>
</div>
<div class="card bg-default rounded-4xl border-0 max-w-100 sm:max-w-140 w-full mx-auto">
<div class="card-body text-center p-10">
<div class="h-8 mb-10 hidden lg:block"></div>
<div class="sm:flex lg:block gap-8">
<svg class="text-primary-light mx-auto sm:mx-0 lg:mx-auto mb-8 sm:mb-0 lg:mb-8" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M40.5 20.76V40.5a2 2 0 0 1-2 2h-29a2 2 0 0 1-2-2V20.76m-2-6.37h37v6.369h-37zm18.5 0c-5.748-8.874-9.112-10.892-12.244-7c-3.27 4.064 4.029 7 12.244 7m0 0l-5.201-2.649M24 14.39c5.748-8.874 9.112-10.892 12.244-7c3.27 4.064-4.029 7-12.244 7m0 0l5.201-2.649" stroke-width="2"></path></svg>
<div>
<div class="text-center sm:flex lg:block items-center gap-4 mb-12 sm:mb-4 lg:mb-12">
<h6 class="sm:mb-0 lg:mb-2">Pricing Saver</h6>
<h4 class="text-default mb-12 sm:mb-0 lg:mb-12 flex items-center gap-2 justify-center">
$25.99
<span class="text-xs font-normal">/ month</span>
</h4>
</div>
<ul class="list-none ps-0 w-max sm:w-auto lg:w-max mx-auto sm:columns-2 lg:columns-1">
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Unlimited leads
</li>
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Unlimited emails
</li>
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
No HB's branding
</li>
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Email automation
</li>
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Custom fields
</li>
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Pro templates
</li>
<li class="flex items-center gap-1 py-1.25">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Export leads and reports
</li>
</ul>
<button class="btn btn-subtle-primary w-full mt-9">Sign up</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border-0 bg-default p-6">
<div class="card-header border-subtle px-0 flex justify-between items-center">
<h6 class="font-semibold text-base">Billed Annually</h6>
<div class="form-check form-switch">
<label class="form-check-label">Monthly</label>
<input class="form-check-input" type="checkbox" value="" id="pricingSwitch2" />
<label class="form-check-label">Yearly</label>
</div>
</div>
<div class="card-body p-0">
<div class="grid lg:grid-cols-3">
<div class="card border-0 bg-default rounded-none max-w-130 w-full mx-auto">
<div class="card-body p-6">
<div class="border-b border-subtle text-center pb-6 mb-6">
<h5 class="font-medium text-default">Single</h5>
<p>For teams that need to create project plans with confidence.</p>
<h4 class="my-6">
$0
<span class="text-sm font-normal">/ month</span>
</h4>
<button class="btn btn-outline-primary">Start Free Trial</button>
</div>
<h6 class="text-base font-semibold text-default mb-3">Track team projects with free:</h6>
<ul class="list-none ps-0">
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Timeline
</li>
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Advanced Search
</li>
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Custom fields
<span class="badge badge-subtle-success">New</span>
</li>
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Task dependencies
</li>
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Private teams & projects
</li>
</ul>
<a class="text-base no-underline" href="#">More about single</a>
</div>
</div>
<div class="card border-0 bg-primary-lighter rounded-none max-w-130 w-full mx-auto">
<div class="card-body p-6">
<div class="border-b border-primary-light text-center pb-6 mb-6">
<h5 class="font-medium text-default">Business</h5>
<p>For teams and companies that need to manage work across initiatives.</p>
<h4 class="my-6">
$29
<span class="text-sm font-normal">/ month</span>
</h4>
<button class="btn btn-primary">Get Business</button>
</div>
<h6 class="text-base font-semibold text-default mb-3">Everything in Premium, plus:</h6>
<ul class="list-none ps-0">
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Portfolios
</li>
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Lock custom fields
</li>
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Onboarding plan
</li>
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Resource Management
</li>
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Lock custom fields
</li>
</ul>
<a class="text-base no-underline" href="#">More about Business</a>
</div>
</div>
<div class="card border-0 bg-default rounded-none max-w-130 w-full mx-auto">
<div class="card-body p-6">
<div class="border-b border-subtle text-center pb-6 mb-6">
<h5 class="font-medium text-default">Extended</h5>
<p>For organizations that need additional security and support.</p>
<h4 class="my-6">
$99
<span class="text-sm font-normal">/ month</span>
</h4>
<button class="btn btn-outline-primary">Purchase</button>
</div>
<h6 class="text-base font-semibold text-default mb-3">Everything in Business, plus:</h6>
<ul class="list-none ps-0">
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Portfolios
</li>
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Tags
<span class="badge badge-subtle-primary">Coming Soon</span>
</li>
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Onboarding plan
</li>
<li class="text-base flex items-center py-1 gap-2">
<svg class="text-success" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z" stroke-width="0.5" stroke="currentColor"></path></svg>
Resource Management
</li>
</ul>
<a class="text-base no-underline" href="#">More about Extended</a>
</div>
</div>
</div>
</div>
<div class="card-footer text-center py-6 border-t border-subtle">
<h6 class="font-semibold">Looking for personal or small team task management?</h6>
<p class="text-base">Try the basic version of Hummingbird</p>
</div>
</div>
<div class="max-w-7xl mx-auto py-10 px-6">
<div class="text-center max-w-3xl mx-auto mb-16">
<div class="badge badge-subtle-primary mb-4 px-4">Pricing that scales with you</div>
<h3 class="mb-4 text-default">Simple, transparent pricing. No surprises.</h3>
<p class="text-lg text-muted">Start for free, then upgrade when you need more power. All plans include standard support and core features.</p>
<!-- Monthly / Annual Toggle -->
<div class="form-check form-switch justify-center mt-8">
<label class="form-check-label">Monthly</label>
<input class="form-check-input" type="checkbox" value="" id="switchCheckedLabel" checked />
<label class="form-check-label">Annually</label>
</div>
</div>
<div class="grid lg:grid-cols-3 mt-8 items-stretch gap-8">
<!-- Starter Plan -->
<div class="card bg-default rounded-4xl max-w-103 w-full mx-auto">
<div class="card-body p-10 flex flex-col h-full">
<h6>Starter</h6>
<p class="text-muted text-sm mb-6">Perfect for individuals and hobbyists starting their journey.</p>
<h4 class="text-default mb-10 flex items-baseline gap-1">
$0
<span class="text-sm font-normal text-muted">/ forever</span>
</h4>
<p class="text-sm font-medium text-default mb-4">What's included:</p>
<ul class="list-none ps-0 mb-6">
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Up to 1,000 leads
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Basic email support
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Standard integrations
</li>
<li class="flex items-center gap-2 py-1.25 text-subtle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M7 13q-.425 0-.712-.288T6 12t.288-.712T7 11h10q.425 0 .713.288T18 12t-.288.713T17 13z"></path></svg>
Custom branding
</li>
<li class="flex items-center gap-2 py-1.25 text-subtle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M7 13q-.425 0-.712-.288T6 12t.288-.712T7 11h10q.425 0 .713.288T18 12t-.288.713T17 13z"></path></svg>
Advanced analytics
</li>
</ul>
<button class="btn btn-subtle-primary w-full mt-auto">Get Started</button>
</div>
</div>
<!-- Pro Plan -->
<div class="card bg-subtle rounded-4xl border border-primary relative max-w-103 w-full mx-auto">
<div class="absolute top-0 inset-x-0 flex justify-center -translate-y-1/2"><div class="badge badge-primary badge-lg">Most Popular</div></div>
<div class="card-body p-10 flex flex-col h-full">
<h6 class="text-primary mt-2">Professional</h6>
<p class="text-muted text-sm mb-6">Everything you need to automate workflows and scale your team.</p>
<h4 class="text-default mb-10 flex items-baseline gap-1">
$19
<span class="text-sm font-normal text-muted">/ month</span>
</h4>
<p class="text-sm font-medium text-default mb-4">Everything in Starter, plus:</p>
<ul class="list-none ps-0 mb-6">
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Unlimited leads & contacts
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Remove branding
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Advanced email automation
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Custom fields, forms & tracking
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Priority 24/7 support
</li>
</ul>
<button class="btn btn-primary w-full mt-auto mt-auto">Start free trial</button>
</div>
</div>
<!-- Enterprise Plan -->
<div class="card bg-default rounded-4xl max-w-103 w-full mx-auto">
<div class="card-body p-10 flex flex-col h-full">
<h6>Enterprise</h6>
<p class="text-muted text-sm mb-6">Dedicated power and security for large-scale operations.</p>
<h4 class="text-default mb-10 flex items-baseline gap-1">
$49
<span class="text-sm font-normal text-muted">/ month</span>
</h4>
<p class="text-sm font-medium text-default mb-4">Everything in Pro, plus:</p>
<ul class="list-none ps-0 mb-6">
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Dedicated account manager
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Custom SLAs & reporting
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Advanced security options (SSO)
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Unlimited data & export
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Early access to new features
</li>
</ul>
<button class="btn btn-subtle-primary w-full mt-auto">Contact Sales</button>
</div>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto py-10 px-6">
<div class="text-center max-w-2xl mx-auto mb-16">
<div class="badge badge-subtle-info mb-4 px-4">Flexible Plans</div>
<h3 class="mb-4 text-default">Plans tailored for every team size</h3>
<p class="text-lg text-muted">Whether you're a soaring startup or an established enterprise, we have a plan perfectly suited to match your scale.</p>
<!-- Monthly / Annual Toggle -->
<div class="form-check form-switch justify-center mt-8">
<label class="form-check-label">Monthly</label>
<input class="form-check-input" type="checkbox" value="" id="switchPricing4" checked />
<label class="form-check-label">Annually</label>
</div>
</div>
<div class="grid md:grid-cols-2 gap-8 items-stretch mt-12">
<!-- Free Plan -->
<div class="card bg-linear-to-b from-info/5 to-transparent rounded-4xl relative">
<div class="absolute inset-0 overflow-hidden pointer-events-none rounded-4xl">
<svg class="absolute -top-4 right-0 w-40 h-40 text-info opacity-[0.04]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17,8C8,10 5.9,16.17 4.01,20.29c-0.2,0.43 0.47,0.84 2.14,0.71C12,20 19,16 19,8H17z"></path></svg>
</div>
<div class="card-body p-8 sm:p-10 flex flex-col h-full">
<h6>Basic</h6>
<p class="text-muted text-sm mb-6">A great starting point for individuals and hobbyists.</p>
<h4 class="text-default mb-8 flex items-baseline gap-1">
$0
<span class="text-sm font-normal text-muted">/ month</span>
</h4>
<p class="text-sm font-medium text-default mb-4">Core features:</p>
<ul class="list-none ps-0 mb-6">
<li class="flex items-center gap-2 py-1.25">
<svg class="text-info" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
1 Project
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-info" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Basic analytics
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-info" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Community support
</li>
</ul>
<button class="btn btn-subtle-info w-full mt-auto">Get Started Free</button>
</div>
</div>
<!-- Starter Plan -->
<div class="card bg-linear-to-b from-info/10 to-transparent rounded-4xl relative">
<div class="absolute inset-0 overflow-hidden pointer-events-none rounded-4xl">
<svg class="absolute top-4 right-0 w-40 h-40 text-info opacity-[0.04]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6c-1.11 0-2 .89-2 2v16c0 1.11.89 2 2 2h12c1.11 0 2-.89 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"></path></svg>
</div>
<div class="card-body p-8 sm:p-10 flex flex-col h-full">
<h6>Starter</h6>
<p class="text-muted text-sm mb-6">For small teams that need more power and coordination.</p>
<h4 class="text-default mb-8 flex items-baseline gap-1">
$12
<span class="text-sm font-normal text-muted">/ month</span>
</h4>
<p class="text-sm font-medium text-default mb-4">Everything in Basic, plus:</p>
<ul class="list-none ps-0 mb-6">
<li class="flex items-center gap-2 py-1.25">
<svg class="text-info" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Up to 10 Projects
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-info" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Advanced analytics
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-info" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Priority email support
</li>
</ul>
<button class="btn btn-subtle-info w-full mt-auto">Subscribe Now</button>
</div>
</div>
<!-- Pro Plan -->
<div class="card bg-linear-to-b from-primary/10 to-transparent border-primary rounded-4xl relative">
<div class="absolute inset-0 overflow-hidden pointer-events-none rounded-4xl">
<svg class="absolute top-4 right-6 w-40 h-40 text-primary opacity-[0.04]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2l3 9h9l-7 5 3 9-8-6-8 6 3-9-7-5h9z"></path></svg>
</div>
<div class="absolute top-0 inset-x-0 flex justify-center -translate-y-1/2 z-20"><div class="badge badge-primary badge-lg">Most Popular</div></div>
<div class="card-body p-8 sm:p-10 flex flex-col h-full">
<h6 class="text-primary mt-2">Professional</h6>
<p class="text-muted text-sm mb-6">Designed for growing businesses with complex needs.</p>
<h4 class="text-default mb-8 flex items-baseline gap-1">
$39
<span class="text-sm font-normal text-muted">/ month</span>
</h4>
<p class="text-sm font-medium text-default mb-4">Everything in Starter, plus:</p>
<ul class="list-none ps-0 mb-6">
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Unlimited Projects
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Remove branding
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Custom integrations & API
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
24/7 Phone support
</li>
</ul>
<button class="btn btn-primary w-full mt-auto">Start 14-day trial</button>
</div>
</div>
<!-- Enterprise Plan -->
<div class="card bg-linear-to-b from-info/5 to-transparent rounded-4xl relative">
<div class="absolute inset-0 overflow-hidden pointer-events-none rounded-4xl">
<svg class="absolute top-4 right-4 w-40 h-40 text-info opacity-[0.04]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path></svg>
</div>
<div class="card-body p-8 sm:p-10 flex flex-col h-full">
<h6>Enterprise</h6>
<p class="text-muted text-sm mb-6">Dedicated power and security for large-scale operations.</p>
<h4 class="text-default mb-8 flex items-baseline gap-1">
$99
<span class="text-sm font-normal text-muted">/ month</span>
</h4>
<p class="text-sm font-medium text-default mb-4">Everything in Pro, plus:</p>
<ul class="list-none ps-0 mb-6">
<li class="flex items-center gap-2 py-1.25">
<svg class="text-info" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Dedicated account manager
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-info" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Custom SLAs & reporting
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-info" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Advanced security options (SSO)
</li>
<li class="flex items-center gap-2 py-1.25">
<svg class="text-info" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
Unlimited data & export
</li>
</ul>
<button class="btn btn-subtle-info w-full mt-auto">Contact Sales</button>
</div>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto py-16 px-6">
<div class="text-center max-w-2xl mx-auto mb-16">
<div class="badge badge-subtle-primary mb-4 px-2 py-1">Feature Match</div>
<h3 class="mb-4 text-default">Compare all features</h3>
<p class="text-lg text-muted">A detailed features comparison to help you choose the best plan for your team.</p>
</div>
<div class="overflow-x-auto">
<table class="table">
<thead>
<tr class="bg-subtle">
<th class="w-1/4 p-6 align-bottom border-0 z-10">
<h4 class="text-default mb-2">Plans</h4>
<p class="text-sm text-muted font-normal mb-0 text-nowrap">See what's included at each tier.</p>
</th>
<th class="w-1/4 p-6 text-center align-bottom border-0 min-w-50">
<h6 class="text-muted text-sm mb-2">Starter</h6>
<h5 class="text-default font-bold mb-6">
$29
<span class="text-sm text-muted font-normal">/mo</span>
</h5>
<button class="btn btn-subtle-primary w-full btn-sm">Choose Starter</button>
</th>
<th class="w-1/4 p-6 text-center align-bottom border-0 min-w-50">
<div class="inline-flex mb-2 items-center gap-2">
<h6 class="text-primary text-sm mb-0">Professional</h6>
<span class="badge badge-primary badge-sm">Popular</span>
</div>
<h5 class="text-default font-bold mb-6">
$99
<span class="text-sm text-muted font-normal">/mo</span>
</h5>
<button class="btn btn-primary w-full btn-sm shadow-sm">Upgrade to Pro</button>
</th>
<th class="w-1/4 p-6 text-center align-bottom border-0 min-w-50">
<h6 class="text-muted text-sm mb-2">Enterprise</h6>
<h5 class="text-default font-bold mb-6 hover:text-primary transition-colors">Custom</h5>
<button class="btn btn-subtle-primary w-full btn-sm">Contact Sales</button>
</th>
</tr>
</thead>
<tbody>
<tr><td colspan="4" class="font-bold text-default">Core Platform</td></tr>
<tr>
<td>Active Projects</td>
<td class="text-center">10</td>
<td class="text-center">100</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<td>Team Members</td>
<td class="text-center">Up to 5</td>
<td class="text-center">Up to 50</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<td>File Storage</td>
<td class="text-center">5GB</td>
<td class="text-center">100GB</td>
<td class="text-center">Custom Limits</td>
</tr>
<tr><td colspan="4" class="font-bold text-default">Analytics & Reporting</td></tr>
<tr>
<td>Historical Data</td>
<td class="text-center">30 days</td>
<td class="text-center">1 year</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<td>Custom Dashboards</td>
<td class="text-center">—</td>
<td class="text-center">
<svg class="w-5 h-5 text-success mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
</td>
<td class="text-center">
<svg class="w-5 h-5 text-success mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
</td>
</tr>
<tr>
<td>Scheduled Reports</td>
<td class="text-center">—</td>
<td class="text-center">—</td>
<td class="text-center">
<svg class="w-5 h-5 text-success mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
</td>
</tr>
<tr><td colspan="4" class="font-bold text-default">Support & Security</td></tr>
<tr>
<td>Customer Support</td>
<td class="text-center">Email only</td>
<td class="text-center">Priority Email & Chat</td>
<td class="text-center font-medium text-primary">24/7 Dedicated Support</td>
</tr>
<tr>
<td>Single Sign-On (SSO)</td>
<td class="text-center">—</td>
<td class="text-center">—</td>
<td class="text-center">
<svg class="w-5 h-5 text-success mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"></path></svg>
</td>
</tr>
</tbody>
</table>
</div>
</div>