units.txt•610 kB
<div class="overflow-hidden bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
<div class="lg:pt-4 lg:pr-8">
<div class="lg:max-w-lg">
<h2 class="text-base/7 font-semibold text-indigo-600">Deploy faster</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">A better workflow</p>
<p class="mt-6 text-lg/8 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-600 lg:max-w-none">
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
</svg>
Push to deploy.
</dt>
<dd class="inline">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
</svg>
SSL certificates.
</dt>
<dd class="inline">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M4.632 3.533A2 2 0 0 1 6.577 2h6.846a2 2 0 0 1 1.945 1.533l1.976 8.234A3.489 3.489 0 0 0 16 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234Z" />
<path fill-rule="evenodd" d="M4 13a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4H4Zm11.24 2a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z" clip-rule="evenodd" />
</svg>
Database backups.
</dt>
<dd class="inline">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd>
</div>
</dl>
</div>
</div>
<img src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png" alt="Product screenshot" class="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem] md:-ml-4 lg:-ml-0" width="2432" height="1442">
</div>
</div>
</div>
<div class="overflow-hidden bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
<div class="lg:pt-4 lg:pr-8">
<div class="lg:max-w-lg">
<h2 class="text-base/7 font-semibold text-indigo-400">Deploy faster</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">A better workflow</p>
<p class="mt-6 text-lg/8 text-gray-300">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-300 lg:max-w-none">
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
</svg>
Push to deploy.
</dt>
<dd class="inline">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
</svg>
SSL certificates.
</dt>
<dd class="inline">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M4.632 3.533A2 2 0 0 1 6.577 2h6.846a2 2 0 0 1 1.945 1.533l1.976 8.234A3.489 3.489 0 0 0 16 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234Z" />
<path fill-rule="evenodd" d="M4 13a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4H4Zm11.24 2a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z" clip-rule="evenodd" />
</svg>
Database backups.
</dt>
<dd class="inline">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd>
</div>
</dl>
</div>
</div>
<img src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png" alt="Product screenshot" class="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-white/10 sm:w-[57rem] md:-ml-4 lg:-ml-0" width="2432" height="1442">
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl sm:text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Everything you need</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl sm:text-balance">No server? No problem.</p>
<p class="mt-6 text-lg/8 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis.</p>
</div>
</div>
<div class="relative overflow-hidden pt-16">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<img src="https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png" alt="App screenshot" class="mb-[-12%] rounded-xl shadow-2xl ring-1 ring-gray-900/10" width="2432" height="1442">
<div class="relative" aria-hidden="true">
<div class="absolute -inset-x-20 bottom-0 bg-linear-to-t from-white pt-[7%]"></div>
</div>
</div>
</div>
<div class="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
<dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-gray-600 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
</svg>
Push to deploy.
</dt>
<dd class="inline">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
</svg>
SSL certificates.
</dt>
<dd class="inline">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
</svg>
Simple queues.
</dt>
<dd class="inline">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 2.5c-1.31 0-2.526.386-3.546 1.051a.75.75 0 0 1-.82-1.256A8 8 0 0 1 18 9a22.47 22.47 0 0 1-1.228 7.351.75.75 0 1 1-1.417-.49A20.97 20.97 0 0 0 16.5 9 6.5 6.5 0 0 0 10 2.5ZM4.333 4.416a.75.75 0 0 1 .218 1.038A6.466 6.466 0 0 0 3.5 9a7.966 7.966 0 0 1-1.293 4.362.75.75 0 0 1-1.257-.819A6.466 6.466 0 0 0 2 9c0-1.61.476-3.11 1.295-4.365a.75.75 0 0 1 1.038-.219ZM10 6.12a3 3 0 0 0-3.001 3.041 11.455 11.455 0 0 1-2.697 7.24.75.75 0 0 1-1.148-.965A9.957 9.957 0 0 0 5.5 9c0-.028.002-.055.004-.082a4.5 4.5 0 0 1 8.996.084V9.15l-.005.297a.75.75 0 1 1-1.5-.034c.003-.11.004-.219.005-.328a3 3 0 0 0-3-2.965Zm0 2.13a.75.75 0 0 1 .75.75c0 3.51-1.187 6.745-3.181 9.323a.75.75 0 1 1-1.186-.918A13.687 13.687 0 0 0 9.25 9a.75.75 0 0 1 .75-.75Zm3.529 3.698a.75.75 0 0 1 .584.885 18.883 18.883 0 0 1-2.257 5.84.75.75 0 1 1-1.29-.764 17.386 17.386 0 0 0 2.078-5.377.75.75 0 0 1 .885-.584Z" clip-rule="evenodd" />
</svg>
Advanced security.
</dt>
<dd class="inline">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
</svg>
Powerful API.
</dt>
<dd class="inline">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M4.632 3.533A2 2 0 0 1 6.577 2h6.846a2 2 0 0 1 1.945 1.533l1.976 8.234A3.489 3.489 0 0 0 16 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234Z" />
<path fill-rule="evenodd" d="M4 13a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4H4Zm11.24 2a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z" clip-rule="evenodd" />
</svg>
Database backups.
</dt>
<dd class="inline">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd>
</div>
</dl>
</div>
</div>
<div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl sm:text-center">
<h2 class="text-base/7 font-semibold text-indigo-400">Everything you need</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl sm:text-balance">No server? No problem.</p>
<p class="mt-6 text-lg/8 text-gray-300">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis.</p>
</div>
</div>
<div class="relative overflow-hidden pt-16">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<img src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" class="mb-[-12%] rounded-xl shadow-2xl ring-1 ring-white/10" width="2432" height="1442">
<div class="relative" aria-hidden="true">
<div class="absolute -inset-x-20 bottom-0 bg-linear-to-t from-gray-900 pt-[7%]"></div>
</div>
</div>
</div>
<div class="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
<dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-gray-300 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
</svg>
Push to deploy.
</dt>
<dd class="inline">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
</svg>
SSL certificates.
</dt>
<dd class="inline">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
</svg>
Simple queues.
</dt>
<dd class="inline">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 2.5c-1.31 0-2.526.386-3.546 1.051a.75.75 0 0 1-.82-1.256A8 8 0 0 1 18 9a22.47 22.47 0 0 1-1.228 7.351.75.75 0 1 1-1.417-.49A20.97 20.97 0 0 0 16.5 9 6.5 6.5 0 0 0 10 2.5ZM4.333 4.416a.75.75 0 0 1 .218 1.038A6.466 6.466 0 0 0 3.5 9a7.966 7.966 0 0 1-1.293 4.362.75.75 0 0 1-1.257-.819A6.466 6.466 0 0 0 2 9c0-1.61.476-3.11 1.295-4.365a.75.75 0 0 1 1.038-.219ZM10 6.12a3 3 0 0 0-3.001 3.041 11.455 11.455 0 0 1-2.697 7.24.75.75 0 0 1-1.148-.965A9.957 9.957 0 0 0 5.5 9c0-.028.002-.055.004-.082a4.5 4.5 0 0 1 8.996.084V9.15l-.005.297a.75.75 0 1 1-1.5-.034c.003-.11.004-.219.005-.328a3 3 0 0 0-3-2.965Zm0 2.13a.75.75 0 0 1 .75.75c0 3.51-1.187 6.745-3.181 9.323a.75.75 0 1 1-1.186-.918A13.687 13.687 0 0 0 9.25 9a.75.75 0 0 1 .75-.75Zm3.529 3.698a.75.75 0 0 1 .584.885 18.883 18.883 0 0 1-2.257 5.84.75.75 0 1 1-1.29-.764 17.386 17.386 0 0 0 2.078-5.377.75.75 0 0 1 .885-.584Z" clip-rule="evenodd" />
</svg>
Advanced security.
</dt>
<dd class="inline">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
</svg>
Powerful API.
</dt>
<dd class="inline">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M4.632 3.533A2 2 0 0 1 6.577 2h6.846a2 2 0 0 1 1.945 1.533l1.976 8.234A3.489 3.489 0 0 0 16 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234Z" />
<path fill-rule="evenodd" d="M4 13a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4H4Zm11.24 2a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z" clip-rule="evenodd" />
</svg>
Database backups.
</dt>
<dd class="inline">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd>
</div>
</dl>
</div>
</div>
<div class="overflow-hidden bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<p class="max-w-2xl text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-6xl sm:text-balance">Everything you need to deploy your app</p>
<div class="relative mt-16 aspect-2432/1442 h-[36rem] sm:h-auto sm:w-[calc(var(--container-7xl)-calc(var(--spacing)*16))]">
<div class="absolute -inset-2 rounded-[calc(var(--radius-xl)+calc(var(--spacing)*2))] shadow-xs ring-1 ring-black/5"></div>
<img alt="" src="https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png" class="h-full rounded-xl shadow-2xl ring-1 ring-black/10">
</div>
</div>
</div>
<div class="overflow-hidden bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<p class="max-w-2xl text-5xl font-semibold tracking-tight text-pretty text-white sm:text-6xl sm:text-balance">Everything you need to deploy your app</p>
<div class="relative mt-16 aspect-2432/1442 h-[36rem] sm:h-auto sm:w-[calc(var(--container-7xl)-calc(var(--spacing)*16))]">
<div class="absolute -inset-2 rounded-[calc(var(--radius-xl)+calc(var(--spacing)*2))] bg-white/[2.5%] shadow-[inset_0_0_2px_1px_rgb(255_255_255/2.5%)] ring-1 ring-white/10"></div>
<img alt="" src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png" class="relative h-full rounded-xl shadow-2xl ring-1 ring-white/10">
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Deploy faster</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl lg:text-balance">Everything you need to deploy your app</p>
<p class="mt-6 text-lg/8 text-gray-600">Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
<div class="flex flex-col">
<dt class="flex items-center gap-x-3 text-base/7 font-semibold text-gray-900">
<svg class="size-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
</svg>
Push to deploy
</dt>
<dd class="mt-4 flex flex-auto flex-col text-base/7 text-gray-600">
<p class="flex-auto">Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu. Phasellus praesent ligula sit faucibus.</p>
<p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-indigo-600">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="flex flex-col">
<dt class="flex items-center gap-x-3 text-base/7 font-semibold text-gray-900">
<svg class="size-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
</svg>
SSL certificates
</dt>
<dd class="mt-4 flex flex-auto flex-col text-base/7 text-gray-600">
<p class="flex-auto">Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.</p>
<p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-indigo-600">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="flex flex-col">
<dt class="flex items-center gap-x-3 text-base/7 font-semibold text-gray-900">
<svg class="size-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
</svg>
Simple queues
</dt>
<dd class="mt-4 flex flex-auto flex-col text-base/7 text-gray-600">
<p class="flex-auto">Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod ut condimentum.</p>
<p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-indigo-600">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:text-center">
<h2 class="text-base/7 font-semibold text-indigo-400">Deploy faster</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl lg:text-balance">Everything you need to deploy your app</p>
<p class="mt-6 text-lg/8 text-gray-300">Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
<div class="flex flex-col">
<dt class="flex items-center gap-x-3 text-base/7 font-semibold text-white">
<svg class="size-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
</svg>
Push to deploy
</dt>
<dd class="mt-4 flex flex-auto flex-col text-base/7 text-gray-300">
<p class="flex-auto">Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu.</p>
<p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-indigo-400">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="flex flex-col">
<dt class="flex items-center gap-x-3 text-base/7 font-semibold text-white">
<svg class="size-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
</svg>
SSL certificates
</dt>
<dd class="mt-4 flex flex-auto flex-col text-base/7 text-gray-300">
<p class="flex-auto">Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.</p>
<p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-indigo-400">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="flex flex-col">
<dt class="flex items-center gap-x-3 text-base/7 font-semibold text-white">
<svg class="size-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
</svg>
Simple queues
</dt>
<dd class="mt-4 flex flex-auto flex-col text-base/7 text-gray-300">
<p class="flex-auto">Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod.</p>
<p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-indigo-400">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="overflow-hidden bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
<div class="lg:ml-auto lg:pt-4 lg:pl-4">
<div class="lg:max-w-lg">
<h2 class="text-base/7 font-semibold text-indigo-600">Deploy faster</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">A better workflow</p>
<p class="mt-6 text-lg/8 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-600 lg:max-w-none">
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
</svg>
Push to deploy.
</dt>
<dd class="inline">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
</svg>
SSL certificates.
</dt>
<dd class="inline">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M4.632 3.533A2 2 0 0 1 6.577 2h6.846a2 2 0 0 1 1.945 1.533l1.976 8.234A3.489 3.489 0 0 0 16 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234Z" />
<path fill-rule="evenodd" d="M4 13a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4H4Zm11.24 2a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z" clip-rule="evenodd" />
</svg>
Database backups.
</dt>
<dd class="inline">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd>
</div>
</dl>
</div>
</div>
<div class="flex items-start justify-end lg:order-first">
<img src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png" alt="Product screenshot" class="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]" width="2432" height="1442">
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Stay on top of customer support</h2>
<p class="mt-6 text-lg/8 text-gray-600">Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
<div class="flex flex-col">
<dt class="text-base/7 font-semibold text-gray-900">
<div class="mb-6 flex size-10 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z" />
</svg>
</div>
Unlimited inboxes
</dt>
<dd class="mt-1 flex flex-auto flex-col text-base/7 text-gray-600">
<p class="flex-auto">Non quo aperiam repellendus quas est est. Eos aut dolore aut ut sit nesciunt. Ex tempora quia. Sit nobis consequatur dolores incidunt.</p>
<p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-indigo-600">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="flex flex-col">
<dt class="text-base/7 font-semibold text-gray-900">
<div class="mb-6 flex size-10 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
</svg>
</div>
Manage team members
</dt>
<dd class="mt-1 flex flex-auto flex-col text-base/7 text-gray-600">
<p class="flex-auto">Vero eum voluptatem aliquid nostrum voluptatem. Vitae esse natus. Earum nihil deserunt eos quasi cupiditate. A inventore et molestiae natus.</p>
<p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-indigo-600">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="flex flex-col">
<dt class="text-base/7 font-semibold text-gray-900">
<div class="mb-6 flex size-10 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</div>
Spam report
</dt>
<dd class="mt-1 flex flex-auto flex-col text-base/7 text-gray-600">
<p class="flex-auto">Et quod quaerat dolorem quaerat architecto aliquam accusantium. Ex adipisci et doloremque autem quia quam. Quis eos molestiae at iure impedit.</p>
<p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-indigo-600">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">Stay on top of customer support</h2>
<p class="mt-6 text-lg/8 text-gray-300">Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
<div class="flex flex-col">
<dt class="text-base/7 font-semibold text-white">
<div class="mb-6 flex size-10 items-center justify-center rounded-lg bg-indigo-500">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z" />
</svg>
</div>
Unlimited inboxes
</dt>
<dd class="mt-1 flex flex-auto flex-col text-base/7 text-gray-300">
<p class="flex-auto">Non quo aperiam repellendus quas est est. Eos aut dolore aut ut sit nesciunt. Ex tempora quia. Sit nobis consequatur dolores incidunt.</p>
<p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-indigo-400">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="flex flex-col">
<dt class="text-base/7 font-semibold text-white">
<div class="mb-6 flex size-10 items-center justify-center rounded-lg bg-indigo-500">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
</svg>
</div>
Manage team members
</dt>
<dd class="mt-1 flex flex-auto flex-col text-base/7 text-gray-300">
<p class="flex-auto">Vero eum voluptatem aliquid nostrum voluptatem. Vitae esse natus. Earum nihil deserunt eos quasi cupiditate. A inventore et molestiae natus.</p>
<p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-indigo-400">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="flex flex-col">
<dt class="text-base/7 font-semibold text-white">
<div class="mb-6 flex size-10 items-center justify-center rounded-lg bg-indigo-500">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</div>
Spam report
</dt>
<dd class="mt-1 flex flex-auto flex-col text-base/7 text-gray-300">
<p class="flex-auto">Et quod quaerat dolorem quaerat architecto aliquam accusantium. Ex adipisci et doloremque autem quia quam. Quis eos molestiae at iure impedit.</p>
<p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-indigo-400">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="bg-white py-24">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="relative isolate overflow-hidden bg-gray-900 px-6 py-20 sm:rounded-3xl sm:px-10 sm:py-24 lg:py-24 xl:px-24">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center lg:gap-y-0">
<div class="lg:row-start-2 lg:max-w-md">
<h2 class="text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl">Boost your productivity. Start using our app today.</h2>
<p class="mt-6 text-lg/8 text-gray-300">Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla. Ac euismod vel sit maecenas.</p>
</div>
<img src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png" alt="Product screenshot" class="relative -z-20 max-w-xl min-w-full rounded-xl shadow-xl ring-1 ring-white/10 lg:row-span-4 lg:w-[64rem] lg:max-w-none" width="2432" height="1442">
<div class="max-w-xl lg:row-start-3 lg:mt-10 lg:max-w-md lg:border-t lg:border-white/10 lg:pt-10">
<dl class="max-w-xl space-y-8 text-base/7 text-gray-300 lg:max-w-none">
<div class="relative">
<dt class="ml-9 inline-block font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
</svg>
Push to deploy.
</dt>
<dd class="inline">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
</div>
<div class="relative">
<dt class="ml-9 inline-block font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
</svg>
SSL certificates.
</dt>
<dd class="inline">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div>
<div class="relative">
<dt class="ml-9 inline-block font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M4.632 3.533A2 2 0 0 1 6.577 2h6.846a2 2 0 0 1 1.945 1.533l1.976 8.234A3.489 3.489 0 0 0 16 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234Z" />
<path fill-rule="evenodd" d="M4 13a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4H4Zm11.24 2a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z" clip-rule="evenodd" />
</svg>
Database backups.
</dt>
<dd class="inline">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd>
</div>
</dl>
</div>
</div>
<div class="pointer-events-none absolute top-1/2 left-12 -z-10 -translate-y-1/2 transform-gpu blur-3xl lg:top-auto lg:bottom-[-12rem] lg:translate-y-0 lg:transform-gpu" aria-hidden="true">
<div class="aspect-1155/678 w-[72.1875rem] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-25" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
</div>
</div>
</div>
<div class="overflow-hidden bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl md:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start">
<div class="px-6 lg:px-0 lg:pt-4 lg:pr-4">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
<h2 class="text-base/7 font-semibold text-indigo-600">Deploy faster</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">A better workflow</p>
<p class="mt-6 text-lg/8 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-600 lg:max-w-none">
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
</svg>
Push to deploy.
</dt>
<dd class="inline">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
</svg>
SSL certificates.
</dt>
<dd class="inline">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M4.632 3.533A2 2 0 0 1 6.577 2h6.846a2 2 0 0 1 1.945 1.533l1.976 8.234A3.489 3.489 0 0 0 16 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234Z" />
<path fill-rule="evenodd" d="M4 13a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4H4Zm11.24 2a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z" clip-rule="evenodd" />
</svg>
Database backups.
</dt>
<dd class="inline">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd>
</div>
</dl>
</div>
</div>
<div class="sm:px-6 lg:px-0">
<div class="relative isolate overflow-hidden bg-indigo-500 px-6 pt-8 sm:mx-auto sm:max-w-2xl sm:rounded-3xl sm:pt-16 sm:pr-0 sm:pl-16 lg:mx-0 lg:max-w-none">
<div class="absolute -inset-y-px -left-3 -z-10 w-full origin-bottom-left skew-x-[-30deg] bg-indigo-100 opacity-20 ring-1 ring-white ring-inset" aria-hidden="true"></div>
<div class="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
<img src="https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png" alt="Product screenshot" width="2432" height="1442" class="-mb-12 w-[57rem] max-w-none rounded-tl-xl bg-gray-800 ring-1 ring-white/10">
</div>
<div class="pointer-events-none absolute inset-0 ring-1 ring-black/10 ring-inset sm:rounded-3xl" aria-hidden="true"></div>
</div>
</div>
</div>
</div>
</div>
<div class="overflow-hidden bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start">
<div class="lg:pt-4 lg:pr-4">
<div class="lg:max-w-lg">
<h2 class="text-base/7 font-semibold text-indigo-600">Deploy faster</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">A better workflow</p>
<p class="mt-6 text-lg/8 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<div class="mt-8">
<a href="#" class="inline-flex rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
</div>
<figure class="mt-16 border-l border-gray-200 pl-8 text-gray-600">
<blockquote class="text-base/7">
<p>“Vel ultricies morbi odio facilisi ultrices accumsan donec lacus purus. Lectus nibh ullamcorper ac dictum justo in euismod. Risus aenean ut elit massa. In amet aliquet eget cras. Sem volutpat enim tristique.”</p>
</blockquote>
<figcaption class="mt-6 flex gap-x-4 text-sm/6">
<img src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="" class="size-6 flex-none rounded-full">
<div><span class="font-semibold text-gray-900">Maria Hill</span> – Marketing Manager</div>
</figcaption>
</figure>
</div>
</div>
<img src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png" alt="Product screenshot" class="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem] md:-ml-4 lg:ml-0" width="2432" height="1442">
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
<h2 class="col-span-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Stay on top of customer support</h2>
<dl class="col-span-3 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2">
<div>
<dt class="text-base/7 font-semibold text-gray-900">
<div class="mb-6 flex size-10 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</div>
Spam report
</dt>
<dd class="mt-1 text-base/7 text-gray-600">Autem reprehenderit aut debitis ut. Officiis harum omnis placeat blanditiis delectus sint vel et voluptatum.</dd>
</div>
<div>
<dt class="text-base/7 font-semibold text-gray-900">
<div class="mb-6 flex size-10 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
</svg>
</div>
Compose in markdown
</dt>
<dd class="mt-1 text-base/7 text-gray-600">Illum et aut inventore. Ut et dignissimos quasi. Omnis saepe dolorum. Hic autem fugiat. Voluptatem officiis necessitatibus.</dd>
</div>
<div>
<dt class="text-base/7 font-semibold text-gray-900">
<div class="mb-6 flex size-10 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
</svg>
</div>
Email commenting
</dt>
<dd class="mt-1 text-base/7 text-gray-600">Commodi quam quo. In quasi mollitia optio voluptate et est reiciendis. Ut et sunt id officiis vitae perspiciatis.</dd>
</div>
<div>
<dt class="text-base/7 font-semibold text-gray-900">
<div class="mb-6 flex size-10 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
</svg>
</div>
Customer connections
</dt>
<dd class="mt-1 text-base/7 text-gray-600">Deserunt corrupti praesentium quo vel cupiditate est occaecati ad. Aperiam libero modi similique iure praesentium facilis.</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="overflow-hidden bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl md:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start">
<div class="px-6 md:px-0 lg:pt-4 lg:pr-4">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
<h2 class="text-base/7 font-semibold text-indigo-600">Deploy faster</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">A better workflow</p>
<p class="mt-6 text-lg/8 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-600 lg:max-w-none">
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
</svg>
Push to deploy.
</dt>
<dd class="inline">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
</svg>
SSL certificates.
</dt>
<dd class="inline">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute top-1 left-1 size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M4.632 3.533A2 2 0 0 1 6.577 2h6.846a2 2 0 0 1 1.945 1.533l1.976 8.234A3.489 3.489 0 0 0 16 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234Z" />
<path fill-rule="evenodd" d="M4 13a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4H4Zm11.24 2a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z" clip-rule="evenodd" />
</svg>
Database backups.
</dt>
<dd class="inline">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd>
</div>
</dl>
</div>
</div>
<div class="sm:px-6 lg:px-0">
<div class="relative isolate overflow-hidden bg-indigo-500 px-6 pt-8 sm:mx-auto sm:max-w-2xl sm:rounded-3xl sm:pt-16 sm:pr-0 sm:pl-16 lg:mx-0 lg:max-w-none">
<div class="absolute -inset-y-px -left-3 -z-10 w-full origin-bottom-left skew-x-[-30deg] bg-indigo-100 opacity-20 ring-1 ring-white ring-inset" aria-hidden="true"></div>
<div class="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
<div class="w-screen overflow-hidden rounded-tl-xl bg-gray-900 ring-1 ring-white/10">
<div class="flex bg-gray-800/40 ring-1 ring-white/5">
<div class="-mb-px flex text-sm/6 font-medium text-gray-400">
<div class="border-r border-b border-r-white/10 border-b-white/20 bg-white/5 px-4 py-2 text-white">NotificationSetting.jsx</div>
<div class="border-r border-gray-600/10 px-4 py-2">App.jsx</div>
</div>
</div>
<div class="px-6 pt-6 pb-14">
<!-- Your code example -->
</div>
</div>
</div>
<div class="pointer-events-none absolute inset-0 ring-1 ring-black/10 ring-inset sm:rounded-3xl" aria-hidden="true"></div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
<div class="col-span-2">
<h2 class="text-base/7 font-semibold text-indigo-600">Everything you need</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">All-in-one platform</p>
<p class="mt-6 text-base/7 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
</div>
<dl class="col-span-3 grid grid-cols-1 gap-x-8 gap-y-10 text-base/7 text-gray-600 sm:grid-cols-2 lg:gap-y-16">
<div class="relative pl-9">
<dt class="font-semibold text-gray-900">
<svg class="absolute top-1 left-0 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Invite team members
</dt>
<dd class="mt-2">Rerum repellat labore necessitatibus reprehenderit molestiae praesentium.</dd>
</div>
<div class="relative pl-9">
<dt class="font-semibold text-gray-900">
<svg class="absolute top-1 left-0 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
List view
</dt>
<dd class="mt-2">Corporis asperiores ea nulla temporibus asperiores non tempore assumenda aut.</dd>
</div>
<div class="relative pl-9">
<dt class="font-semibold text-gray-900">
<svg class="absolute top-1 left-0 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Keyboard shortcuts
</dt>
<dd class="mt-2">In sit qui aliquid deleniti et. Ad nobis sunt omnis. Quo sapiente dicta laboriosam.</dd>
</div>
<div class="relative pl-9">
<dt class="font-semibold text-gray-900">
<svg class="absolute top-1 left-0 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Calendars
</dt>
<dd class="mt-2">Sed rerum sunt dignissimos ullam. Iusto iure occaecati voluptate eligendi.</dd>
</div>
<div class="relative pl-9">
<dt class="font-semibold text-gray-900">
<svg class="absolute top-1 left-0 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Notifications
</dt>
<dd class="mt-2">Quos inventore harum enim nesciunt. Aut repellat rerum omnis adipisci.</dd>
</div>
<div class="relative pl-9">
<dt class="font-semibold text-gray-900">
<svg class="absolute top-1 left-0 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Boards
</dt>
<dd class="mt-2">Quae sit sunt excepturi fugit veniam voluptatem ipsum commodi.</dd>
</div>
<div class="relative pl-9">
<dt class="font-semibold text-gray-900">
<svg class="absolute top-1 left-0 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Reporting
</dt>
<dd class="mt-2">Eos laudantium repellat sed architecto earum unde incidunt.</dd>
</div>
<div class="relative pl-9">
<dt class="font-semibold text-gray-900">
<svg class="absolute top-1 left-0 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Mobile app
</dt>
<dd class="mt-2">Nulla est saepe accusamus nostrum est est fugit omnis.</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">All-in-one platform</h2>
<p class="mt-6 text-lg/8 text-gray-600">Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.</p>
</div>
<dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div>
<dt class="font-semibold text-gray-900">Push to deploy</dt>
<dd class="mt-1 text-gray-600">Aut illo quae. Ut et harum ea animi natus. Culpa maiores et sed sint et magnam exercitationem quia. Ullam voluptas nihil vitae dicta molestiae et. Aliquid velit porro vero.</dd>
</div>
<div>
<dt class="font-semibold text-gray-900">SSL certificates</dt>
<dd class="mt-1 text-gray-600">Mollitia delectus a omnis. Quae velit aliquid. Qui nulla maxime adipisci illo id molestiae. Cumque cum ut minus rerum architecto magnam consequatur. Quia quaerat minima.</dd>
</div>
<div>
<dt class="font-semibold text-gray-900">Simple queues</dt>
<dd class="mt-1 text-gray-600">Aut repellendus et officiis dolor possimus. Deserunt velit quasi sunt fuga error labore quia ipsum. Commodi autem voluptatem nam. Quos voluptatem totam.</dd>
</div>
<div>
<dt class="font-semibold text-gray-900">Advanced security</dt>
<dd class="mt-1 text-gray-600">Magnam provident veritatis odit. Vitae eligendi repellat non. Eum fugit impedit veritatis ducimus. Non qui aspernatur laudantium modi. Praesentium rerum error deserunt harum.</dd>
</div>
<div>
<dt class="font-semibold text-gray-900">Powerful API</dt>
<dd class="mt-1 text-gray-600">Sit minus expedita quam in ullam molestiae dignissimos in harum. Tenetur dolorem iure. Non nesciunt dolorem veniam necessitatibus laboriosam voluptas perspiciatis error.</dd>
</div>
<div>
<dt class="font-semibold text-gray-900">Database backups</dt>
<dd class="mt-1 text-gray-600">Ipsa in earum deserunt aut. Quos minus aut animi et soluta. Ipsum dicta ut quia eius. Possimus reprehenderit iste aspernatur ut est velit consequatur distinctio.</dd>
</div>
</dl>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Deploy faster</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl lg:text-balance">Everything you need to deploy your app</p>
<p class="mt-6 text-lg/8 text-gray-600">Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z" />
</svg>
</div>
Push to deploy
</dt>
<dd class="mt-2 text-base/7 text-gray-600">Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. Odio urna massa nunc massa.</dd>
</div>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
</svg>
</div>
SSL certificates
</dt>
<dd class="mt-2 text-base/7 text-gray-600">Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget. Sem sodales gravida quam turpis enim lacus amet.</dd>
</div>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</div>
Simple queues
</dt>
<dd class="mt-2 text-base/7 text-gray-600">Quisque est vel vulputate cursus. Risus proin diam nunc commodo. Lobortis auctor congue commodo diam neque.</dd>
</div>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.864 4.243A7.5 7.5 0 0 1 19.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 0 0 4.5 10.5a7.464 7.464 0 0 1-1.15 3.993m1.989 3.559A11.209 11.209 0 0 0 8.25 10.5a3.75 3.75 0 1 1 7.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 0 1-3.6 9.75m6.633-4.596a18.666 18.666 0 0 1-2.485 5.33" />
</svg>
</div>
Advanced security
</dt>
<dd class="mt-2 text-base/7 text-gray-600">Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis aliquet hac quis. Id hac maecenas ac donec pharetra eget.</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-base/7 font-semibold text-indigo-400">Everything you need</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">No server? No problem.</p>
<p class="mt-6 text-lg/8 text-gray-300">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis.</p>
</div>
<dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 text-base/7 text-gray-300 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-16">
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
</svg>
Push to deploy.
</dt>
<dd class="inline">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
</svg>
SSL certificates.
</dt>
<dd class="inline">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
</svg>
Simple queues.
</dt>
<dd class="inline">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus voluptas blanditiis et.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 2.5c-1.31 0-2.526.386-3.546 1.051a.75.75 0 0 1-.82-1.256A8 8 0 0 1 18 9a22.47 22.47 0 0 1-1.228 7.351.75.75 0 1 1-1.417-.49A20.97 20.97 0 0 0 16.5 9 6.5 6.5 0 0 0 10 2.5ZM4.333 4.416a.75.75 0 0 1 .218 1.038A6.466 6.466 0 0 0 3.5 9a7.966 7.966 0 0 1-1.293 4.362.75.75 0 0 1-1.257-.819A6.466 6.466 0 0 0 2 9c0-1.61.476-3.11 1.295-4.365a.75.75 0 0 1 1.038-.219ZM10 6.12a3 3 0 0 0-3.001 3.041 11.455 11.455 0 0 1-2.697 7.24.75.75 0 0 1-1.148-.965A9.957 9.957 0 0 0 5.5 9c0-.028.002-.055.004-.082a4.5 4.5 0 0 1 8.996.084V9.15l-.005.297a.75.75 0 1 1-1.5-.034c.003-.11.004-.219.005-.328a3 3 0 0 0-3-2.965Zm0 2.13a.75.75 0 0 1 .75.75c0 3.51-1.187 6.745-3.181 9.323a.75.75 0 1 1-1.186-.918A13.687 13.687 0 0 0 9.25 9a.75.75 0 0 1 .75-.75Zm3.529 3.698a.75.75 0 0 1 .584.885 18.883 18.883 0 0 1-2.257 5.84.75.75 0 1 1-1.29-.764 17.386 17.386 0 0 0 2.078-5.377.75.75 0 0 1 .885-.584Z" clip-rule="evenodd" />
</svg>
Advanced security.
</dt>
<dd class="inline">Iure sed ab. Aperiam optio placeat dolor facere. Officiis pariatur eveniet atque et dolor.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
</svg>
Powerful API.
</dt>
<dd class="inline">Laudantium tempora sint ut consectetur ratione. Ut illum ut rem numquam fuga delectus.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-white">
<svg class="absolute top-1 left-1 size-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M4.632 3.533A2 2 0 0 1 6.577 2h6.846a2 2 0 0 1 1.945 1.533l1.976 8.234A3.489 3.489 0 0 0 16 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234Z" />
<path fill-rule="evenodd" d="M4 13a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4H4Zm11.24 2a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z" clip-rule="evenodd" />
</svg>
Database backups.
</dt>
<dd class="inline">Culpa dolorem voluptatem velit autem rerum qui et corrupti. Quibusdam quo placeat.</dd>
</div>
</dl>
</div>
</div>
<div class="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
<div class="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl" aria-hidden="true">
<div class="mx-auto aspect-1155/678 w-[72.1875rem] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl">Choose the right plan for you</p>
</div>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
<div class="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-4xl lg:grid-cols-2">
<div class="rounded-3xl rounded-t-3xl bg-white/60 p-8 ring-1 ring-gray-900/10 sm:mx-8 sm:rounded-b-none sm:p-10 lg:mx-0 lg:rounded-tr-none lg:rounded-bl-3xl">
<h3 id="tier-hobby" class="text-base/7 font-semibold text-indigo-600">Hobby</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900">$29</span>
<span class="text-base text-gray-500">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-600">The perfect plan if you're just getting started with our product.</p>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
25 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 10,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
24-hour support response time
</li>
</ul>
<a href="#" aria-describedby="tier-hobby" class="mt-8 block rounded-md px-3.5 py-2.5 text-center text-sm font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:mt-10">Get started today</a>
</div>
<div class="relative rounded-3xl bg-gray-900 p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10">
<h3 id="tier-enterprise" class="text-base/7 font-semibold text-indigo-400">Enterprise</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-white">$99</span>
<span class="text-base text-gray-400">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-300">Dedicated support and infrastructure for your company.</p>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 sm:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Dedicated support representative
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Custom integrations
</li>
</ul>
<a href="#" aria-describedby="tier-enterprise" class="mt-8 block rounded-md bg-indigo-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 sm:mt-10">Get started today</a>
</div>
</div>
</div>
<div class="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
<div class="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl" aria-hidden="true">
<div class="mx-auto aspect-1155/678 w-[72.1875rem] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl">Choose the right plan for you</p>
</div>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
<div class="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-4xl lg:grid-cols-2">
<div class="relative rounded-3xl bg-white p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10">
<h3 id="tier-personal" class="text-base/7 font-semibold text-indigo-600">Personal</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900">$29</span>
<span class="text-base text-gray-500">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-600">The perfect plan if you're just getting started with our product.</p>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
25 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 10,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Audience segmentation
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Email support
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
</ul>
<a href="#" aria-describedby="tier-personal" class="mt-8 block rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:mt-10">Get started today</a>
</div>
<div class="rounded-3xl bg-white/60 p-8 ring-1 ring-gray-900/10 sm:mx-8 sm:rounded-t-none sm:p-10 lg:mx-0 lg:rounded-tr-3xl lg:rounded-bl-none">
<h3 id="tier-team" class="text-base/7 font-semibold text-indigo-600">Team</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900">$99</span>
<span class="text-base text-gray-500">/month</span>
</p>
<p class="mt-6 text-base/7 text-gray-600">A plan that scales with your rapidly growing business.</p>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600 sm:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Priority support
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Single sign-on
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Enterprise integrations
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Custom reporting tools
</li>
</ul>
<a href="#" aria-describedby="tier-team" class="mt-8 block rounded-md px-3.5 py-2.5 text-center text-sm font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:mt-10">Get started today</a>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
<h1 class="text-5xl font-semibold tracking-tight text-balance text-gray-950 sm:text-6xl lg:text-pretty">Pricing that grows with your team size</h1>
<p class="mt-6 max-w-2xl text-lg font-medium text-pretty text-gray-600 max-lg:mx-auto sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
</div>
<div class="relative pt-16 sm:pt-24">
<div class="absolute inset-x-0 top-48 bottom-0 bg-[radial-gradient(circle_at_center_center,#7775D6,#592E71,#030712_70%)] lg:bg-[radial-gradient(circle_at_center_150%,#7775D6,#592E71,#030712_70%)]"></div>
<div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
<div class="-m-2 grid grid-cols-1 rounded-[2rem] shadow-[inset_0_0_2px_1px_#ffffff4d] ring-1 ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
<div class="rounded-3xl bg-white p-10 pb-9 shadow-2xl ring-1 ring-black/5">
<h2 class="text-sm font-semibold text-indigo-600">Starter <span class="sr-only">plan</span></h2>
<p class="mt-2 text-sm/6 text-pretty text-gray-600">Everything you need to get started.</p>
<div class="mt-8 flex items-center gap-4">
<div class="text-5xl font-semibold text-gray-950">$19</div>
<div class="text-sm text-gray-600">
<p>USD</p>
<p>per month</p>
</div>
</div>
<div class="mt-8">
<a href="#" aria-label="Start a free trial on the Starter plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
</div>
<div class="mt-8">
<h3 class="text-sm/6 font-medium text-gray-950">Start selling with:</h3>
<ul class="mt-3 space-y-3">
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Custom domains
</li>
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Edge content delivery
</li>
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Advanced analytics
</li>
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
<span class="sr-only">Not included:</span>
Quarterly workshops
</li>
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
<span class="sr-only">Not included:</span>
Single sign-on (SSO)
</li>
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
<span class="sr-only">Not included:</span>
Priority phone support
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="-m-2 grid grid-cols-1 rounded-[2rem] shadow-[inset_0_0_2px_1px_#ffffff4d] ring-1 ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
<div class="rounded-3xl bg-white p-10 pb-9 shadow-2xl ring-1 ring-black/5">
<h2 class="text-sm font-semibold text-indigo-600">Growth <span class="sr-only">plan</span></h2>
<p class="mt-2 text-sm/6 text-pretty text-gray-600">All the extras for your growing team.</p>
<div class="mt-8 flex items-center gap-4">
<div class="text-5xl font-semibold text-gray-950">$49</div>
<div class="text-sm text-gray-600">
<p>USD</p>
<p>per month</p>
</div>
</div>
<div class="mt-8">
<a href="#" aria-label="Start a free trial on the Growth plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
</div>
<div class="mt-8">
<h3 class="text-sm/6 font-medium text-gray-950">Start selling with:</h3>
<ul class="mt-3 space-y-3">
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Custom domains
</li>
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Edge content delivery
</li>
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Advanced analytics
</li>
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Quarterly workshops
</li>
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
<span class="sr-only">Not included:</span>
Single sign-on (SSO)
</li>
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
<span class="sr-only">Not included:</span>
Priority phone support
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="-m-2 grid grid-cols-1 rounded-[2rem] shadow-[inset_0_0_2px_1px_#ffffff4d] ring-1 ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
<div class="rounded-3xl bg-white p-10 pb-9 shadow-2xl ring-1 ring-black/5">
<h2 class="text-sm font-semibold text-indigo-600">Scale <span class="sr-only">plan</span></h2>
<p class="mt-2 text-sm/6 text-pretty text-gray-600">Added flexibility at scale.</p>
<div class="mt-8 flex items-center gap-4">
<div class="text-5xl font-semibold text-gray-950">$99</div>
<div class="text-sm text-gray-600">
<p>USD</p>
<p>per month</p>
</div>
</div>
<div class="mt-8">
<a href="#" aria-label="Start a free trial on the Scale plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
</div>
<div class="mt-8">
<h3 class="text-sm/6 font-medium text-gray-950">Start selling with:</h3>
<ul class="mt-3 space-y-3">
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Custom domains
</li>
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Edge content delivery
</li>
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Advanced analytics
</li>
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Quarterly workshops
</li>
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Single sign-on (SSO)
</li>
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
Priority phone support
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-between py-16 opacity-60 max-sm:mx-auto max-sm:max-w-md max-sm:flex-wrap max-sm:justify-evenly max-sm:gap-x-4 max-sm:gap-y-4 sm:py-24">
<img alt="Transistor" src="https://tailwindcss.com/plus-assets/img/logos/158x48/transistor-logo-white.svg" class="h-9 max-sm:mx-auto sm:h-8 lg:h-12">
<img alt="Laravel" src="https://tailwindcss.com/plus-assets/img/logos/158x48/laravel-logo-white.svg" class="h-9 max-sm:mx-auto sm:h-8 lg:h-12">
<img alt="Tuple" src="https://tailwindcss.com/plus-assets/img/logos/158x48/tuple-logo-white.svg" class="h-9 max-sm:mx-auto sm:h-8 lg:h-12">
<img alt="SavvyCal" src="https://tailwindcss.com/plus-assets/img/logos/158x48/savvycal-logo-white.svg" class="h-9 max-sm:mx-auto sm:h-8 lg:h-12">
<img alt="Statamic" src="https://tailwindcss.com/plus-assets/img/logos/158x48/statamic-logo-white.svg" class="h-9 max-sm:mx-auto sm:h-8 lg:h-12">
</div>
</div>
</div>
<div class="mx-auto max-w-2xl px-6 pt-16 sm:pt-24 lg:max-w-7xl lg:px-8">
<table class="w-full text-left max-sm:hidden">
<caption class="sr-only">
Pricing plan comparison
</caption>
<colgroup>
<col class="w-2/5">
<col class="w-1/5">
<col class="w-1/5">
<col class="w-1/5">
</colgroup>
<thead>
<tr>
<td class="p-0"></td>
<th scope="col" class="p-0">
<div class="text-sm font-semibold text-indigo-600">Starter <span class="sr-only">plan</span></div>
</th>
<th scope="col" class="p-0">
<div class="text-sm font-semibold text-indigo-600">Growth <span class="sr-only">plan</span></div>
</th>
<th scope="col" class="p-0">
<div class="text-sm font-semibold text-indigo-600">Scale <span class="sr-only">plan</span></div>
</th>
</tr>
<tr>
<th class="p-0"></th>
<td class="px-0 pt-3 pb-0">
<a href="#" aria-label="Get started with the Starter plan" class="inline-block rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50">Get started</a>
</td>
<td class="px-0 pt-3 pb-0">
<a href="#" aria-label="Get started with the Growth plan" class="inline-block rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50">Get started</a>
</td>
<td class="px-0 pt-3 pb-0">
<a href="#" aria-label="Get started with the Scale plan" class="inline-block rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50">Get started</a>
</td>
</tr>
</thead>
<tbody class="group">
<tr>
<th scope="colgroup" colspan="4" class="px-0 pt-10 pb-0 group-first-of-type:pt-5">
<div class="-mx-4 rounded-lg bg-gray-50 px-4 py-3 text-sm/6 font-semibold text-gray-950">Features</div>
</th>
</tr>
<tr class="border-b border-gray-100 last:border-none">
<th scope="row" class="px-0 py-4 text-sm/6 font-normal text-gray-600">Edge content delivery</th>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Starter</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr class="border-b border-gray-100 last:border-none">
<th scope="row" class="px-0 py-4 text-sm/6 font-normal text-gray-600">Custom domains</th>
<td class="p-4 max-sm:text-center">
<span class="sr-only">Starter includes:</span>
<span class="text-sm/6 text-gray-950">1</span>
</td>
<td class="p-4 max-sm:text-center">
<span class="sr-only">Growth includes:</span>
<span class="text-sm/6 text-gray-950">3</span>
</td>
<td class="p-4 max-sm:text-center">
<span class="sr-only">Scale includes:</span>
<span class="text-sm/6 text-gray-950">Unlimited</span>
</td>
</tr>
<tr class="border-b border-gray-100 last:border-none">
<th scope="row" class="px-0 py-4 text-sm/6 font-normal text-gray-600">Team members</th>
<td class="p-4 max-sm:text-center">
<span class="sr-only">Starter includes:</span>
<span class="text-sm/6 text-gray-950">3</span>
</td>
<td class="p-4 max-sm:text-center">
<span class="sr-only">Growth includes:</span>
<span class="text-sm/6 text-gray-950">20</span>
</td>
<td class="p-4 max-sm:text-center">
<span class="sr-only">Scale includes:</span>
<span class="text-sm/6 text-gray-950">Unlimited</span>
</td>
</tr>
<tr class="border-b border-gray-100 last:border-none">
<th scope="row" class="px-0 py-4 text-sm/6 font-normal text-gray-600">Single sign-on (SSO)</th>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
</tbody>
<tbody class="group">
<tr>
<th scope="colgroup" colspan="4" class="px-0 pt-10 pb-0 group-first-of-type:pt-5">
<div class="-mx-4 rounded-lg bg-gray-50 px-4 py-3 text-sm/6 font-semibold text-gray-950">Reporting</div>
</th>
</tr>
<tr class="border-b border-gray-100 last:border-none">
<th scope="row" class="px-0 py-4 text-sm/6 font-normal text-gray-600">Advanced analytics</th>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Starter</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr class="border-b border-gray-100 last:border-none">
<th scope="row" class="px-0 py-4 text-sm/6 font-normal text-gray-600">Basic reports</th>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr class="border-b border-gray-100 last:border-none">
<th scope="row" class="px-0 py-4 text-sm/6 font-normal text-gray-600">Professional reports</th>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr class="border-b border-gray-100 last:border-none">
<th scope="row" class="px-0 py-4 text-sm/6 font-normal text-gray-600">Custom report builder</th>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
</tbody>
<tbody class="group">
<tr>
<th scope="colgroup" colspan="4" class="px-0 pt-10 pb-0 group-first-of-type:pt-5">
<div class="-mx-4 rounded-lg bg-gray-50 px-4 py-3 text-sm/6 font-semibold text-gray-950">Support</div>
</th>
</tr>
<tr class="border-b border-gray-100 last:border-none">
<th scope="row" class="px-0 py-4 text-sm/6 font-normal text-gray-600">24/7 online support</th>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Starter</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr class="border-b border-gray-100 last:border-none">
<th scope="row" class="px-0 py-4 text-sm/6 font-normal text-gray-600">Quarterly workshops</th>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr class="border-b border-gray-100 last:border-none">
<th scope="row" class="px-0 py-4 text-sm/6 font-normal text-gray-600">Priority phone support</th>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr class="border-b border-gray-100 last:border-none">
<th scope="row" class="px-0 py-4 text-sm/6 font-normal text-gray-600">1:1 onboarding tour</th>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="p-4 max-sm:text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
</tbody>
</table>
<div class="sm:hidden">
<div class="flex" aria-orientation="horizontal" role="tablist">
<!-- Selected: "border-indigo-600", Not Selected: "border-gray-100" -->
<button id="tabs-1-tab-1" class="w-1/3 border-b border-gray-100 py-4 text-base/8 font-medium text-indigo-600 not-focus-visible:focus:outline-sky-600" aria-controls="tabs-1-panel-1" role="tab" type="button">Starter</button>
<!-- Selected: "border-indigo-600", Not Selected: "border-gray-100" -->
<button id="tabs-1-tab-2" class="w-1/3 border-b border-gray-100 py-4 text-base/8 font-medium text-indigo-600 not-focus-visible:focus:outline-sky-600" aria-controls="tabs-1-panel-2" role="tab" type="button">Growth</button>
<!-- Selected: "border-indigo-600", Not Selected: "border-gray-100" -->
<button id="tabs-1-tab-3" class="w-1/3 border-b border-gray-100 py-4 text-base/8 font-medium text-indigo-600 not-focus-visible:focus:outline-sky-600" aria-controls="tabs-1-panel-3" role="tab" type="button">Scale</button>
</div>
<div id="tabs-1-panel-1" aria-labelledby="tabs-1-tab-1" role="tabpanel" tabindex="0">
<a href="#" class="mt-8 block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50">Get started</a>
<div class="-mx-6 mt-10 rounded-lg bg-gray-50 px-6 py-3 text-sm/6 font-semibold text-gray-950 group-first-of-type:mt-5">Features</div>
<dl>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Edge content delivery</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Custom domains</dt>
<dd class="text-center">
<span class="text-sm/6 text-gray-950">1</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Team members</dt>
<dd class="text-center">
<span class="text-sm/6 text-gray-950">3</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Single sign-on (SSO)</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
</dl>
<div class="-mx-6 mt-10 rounded-lg bg-gray-50 px-6 py-3 text-sm/6 font-semibold text-gray-950 group-first-of-type:mt-5">Reporting</div>
<dl>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Advanced analytics</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Basic reports</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Professional reports</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Custom report builder</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
</dl>
<div class="-mx-6 mt-10 rounded-lg bg-gray-50 px-6 py-3 text-sm/6 font-semibold text-gray-950 group-first-of-type:mt-5">Support</div>
<dl>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">24/7 online support</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Quarterly workshops</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Priority phone support</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">1:1 onboarding tour</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
</dl>
</div>
<div id="tabs-1-panel-2" aria-labelledby="tabs-1-tab-2" role="tabpanel" tabindex="0">
<a href="#" class="mt-8 block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50">Get started</a>
<div class="-mx-6 mt-10 rounded-lg bg-gray-50 px-6 py-3 text-sm/6 font-semibold text-gray-950 group-first-of-type:mt-5">Features</div>
<dl>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Edge content delivery</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Custom domains</dt>
<dd class="text-center">
<span class="text-sm/6 text-gray-950">3</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Team members</dt>
<dd class="text-center">
<span class="text-sm/6 text-gray-950">20</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Single sign-on (SSO)</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
</dl>
<div class="-mx-6 mt-10 rounded-lg bg-gray-50 px-6 py-3 text-sm/6 font-semibold text-gray-950 group-first-of-type:mt-5">Reporting</div>
<dl>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Advanced analytics</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Basic reports</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Professional reports</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Custom report builder</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
</dl>
<div class="-mx-6 mt-10 rounded-lg bg-gray-50 px-6 py-3 text-sm/6 font-semibold text-gray-950 group-first-of-type:mt-5">Support</div>
<dl>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">24/7 online support</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Quarterly workshops</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Priority phone support</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">1:1 onboarding tour</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
</dl>
</div>
<div id="tabs-1-panel-3" aria-labelledby="tabs-1-tab-3" role="tabpanel" tabindex="0">
<a href="#" class="mt-8 block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50">Get started</a>
<div class="-mx-6 mt-10 rounded-lg bg-gray-50 px-6 py-3 text-sm/6 font-semibold text-gray-950 group-first-of-type:mt-5">Features</div>
<dl>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Edge content delivery</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Custom domains</dt>
<dd class="text-center">
<span class="text-sm/6 text-gray-950">Unlimited</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Team members</dt>
<dd class="text-center">
<span class="text-sm/6 text-gray-950">Unlimited</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Single sign-on (SSO)</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
</dl>
<div class="-mx-6 mt-10 rounded-lg bg-gray-50 px-6 py-3 text-sm/6 font-semibold text-gray-950 group-first-of-type:mt-5">Reporting</div>
<dl>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Advanced analytics</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Basic reports</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Professional reports</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Custom report builder</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
</dl>
<div class="-mx-6 mt-10 rounded-lg bg-gray-50 px-6 py-3 text-sm/6 font-semibold text-gray-950 group-first-of-type:mt-5">Support</div>
<dl>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">24/7 online support</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Quarterly workshops</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">Priority phone support</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="grid grid-cols-2 border-b border-gray-100 py-4 last:border-none">
<dt class="text-sm/6 font-normal text-gray-600">1:1 onboarding tour</dt>
<dd class="text-center">
<svg class="inline-block size-4 fill-green-600" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
<div class="isolate overflow-hidden bg-gray-900">
<div class="mx-auto max-w-7xl px-6 pt-24 pb-96 text-center sm:pt-32 lg:px-8">
<div class="mx-auto max-w-4xl">
<h2 class="text-base/7 font-semibold text-indigo-400">Pricing</h2>
<p class="mt-2 text-5xl font-semibold tracking-tight text-balance text-white sm:text-6xl">Choose the right plan for you</p>
</div>
<div class="relative mt-6">
<p class="mx-auto max-w-2xl text-lg font-medium text-pretty text-gray-400 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
<svg viewBox="0 0 1208 1024" class="absolute -top-10 left-1/2 -z-10 h-[64rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:-top-12 md:-top-20 lg:-top-12 xl:top-0">
<ellipse cx="604" cy="512" fill="url(#6d1bd035-0dd1-437e-93fa-59d316231eb0)" rx="604" ry="512" />
<defs>
<radialGradient id="6d1bd035-0dd1-437e-93fa-59d316231eb0">
<stop stop-color="#7775D6" />
<stop offset="1" stop-color="#E935C1" />
</radialGradient>
</defs>
</svg>
</div>
</div>
<div class="flow-root bg-white pb-24 sm:pb-32">
<div class="-mt-80">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-md grid-cols-1 gap-8 lg:max-w-4xl lg:grid-cols-2">
<div class="flex flex-col justify-between rounded-3xl bg-white p-8 shadow-xl ring-1 ring-gray-900/10 sm:p-10">
<div>
<h3 id="tier-hobby" class="text-base/7 font-semibold text-indigo-600">Hobby</h3>
<div class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900">$29</span>
<span class="text-base/7 font-semibold text-gray-600">/month</span>
</div>
<p class="mt-6 text-base/7 text-gray-600">Modi dolorem expedita deleniti. Corporis iste qui inventore pariatur adipisci vitae.</p>
<ul role="list" class="mt-10 space-y-4 text-sm/6 text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Basic analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
48-hour support response time
</li>
</ul>
</div>
<a href="#" aria-describedby="tier-hobby" class="mt-8 block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started today</a>
</div>
<div class="flex flex-col justify-between rounded-3xl bg-white p-8 shadow-xl ring-1 ring-gray-900/10 sm:p-10">
<div>
<h3 id="tier-team" class="text-base/7 font-semibold text-indigo-600">Team</h3>
<div class="mt-4 flex items-baseline gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900">$99</span>
<span class="text-base/7 font-semibold text-gray-600">/month</span>
</div>
<p class="mt-6 text-base/7 text-gray-600">Explicabo quo fugit vel facere ullam corrupti non dolores. Expedita eius sit sequi.</p>
<ul role="list" class="mt-10 space-y-4 text-sm/6 text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
1-hour, dedicated support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
</ul>
</div>
<a href="#" aria-describedby="tier-team" class="mt-8 block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started today</a>
</div>
<div class="flex flex-col items-start gap-x-8 gap-y-6 rounded-3xl p-8 ring-1 ring-gray-900/10 sm:gap-y-10 sm:p-10 lg:col-span-2 lg:flex-row lg:items-center">
<div class="lg:min-w-0 lg:flex-1">
<h3 class="text-base/7 font-semibold text-indigo-600">Discounted</h3>
<p class="mt-1 text-base/7 text-gray-600">Dolor dolores repudiandae doloribus. Rerum sunt aut eum. Odit omnis non voluptatem sunt eos nostrum.</p>
</div>
<a href="#" class="rounded-md px-3.5 py-2 text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy discounted license <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl sm:text-center">
<h2 class="text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-6xl sm:text-balance">Simple no-tricks pricing</h2>
<p class="mx-auto mt-6 max-w-2xl text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">Distinctio et nulla eum soluta et neque labore quibusdam. Saepe et quasi iusto modi velit ut non voluptas in. Explicabo id ut laborum.</p>
</div>
<div class="mx-auto mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-200 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none">
<div class="p-8 sm:p-10 lg:flex-auto">
<h3 class="text-3xl font-semibold tracking-tight text-gray-900">Lifetime membership</h3>
<p class="mt-6 text-base/7 text-gray-600">Lorem ipsum dolor sit amet consect etur adipisicing elit. Itaque amet indis perferendis blanditiis repellendus etur quidem assumenda.</p>
<div class="mt-10 flex items-center gap-x-4">
<h4 class="flex-none text-sm/6 font-semibold text-indigo-600">What’s included</h4>
<div class="h-px flex-auto bg-gray-100"></div>
</div>
<ul role="list" class="mt-8 grid grid-cols-1 gap-4 text-sm/6 text-gray-600 sm:grid-cols-2 sm:gap-6">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Private forum access
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Member resources
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Entry to annual conference
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Official member t-shirt
</li>
</ul>
</div>
<div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:shrink-0">
<div class="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-gray-900/5 ring-inset lg:flex lg:flex-col lg:justify-center lg:py-16">
<div class="mx-auto max-w-xs px-8">
<p class="text-base font-semibold text-gray-600">Pay once, own it forever</p>
<p class="mt-6 flex items-baseline justify-center gap-x-2">
<span class="text-5xl font-semibold tracking-tight text-gray-900">$349</span>
<span class="text-sm/6 font-semibold tracking-wide text-gray-600">USD</span>
</p>
<a href="#" class="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get access</a>
<p class="mt-6 text-xs/5 text-gray-600">Invoices and receipts available for easy company reimbursement</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl">Pricing that grows with you</p>
</div>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
<div class="isolate mx-auto mt-16 grid max-w-md grid-cols-1 gap-y-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div class="flex flex-col justify-between rounded-3xl bg-white p-8 ring-1 ring-gray-200 lg:mt-8 lg:rounded-r-none xl:p-10">
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-freelancer" class="text-lg/8 font-semibold text-gray-900">Freelancer</h3>
</div>
<p class="mt-4 text-sm/6 text-gray-600">The essentials to provide your best work for clients.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-4xl font-semibold tracking-tight text-gray-900">$19</span>
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Basic analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
48-hour support response time
</li>
</ul>
</div>
<a href="#" aria-describedby="tier-freelancer" class="mt-8 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
</div>
<div class="flex flex-col justify-between rounded-3xl bg-white p-8 ring-1 ring-gray-200 lg:z-10 lg:rounded-b-none xl:p-10">
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg/8 font-semibold text-indigo-600">Startup</h3>
<p class="rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs/5 font-semibold text-indigo-600">Most popular</p>
</div>
<p class="mt-4 text-sm/6 text-gray-600">A plan that scales with your rapidly growing business.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-4xl font-semibold tracking-tight text-gray-900">$49</span>
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
25 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 10,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
24-hour support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
</ul>
</div>
<a href="#" aria-describedby="tier-startup" class="mt-8 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
</div>
<div class="flex flex-col justify-between rounded-3xl bg-white p-8 ring-1 ring-gray-200 lg:mt-8 lg:rounded-l-none xl:p-10">
<div>
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg/8 font-semibold text-gray-900">Enterprise</h3>
</div>
<p class="mt-4 text-sm/6 text-gray-600">Dedicated support and infrastructure for your company.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-4xl font-semibold tracking-tight text-gray-900">$99</span>
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
1-hour, dedicated support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
</ul>
</div>
<a href="#" aria-describedby="tier-enterprise" class="mt-8 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl sm:text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p class="mt-2 text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-6xl sm:text-balance">Pricing that grows with you</p>
</div>
<p class="mx-auto mt-6 max-w-2xl text-lg font-medium text-pretty text-gray-600 sm:text-center sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
<div class="mt-20 flow-root">
<div class="isolate -mt-16 grid max-w-sm grid-cols-1 gap-y-16 divide-y divide-gray-100 sm:mx-auto lg:-mx-8 lg:mt-0 lg:max-w-none lg:grid-cols-3 lg:divide-x lg:divide-y-0 xl:-mx-4">
<div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
<h3 id="tier-basic" class="text-base/7 font-semibold text-gray-900">Basic</h3>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-semibold tracking-tight text-gray-900">$19</span>
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<p class="mt-3 text-sm/6 text-gray-500">$15 per month if paid annually</p>
<a href="#" aria-describedby="tier-basic" class="mt-10 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<p class="mt-10 text-sm/6 font-semibold text-gray-900">Everything necessary to get started.</p>
<ul role="list" class="mt-6 space-y-3 text-sm/6 text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
Basic analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
48-hour support response time
</li>
</ul>
</div>
<div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
<h3 id="tier-essential" class="text-base/7 font-semibold text-gray-900">Essential</h3>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-semibold tracking-tight text-gray-900">$49</span>
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<p class="mt-3 text-sm/6 text-gray-500">$39 per month if paid annually</p>
<a href="#" aria-describedby="tier-essential" class="mt-10 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<p class="mt-10 text-sm/6 font-semibold text-gray-900">Everything in Basic, plus essential tools for growing your business.</p>
<ul role="list" class="mt-6 space-y-3 text-sm/6 text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
25 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
Up to 10,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
24-hour support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
</ul>
</div>
<div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
<h3 id="tier-growth" class="text-base/7 font-semibold text-gray-900">Growth</h3>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-5xl font-semibold tracking-tight text-gray-900">$99</span>
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<p class="mt-3 text-sm/6 text-gray-500">$79 per month if paid annually</p>
<a href="#" aria-describedby="tier-growth" class="mt-10 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<p class="mt-10 text-sm/6 font-semibold text-gray-900">Everything in Essential, plus collaboration tools and deeper insights.</p>
<ul role="list" class="mt-6 space-y-3 text-sm/6 text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
1-hour, dedicated support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
Custom reporting tools
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl">Pricing that grows with you</p>
</div>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
<div class="mt-16 flex justify-center">
<fieldset aria-label="Payment frequency">
<div class="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs/5 font-semibold ring-1 ring-gray-200 ring-inset">
<!-- Checked: "bg-indigo-600 text-white", Not Checked: "text-gray-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="monthly" class="sr-only">
<span>Monthly</span>
</label>
<!-- Checked: "bg-indigo-600 text-white", Not Checked: "text-gray-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="annually" class="sr-only">
<span>Annually</span>
</label>
</div>
</fieldset>
</div>
<div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div class="rounded-3xl p-8 ring-1 ring-gray-200 xl:p-10">
<h3 id="tier-freelancer" class="text-lg/8 font-semibold text-gray-900">Freelancer</h3>
<p class="mt-4 text-sm/6 text-gray-600">The essentials to provide your best work for clients.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-gray-900">$19</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<a href="#" aria-describedby="tier-freelancer" class="mt-6 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600 xl:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Basic analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
48-hour support response time
</li>
</ul>
</div>
<div class="rounded-3xl p-8 ring-1 ring-gray-200 xl:p-10">
<h3 id="tier-startup" class="text-lg/8 font-semibold text-gray-900">Startup</h3>
<p class="mt-4 text-sm/6 text-gray-600">A plan that scales with your rapidly growing business.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-gray-900">$29</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<a href="#" aria-describedby="tier-startup" class="mt-6 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600 xl:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
25 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 10,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
24-hour support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
</ul>
</div>
<div class="rounded-3xl bg-gray-900 p-8 ring-1 ring-gray-900 xl:p-10">
<h3 id="tier-enterprise" class="text-lg/8 font-semibold text-white">Enterprise</h3>
<p class="mt-4 text-sm/6 text-gray-300">Dedicated support and infrastructure for your company.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-4xl font-semibold tracking-tight text-white">Custom</span>
</p>
<a href="#" aria-describedby="tier-enterprise" class="mt-6 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Contact sales</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
1-hour, dedicated support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Custom reporting tools
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl">Pricing that grows with you</p>
</div>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
<div class="mt-16 flex justify-center">
<fieldset aria-label="Payment frequency">
<div class="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs/5 font-semibold ring-1 ring-gray-200 ring-inset">
<!-- Checked: "bg-indigo-600 text-white", Not Checked: "text-gray-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="monthly" class="sr-only">
<span>Monthly</span>
</label>
<!-- Checked: "bg-indigo-600 text-white", Not Checked: "text-gray-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="annually" class="sr-only">
<span>Annually</span>
</label>
</div>
</fieldset>
</div>
<div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div class="rounded-3xl p-8 ring-1 ring-gray-200 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-freelancer" class="text-lg/8 font-semibold text-gray-900">Freelancer</h3>
</div>
<p class="mt-4 text-sm/6 text-gray-600">The essentials to provide your best work for clients.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-gray-900">$19</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<a href="#" aria-describedby="tier-freelancer" class="mt-6 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600 xl:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Basic analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
48-hour support response time
</li>
</ul>
</div>
<div class="rounded-3xl p-8 ring-2 ring-indigo-600 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg/8 font-semibold text-indigo-600">Startup</h3>
<p class="rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs/5 font-semibold text-indigo-600">Most popular</p>
</div>
<p class="mt-4 text-sm/6 text-gray-600">A plan that scales with your rapidly growing business.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-gray-900">$29</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<a href="#" aria-describedby="tier-startup" class="mt-6 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600 xl:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
25 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 10,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
24-hour support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
</ul>
</div>
<div class="rounded-3xl p-8 ring-1 ring-gray-200 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg/8 font-semibold text-gray-900">Enterprise</h3>
</div>
<p class="mt-4 text-sm/6 text-gray-600">Dedicated support and infrastructure for your company.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-gray-900">$59</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<a href="#" aria-describedby="tier-enterprise" class="mt-6 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600 xl:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
1-hour, dedicated support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Custom reporting tools
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-400">Pricing</h2>
<p class="mt-2 text-5xl font-semibold tracking-tight text-balance text-white sm:text-6xl">Pricing that grows with you</p>
</div>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-400 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
<div class="mt-16 flex justify-center">
<fieldset aria-label="Payment frequency">
<div class="grid grid-cols-2 gap-x-1 rounded-full bg-white/5 p-1 text-center text-xs/5 font-semibold text-white">
<!-- Checked: "bg-indigo-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="monthly" class="sr-only">
<span>Monthly</span>
</label>
<!-- Checked: "bg-indigo-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="annually" class="sr-only">
<span>Annually</span>
</label>
</div>
</fieldset>
</div>
<div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div class="rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-freelancer" class="text-lg/8 font-semibold text-white">Freelancer</h3>
</div>
<p class="mt-4 text-sm/6 text-gray-300">The essentials to provide your best work for clients.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-white">$19</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-300">/month</span>
</p>
<a href="#" aria-describedby="tier-freelancer" class="mt-6 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Basic analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
48-hour support response time
</li>
</ul>
</div>
<div class="rounded-3xl bg-white/5 p-8 ring-2 ring-indigo-500 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg/8 font-semibold text-white">Startup</h3>
<p class="rounded-full bg-indigo-500 px-2.5 py-1 text-xs/5 font-semibold text-white">Most popular</p>
</div>
<p class="mt-4 text-sm/6 text-gray-300">A plan that scales with your rapidly growing business.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-white">$29</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-300">/month</span>
</p>
<a href="#" aria-describedby="tier-startup" class="mt-6 block rounded-md bg-indigo-500 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
25 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 10,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
24-hour support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
</ul>
</div>
<div class="rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg/8 font-semibold text-white">Enterprise</h3>
</div>
<p class="mt-4 text-sm/6 text-gray-300">Dedicated support and infrastructure for your company.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-white">$59</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-300">/month</span>
</p>
<a href="#" aria-describedby="tier-enterprise" class="mt-6 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
1-hour, dedicated support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Custom reporting tools
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl">Pricing that grows with you</p>
</div>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
<div class="mt-16 flex justify-center">
<fieldset aria-label="Payment frequency">
<div class="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs/5 font-semibold ring-1 ring-gray-200 ring-inset">
<!-- Checked: "bg-indigo-600 text-white", Not Checked: "text-gray-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="monthly" class="sr-only">
<span>Monthly</span>
</label>
<!-- Checked: "bg-indigo-600 text-white", Not Checked: "text-gray-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="annually" class="sr-only">
<span>Annually</span>
</label>
</div>
</fieldset>
</div>
<div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 md:max-w-2xl md:grid-cols-2 lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-4">
<div class="rounded-3xl p-8 ring-1 ring-gray-200">
<h3 id="tier-hobby" class="text-lg/8 font-semibold text-gray-900">Hobby</h3>
<p class="mt-4 text-sm/6 text-gray-600">The essentials to provide your best work for clients.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-gray-900">$19</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<a href="#" aria-describedby="tier-hobby" class="mt-6 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Basic analytics
</li>
</ul>
</div>
<div class="rounded-3xl p-8 ring-1 ring-gray-200">
<h3 id="tier-freelancer" class="text-lg/8 font-semibold text-gray-900">Freelancer</h3>
<p class="mt-4 text-sm/6 text-gray-600">The essentials to provide your best work for clients.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-gray-900">$29</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<a href="#" aria-describedby="tier-freelancer" class="mt-6 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
5 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 1,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Basic analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
48-hour support response time
</li>
</ul>
</div>
<div class="rounded-3xl p-8 ring-2 ring-indigo-600">
<h3 id="tier-startup" class="text-lg/8 font-semibold text-indigo-600">Startup</h3>
<p class="mt-4 text-sm/6 text-gray-600">A plan that scales with your rapidly growing business.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-gray-900">$59</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<a href="#" aria-describedby="tier-startup" class="mt-6 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
25 products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 10,000 subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
24-hour support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
</ul>
</div>
<div class="rounded-3xl p-8 ring-1 ring-gray-200">
<h3 id="tier-enterprise" class="text-lg/8 font-semibold text-gray-900">Enterprise</h3>
<p class="mt-4 text-sm/6 text-gray-600">Dedicated support and infrastructure for your company.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-gray-900">$99</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<a href="#" aria-describedby="tier-enterprise" class="mt-6 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-600">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited products
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited subscribers
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
1-hour, dedicated support response time
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Marketing automations
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Custom reporting tools
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p class="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl">Pricing that grows with you</p>
</div>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
<!-- xs to lg -->
<div class="mx-auto mt-12 max-w-md space-y-8 sm:mt-16 lg:hidden">
<section class="p-8">
<h3 id="tier-starter" class="text-sm/6 font-semibold text-gray-900">Starter</h3>
<p class="mt-2 flex items-baseline gap-x-1 text-gray-900">
<span class="text-4xl font-semibold">$19</span>
<span class="text-sm font-semibold">/month</span>
</p>
<a href="#" aria-describedby="tier-starter" class="mt-8 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<ul role="list" class="mt-10 space-y-4 text-sm/6 text-gray-900">
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Edge content delivery </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span>
Custom domains
<span class="text-sm/6 text-gray-500">(1)</span>
</span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span>
Team members
<span class="text-sm/6 text-gray-500">(3)</span>
</span>
</li>
</ul>
</li>
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Advanced analytics </span>
</li>
</ul>
</li>
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> 24/7 online support </span>
</li>
</ul>
</li>
</ul>
</section>
<section class="rounded-xl bg-gray-400/5 p-8 ring-1 ring-gray-200 ring-inset">
<h3 id="tier-growth" class="text-sm/6 font-semibold text-gray-900">Growth</h3>
<p class="mt-2 flex items-baseline gap-x-1 text-gray-900">
<span class="text-4xl font-semibold">$49</span>
<span class="text-sm font-semibold">/month</span>
</p>
<a href="#" aria-describedby="tier-growth" class="mt-8 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<ul role="list" class="mt-10 space-y-4 text-sm/6 text-gray-900">
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Edge content delivery </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span>
Custom domains
<span class="text-sm/6 text-gray-500">(3)</span>
</span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span>
Team members
<span class="text-sm/6 text-gray-500">(20)</span>
</span>
</li>
</ul>
</li>
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Advanced analytics </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Basic reports </span>
</li>
</ul>
</li>
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> 24/7 online support </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Quarterly workshops </span>
</li>
</ul>
</li>
</ul>
</section>
<section class="p-8">
<h3 id="tier-scale" class="text-sm/6 font-semibold text-gray-900">Scale</h3>
<p class="mt-2 flex items-baseline gap-x-1 text-gray-900">
<span class="text-4xl font-semibold">$99</span>
<span class="text-sm font-semibold">/month</span>
</p>
<a href="#" aria-describedby="tier-scale" class="mt-8 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
<ul role="list" class="mt-10 space-y-4 text-sm/6 text-gray-900">
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Edge content delivery </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span>
Custom domains
<span class="text-sm/6 text-gray-500">(Unlimited)</span>
</span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span>
Team members
<span class="text-sm/6 text-gray-500">(Unlimited)</span>
</span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Single sign-on (SSO) </span>
</li>
</ul>
</li>
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Advanced analytics </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Basic reports </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Professional reports </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Custom report builder </span>
</li>
</ul>
</li>
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> 24/7 online support </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Quarterly workshops </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Priority phone support </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> 1:1 onboarding tour </span>
</li>
</ul>
</li>
</ul>
</section>
</div>
<!-- lg+ -->
<div class="isolate mt-20 hidden lg:block">
<div class="relative -mx-8">
<div class="absolute inset-x-4 inset-y-0 -z-10 flex">
<div class="flex w-1/4 px-4" style="margin-left: 50%" aria-hidden="true">
<div class="w-full rounded-t-xl border-x border-t border-gray-900/10 bg-gray-400/5"></div>
</div>
</div>
<table class="w-full table-fixed border-separate border-spacing-x-8 text-left">
<caption class="sr-only">
Pricing plan comparison
</caption>
<colgroup>
<col class="w-1/4">
<col class="w-1/4">
<col class="w-1/4">
<col class="w-1/4">
</colgroup>
<thead>
<tr>
<td></td>
<th scope="col" class="px-6 pt-6 xl:px-8 xl:pt-8">
<div class="text-sm/7 font-semibold text-gray-900">Starter</div>
</th>
<th scope="col" class="px-6 pt-6 xl:px-8 xl:pt-8">
<div class="text-sm/7 font-semibold text-gray-900">Growth</div>
</th>
<th scope="col" class="px-6 pt-6 xl:px-8 xl:pt-8">
<div class="text-sm/7 font-semibold text-gray-900">Scale</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><span class="sr-only">Price</span></th>
<td class="px-6 pt-2 xl:px-8">
<div class="flex items-baseline gap-x-1 text-gray-900">
<span class="text-4xl font-semibold">$19</span>
<span class="text-sm/6 font-semibold">/month</span>
</div>
<a href="#" class="mt-8 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
</td>
<td class="px-6 pt-2 xl:px-8">
<div class="flex items-baseline gap-x-1 text-gray-900">
<span class="text-4xl font-semibold">$49</span>
<span class="text-sm/6 font-semibold">/month</span>
</div>
<a href="#" class="mt-8 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
</td>
<td class="px-6 pt-2 xl:px-8">
<div class="flex items-baseline gap-x-1 text-gray-900">
<span class="text-4xl font-semibold">$99</span>
<span class="text-sm/6 font-semibold">/month</span>
</div>
<a href="#" class="mt-8 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset hover:ring-indigo-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
</td>
</tr>
<tr>
<th scope="colgroup" colspan="4" class="pt-8 pb-4 text-sm/6 font-semibold text-gray-900">
Features
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
</th>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-gray-900">
Edge content delivery
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-gray-900">
Custom domains
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<div class="text-center text-sm/6 text-gray-500">1</div>
</td>
<td class="px-6 py-4 xl:px-8">
<div class="text-center text-sm/6 text-gray-500">3</div>
</td>
<td class="px-6 py-4 xl:px-8">
<div class="text-center text-sm/6 text-gray-500">Unlimited</div>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-gray-900">
Team members
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<div class="text-center text-sm/6 text-gray-500">3</div>
</td>
<td class="px-6 py-4 xl:px-8">
<div class="text-center text-sm/6 text-gray-500">20</div>
</td>
<td class="px-6 py-4 xl:px-8">
<div class="text-center text-sm/6 text-gray-500">Unlimited</div>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-gray-900">
Single sign-on (SSO)
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="colgroup" colspan="4" class="pt-16 pb-4 text-sm/6 font-semibold text-gray-900">
Reporting
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
</th>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-gray-900">
Advanced analytics
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-gray-900">
Basic reports
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-gray-900">
Professional reports
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-gray-900">
Custom report builder
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="colgroup" colspan="4" class="pt-16 pb-4 text-sm/6 font-semibold text-gray-900">
Support
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/10"></div>
</th>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-gray-900">
24/7 online support
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-gray-900">
Quarterly workshops
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-gray-900">
Priority phone support
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-gray-900">
1:1 onboarding tour
<div class="absolute inset-x-8 mt-4 h-px bg-gray-900/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-400">Pricing</h2>
<p class="mt-2 text-5xl font-semibold tracking-tight text-balance text-white sm:text-6xl">Pricing that grows with you</p>
</div>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-400 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
<!-- xs to lg -->
<div class="mx-auto mt-12 max-w-md space-y-8 sm:mt-16 lg:hidden">
<section class="p-8">
<h3 id="tier-starter" class="text-sm/6 font-semibold text-white">Starter</h3>
<p class="mt-2 flex items-baseline gap-x-1">
<span class="text-4xl font-semibold text-white">$19</span>
<span class="text-sm font-semibold text-gray-300">/month</span>
</p>
<a href="#" aria-describedby="tier-starter" class="mt-8 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy plan</a>
<ul role="list" class="mt-10 space-y-4 text-sm/6 text-white">
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Edge content delivery </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span>
Custom domains
<span class="text-sm/6 text-gray-400">(1)</span>
</span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span>
Team members
<span class="text-sm/6 text-gray-400">(3)</span>
</span>
</li>
</ul>
</li>
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Advanced analytics </span>
</li>
</ul>
</li>
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> 24/7 online support </span>
</li>
</ul>
</li>
</ul>
</section>
<section class="rounded-xl bg-white/5 p-8 ring-1 ring-white/10 ring-inset">
<h3 id="tier-growth" class="text-sm/6 font-semibold text-white">Growth</h3>
<p class="mt-2 flex items-baseline gap-x-1">
<span class="text-4xl font-semibold text-white">$49</span>
<span class="text-sm font-semibold text-gray-300">/month</span>
</p>
<a href="#" aria-describedby="tier-growth" class="mt-8 block rounded-md bg-indigo-500 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Buy plan</a>
<ul role="list" class="mt-10 space-y-4 text-sm/6 text-white">
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Edge content delivery </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span>
Custom domains
<span class="text-sm/6 text-gray-400">(3)</span>
</span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span>
Team members
<span class="text-sm/6 text-gray-400">(20)</span>
</span>
</li>
</ul>
</li>
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Advanced analytics </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Basic reports </span>
</li>
</ul>
</li>
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> 24/7 online support </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Quarterly workshops </span>
</li>
</ul>
</li>
</ul>
</section>
<section class="p-8">
<h3 id="tier-scale" class="text-sm/6 font-semibold text-white">Scale</h3>
<p class="mt-2 flex items-baseline gap-x-1">
<span class="text-4xl font-semibold text-white">$99</span>
<span class="text-sm font-semibold text-gray-300">/month</span>
</p>
<a href="#" aria-describedby="tier-scale" class="mt-8 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy plan</a>
<ul role="list" class="mt-10 space-y-4 text-sm/6 text-white">
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Edge content delivery </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span>
Custom domains
<span class="text-sm/6 text-gray-400">(Unlimited)</span>
</span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span>
Team members
<span class="text-sm/6 text-gray-400">(Unlimited)</span>
</span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Single sign-on (SSO) </span>
</li>
</ul>
</li>
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Advanced analytics </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Basic reports </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Professional reports </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Custom report builder </span>
</li>
</ul>
</li>
<li>
<ul role="list" class="space-y-4">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> 24/7 online support </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Quarterly workshops </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> Priority phone support </span>
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span> 1:1 onboarding tour </span>
</li>
</ul>
</li>
</ul>
</section>
</div>
<!-- lg+ -->
<div class="isolate mt-20 hidden lg:block">
<div class="relative -mx-8">
<div class="absolute inset-x-4 inset-y-0 -z-10 flex">
<div class="flex w-1/4 px-4" style="margin-left: 50%" aria-hidden="true">
<div class="w-full rounded-t-xl border-x border-t border-white/10 bg-white/5"></div>
</div>
</div>
<table class="w-full table-fixed border-separate border-spacing-x-8 text-left">
<caption class="sr-only">
Pricing plan comparison
</caption>
<colgroup>
<col class="w-1/4">
<col class="w-1/4">
<col class="w-1/4">
<col class="w-1/4">
</colgroup>
<thead>
<tr>
<td></td>
<th scope="col" class="px-6 pt-6 xl:px-8 xl:pt-8">
<div class="text-sm/7 font-semibold text-white">Starter</div>
</th>
<th scope="col" class="px-6 pt-6 xl:px-8 xl:pt-8">
<div class="text-sm/7 font-semibold text-white">Growth</div>
</th>
<th scope="col" class="px-6 pt-6 xl:px-8 xl:pt-8">
<div class="text-sm/7 font-semibold text-white">Scale</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><span class="sr-only">Price</span></th>
<td class="px-6 pt-2 xl:px-8">
<div class="flex items-baseline gap-x-1 text-white">
<span class="text-4xl font-semibold">$19</span>
<span class="text-sm/6 font-semibold">/month</span>
</div>
<a href="#" class="mt-8 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy plan</a>
</td>
<td class="px-6 pt-2 xl:px-8">
<div class="flex items-baseline gap-x-1 text-white">
<span class="text-4xl font-semibold">$49</span>
<span class="text-sm/6 font-semibold">/month</span>
</div>
<a href="#" class="mt-8 block rounded-md bg-indigo-500 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy plan</a>
</td>
<td class="px-6 pt-2 xl:px-8">
<div class="flex items-baseline gap-x-1 text-white">
<span class="text-4xl font-semibold">$99</span>
<span class="text-sm/6 font-semibold">/month</span>
</div>
<a href="#" class="mt-8 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy plan</a>
</td>
</tr>
<tr>
<th scope="colgroup" colspan="4" class="pt-8 pb-4 text-sm/6 font-semibold text-white">
Features
<div class="absolute inset-x-8 mt-4 h-px bg-white/10"></div>
</th>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-white">
Edge content delivery
<div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-white">
Custom domains
<div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<div class="text-center text-sm/6 text-gray-300">1</div>
</td>
<td class="px-6 py-4 xl:px-8">
<div class="text-center text-sm/6 text-gray-300">3</div>
</td>
<td class="px-6 py-4 xl:px-8">
<div class="text-center text-sm/6 text-gray-300">Unlimited</div>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-white">
Team members
<div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<div class="text-center text-sm/6 text-gray-300">3</div>
</td>
<td class="px-6 py-4 xl:px-8">
<div class="text-center text-sm/6 text-gray-300">20</div>
</td>
<td class="px-6 py-4 xl:px-8">
<div class="text-center text-sm/6 text-gray-300">Unlimited</div>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-white">
Single sign-on (SSO)
<div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="colgroup" colspan="4" class="pt-16 pb-4 text-sm/6 font-semibold text-white">
Reporting
<div class="absolute inset-x-8 mt-4 h-px bg-white/10"></div>
</th>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-white">
Advanced analytics
<div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-white">
Basic reports
<div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-white">
Professional reports
<div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-white">
Custom report builder
<div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="colgroup" colspan="4" class="pt-16 pb-4 text-sm/6 font-semibold text-white">
Support
<div class="absolute inset-x-8 mt-4 h-px bg-white/10"></div>
</th>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-white">
24/7 online support
<div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-white">
Quarterly workshops
<div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-white">
Priority phone support
<div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
<tr>
<th scope="row" class="py-4 text-sm/6 font-normal text-white">
1:1 onboarding tour
<div class="absolute inset-x-8 mt-4 h-px bg-white/5"></div>
</th>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Starter</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Not included in Growth</span>
</td>
<td class="px-6 py-4 xl:px-8">
<svg class="mx-auto size-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Included in Scale</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="isolate overflow-hidden">
<div class="flow-root bg-gray-900 pt-24 pb-16 sm:pt-32 lg:pb-0">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="relative z-10">
<h2 class="mx-auto max-w-4xl text-center text-5xl font-semibold tracking-tight text-balance text-white sm:text-6xl">Pricing that grows with you</h2>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-400 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer loyalty, and driving sales.</p>
<div class="mt-16 flex justify-center">
<fieldset aria-label="Payment frequency">
<div class="grid grid-cols-2 gap-x-1 rounded-full bg-white/5 p-1 text-center text-xs/5 font-semibold text-white">
<!-- Checked: "bg-indigo-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="monthly" class="sr-only">
<span>Monthly</span>
</label>
<!-- Checked: "bg-indigo-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="annually" class="sr-only">
<span>Annually</span>
</label>
</div>
</fieldset>
</div>
</div>
<div class="relative mx-auto mt-10 grid max-w-md grid-cols-1 gap-y-8 lg:mx-0 lg:-mb-14 lg:max-w-none lg:grid-cols-3">
<svg viewBox="0 0 1208 1024" aria-hidden="true" class="absolute -bottom-48 left-1/2 h-[64rem] -translate-x-1/2 translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] lg:-top-48 lg:bottom-auto lg:translate-y-0">
<ellipse cx="604" cy="512" fill="url(#d25c25d4-6d43-4bf9-b9ac-1842a30a4867)" rx="604" ry="512" />
<defs>
<radialGradient id="d25c25d4-6d43-4bf9-b9ac-1842a30a4867">
<stop stop-color="#7775D6" />
<stop offset="1" stop-color="#E935C1" />
</radialGradient>
</defs>
</svg>
<div class="hidden lg:absolute lg:inset-x-px lg:top-4 lg:bottom-0 lg:block lg:rounded-t-2xl lg:bg-gray-800/80 lg:ring-1 lg:ring-white/10" aria-hidden="true"></div>
<div class="relative rounded-2xl bg-gray-800/80 ring-1 ring-white/10 lg:bg-transparent lg:pb-14 lg:ring-0">
<div class="p-8 lg:pt-12 xl:p-10 xl:pt-14">
<h3 id="tier-starter" class="text-sm/6 font-semibold text-white">Starter</h3>
<div class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between lg:flex-col lg:items-stretch">
<div class="mt-2 flex items-center gap-x-4">
<!-- Price, update based on frequency toggle state -->
<p class="text-4xl font-semibold tracking-tight text-white">$19</p>
<div class="text-sm">
<p class="text-white">USD</p>
<!-- Payment frequency, update based on frequency toggle state -->
<p class="text-gray-400">Billed monthly</p>
</div>
</div>
<a href="#" aria-describedby="tier-starter" class="rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy this plan</a>
</div>
<div class="mt-8 flow-root sm:mt-10">
<ul role="list" class="-my-2 divide-y divide-white/5 border-t border-white/5 text-sm/6 text-white lg:border-t-0">
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Custom domains
</li>
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Edge content delivery
</li>
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
</ul>
</div>
</div>
</div>
<div class="relative z-10 rounded-2xl bg-white shadow-xl ring-1 ring-gray-900/10">
<div class="p-8 lg:pt-12 xl:p-10 xl:pt-14">
<h3 id="tier-scale" class="text-sm/6 font-semibold text-gray-900">Scale</h3>
<div class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between lg:flex-col lg:items-stretch">
<div class="mt-2 flex items-center gap-x-4">
<!-- Price, update based on frequency toggle state -->
<p class="text-4xl font-semibold tracking-tight text-gray-900">$99</p>
<div class="text-sm">
<p class="text-gray-900">USD</p>
<!-- Payment frequency, update based on frequency toggle state -->
<p class="text-gray-500">Billed monthly</p>
</div>
</div>
<a href="#" aria-describedby="tier-scale" class="rounded-md bg-indigo-600 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Buy this plan</a>
</div>
<div class="mt-8 flow-root sm:mt-10">
<ul role="list" class="-my-2 divide-y divide-gray-900/5 border-t border-gray-900/5 text-sm/6 text-gray-600 lg:border-t-0">
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Custom domains
</li>
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Edge content delivery
</li>
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Quarterly workshops
</li>
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Single sign-on (SSO)
</li>
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Priority phone support
</li>
</ul>
</div>
</div>
</div>
<div class="relative rounded-2xl bg-gray-800/80 ring-1 ring-white/10 lg:bg-transparent lg:pb-14 lg:ring-0">
<div class="p-8 lg:pt-12 xl:p-10 xl:pt-14">
<h3 id="tier-growth" class="text-sm/6 font-semibold text-white">Growth</h3>
<div class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between lg:flex-col lg:items-stretch">
<div class="mt-2 flex items-center gap-x-4">
<!-- Price, update based on frequency toggle state -->
<p class="text-4xl font-semibold tracking-tight text-white">$49</p>
<div class="text-sm">
<p class="text-white">USD</p>
<!-- Payment frequency, update based on frequency toggle state -->
<p class="text-gray-400">Billed monthly</p>
</div>
</div>
<a href="#" aria-describedby="tier-growth" class="rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy this plan</a>
</div>
<div class="mt-8 flow-root sm:mt-10">
<ul role="list" class="-my-2 divide-y divide-white/5 border-t border-white/5 text-sm/6 text-white lg:border-t-0">
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Custom domains
</li>
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Edge content delivery
</li>
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Advanced analytics
</li>
<li class="flex gap-x-3 py-2">
<svg class="h-6 w-5 flex-none text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Quarterly workshops
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="relative bg-gray-50 lg:pt-14">
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
<!-- Feature comparison (up to lg) -->
<section aria-labelledby="mobile-comparison-heading" class="lg:hidden">
<h2 id="mobile-comparison-heading" class="sr-only">Feature comparison</h2>
<div class="mx-auto max-w-2xl space-y-16">
<div class="border-t border-gray-900/10">
<div class="-mt-px w-72 border-t-2 border-transparent pt-10 md:w-80">
<h3 class="text-sm/6 font-semibold text-gray-900">Starter</h3>
<p class="mt-1 text-sm/6 text-gray-600">Everything you need to get started.</p>
</div>
<div class="mt-10 space-y-10">
<div>
<h4 class="text-sm/6 font-semibold text-gray-900">Features</h4>
<div class="relative mt-6">
<!-- Fake card background -->
<div aria-hidden="true" class="absolute inset-y-0 right-0 hidden w-1/2 rounded-lg bg-white shadow-xs sm:block"></div>
<div class="relative rounded-lg bg-white shadow-xs ring-1 ring-gray-900/10 sm:rounded-none sm:bg-transparent sm:shadow-none sm:ring-0">
<dl class="divide-y divide-gray-200 text-sm/6">
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Edge content delivery</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Custom domains</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<span class="text-gray-900">1</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Team members</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<span class="text-gray-900">3</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Single sign-on (SSO)</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
</dl>
</div>
<!-- Fake card border -->
<div aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 rounded-lg ring-1 ring-gray-900/10 sm:block"></div>
</div>
</div>
<div>
<h4 class="text-sm/6 font-semibold text-gray-900">Reporting</h4>
<div class="relative mt-6">
<!-- Fake card background -->
<div aria-hidden="true" class="absolute inset-y-0 right-0 hidden w-1/2 rounded-lg bg-white shadow-xs sm:block"></div>
<div class="relative rounded-lg bg-white shadow-xs ring-1 ring-gray-900/10 sm:rounded-none sm:bg-transparent sm:shadow-none sm:ring-0">
<dl class="divide-y divide-gray-200 text-sm/6">
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Advanced analytics</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Basic reports</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Professional reports</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Custom report builder</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
</dl>
</div>
<!-- Fake card border -->
<div aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 rounded-lg ring-1 ring-gray-900/10 sm:block"></div>
</div>
</div>
<div>
<h4 class="text-sm/6 font-semibold text-gray-900">Support</h4>
<div class="relative mt-6">
<!-- Fake card background -->
<div aria-hidden="true" class="absolute inset-y-0 right-0 hidden w-1/2 rounded-lg bg-white shadow-xs sm:block"></div>
<div class="relative rounded-lg bg-white shadow-xs ring-1 ring-gray-900/10 sm:rounded-none sm:bg-transparent sm:shadow-none sm:ring-0">
<dl class="divide-y divide-gray-200 text-sm/6">
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">24/7 online support</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Quarterly workshops</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Priority phone support</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">1:1 onboarding tour</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
</dl>
</div>
<!-- Fake card border -->
<div aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 rounded-lg ring-1 ring-gray-900/10 sm:block"></div>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-900/10">
<div class="-mt-px w-72 border-t-2 border-indigo-600 pt-10 md:w-80">
<h3 class="text-sm/6 font-semibold text-indigo-600">Scale</h3>
<p class="mt-1 text-sm/6 text-gray-600">Added flexibility at scale.</p>
</div>
<div class="mt-10 space-y-10">
<div>
<h4 class="text-sm/6 font-semibold text-gray-900">Features</h4>
<div class="relative mt-6">
<!-- Fake card background -->
<div aria-hidden="true" class="absolute inset-y-0 right-0 hidden w-1/2 rounded-lg bg-white shadow-xs sm:block"></div>
<div class="relative rounded-lg bg-white shadow-xs ring-2 ring-indigo-600 sm:rounded-none sm:bg-transparent sm:shadow-none sm:ring-0">
<dl class="divide-y divide-gray-200 text-sm/6">
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Edge content delivery</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Custom domains</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<span class="font-semibold text-indigo-600">Unlimited</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Team members</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<span class="font-semibold text-indigo-600">Unlimited</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Single sign-on (SSO)</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
</dl>
</div>
<!-- Fake card border -->
<div aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 rounded-lg ring-2 ring-indigo-600 sm:block"></div>
</div>
</div>
<div>
<h4 class="text-sm/6 font-semibold text-gray-900">Reporting</h4>
<div class="relative mt-6">
<!-- Fake card background -->
<div aria-hidden="true" class="absolute inset-y-0 right-0 hidden w-1/2 rounded-lg bg-white shadow-xs sm:block"></div>
<div class="relative rounded-lg bg-white shadow-xs ring-2 ring-indigo-600 sm:rounded-none sm:bg-transparent sm:shadow-none sm:ring-0">
<dl class="divide-y divide-gray-200 text-sm/6">
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Advanced analytics</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Basic reports</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Professional reports</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Custom report builder</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
</dl>
</div>
<!-- Fake card border -->
<div aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 rounded-lg ring-2 ring-indigo-600 sm:block"></div>
</div>
</div>
<div>
<h4 class="text-sm/6 font-semibold text-gray-900">Support</h4>
<div class="relative mt-6">
<!-- Fake card background -->
<div aria-hidden="true" class="absolute inset-y-0 right-0 hidden w-1/2 rounded-lg bg-white shadow-xs sm:block"></div>
<div class="relative rounded-lg bg-white shadow-xs ring-2 ring-indigo-600 sm:rounded-none sm:bg-transparent sm:shadow-none sm:ring-0">
<dl class="divide-y divide-gray-200 text-sm/6">
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">24/7 online support</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Quarterly workshops</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Priority phone support</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">1:1 onboarding tour</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
</dl>
</div>
<!-- Fake card border -->
<div aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 rounded-lg ring-2 ring-indigo-600 sm:block"></div>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-900/10">
<div class="-mt-px w-72 border-t-2 border-transparent pt-10 md:w-80">
<h3 class="text-sm/6 font-semibold text-gray-900">Growth</h3>
<p class="mt-1 text-sm/6 text-gray-600">All the extras for your growing team.</p>
</div>
<div class="mt-10 space-y-10">
<div>
<h4 class="text-sm/6 font-semibold text-gray-900">Features</h4>
<div class="relative mt-6">
<!-- Fake card background -->
<div aria-hidden="true" class="absolute inset-y-0 right-0 hidden w-1/2 rounded-lg bg-white shadow-xs sm:block"></div>
<div class="relative rounded-lg bg-white shadow-xs ring-1 ring-gray-900/10 sm:rounded-none sm:bg-transparent sm:shadow-none sm:ring-0">
<dl class="divide-y divide-gray-200 text-sm/6">
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Edge content delivery</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Custom domains</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<span class="text-gray-900">3</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Team members</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<span class="text-gray-900">20</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Single sign-on (SSO)</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
</dl>
</div>
<!-- Fake card border -->
<div aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 rounded-lg ring-1 ring-gray-900/10 sm:block"></div>
</div>
</div>
<div>
<h4 class="text-sm/6 font-semibold text-gray-900">Reporting</h4>
<div class="relative mt-6">
<!-- Fake card background -->
<div aria-hidden="true" class="absolute inset-y-0 right-0 hidden w-1/2 rounded-lg bg-white shadow-xs sm:block"></div>
<div class="relative rounded-lg bg-white shadow-xs ring-1 ring-gray-900/10 sm:rounded-none sm:bg-transparent sm:shadow-none sm:ring-0">
<dl class="divide-y divide-gray-200 text-sm/6">
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Advanced analytics</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Basic reports</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Professional reports</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Custom report builder</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
</dl>
</div>
<!-- Fake card border -->
<div aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 rounded-lg ring-1 ring-gray-900/10 sm:block"></div>
</div>
</div>
<div>
<h4 class="text-sm/6 font-semibold text-gray-900">Support</h4>
<div class="relative mt-6">
<!-- Fake card background -->
<div aria-hidden="true" class="absolute inset-y-0 right-0 hidden w-1/2 rounded-lg bg-white shadow-xs sm:block"></div>
<div class="relative rounded-lg bg-white shadow-xs ring-1 ring-gray-900/10 sm:rounded-none sm:bg-transparent sm:shadow-none sm:ring-0">
<dl class="divide-y divide-gray-200 text-sm/6">
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">24/7 online support</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Quarterly workshops</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">Priority phone support</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
<div class="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0">
<dt class="pr-4 text-gray-600">1:1 onboarding tour</dt>
<dd class="flex items-center justify-end sm:justify-center sm:px-4">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</dd>
</div>
</dl>
</div>
<!-- Fake card border -->
<div aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 rounded-lg ring-1 ring-gray-900/10 sm:block"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Feature comparison (lg+) -->
<section aria-labelledby="comparison-heading" class="hidden lg:block">
<h2 id="comparison-heading" class="sr-only">Feature comparison</h2>
<div class="grid grid-cols-4 gap-x-8 border-t border-gray-900/10 before:block">
<div aria-hidden="true" class="-mt-px">
<div class="border-t-2 border-transparent pt-10">
<p class="text-sm/6 font-semibold text-gray-900">Starter</p>
<p class="mt-1 text-sm/6 text-gray-600">Everything you need to get started.</p>
</div>
</div>
<div aria-hidden="true" class="-mt-px">
<div class="border-t-2 border-indigo-600 pt-10">
<p class="text-sm/6 font-semibold text-indigo-600">Scale</p>
<p class="mt-1 text-sm/6 text-gray-600">Added flexibility at scale.</p>
</div>
</div>
<div aria-hidden="true" class="-mt-px">
<div class="border-t-2 border-transparent pt-10">
<p class="text-sm/6 font-semibold text-gray-900">Growth</p>
<p class="mt-1 text-sm/6 text-gray-600">All the extras for your growing team.</p>
</div>
</div>
</div>
<div class="-mt-6 space-y-16">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Features</h3>
<div class="relative -mx-8 mt-10">
<!-- Fake card backgrounds -->
<div class="absolute inset-x-8 inset-y-0 grid grid-cols-4 gap-x-8 before:block" aria-hidden="true">
<div class="size-full rounded-lg bg-white shadow-xs"></div>
<div class="size-full rounded-lg bg-white shadow-xs"></div>
<div class="size-full rounded-lg bg-white shadow-xs"></div>
</div>
<table class="relative w-full border-separate border-spacing-x-8">
<thead>
<tr class="text-left">
<th scope="col">
<span class="sr-only">Feature</span>
</th>
<th scope="col">
<span class="sr-only">Starter tier</span>
</th>
<th scope="col">
<span class="sr-only">Scale tier</span>
</th>
<th scope="col">
<span class="sr-only">Growth tier</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="w-1/4 py-3 pr-4 text-left text-sm/6 font-normal text-gray-900">
Edge content delivery
<div class="absolute inset-x-8 mt-3 h-px bg-gray-200"></div>
</th>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
</tr>
<tr>
<th scope="row" class="w-1/4 py-3 pr-4 text-left text-sm/6 font-normal text-gray-900">
Custom domains
<div class="absolute inset-x-8 mt-3 h-px bg-gray-200"></div>
</th>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<span class="text-sm/6 text-gray-900">1</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<span class="text-sm/6 font-semibold text-indigo-600">Unlimited</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<span class="text-sm/6 text-gray-900">3</span>
</span>
</td>
</tr>
<tr>
<th scope="row" class="w-1/4 py-3 pr-4 text-left text-sm/6 font-normal text-gray-900">
Team members
<div class="absolute inset-x-8 mt-3 h-px bg-gray-200"></div>
</th>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<span class="text-sm/6 text-gray-900">3</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<span class="text-sm/6 font-semibold text-indigo-600">Unlimited</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<span class="text-sm/6 text-gray-900">20</span>
</span>
</td>
</tr>
<tr>
<th scope="row" class="w-1/4 py-3 pr-4 text-left text-sm/6 font-normal text-gray-900">Single sign-on (SSO)</th>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</span>
</td>
</tr>
</tbody>
</table>
<!-- Fake card borders -->
<div class="pointer-events-none absolute inset-x-8 inset-y-0 grid grid-cols-4 gap-x-8 before:block" aria-hidden="true">
<div class="rounded-lg ring-1 ring-gray-900/10"></div>
<div class="rounded-lg ring-2 ring-indigo-600"></div>
<div class="rounded-lg ring-1 ring-gray-900/10"></div>
</div>
</div>
</div>
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Reporting</h3>
<div class="relative -mx-8 mt-10">
<!-- Fake card backgrounds -->
<div class="absolute inset-x-8 inset-y-0 grid grid-cols-4 gap-x-8 before:block" aria-hidden="true">
<div class="size-full rounded-lg bg-white shadow-xs"></div>
<div class="size-full rounded-lg bg-white shadow-xs"></div>
<div class="size-full rounded-lg bg-white shadow-xs"></div>
</div>
<table class="relative w-full border-separate border-spacing-x-8">
<thead>
<tr class="text-left">
<th scope="col">
<span class="sr-only">Feature</span>
</th>
<th scope="col">
<span class="sr-only">Starter tier</span>
</th>
<th scope="col">
<span class="sr-only">Scale tier</span>
</th>
<th scope="col">
<span class="sr-only">Growth tier</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="w-1/4 py-3 pr-4 text-left text-sm/6 font-normal text-gray-900">
Advanced analytics
<div class="absolute inset-x-8 mt-3 h-px bg-gray-200"></div>
</th>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
</tr>
<tr>
<th scope="row" class="w-1/4 py-3 pr-4 text-left text-sm/6 font-normal text-gray-900">
Basic reports
<div class="absolute inset-x-8 mt-3 h-px bg-gray-200"></div>
</th>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
</tr>
<tr>
<th scope="row" class="w-1/4 py-3 pr-4 text-left text-sm/6 font-normal text-gray-900">
Professional reports
<div class="absolute inset-x-8 mt-3 h-px bg-gray-200"></div>
</th>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</span>
</td>
</tr>
<tr>
<th scope="row" class="w-1/4 py-3 pr-4 text-left text-sm/6 font-normal text-gray-900">Custom report builder</th>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</span>
</td>
</tr>
</tbody>
</table>
<!-- Fake card borders -->
<div class="pointer-events-none absolute inset-x-8 inset-y-0 grid grid-cols-4 gap-x-8 before:block" aria-hidden="true">
<div class="rounded-lg ring-1 ring-gray-900/10"></div>
<div class="rounded-lg ring-2 ring-indigo-600"></div>
<div class="rounded-lg ring-1 ring-gray-900/10"></div>
</div>
</div>
</div>
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Support</h3>
<div class="relative -mx-8 mt-10">
<!-- Fake card backgrounds -->
<div class="absolute inset-x-8 inset-y-0 grid grid-cols-4 gap-x-8 before:block" aria-hidden="true">
<div class="size-full rounded-lg bg-white shadow-xs"></div>
<div class="size-full rounded-lg bg-white shadow-xs"></div>
<div class="size-full rounded-lg bg-white shadow-xs"></div>
</div>
<table class="relative w-full border-separate border-spacing-x-8">
<thead>
<tr class="text-left">
<th scope="col">
<span class="sr-only">Feature</span>
</th>
<th scope="col">
<span class="sr-only">Starter tier</span>
</th>
<th scope="col">
<span class="sr-only">Scale tier</span>
</th>
<th scope="col">
<span class="sr-only">Growth tier</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="w-1/4 py-3 pr-4 text-left text-sm/6 font-normal text-gray-900">
24/7 online support
<div class="absolute inset-x-8 mt-3 h-px bg-gray-200"></div>
</th>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
</tr>
<tr>
<th scope="row" class="w-1/4 py-3 pr-4 text-left text-sm/6 font-normal text-gray-900">
Quarterly workshops
<div class="absolute inset-x-8 mt-3 h-px bg-gray-200"></div>
</th>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
</tr>
<tr>
<th scope="row" class="w-1/4 py-3 pr-4 text-left text-sm/6 font-normal text-gray-900">
Priority phone support
<div class="absolute inset-x-8 mt-3 h-px bg-gray-200"></div>
</th>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</span>
</td>
</tr>
<tr>
<th scope="row" class="w-1/4 py-3 pr-4 text-left text-sm/6 font-normal text-gray-900">1:1 onboarding tour</th>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Yes</span>
</span>
</td>
<td class="relative w-1/4 px-4 py-0 text-center">
<span class="relative size-full py-3">
<svg class="mx-auto size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<span class="sr-only">No</span>
</span>
</td>
</tr>
</tbody>
</table>
<!-- Fake card borders -->
<div class="pointer-events-none absolute inset-x-8 inset-y-0 grid grid-cols-4 gap-x-8 before:block" aria-hidden="true">
<div class="rounded-lg ring-1 ring-gray-900/10"></div>
<div class="rounded-lg ring-2 ring-indigo-600"></div>
<div class="rounded-lg ring-1 ring-gray-900/10"></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="relative isolate overflow-hidden bg-gray-900 py-16 sm:py-24 lg:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
<div class="max-w-xl lg:max-w-lg">
<h2 class="text-4xl font-semibold tracking-tight text-white">Subscribe to our newsletter</h2>
<p class="mt-4 text-lg text-gray-300">Nostrud amet eu ullamco nisi aute in ad minim nostrud adipisicing velit quis. Duis tempor incididunt dolore.</p>
<div class="mt-6 flex max-w-md gap-x-4">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md bg-white/5 px-3.5 py-2 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6" placeholder="Enter your email">
<button type="submit" class="flex-none rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Subscribe</button>
</div>
</div>
<dl class="grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 lg:pt-2">
<div class="flex flex-col items-start">
<div class="rounded-md bg-white/5 p-2 ring-1 ring-white/10">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
</svg>
</div>
<dt class="mt-4 text-base font-semibold text-white">Weekly articles</dt>
<dd class="mt-2 text-base/7 text-gray-400">Non laboris consequat cupidatat laborum magna. Eiusmod non irure cupidatat duis commodo amet.</dd>
</div>
<div class="flex flex-col items-start">
<div class="rounded-md bg-white/5 p-2 ring-1 ring-white/10">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.05 4.575a1.575 1.575 0 1 0-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 0 1 3.15 0v1.5m-3.15 0 .075 5.925m3.075.75V4.575m0 0a1.575 1.575 0 0 1 3.15 0V15M6.9 7.575a1.575 1.575 0 1 0-3.15 0v8.175a6.75 6.75 0 0 0 6.75 6.75h2.018a5.25 5.25 0 0 0 3.712-1.538l1.732-1.732a5.25 5.25 0 0 0 1.538-3.712l.003-2.024a.668.668 0 0 1 .198-.471 1.575 1.575 0 1 0-2.228-2.228 3.818 3.818 0 0 0-1.12 2.687M6.9 7.575V12m6.27 4.318A4.49 4.49 0 0 1 16.35 15m.002 0h-.002" />
</svg>
</div>
<dt class="mt-4 text-base font-semibold text-white">No spam</dt>
<dd class="mt-2 text-base/7 text-gray-400">Officia excepteur ullamco ut sint duis proident non adipisicing. Voluptate incididunt anim.</dd>
</div>
</dl>
</div>
</div>
<div class="absolute top-0 left-1/2 -z-10 -translate-x-1/2 blur-3xl xl:-top-6" aria-hidden="true">
<div class="aspect-1155/678 w-[72.1875rem] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
</div>
<div class="bg-white py-16 sm:py-24 lg:py-32">
<div class="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 lg:grid-cols-12 lg:gap-8 lg:px-8">
<h2 class="max-w-xl text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl lg:col-span-7">Want product news and updates? Sign up for our newsletter.</h2>
<form class="w-full max-w-md lg:col-span-5 lg:pt-2">
<div class="flex gap-x-4">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" placeholder="Enter your email">
<button type="submit" class="flex-none rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Subscribe</button>
</div>
<p class="mt-4 text-sm/6 text-gray-900">We care about your data. Read our <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">privacy policy</a>.</p>
</form>
</div>
</div>
<div class="bg-gray-900 py-16 sm:py-24 lg:py-32">
<div class="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 lg:grid-cols-12 lg:gap-8 lg:px-8">
<h2 class="max-w-xl text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl lg:col-span-7">Want product news and updates? Sign up for our newsletter.</h2>
<form class="w-full max-w-md lg:col-span-5 lg:pt-2">
<div class="flex gap-x-4">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md bg-white/5 px-3.5 py-2 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:text-sm/6" placeholder="Enter your email">
<button type="submit" class="flex-none rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Subscribe</button>
</div>
<p class="mt-4 text-sm/6 text-gray-300">We care about your data. Read our <a href="#" class="font-semibold text-white">privacy policy</a>.</p>
</form>
</div>
</div>
<div class="bg-indigo-700 py-16 sm:py-24 lg:py-32">
<div class="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 lg:grid-cols-12 lg:gap-8 lg:px-8">
<h2 class="max-w-xl text-3xl font-semibold tracking-tight text-white sm:text-4xl lg:col-span-7">Want product news and updates? Sign up for our newsletter.</h2>
<form class="w-full max-w-md lg:col-span-5 lg:pt-2">
<div class="flex gap-x-4">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md bg-white/10 px-3.5 py-2 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-white/75 focus:outline-2 focus:-outline-offset-2 focus:outline-white sm:text-sm/6" placeholder="Enter your email">
<button type="submit" class="flex-none rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-indigo-600 shadow-xs hover:bg-indigo-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Subscribe</button>
</div>
<p class="mt-4 text-sm/6 text-gray-300">We care about your data. Read our <a href="#" class="font-semibold text-white hover:text-indigo-50">privacy policy</a>.</p>
</form>
</div>
</div>
<div class="bg-white py-16 sm:py-24 lg:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="max-w-2xl text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl">Want product news and updates? Sign up for our newsletter.</h2>
<form class="mt-10 max-w-md">
<div class="flex gap-x-4">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" placeholder="Enter your email">
<button type="submit" class="flex-none rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Subscribe</button>
</div>
<p class="mt-4 text-sm/6 text-gray-900">We care about your data. Read our <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">privacy policy</a>.</p>
</form>
</div>
</div>
<div class="bg-white py-16 sm:py-24">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="relative isolate overflow-hidden bg-gray-900 px-6 py-24 shadow-2xl sm:rounded-3xl sm:px-24 xl:py-32">
<h2 class="mx-auto max-w-3xl text-center text-4xl font-semibold tracking-tight text-white sm:text-5xl">Get notified when we’re launching</h2>
<p class="mx-auto mt-6 max-w-lg text-center text-lg text-gray-300">Reprehenderit ad esse et non officia in nulla. Id proident tempor incididunt nostrud nulla et culpa.</p>
<form class="mx-auto mt-10 flex max-w-md gap-x-4">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md bg-white/5 px-3.5 py-2 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-white sm:text-sm/6" placeholder="Enter your email">
<button type="submit" class="flex-none rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Notify me</button>
</form>
<svg viewBox="0 0 1024 1024" class="absolute top-1/2 left-1/2 -z-10 size-[64rem] -translate-x-1/2" aria-hidden="true">
<circle cx="512" cy="512" r="512" fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7" />
<defs>
<radialGradient id="759c1415-0410-454c-8f7c-9a820de03641" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(512 512) rotate(90) scale(512)">
<stop stop-color="#7775D6" />
<stop offset="1" stop-color="#E935C1" stop-opacity="0" />
</radialGradient>
</defs>
</svg>
</div>
</div>
</div>
<div class="bg-white py-16 sm:py-24">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="relative isolate flex flex-col gap-10 overflow-hidden bg-gray-900 px-6 py-24 shadow-2xl sm:rounded-3xl sm:px-24 xl:flex-row xl:items-center xl:py-32">
<h2 class="max-w-xl text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl xl:flex-auto">Want our product updates? Sign up for our newsletter.</h2>
<form class="w-full max-w-md">
<div class="flex gap-x-4">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md bg-white/5 px-3.5 py-2 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-white sm:text-sm/6" placeholder="Enter your email">
<button type="submit" class="flex-none rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Notify me</button>
</div>
<p class="mt-4 text-sm/6 text-gray-300">We care about your data. Read our <a href="#" class="font-semibold text-white">privacy policy</a>.</p>
</form>
<svg viewBox="0 0 1024 1024" class="absolute top-1/2 left-1/2 -z-10 size-[64rem] -translate-x-1/2" aria-hidden="true">
<circle cx="512" cy="512" r="512" fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7" />
<defs>
<radialGradient id="759c1415-0410-454c-8f7c-9a820de03641" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(512 512) rotate(90) scale(512)">
<stop stop-color="#7775D6" />
<stop offset="1" stop-color="#E935C1" stop-opacity="0" />
</radialGradient>
</defs>
</svg>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
<dt class="text-base/7 text-gray-600">Transactions every 24 hours</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">44 million</dd>
</div>
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
<dt class="text-base/7 text-gray-600">Assets under holding</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">$119 trillion</dd>
</div>
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
<dt class="text-base/7 text-gray-600">New users annually</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">46,000</dd>
</div>
</dl>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center">
<h2 class="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">Trusted by creators worldwide</h2>
<p class="mt-4 text-lg/8 text-gray-600">Lorem ipsum dolor sit amet consect adipisicing possimus.</p>
</div>
<dl class="mt-16 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col bg-gray-400/5 p-8">
<dt class="text-sm/6 font-semibold text-gray-600">Creators on the platform</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">8,000+</dd>
</div>
<div class="flex flex-col bg-gray-400/5 p-8">
<dt class="text-sm/6 font-semibold text-gray-600">Flat platform fee</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">3%</dd>
</div>
<div class="flex flex-col bg-gray-400/5 p-8">
<dt class="text-sm/6 font-semibold text-gray-600">Uptime guarantee</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">99.9%</dd>
</div>
<div class="flex flex-col bg-gray-400/5 p-8">
<dt class="text-sm/6 font-semibold text-gray-600">Paid out to creators</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">$70M</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2850&q=80&blend=111827&blend-mode=multiply&sat=-100&exp=15" alt="" class="absolute inset-0 -z-10 size-full object-cover">
<div class="relative mx-auto max-w-7xl px-6 lg:px-8">
<div class="absolute -bottom-8 -left-96 -z-10 transform-gpu blur-3xl sm:-bottom-64 sm:-left-40 lg:-bottom-32 lg:left-8 xl:-left-10" aria-hidden="true">
<div class="aspect-1266/975 w-[79.125rem] bg-linear-to-tr from-[#ff4694] to-[#776fff] opacity-20" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
<h2 class="text-base/8 font-semibold text-indigo-400">Our track record</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">Trusted by thousands of creators worldwide</p>
<p class="mt-6 text-lg/8 text-gray-300">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis.</p>
</div>
<dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-10 text-white sm:mt-20 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-4">
<div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
<dt class="text-sm/6">Creators on the platform</dt>
<dd class="order-first text-3xl font-semibold tracking-tight">8,000+</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
<dt class="text-sm/6">Flat platform fee</dt>
<dd class="order-first text-3xl font-semibold tracking-tight">3%</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
<dt class="text-sm/6">Uptime guarantee</dt>
<dd class="order-first text-3xl font-semibold tracking-tight">99.9%</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
<dt class="text-sm/6">Paid out to creators</dt>
<dd class="order-first text-3xl font-semibold tracking-tight">$70M</dd>
</div>
</dl>
</div>
</div>
<div class="relative bg-white">
<img class="h-56 w-full bg-gray-50 object-cover lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-1/2" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2850&q=80" alt="">
<div class="mx-auto grid max-w-7xl lg:grid-cols-2">
<div class="px-6 pt-16 pb-24 sm:pt-20 sm:pb-32 lg:col-start-2 lg:px-8 lg:pt-32">
<div class="mx-auto max-w-2xl lg:mr-0 lg:max-w-lg">
<h2 class="text-base/8 font-semibold text-indigo-600">Our track record</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Trusted by thousands of creators worldwide</p>
<p class="mt-6 text-lg/8 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<dl class="mt-16 grid max-w-xl grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 xl:mt-16">
<div class="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6">
<dt class="text-sm/6 text-gray-600">Creators on the platform</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">8,000+</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6">
<dt class="text-sm/6 text-gray-600">Flat platform fee</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">3%</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6">
<dt class="text-sm/6 text-gray-600">Uptime guarantee</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">99.9%</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6">
<dt class="text-sm/6 text-gray-600">Paid out to creators</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">$70M</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
<div>
<time datetime="2021-08" class="flex items-center text-sm/6 font-semibold text-indigo-600">
<svg viewBox="0 0 4 4" class="mr-4 size-1 flex-none" aria-hidden="true">
<circle cx="2" cy="2" r="2" fill="currentColor" />
</svg>
Aug 2021
<div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
</time>
<p class="mt-6 text-lg/8 font-semibold tracking-tight text-gray-900">Founded company</p>
<p class="mt-1 text-base/7 text-gray-600">Nihil aut nam. Dignissimos a pariatur et quos omnis. Aspernatur asperiores et dolorem dolorem optio voluptate repudiandae.</p>
</div>
<div>
<time datetime="2021-12" class="flex items-center text-sm/6 font-semibold text-indigo-600">
<svg viewBox="0 0 4 4" class="mr-4 size-1 flex-none" aria-hidden="true">
<circle cx="2" cy="2" r="2" fill="currentColor" />
</svg>
Dec 2021
<div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
</time>
<p class="mt-6 text-lg/8 font-semibold tracking-tight text-gray-900">Secured $65m in funding</p>
<p class="mt-1 text-base/7 text-gray-600">Provident quia ut esse. Vero vel eos repudiandae aspernatur. Cumque minima impedit sapiente a architecto nihil.</p>
</div>
<div>
<time datetime="2022-02" class="flex items-center text-sm/6 font-semibold text-indigo-600">
<svg viewBox="0 0 4 4" class="mr-4 size-1 flex-none" aria-hidden="true">
<circle cx="2" cy="2" r="2" fill="currentColor" />
</svg>
Feb 2022
<div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
</time>
<p class="mt-6 text-lg/8 font-semibold tracking-tight text-gray-900">Released beta</p>
<p class="mt-1 text-base/7 text-gray-600">Sunt perspiciatis incidunt. Non necessitatibus aliquid. Consequatur ut officiis earum eum quia facilis. Hic deleniti dolorem quia et.</p>
</div>
<div>
<time datetime="2022-12" class="flex items-center text-sm/6 font-semibold text-indigo-600">
<svg viewBox="0 0 4 4" class="mr-4 size-1 flex-none" aria-hidden="true">
<circle cx="2" cy="2" r="2" fill="currentColor" />
</svg>
Dec 2022
<div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
</time>
<p class="mt-6 text-lg/8 font-semibold tracking-tight text-gray-900">Global launch of product</p>
<p class="mt-1 text-base/7 text-gray-600">Ut ipsa sint distinctio quod itaque nam qui. Possimus aut unde id architecto voluptatem hic aut pariatur velit.</p>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">We approach work as a place to make the world better</h2>
<p class="mt-6 text-base/7 text-gray-600">Diam nunc lacus lacus aliquam turpis enim. Eget hac velit est euismod lacus. Est non placerat nam arcu. Cras purus nibh cursus sit eu in id. Integer vel nibh.</p>
</div>
<div class="mx-auto mt-16 flex max-w-2xl flex-col gap-8 lg:mx-0 lg:mt-20 lg:max-w-none lg:flex-row lg:items-end">
<div class="flex flex-col-reverse justify-between gap-x-16 gap-y-8 rounded-2xl bg-gray-50 p-8 sm:w-3/4 sm:max-w-md sm:flex-row-reverse sm:items-end lg:w-72 lg:max-w-none lg:flex-none lg:flex-col lg:items-start">
<p class="flex-none text-3xl font-bold tracking-tight text-gray-900">250k</p>
<div class="sm:w-80 sm:shrink lg:w-auto lg:flex-none">
<p class="text-lg font-semibold tracking-tight text-gray-900">Users on the platform</p>
<p class="mt-2 text-base/7 text-gray-600">Vel labore deleniti veniam consequuntur sunt nobis.</p>
</div>
</div>
<div class="flex flex-col-reverse justify-between gap-x-16 gap-y-8 rounded-2xl bg-gray-900 p-8 sm:flex-row-reverse sm:items-end lg:w-full lg:max-w-sm lg:flex-auto lg:flex-col lg:items-start lg:gap-y-44">
<p class="flex-none text-3xl font-bold tracking-tight text-white">$8.9 billion</p>
<div class="sm:w-80 sm:shrink lg:w-auto lg:flex-none">
<p class="text-lg font-semibold tracking-tight text-white">We’re proud that our customers have made over $8 billion in total revenue.</p>
<p class="mt-2 text-base/7 text-gray-400">Eu duis porta aliquam ornare. Elementum eget magna egestas.</p>
</div>
</div>
<div class="flex flex-col-reverse justify-between gap-x-16 gap-y-8 rounded-2xl bg-indigo-600 p-8 sm:w-11/12 sm:max-w-xl sm:flex-row-reverse sm:items-end lg:w-full lg:max-w-none lg:flex-auto lg:flex-col lg:items-start lg:gap-y-28">
<p class="flex-none text-3xl font-bold tracking-tight text-white">401,093</p>
<div class="sm:w-80 sm:shrink lg:w-auto lg:flex-none">
<p class="text-lg font-semibold tracking-tight text-white">Transactions this year</p>
<p class="mt-2 text-base/7 text-indigo-200">Eu duis porta aliquam ornare. Elementum eget magna egestas. Eu duis porta aliquam ornare.</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
<p class="text-base/7 font-semibold text-indigo-400">Deploy faster</p>
<h1 class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">A better workflow</h1>
<div class="mt-10 grid max-w-xl grid-cols-1 gap-8 text-base/7 text-gray-300 lg:max-w-none lg:grid-cols-2">
<div>
<p>Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id.</p>
<p class="mt-8">Et vitae blandit facilisi magna lacus commodo. Vitae sapien duis odio id et. Id blandit molestie auctor fermentum dignissim. Lacus diam tincidunt ac cursus in vel. Mauris varius vulputate et ultrices hac adipiscing egestas.</p>
</div>
<div>
<p>Erat pellentesque dictumst ligula porttitor risus eget et eget. Ultricies tellus felis id dignissim eget. Est augue maecenas risus nulla ultrices congue nunc tortor. Enim et nesciunt doloremque nesciunt voluptate.</p>
<p class="mt-8">Et vitae blandit facilisi magna lacus commodo. Vitae sapien duis odio id et. Id blandit molestie auctor fermentum dignissim. Lacus diam tincidunt ac cursus in vel. Mauris varius vulputate et ultrices hac adipiscing egestas. Iaculis convallis ac tempor et ut. Ac lorem vel integer orci.</p>
</div>
</div>
<dl class="mt-16 grid grid-cols-1 gap-x-8 gap-y-12 sm:mt-20 sm:grid-cols-2 sm:gap-y-16 lg:mt-28 lg:grid-cols-4">
<div class="flex flex-col-reverse gap-y-3 border-l border-white/20 pl-6">
<dt class="text-base/7 text-gray-300">Founded</dt>
<dd class="text-3xl font-semibold tracking-tight text-white">2021</dd>
</div>
<div class="flex flex-col-reverse gap-y-3 border-l border-white/20 pl-6">
<dt class="text-base/7 text-gray-300">Employees</dt>
<dd class="text-3xl font-semibold tracking-tight text-white">37</dd>
</div>
<div class="flex flex-col-reverse gap-y-3 border-l border-white/20 pl-6">
<dt class="text-base/7 text-gray-300">Countries</dt>
<dd class="text-3xl font-semibold tracking-tight text-white">12</dd>
</div>
<div class="flex flex-col-reverse gap-y-3 border-l border-white/20 pl-6">
<dt class="text-base/7 text-gray-300">Raised</dt>
<dd class="text-3xl font-semibold tracking-tight text-white">$25M</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="bg-white py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Our mission</h2>
<div class="mt-6 flex flex-col gap-x-8 gap-y-20 lg:flex-row">
<div class="lg:w-full lg:max-w-2xl lg:flex-auto">
<p class="text-xl/8 text-gray-600">Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh dui, diam eget aliquam. Quisque id at vitae feugiat egestas ac. Diam nulla orci at in viverra scelerisque eget. Eleifend egestas fringilla sapien.</p>
<p class="mt-10 max-w-xl text-base/7 text-gray-700">Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id.</p>
</div>
<div class="lg:flex lg:flex-auto lg:justify-center">
<dl class="w-64 space-y-8 xl:w-80">
<div class="flex flex-col-reverse gap-y-4">
<dt class="text-base/7 text-gray-600">Transactions every 24 hours</dt>
<dd class="text-5xl font-semibold tracking-tight text-gray-900">44 million</dd>
</div>
<div class="flex flex-col-reverse gap-y-4">
<dt class="text-base/7 text-gray-600">Assets under holding</dt>
<dd class="text-5xl font-semibold tracking-tight text-gray-900">$119 trillion</dd>
</div>
<div class="flex flex-col-reverse gap-y-4">
<dt class="text-base/7 text-gray-600">New users annually</dt>
<dd class="text-5xl font-semibold tracking-tight text-gray-900">46,000</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
<section class="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:px-8">
<div class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,var(--color-indigo-100),white)] opacity-20"></div>
<div class="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl ring-1 shadow-indigo-600/10 ring-indigo-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center"></div>
<div class="mx-auto max-w-2xl lg:max-w-4xl">
<img class="mx-auto h-12" src="https://tailwindcss.com/plus-assets/img/logos/workcation-logo-indigo-600.svg" alt="">
<figure class="mt-10">
<blockquote class="text-center text-xl/8 font-semibold text-gray-900 sm:text-2xl/9">
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.”</p>
</blockquote>
<figcaption class="mt-10">
<img class="mx-auto size-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="mt-4 flex items-center justify-center space-x-3 text-base">
<div class="font-semibold text-gray-900">Judith Black</div>
<svg viewBox="0 0 2 2" width="3" height="3" aria-hidden="true" class="fill-gray-900">
<circle cx="1" cy="1" r="1" />
</svg>
<div class="text-gray-600">CEO of Workcation</div>
</div>
</figcaption>
</figure>
</div>
</section>
<section class="isolate overflow-hidden bg-white px-6 lg:px-8">
<div class="relative mx-auto max-w-2xl py-24 sm:py-32 lg:max-w-4xl">
<div class="absolute top-0 left-1/2 -z-10 h-[50rem] w-[90rem] -translate-x-1/2 bg-[radial-gradient(50%_100%_at_top,var(--color-indigo-100),white)] opacity-20 lg:left-36"></div>
<div class="absolute inset-y-0 right-1/2 -z-10 mr-12 w-[150vw] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl ring-1 shadow-indigo-600/10 ring-indigo-50 sm:mr-20 md:mr-0 lg:right-full lg:-mr-36 lg:origin-center"></div>
<figure class="grid grid-cols-1 items-center gap-x-6 gap-y-8 lg:gap-x-10">
<div class="relative col-span-2 lg:col-start-1 lg:row-start-2">
<svg viewBox="0 0 162 128" fill="none" aria-hidden="true" class="absolute -top-12 left-0 -z-10 h-32 stroke-gray-900/10">
<path id="b56e9dab-6ccb-4d32-ad02-6b4bb5d9bbeb" d="M65.5697 118.507L65.8918 118.89C68.9503 116.314 71.367 113.253 73.1386 109.71C74.9162 106.155 75.8027 102.28 75.8027 98.0919C75.8027 94.237 75.16 90.6155 73.8708 87.2314C72.5851 83.8565 70.8137 80.9533 68.553 78.5292C66.4529 76.1079 63.9476 74.2482 61.0407 72.9536C58.2795 71.4949 55.276 70.767 52.0386 70.767C48.9935 70.767 46.4686 71.1668 44.4872 71.9924L44.4799 71.9955L44.4726 71.9988C42.7101 72.7999 41.1035 73.6831 39.6544 74.6492C38.2407 75.5916 36.8279 76.455 35.4159 77.2394L35.4047 77.2457L35.3938 77.2525C34.2318 77.9787 32.6713 78.3634 30.6736 78.3634C29.0405 78.3634 27.5131 77.2868 26.1274 74.8257C24.7483 72.2185 24.0519 69.2166 24.0519 65.8071C24.0519 60.0311 25.3782 54.4081 28.0373 48.9335C30.703 43.4454 34.3114 38.345 38.8667 33.6325C43.5812 28.761 49.0045 24.5159 55.1389 20.8979C60.1667 18.0071 65.4966 15.6179 71.1291 13.7305C73.8626 12.8145 75.8027 10.2968 75.8027 7.38572C75.8027 3.6497 72.6341 0.62247 68.8814 1.1527C61.1635 2.2432 53.7398 4.41426 46.6119 7.66522C37.5369 11.6459 29.5729 17.0612 22.7236 23.9105C16.0322 30.6019 10.618 38.4859 6.47981 47.558L6.47976 47.558L6.47682 47.5647C2.4901 56.6544 0.5 66.6148 0.5 77.4391C0.5 84.2996 1.61702 90.7679 3.85425 96.8404L3.8558 96.8445C6.08991 102.749 9.12394 108.02 12.959 112.654L12.959 112.654L12.9646 112.661C16.8027 117.138 21.2829 120.739 26.4034 123.459L26.4033 123.459L26.4144 123.465C31.5505 126.033 37.0873 127.316 43.0178 127.316C47.5035 127.316 51.6783 126.595 55.5376 125.148L55.5376 125.148L55.5477 125.144C59.5516 123.542 63.0052 121.456 65.9019 118.881L65.5697 118.507Z" />
<use href="#b56e9dab-6ccb-4d32-ad02-6b4bb5d9bbeb" x="86" />
</svg>
<blockquote class="text-xl/8 font-semibold text-gray-900 sm:text-2xl/9">
<p>Commodo amet fugiat excepteur sunt qui ea elit cupidatat ullamco consectetur ipsum elit consequat. Elit sunt proident ea nulla ad nulla dolore ad pariatur tempor non. Sint veniam minim et ea.</p>
</blockquote>
</div>
<div class="col-end-1 w-16 lg:row-span-4 lg:w-72">
<img class="rounded-xl bg-indigo-50 lg:rounded-3xl" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=576&h=576&q=80" alt="">
</div>
<figcaption class="text-base lg:col-start-1 lg:row-start-3">
<div class="font-semibold text-gray-900">Judith Black</div>
<div class="mt-1 text-gray-500">CEO of Workcation</div>
</figcaption>
</figure>
</div>
</section>
<div class="bg-white pt-24 pb-16 sm:pt-32 sm:pb-24 xl:pb-32">
<div class="bg-gray-900 pb-20 sm:pb-24 xl:pb-0">
<div class="mx-auto flex max-w-7xl flex-col items-center gap-x-8 gap-y-10 px-6 sm:gap-y-8 lg:px-8 xl:flex-row xl:items-stretch">
<div class="-mt-8 w-full max-w-2xl xl:-mb-8 xl:w-96 xl:flex-none">
<div class="relative aspect-2/1 h-full md:-mx-8 xl:mx-0 xl:aspect-auto">
<img class="absolute inset-0 size-full rounded-2xl bg-gray-800 object-cover shadow-2xl" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="">
</div>
</div>
<div class="w-full max-w-2xl xl:max-w-none xl:flex-auto xl:px-16 xl:py-24">
<figure class="relative isolate pt-6 sm:pt-12">
<svg viewBox="0 0 162 128" fill="none" aria-hidden="true" class="absolute top-0 left-0 -z-10 h-32 stroke-white/20">
<path id="b56e9dab-6ccb-4d32-ad02-6b4bb5d9bbeb" d="M65.5697 118.507L65.8918 118.89C68.9503 116.314 71.367 113.253 73.1386 109.71C74.9162 106.155 75.8027 102.28 75.8027 98.0919C75.8027 94.237 75.16 90.6155 73.8708 87.2314C72.5851 83.8565 70.8137 80.9533 68.553 78.5292C66.4529 76.1079 63.9476 74.2482 61.0407 72.9536C58.2795 71.4949 55.276 70.767 52.0386 70.767C48.9935 70.767 46.4686 71.1668 44.4872 71.9924L44.4799 71.9955L44.4726 71.9988C42.7101 72.7999 41.1035 73.6831 39.6544 74.6492C38.2407 75.5916 36.8279 76.455 35.4159 77.2394L35.4047 77.2457L35.3938 77.2525C34.2318 77.9787 32.6713 78.3634 30.6736 78.3634C29.0405 78.3634 27.5131 77.2868 26.1274 74.8257C24.7483 72.2185 24.0519 69.2166 24.0519 65.8071C24.0519 60.0311 25.3782 54.4081 28.0373 48.9335C30.703 43.4454 34.3114 38.345 38.8667 33.6325C43.5812 28.761 49.0045 24.5159 55.1389 20.8979C60.1667 18.0071 65.4966 15.6179 71.1291 13.7305C73.8626 12.8145 75.8027 10.2968 75.8027 7.38572C75.8027 3.6497 72.6341 0.62247 68.8814 1.1527C61.1635 2.2432 53.7398 4.41426 46.6119 7.66522C37.5369 11.6459 29.5729 17.0612 22.7236 23.9105C16.0322 30.6019 10.618 38.4859 6.47981 47.558L6.47976 47.558L6.47682 47.5647C2.4901 56.6544 0.5 66.6148 0.5 77.4391C0.5 84.2996 1.61702 90.7679 3.85425 96.8404L3.8558 96.8445C6.08991 102.749 9.12394 108.02 12.959 112.654L12.959 112.654L12.9646 112.661C16.8027 117.138 21.2829 120.739 26.4034 123.459L26.4033 123.459L26.4144 123.465C31.5505 126.033 37.0873 127.316 43.0178 127.316C47.5035 127.316 51.6783 126.595 55.5376 125.148L55.5376 125.148L55.5477 125.144C59.5516 123.542 63.0052 121.456 65.9019 118.881L65.5697 118.507Z" />
<use href="#b56e9dab-6ccb-4d32-ad02-6b4bb5d9bbeb" x="86" />
</svg>
<blockquote class="text-xl/8 font-semibold text-white sm:text-2xl/9">
<p>Gravida quam mi erat tortor neque molestie. Auctor aliquet at porttitor a enim nunc suscipit tincidunt nunc. Et non lorem tortor posuere. Nunc eu scelerisque interdum eget tellus non nibh scelerisque bibendum.</p>
</blockquote>
<figcaption class="mt-8 text-base">
<div class="font-semibold text-white">Judith Black</div>
<div class="mt-1 text-gray-400">CEO of Workcation</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="bg-white py-16 sm:py-24">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="relative overflow-hidden bg-gray-900 px-6 py-20 shadow-xl sm:rounded-3xl sm:px-10 sm:py-24 md:px-12 lg:px-20">
<img class="absolute inset-0 size-full object-cover brightness-150 saturate-0" src="https://images.unsplash.com/photo-1601381718415-a05fb0a261f3?ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8ODl8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1216&q=80" alt="">
<div class="absolute inset-0 bg-gray-900/90 mix-blend-multiply"></div>
<div class="absolute -top-56 -left-80 transform-gpu blur-3xl" aria-hidden="true">
<div class="aspect-1097/845 w-[68.5625rem] bg-linear-to-r from-[#ff4694] to-[#776fff] opacity-[0.45]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="hidden md:absolute md:bottom-16 md:left-[50rem] md:block md:transform-gpu md:blur-3xl" aria-hidden="true">
<div class="aspect-1097/845 w-[68.5625rem] bg-linear-to-r from-[#ff4694] to-[#776fff] opacity-25" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="relative mx-auto max-w-2xl lg:mx-0">
<img class="h-12 w-auto" src="https://tailwindcss.com/plus-assets/img/logos/workcation-logo-white.svg" alt="">
<figure>
<blockquote class="mt-6 text-lg font-semibold text-white sm:text-xl/8">
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.”</p>
</blockquote>
<figcaption class="mt-6 text-base text-white">
<div class="font-semibold">Judith Black</div>
<div class="mt-1">CEO of Workcation</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<section class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 lg:mx-0 lg:max-w-none lg:grid-cols-2">
<div class="flex flex-col pb-10 sm:pb-16 lg:pr-8 lg:pb-0 xl:pr-20">
<img class="h-12 self-start" src="https://tailwindcss.com/plus-assets/img/logos/tuple-logo-gray-900.svg" alt="">
<figure class="mt-10 flex flex-auto flex-col justify-between">
<blockquote class="text-lg/8 text-gray-900">
<p>“Amet amet eget scelerisque tellus sit neque faucibus non eleifend. Integer eu praesent at a. Ornare arcu gravida natoque erat et cursus tortor consequat at. Vulputate gravida sociis enim nullam ultricies habitant malesuada lorem ac. Tincidunt urna dui pellentesque sagittis.”</p>
</blockquote>
<figcaption class="mt-10 flex items-center gap-x-6">
<img class="size-14 rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="text-base">
<div class="font-semibold text-gray-900">Judith Black</div>
<div class="mt-1 text-gray-500">CEO of Tuple</div>
</div>
</figcaption>
</figure>
</div>
<div class="flex flex-col border-t border-gray-900/10 pt-10 sm:pt-16 lg:border-t-0 lg:border-l lg:pt-0 lg:pl-8 xl:pl-20">
<img class="h-12 self-start" src="https://tailwindcss.com/plus-assets/img/logos/reform-logo-gray-900.svg" alt="">
<figure class="mt-10 flex flex-auto flex-col justify-between">
<blockquote class="text-lg/8 text-gray-900">
<p>“Excepteur veniam labore ullamco eiusmod. Pariatur consequat proident duis dolore nulla veniam reprehenderit nisi officia voluptate incididunt exercitation exercitation elit. Nostrud veniam sint dolor nisi ullamco.”</p>
</blockquote>
<figcaption class="mt-10 flex items-center gap-x-6">
<img class="size-14 rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="text-base">
<div class="font-semibold text-gray-900">Joseph Rodriguez</div>
<div class="mt-1 text-gray-500">CEO of Reform</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="bg-white px-6 py-24 sm:py-32 lg:px-8">
<figure class="mx-auto max-w-2xl">
<p class="sr-only">5 out of 5 stars</p>
<div class="flex gap-x-1 text-indigo-600">
<svg class="size-5 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
</svg>
<svg class="size-5 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
</svg>
<svg class="size-5 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
</svg>
<svg class="size-5 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
</svg>
<svg class="size-5 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
</svg>
</div>
<blockquote class="mt-10 text-xl/8 font-semibold tracking-tight text-gray-900 sm:text-2xl/9">
<p>“Qui dolor enim consectetur do et non ex amet culpa sint in ea non dolore. Enim minim magna anim id minim eu cillum sunt dolore aliquip. Amet elit laborum culpa irure incididunt adipisicing culpa amet officia exercitation. Eu non aute velit id velit Lorem elit anim pariatur.”</p>
</blockquote>
<figcaption class="mt-10 flex items-center gap-x-6">
<img class="size-12 rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=1024&h=1024&q=80" alt="">
<div class="text-sm/6">
<div class="font-semibold text-gray-900">Judith Black</div>
<div class="mt-0.5 text-gray-600">CEO of Workcation</div>
</div>
</figcaption>
</figure>
</section>
<div class="relative isolate bg-white pt-24 pb-32 sm:pt-32">
<div class="absolute inset-x-0 top-1/2 -z-10 -translate-y-1/2 transform-gpu overflow-hidden opacity-30 blur-3xl" aria-hidden="true">
<div class="ml-[max(50%,38rem)] aspect-1313/771 w-[82.0625rem] bg-linear-to-tr from-[#ff80b5] to-[#9089fc]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="absolute inset-x-0 top-0 -z-10 flex transform-gpu overflow-hidden pt-32 opacity-25 blur-3xl sm:pt-40 xl:justify-end" aria-hidden="true">
<div class="ml-[-22rem] aspect-1313/771 w-[82.0625rem] flex-none origin-top-right rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] xl:mr-[calc(50%-12rem)] xl:ml-0" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Testimonials</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">We have worked with thousands of amazing people</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 grid-rows-1 gap-8 text-sm/6 text-gray-900 sm:mt-20 sm:grid-cols-2 xl:mx-0 xl:max-w-none xl:grid-flow-col xl:grid-cols-4">
<figure class="rounded-2xl bg-white shadow-lg ring-1 ring-gray-900/5 sm:col-span-2 xl:col-start-2 xl:row-end-1">
<blockquote class="p-6 text-lg font-semibold tracking-tight text-gray-900 sm:p-12 sm:text-xl/8">
<p>“Integer id nunc sit semper purus. Bibendum at lacus ut arcu blandit montes vitae auctor libero. Hac condimentum dignissim nibh vulputate ut nunc. Amet nibh orci mi venenatis blandit vel et proin. Non hendrerit in vel ac diam.”</p>
</blockquote>
<figcaption class="flex flex-wrap items-center gap-x-4 gap-y-4 border-t border-gray-900/10 px-6 py-4 sm:flex-nowrap">
<img class="size-10 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=1024&h=1024&q=80" alt="">
<div class="flex-auto">
<div class="font-semibold">Brenna Goyette</div>
<div class="text-gray-600">@brennagoyette</div>
</div>
<img class="h-10 w-auto flex-none" src="https://tailwindcss.com/plus-assets/img/logos/savvycal-logo-gray-900.svg" alt="">
</figcaption>
</figure>
<div class="space-y-8 xl:contents xl:space-y-0">
<div class="space-y-8 xl:row-span-2">
<figure class="rounded-2xl bg-white p-6 shadow-lg ring-1 ring-gray-900/5">
<blockquote class="text-gray-900">
<p>“Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.”</p>
</blockquote>
<figcaption class="mt-6 flex items-center gap-x-4">
<img class="size-10 rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div>
<div class="font-semibold">Leslie Alexander</div>
<div class="text-gray-600">@lesliealexander</div>
</div>
</figcaption>
</figure>
<!-- More testimonials... -->
</div>
<div class="space-y-8 xl:row-start-1">
<figure class="rounded-2xl bg-white p-6 shadow-lg ring-1 ring-gray-900/5">
<blockquote class="text-gray-900">
<p>“Aut reprehenderit voluptatem eum asperiores beatae id. Iure molestiae ipsam ut officia rem nulla blanditiis.”</p>
</blockquote>
<figcaption class="mt-6 flex items-center gap-x-4">
<img class="size-10 rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div>
<div class="font-semibold">Lindsay Walton</div>
<div class="text-gray-600">@lindsaywalton</div>
</div>
</figcaption>
</figure>
<!-- More testimonials... -->
</div>
</div>
<div class="space-y-8 xl:contents xl:space-y-0">
<div class="space-y-8 xl:row-start-1">
<figure class="rounded-2xl bg-white p-6 shadow-lg ring-1 ring-gray-900/5">
<blockquote class="text-gray-900">
<p>“Voluptas quos itaque ipsam in voluptatem est. Iste eos blanditiis repudiandae. Earum deserunt enim molestiae ipsum perferendis recusandae saepe corrupti.”</p>
</blockquote>
<figcaption class="mt-6 flex items-center gap-x-4">
<img class="size-10 rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div>
<div class="font-semibold">Tom Cook</div>
<div class="text-gray-600">@tomcook</div>
</div>
</figcaption>
</figure>
<!-- More testimonials... -->
</div>
<div class="space-y-8 xl:row-span-2">
<figure class="rounded-2xl bg-white p-6 shadow-lg ring-1 ring-gray-900/5">
<blockquote class="text-gray-900">
<p>“Molestias ea earum quos nostrum doloremque sed. Quaerat quasi aut velit incidunt excepturi rerum voluptatem minus harum.”</p>
</blockquote>
<figcaption class="mt-6 flex items-center gap-x-4">
<img class="size-10 rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div>
<div class="font-semibold">Leonard Krasner</div>
<div class="text-gray-600">@leonardkrasner</div>
</div>
</figcaption>
</figure>
<!-- More testimonials... -->
</div>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">Testimonials</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">We have worked with thousands of amazing people</p>
</div>
<div class="mx-auto mt-16 flow-root max-w-2xl sm:mt-20 lg:mx-0 lg:max-w-none">
<div class="-mt-8 sm:-mx-4 sm:columns-2 sm:text-[0] lg:columns-3">
<div class="pt-8 sm:inline-block sm:w-full sm:px-4">
<figure class="rounded-2xl bg-gray-50 p-8 text-sm/6">
<blockquote class="text-gray-900">
<p>“Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.”</p>
</blockquote>
<figcaption class="mt-6 flex items-center gap-x-4">
<img class="size-10 rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div>
<div class="font-semibold text-gray-900">Leslie Alexander</div>
<div class="text-gray-600">@lesliealexander</div>
</div>
</figcaption>
</figure>
</div>
<!-- More testimonials... -->
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">From the blog</h2>
<p class="mt-2 text-lg/8 text-gray-600">Learn how to grow your business with our expert advice.</p>
</div>
<div class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<article class="flex max-w-xl flex-col items-start justify-between">
<div class="flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-500">Mar 16, 2020</time>
<a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
</div>
<div class="group relative">
<h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Boost your conversion rate
</a>
</h3>
<p class="mt-5 line-clamp-3 text-sm/6 text-gray-600">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.</p>
</div>
<div class="relative mt-8 flex items-center gap-x-4">
<img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-10 rounded-full bg-gray-50">
<div class="text-sm/6">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Michael Foster
</a>
</p>
<p class="text-gray-600">Co-Founder / CTO</p>
</div>
</div>
</article>
<!-- More posts... -->
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">From the blog</h2>
<p class="mt-2 text-lg/8 text-gray-600">Learn how to grow your business with our expert advice.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<article class="flex flex-col items-start justify-between">
<div class="relative w-full">
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="aspect-video w-full rounded-2xl bg-gray-100 object-cover sm:aspect-2/1 lg:aspect-3/2">
<div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
</div>
<div class="max-w-xl">
<div class="mt-8 flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-500">Mar 16, 2020</time>
<a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
</div>
<div class="group relative">
<h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Boost your conversion rate
</a>
</h3>
<p class="mt-5 line-clamp-3 text-sm/6 text-gray-600">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.</p>
</div>
<div class="relative mt-8 flex items-center gap-x-4">
<img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-10 rounded-full bg-gray-100">
<div class="text-sm/6">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Michael Foster
</a>
</p>
<p class="text-gray-600">Co-Founder / CTO</p>
</div>
</div>
</div>
</article>
<!-- More posts... -->
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">From the blog</h2>
<p class="mt-2 text-lg/8 text-gray-600">Learn how to grow your business with our expert advice.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pt-80 pb-8 sm:pt-48 lg:pt-80">
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="absolute inset-0 -z-10 size-full object-cover">
<div class="absolute inset-0 -z-10 bg-linear-to-t from-gray-900 via-gray-900/40"></div>
<div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
<div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm/6 text-gray-300">
<time datetime="2020-03-16" class="mr-8">Mar 16, 2020</time>
<div class="-ml-4 flex items-center gap-x-4">
<svg viewBox="0 0 2 2" class="-ml-0.5 size-0.5 flex-none fill-white/50">
<circle cx="1" cy="1" r="1" />
</svg>
<div class="flex gap-x-2.5">
<img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-6 flex-none rounded-full bg-white/10">
Michael Foster
</div>
</div>
</div>
<h3 class="mt-3 text-lg/6 font-semibold text-white">
<a href="#">
<span class="absolute inset-0"></span>
Boost your conversion rate
</a>
</h3>
</article>
<!-- More posts... -->
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">From the blog</h2>
<p class="mt-2 text-lg/8 text-gray-600">Learn how to grow your business with our expert advice.</p>
<div class="mt-10 space-y-16 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16">
<article class="flex max-w-xl flex-col items-start justify-between">
<div class="flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-500">Mar 16, 2020</time>
<a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
</div>
<div class="group relative">
<h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Boost your conversion rate
</a>
</h3>
<p class="mt-5 line-clamp-3 text-sm/6 text-gray-600">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel iusto corrupti dicta laboris incididunt.</p>
</div>
<div class="relative mt-8 flex items-center gap-x-4">
<img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-10 rounded-full bg-gray-50">
<div class="text-sm/6">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Michael Foster
</a>
</p>
<p class="text-gray-600">Co-Founder / CTO</p>
</div>
</div>
</article>
<!-- More posts... -->
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-4xl">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">From the blog</h2>
<p class="mt-2 text-lg/8 text-gray-600">Learn how to grow your business with our expert advice.</p>
<div class="mt-16 space-y-20 lg:mt-20 lg:space-y-20">
<article class="relative isolate flex flex-col gap-8 lg:flex-row">
<div class="relative aspect-video sm:aspect-2/1 lg:aspect-square lg:w-64 lg:shrink-0">
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="absolute inset-0 size-full rounded-2xl bg-gray-50 object-cover">
<div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
</div>
<div>
<div class="flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-500">Mar 16, 2020</time>
<a href="#" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">Marketing</a>
</div>
<div class="group relative max-w-xl">
<h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Boost your conversion rate
</a>
</h3>
<p class="mt-5 text-sm/6 text-gray-600">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel iusto corrupti dicta laboris incididunt.</p>
</div>
<div class="mt-6 flex border-t border-gray-900/5 pt-6">
<div class="relative flex items-center gap-x-4">
<img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-10 rounded-full bg-gray-50">
<div class="text-sm/6">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Michael Foster
</a>
</p>
<p class="text-gray-600">Co-Founder / CTO</p>
</div>
</div>
</div>
</div>
</article>
<!-- More posts... -->
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-12 px-6 sm:gap-y-16 lg:grid-cols-2 lg:px-8">
<article class="mx-auto w-full max-w-2xl lg:mx-0 lg:max-w-lg">
<time datetime="2020-03-16" class="block text-sm/6 text-gray-600">Mar 16, 2020</time>
<h2 id="featured-post" class="mt-4 text-3xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-4xl">We’re incredibly proud to announce we have secured $75m in Series B</h2>
<p class="mt-4 text-lg/8 text-gray-600">Libero neque aenean tincidunt nec consequat tempor. Viverra odio id velit adipiscing id. Nisi vestibulum orci eget bibendum dictum. Velit viverra posuere vulputate volutpat nunc. Nunc netus sit faucibus.</p>
<div class="mt-4 flex flex-col justify-between gap-6 sm:mt-8 sm:flex-row-reverse sm:gap-8 lg:mt-4 lg:flex-col">
<div class="flex">
<a href="#" class="text-sm/6 font-semibold text-indigo-600" aria-describedby="featured-post">Continue reading <span aria-hidden="true">→</span></a>
</div>
<div class="flex lg:border-t lg:border-gray-900/10 lg:pt-8">
<a href="#" class="flex gap-x-2.5 text-sm/6 font-semibold text-gray-900">
<img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-6 flex-none rounded-full bg-gray-50">
Michael Foster
</a>
</div>
</div>
</article>
<div class="mx-auto w-full max-w-2xl border-t border-gray-900/10 pt-12 sm:pt-16 lg:mx-0 lg:max-w-none lg:border-t-0 lg:pt-0">
<div class="-my-12 divide-y divide-gray-900/10">
<article class="py-12">
<div class="group relative max-w-xl">
<time datetime="2020-03-16" class="block text-sm/6 text-gray-600">Mar 10, 2020</time>
<h2 class="mt-2 text-lg font-semibold text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Boost your conversion rate
</a>
</h2>
<p class="mt-4 text-sm/6 text-gray-600">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel iusto corrupti dicta laboris incididunt.</p>
</div>
<div class="mt-4 flex">
<a href="#" class="relative flex gap-x-2.5 text-sm/6 font-semibold text-gray-900">
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-6 flex-none rounded-full bg-gray-50">
Lindsay Walton
</a>
</div>
</article>
<!-- More posts... -->
</div>
</div>
</div>
</div>
<div class="bg-white py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto flex max-w-2xl flex-col items-end justify-between gap-16 lg:mx-0 lg:max-w-none lg:flex-row">
<div class="w-full lg:max-w-lg lg:flex-auto">
<h2 class="text-3xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-4xl">We’re always looking for awesome people to join us</h2>
<p class="mt-6 text-xl/8 text-gray-600">Diam nunc lacus lacus aliquam turpis enim. Eget hac velit est euismod lacus. Est non placerat nam arcu. Cras purus nibh cursus sit eu in id.</p>
<img src="https://images.unsplash.com/photo-1606857521015-7f9fcf423740?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1344&h=1104&q=80" alt="" class="mt-16 aspect-6/5 w-full rounded-2xl bg-gray-50 object-cover lg:aspect-auto lg:h-[34.5rem]">
</div>
<div class="w-full lg:max-w-xl lg:flex-auto">
<h3 class="sr-only">Job openings</h3>
<ul class="-my-8 divide-y divide-gray-100">
<li class="py-8">
<dl class="relative flex flex-wrap gap-x-3">
<dt class="sr-only">Role</dt>
<dd class="w-full flex-none text-lg font-semibold tracking-tight text-gray-900">
<a href="#">
Full-time designer
<span class="absolute inset-0" aria-hidden="true"></span>
</a>
</dd>
<dt class="sr-only">Description</dt>
<dd class="mt-2 w-full flex-none text-base/7 text-gray-600">Quos sunt ad dolore ullam qui. Enim et quisquam dicta molestias. Corrupti quo voluptatum eligendi autem labore.</dd>
<dt class="sr-only">Salary</dt>
<dd class="mt-4 text-base/7 font-semibold text-gray-900">$75,000 USD</dd>
<dt class="sr-only">Location</dt>
<dd class="mt-4 flex items-center gap-x-3 text-base/7 text-gray-500">
<svg viewBox="0 0 2 2" class="size-0.5 flex-none fill-gray-300" aria-hidden="true">
<circle cx="1" cy="1" r="1" />
</svg>
San Francisco, CA
</dd>
</dl>
</li>
<li class="py-8">
<dl class="relative flex flex-wrap gap-x-3">
<dt class="sr-only">Role</dt>
<dd class="w-full flex-none text-lg font-semibold tracking-tight text-gray-900">
<a href="#">
Laravel developer
<span class="absolute inset-0" aria-hidden="true"></span>
</a>
</dd>
<dt class="sr-only">Description</dt>
<dd class="mt-2 w-full flex-none text-base/7 text-gray-600">Et veniam et officia dolorum rerum. Et voluptas consequatur magni sapiente amet voluptates dolorum. Ut porro aut eveniet.</dd>
<dt class="sr-only">Salary</dt>
<dd class="mt-4 text-base/7 font-semibold text-gray-900">$125,000 USD</dd>
<dt class="sr-only">Location</dt>
<dd class="mt-4 flex items-center gap-x-3 text-base/7 text-gray-500">
<svg viewBox="0 0 2 2" class="size-0.5 flex-none fill-gray-300" aria-hidden="true">
<circle cx="1" cy="1" r="1" />
</svg>
San Francisco, CA
</dd>
</dl>
</li>
<li class="py-8">
<dl class="relative flex flex-wrap gap-x-3">
<dt class="sr-only">Role</dt>
<dd class="w-full flex-none text-lg font-semibold tracking-tight text-gray-900">
<a href="#">
React Native developer
<span class="absolute inset-0" aria-hidden="true"></span>
</a>
</dd>
<dt class="sr-only">Description</dt>
<dd class="mt-2 w-full flex-none text-base/7 text-gray-600">Veniam ipsam nisi quas architecto eos non voluptatem in nemo. Est occaecati nihil omnis delectus illum est.</dd>
<dt class="sr-only">Salary</dt>
<dd class="mt-4 text-base/7 font-semibold text-gray-900">$105,000 USD</dd>
<dt class="sr-only">Location</dt>
<dd class="mt-4 flex items-center gap-x-3 text-base/7 text-gray-500">
<svg viewBox="0 0 2 2" class="size-0.5 flex-none fill-gray-300" aria-hidden="true">
<circle cx="1" cy="1" r="1" />
</svg>
San Francisco, CA
</dd>
</dl>
</li>
</ul>
<div class="mt-8 flex border-t border-gray-100 pt-8">
<a href="#" class="text-sm/6 font-semibold text-indigo-600 hover:text-indigo-500">View all openings <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
<div class="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]" aria-hidden="true">
<div class="relative left-1/2 -z-10 aspect-1155/678 w-[36.125rem] max-w-none -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-40rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">Contact sales</h2>
<p class="mt-2 text-lg/8 text-gray-600">Aute magna irure deserunt veniam aliqua magna enim voluptate.</p>
</div>
<form action="#" method="POST" class="mx-auto mt-16 max-w-xl sm:mt-20">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first-name" class="block text-sm/6 font-semibold text-gray-900">First name</label>
<div class="mt-2.5">
<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div>
<label for="last-name" class="block text-sm/6 font-semibold text-gray-900">Last name</label>
<div class="mt-2.5">
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div class="sm:col-span-2">
<label for="company" class="block text-sm/6 font-semibold text-gray-900">Company</label>
<div class="mt-2.5">
<input type="text" name="company" id="company" autocomplete="organization" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm/6 font-semibold text-gray-900">Email</label>
<div class="mt-2.5">
<input type="email" name="email" id="email" autocomplete="email" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div class="sm:col-span-2">
<label for="phone-number" class="block text-sm/6 font-semibold text-gray-900">Phone number</label>
<div class="mt-2.5">
<div class="flex rounded-md bg-white outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600">
<div class="grid shrink-0 grid-cols-1 focus-within:relative">
<select id="country" name="country" autocomplete="country" aria-label="Country" class="col-start-1 row-start-1 w-full appearance-none rounded-md py-2 pr-7 pl-3.5 text-base text-gray-500 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
<option>US</option>
<option>CA</option>
<option>EU</option>
</select>
<svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</div>
<input type="text" name="phone-number" id="phone-number" class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6" placeholder="123-456-7890">
</div>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm/6 font-semibold text-gray-900">Message</label>
<div class="mt-2.5">
<textarea name="message" id="message" rows="4" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"></textarea>
</div>
</div>
<div class="flex gap-x-4 sm:col-span-2">
<div class="flex h-6 items-center">
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
<button type="button" class="flex w-8 flex-none cursor-pointer rounded-full bg-gray-200 p-px ring-1 ring-gray-900/5 transition-colors duration-200 ease-in-out ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" role="switch" aria-checked="false" aria-labelledby="switch-1-label">
<span class="sr-only">Agree to policies</span>
<!-- Enabled: "translate-x-3.5", Not Enabled: "translate-x-0" -->
<span aria-hidden="true" class="size-4 translate-x-0 transform rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition duration-200 ease-in-out"></span>
</button>
</div>
<label class="text-sm/6 text-gray-600" id="switch-1-label">
By selecting this, you agree to our
<a href="#" class="font-semibold text-indigo-600">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Let's talk</button>
</div>
</form>
</div>
<div class="bg-white py-8 sm:py-16">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl divide-y divide-gray-100 lg:mx-0 lg:max-w-none">
<div class="grid grid-cols-1 gap-10 py-16 lg:grid-cols-3">
<div>
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900">Get in touch</h2>
<p class="mt-4 text-base/7 text-gray-600">Quam nunc nunc eu sed. Sed rhoncus quis ultricies ac pellentesque.</p>
</div>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8">
<div class="rounded-2xl bg-gray-50 p-10">
<h3 class="text-base/7 font-semibold text-gray-900">Collaborate</h3>
<dl class="mt-3 space-y-1 text-sm/6 text-gray-600">
<div>
<dt class="sr-only">Email</dt>
<dd><a class="font-semibold text-indigo-600" href="mailto:collaborate@example.com">collaborate@example.com</a></dd>
</div>
<div class="mt-1">
<dt class="sr-only">Phone number</dt>
<dd>+1 (555) 905-2345</dd>
</div>
</dl>
</div>
<div class="rounded-2xl bg-gray-50 p-10">
<h3 class="text-base/7 font-semibold text-gray-900">Press</h3>
<dl class="mt-3 space-y-1 text-sm/6 text-gray-600">
<div>
<dt class="sr-only">Email</dt>
<dd><a class="font-semibold text-indigo-600" href="mailto:press@example.com">press@example.com</a></dd>
</div>
<div class="mt-1">
<dt class="sr-only">Phone number</dt>
<dd>+1 (555) 905-3456</dd>
</div>
</dl>
</div>
<div class="rounded-2xl bg-gray-50 p-10">
<h3 class="text-base/7 font-semibold text-gray-900">Join our team</h3>
<dl class="mt-3 space-y-1 text-sm/6 text-gray-600">
<div>
<dt class="sr-only">Email</dt>
<dd><a class="font-semibold text-indigo-600" href="mailto:careers@example.com">careers@example.com</a></dd>
</div>
<div class="mt-1">
<dt class="sr-only">Phone number</dt>
<dd>+1 (555) 905-4567</dd>
</div>
</dl>
</div>
<div class="rounded-2xl bg-gray-50 p-10">
<h3 class="text-base/7 font-semibold text-gray-900">Say hello</h3>
<dl class="mt-3 space-y-1 text-sm/6 text-gray-600">
<div>
<dt class="sr-only">Email</dt>
<dd><a class="font-semibold text-indigo-600" href="mailto:hello@example.com">hello@example.com</a></dd>
</div>
<div class="mt-1">
<dt class="sr-only">Phone number</dt>
<dd>+1 (555) 905-5678</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-10 py-16 lg:grid-cols-3">
<div>
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900">Locations</h2>
<p class="mt-4 text-base/7 text-gray-600">Consequat sunt cillum cillum elit sint. Qui occaecat nisi in ipsum commodo.</p>
</div>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8">
<div class="rounded-2xl bg-gray-50 p-10">
<h3 class="text-base/7 font-semibold text-gray-900">Los Angeles</h3>
<address class="mt-3 space-y-1 text-sm/6 text-gray-600 not-italic">
<p>4556 Brendan Ferry</p>
<p>Los Angeles, CA 90210</p>
</address>
</div>
<div class="rounded-2xl bg-gray-50 p-10">
<h3 class="text-base/7 font-semibold text-gray-900">New York</h3>
<address class="mt-3 space-y-1 text-sm/6 text-gray-600 not-italic">
<p>886 Walter Street</p>
<p>New York, NY 12345</p>
</address>
</div>
<div class="rounded-2xl bg-gray-50 p-10">
<h3 class="text-base/7 font-semibold text-gray-900">Toronto</h3>
<address class="mt-3 space-y-1 text-sm/6 text-gray-600 not-italic">
<p>7363 Cynthia Pass</p>
<p>Toronto, ON N3Y 4H8</p>
</address>
</div>
<div class="rounded-2xl bg-gray-50 p-10">
<h3 class="text-base/7 font-semibold text-gray-900">Chicago</h3>
<address class="mt-3 space-y-1 text-sm/6 text-gray-600 not-italic">
<p>726 Mavis Island</p>
<p>Chicago, IL 60601</p>
</address>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="relative isolate bg-white">
<div class="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
<div class="relative px-6 pt-24 pb-20 sm:pt-32 lg:static lg:px-8 lg:py-48">
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
<div class="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden bg-gray-100 ring-1 ring-gray-900/10 lg:w-1/2">
<svg class="absolute inset-0 size-full [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200" aria-hidden="true">
<defs>
<pattern id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527" width="200" height="200" x="100%" y="-1" patternUnits="userSpaceOnUse">
<path d="M130 200V.5M.5 .5H200" fill="none" />
</pattern>
</defs>
<rect width="100%" height="100%" stroke-width="0" fill="white" />
<svg x="100%" y="-1" class="overflow-visible fill-gray-50">
<path d="M-470.5 0h201v201h-201Z" stroke-width="0" />
</svg>
<rect width="100%" height="100%" stroke-width="0" fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" />
</svg>
</div>
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Get in touch</h2>
<p class="mt-6 text-lg/8 text-gray-600">Proin volutpat consequat porttitor cras nullam gravida at. Orci molestie a eu arcu. Sed ut tincidunt integer elementum id sem. Arcu sed malesuada et magna.</p>
<dl class="mt-10 space-y-4 text-base/7 text-gray-600">
<div class="flex gap-x-4">
<dt class="flex-none">
<span class="sr-only">Address</span>
<svg class="h-7 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" />
</svg>
</dt>
<dd>545 Mavis Island<br>Chicago, IL 99191</dd>
</div>
<div class="flex gap-x-4">
<dt class="flex-none">
<span class="sr-only">Telephone</span>
<svg class="h-7 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
</svg>
</dt>
<dd><a class="hover:text-gray-900" href="tel:+1 (555) 234-5678">+1 (555) 234-5678</a></dd>
</div>
<div class="flex gap-x-4">
<dt class="flex-none">
<span class="sr-only">Email</span>
<svg class="h-7 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
</svg>
</dt>
<dd><a class="hover:text-gray-900" href="mailto:hello@example.com">hello@example.com</a></dd>
</div>
</dl>
</div>
</div>
<form action="#" method="POST" class="px-6 pt-20 pb-24 sm:pb-32 lg:px-8 lg:py-48">
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first-name" class="block text-sm/6 font-semibold text-gray-900">First name</label>
<div class="mt-2.5">
<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div>
<label for="last-name" class="block text-sm/6 font-semibold text-gray-900">Last name</label>
<div class="mt-2.5">
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm/6 font-semibold text-gray-900">Email</label>
<div class="mt-2.5">
<input type="email" name="email" id="email" autocomplete="email" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div class="sm:col-span-2">
<label for="phone-number" class="block text-sm/6 font-semibold text-gray-900">Phone number</label>
<div class="mt-2.5">
<input type="tel" name="phone-number" id="phone-number" autocomplete="tel" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm/6 font-semibold text-gray-900">Message</label>
<div class="mt-2.5">
<textarea name="message" id="message" rows="4" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"></textarea>
</div>
</div>
</div>
<div class="mt-8 flex justify-end">
<button type="submit" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Send message</button>
</div>
</div>
</form>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Our offices</h2>
<p class="mt-6 text-lg/8 text-gray-600">Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-4">
<div>
<h3 class="border-l border-indigo-600 pl-6 font-semibold text-gray-900">Los Angeles</h3>
<address class="border-l border-gray-200 pt-2 pl-6 text-gray-600 not-italic">
<p>4556 Brendan Ferry</p>
<p>Los Angeles, CA 90210</p>
</address>
</div>
<div>
<h3 class="border-l border-indigo-600 pl-6 font-semibold text-gray-900">New York</h3>
<address class="border-l border-gray-200 pt-2 pl-6 text-gray-600 not-italic">
<p>886 Walter Street</p>
<p>New York, NY 12345</p>
</address>
</div>
<div>
<h3 class="border-l border-indigo-600 pl-6 font-semibold text-gray-900">Toronto</h3>
<address class="border-l border-gray-200 pt-2 pl-6 text-gray-600 not-italic">
<p>7363 Cynthia Pass</p>
<p>Toronto, ON N3Y 4H8</p>
</address>
</div>
<div>
<h3 class="border-l border-indigo-600 pl-6 font-semibold text-gray-900">London</h3>
<address class="border-l border-gray-200 pt-2 pl-6 text-gray-600 not-italic">
<p>114 Cobble Lane</p>
<p>London N1 2EF</p>
</address>
</div>
</div>
</div>
</div>
<div class="isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
<div class="mx-auto max-w-2xl sm:text-center">
<h2 class="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">Contact sales</h2>
<p class="mt-2 text-lg/8 text-gray-600">Aute magna irure deserunt veniam aliqua magna enim voluptate.</p>
</div>
<div class="mx-auto mt-20 max-w-lg space-y-16">
<div class="flex gap-x-6">
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
</div>
<div>
<h3 class="text-base/7 font-semibold text-gray-900">Sales support</h3>
<p class="mt-2 text-base/7 text-gray-600">Ut cursus est ut amet. Lobortis eget egestas leo vitae eget porttitor risus blandit. Nunc a in lorem vel iaculis porttitor.</p>
<p class="mt-4 text-sm/6 font-semibold">
<a href="#" class="text-indigo-600">Contact us <span aria-hidden="true">→</span></a>
</p>
</div>
</div>
<div class="flex gap-x-6">
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082" />
</svg>
</div>
<div>
<h3 class="text-base/7 font-semibold text-gray-900">Bug reports</h3>
<p class="mt-2 text-base/7 text-gray-600">Expedita qui non ut quia ipsum voluptatum ipsam pariatur. Culpa vitae ipsum minus eius vero quo quibusdam.</p>
<p class="mt-4 text-sm/6 font-semibold">
<a href="#" class="text-indigo-600">Report a bug <span aria-hidden="true">→</span></a>
</p>
</div>
</div>
<div class="flex gap-x-6">
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-indigo-600">
<svg class="size-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
</svg>
</div>
<div>
<h3 class="text-base/7 font-semibold text-gray-900">Technical support</h3>
<p class="mt-2 text-base/7 text-gray-600">Sint aut modi porro consequatur architecto commodi qui consequatur. Dignissimos adipisci minima.</p>
<p class="mt-4 text-sm/6 font-semibold">
<a href="#" class="text-indigo-600">Join our Discord <span aria-hidden="true">→</span></a>
</p>
</div>
</div>
</div>
</div>
<div class="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
<svg class="absolute inset-0 -z-10 size-full [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200" aria-hidden="true">
<defs>
<pattern id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527" width="200" height="200" x="50%" y="-64" patternUnits="userSpaceOnUse">
<path d="M100 200V.5M.5 .5H200" fill="none" />
</pattern>
</defs>
<svg x="50%" y="-64" class="overflow-visible fill-gray-50">
<path d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M299.5 800h201v201h-201Z" stroke-width="0" />
</svg>
<rect width="100%" height="100%" stroke-width="0" fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" />
</svg>
<div class="mx-auto max-w-xl lg:max-w-4xl">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Let’s talk about your project</h2>
<p class="mt-2 text-lg/8 text-gray-600">We help companies and individuals build out their brand guidelines.</p>
<div class="mt-16 flex flex-col gap-16 sm:gap-y-20 lg:flex-row">
<form action="#" method="POST" class="lg:flex-auto">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first-name" class="block text-sm/6 font-semibold text-gray-900">First name</label>
<div class="mt-2.5">
<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div>
<label for="last-name" class="block text-sm/6 font-semibold text-gray-900">Last name</label>
<div class="mt-2.5">
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div>
<label for="budget" class="block text-sm/6 font-semibold text-gray-900">Budget</label>
<div class="mt-2.5">
<input id="budget" name="budget" type="text" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div>
<label for="website" class="block text-sm/6 font-semibold text-gray-900">Website</label>
<div class="mt-2.5">
<input type="url" name="website" id="website" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm/6 font-semibold text-gray-900">Message</label>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"></textarea>
</div>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Let’s talk</button>
</div>
<p class="mt-4 text-sm/6 text-gray-500">By submitting this form, I agree to the <a href="#" class="font-semibold text-indigo-600">privacy policy</a>.</p>
</form>
<div class="lg:mt-6 lg:w-80 lg:flex-none">
<img class="h-12 w-auto" src="https://tailwindcss.com/plus-assets/img/logos/workcation-logo-indigo-600.svg" alt="">
<figure class="mt-10">
<blockquote class="text-lg/8 font-semibold text-gray-900">
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.”</p>
</blockquote>
<figcaption class="mt-10 flex gap-x-6">
<img src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=96&h=96&q=80" alt="" class="size-12 flex-none rounded-full bg-gray-50">
<div>
<div class="text-base font-semibold text-gray-900">Brenna Goyette</div>
<div class="text-sm/6 text-gray-600">CEO of Workcation</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="relative bg-white">
<div class="lg:absolute lg:inset-0 lg:left-1/2">
<img class="h-64 w-full bg-gray-50 object-cover sm:h-80 lg:absolute lg:h-full" src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-x=.4&w=2560&h=3413&&q=80" alt="">
</div>
<div class="pt-16 pb-24 sm:pt-24 sm:pb-32 lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:pt-32">
<div class="px-6 lg:px-8">
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Let's work together</h2>
<p class="mt-2 text-lg/8 text-gray-600">Proin volutpat consequat porttitor cras nullam gravida at orci molestie a eu arcu sed ut tincidunt magna.</p>
<form action="#" method="POST" class="mt-16">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first-name" class="block text-sm/6 font-semibold text-gray-900">First name</label>
<div class="mt-2.5">
<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div>
<label for="last-name" class="block text-sm/6 font-semibold text-gray-900">Last name</label>
<div class="mt-2.5">
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm/6 font-semibold text-gray-900">Email</label>
<div class="mt-2.5">
<input id="email" name="email" type="email" autocomplete="email" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div class="sm:col-span-2">
<label for="company" class="block text-sm/6 font-semibold text-gray-900">Company</label>
<div class="mt-2.5">
<input type="text" name="company" id="company" autocomplete="organization" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div class="sm:col-span-2">
<div class="flex justify-between text-sm/6">
<label for="phone" class="block font-semibold text-gray-900">Phone</label>
<p id="phone-description" class="text-gray-400">Optional</p>
</div>
<div class="mt-2.5">
<input type="tel" name="phone" id="phone" autocomplete="tel" aria-describedby="phone-description" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
</div>
</div>
<div class="sm:col-span-2">
<div class="flex justify-between text-sm/6">
<label for="message" class="block text-sm/6 font-semibold text-gray-900">How can we help you?</label>
<p id="message-description" class="text-gray-400">Max 500 characters</p>
</div>
<div class="mt-2.5">
<textarea id="message" name="message" rows="4" aria-describedby="message-description" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"></textarea>
</div>
</div>
<fieldset class="sm:col-span-2">
<legend class="block text-sm/6 font-semibold text-gray-900">Expected budget</legend>
<div class="mt-4 space-y-4 text-sm/6 text-gray-600">
<div class="flex gap-x-2.5">
<input id="budget-under-25k" name="budget" value="under_25k" type="radio" class="relative mt-1 size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden">
<label for="budget-under-25k">Less than $25K</label>
</div>
<div class="flex gap-x-2.5">
<input id="budget-25k-50k" name="budget" value="25k-50k" type="radio" class="relative mt-1 size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden">
<label for="budget-25k-50k">$25K – $50K</label>
</div>
<div class="flex gap-x-2.5">
<input id="budget-50k-100k" name="budget" value="50k-100k" type="radio" class="relative mt-1 size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden">
<label for="budget-50k-100k">$50K – $100K</label>
</div>
<div class="flex gap-x-2.5">
<input id="budget-over-100k" name="budget" value="over_100k" type="radio" class="relative mt-1 size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden">
<label for="budget-over-100k">$100K+</label>
</div>
</div>
</fieldset>
</div>
<div class="mt-10 flex justify-end border-t border-gray-900/10 pt-8">
<button type="submit" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Send message</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3">
<div class="max-w-xl">
<h2 class="text-3xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-4xl">Meet our leadership</h2>
<p class="mt-6 text-lg/8 text-gray-600">We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.</p>
</div>
<ul role="list" class="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2">
<li>
<div class="flex items-center gap-x-6">
<img class="size-16 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div>
<h3 class="text-base/7 font-semibold tracking-tight text-gray-900">Leslie Alexander</h3>
<p class="text-sm/6 font-semibold text-indigo-600">Co-Founder / CEO</p>
</div>
</div>
</li>
<!-- More people... -->
</ul>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Our team</h2>
<p class="mt-6 text-lg/8 text-gray-600">We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.</p>
</div>
<ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<li>
<img class="aspect-3/2 w-full rounded-2xl object-cover" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
<h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-gray-900">Lindsay Walton</h3>
<p class="text-base/7 text-gray-600">Front-end Developer</p>
<ul role="list" class="mt-6 flex gap-x-6">
<li>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">X</span>
<svg class="size-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M11.4678 8.77491L17.2961 2H15.915L10.8543 7.88256L6.81232 2H2.15039L8.26263 10.8955L2.15039 18H3.53159L8.87581 11.7878L13.1444 18H17.8063L11.4675 8.77491H11.4678ZM9.57608 10.9738L8.95678 10.0881L4.02925 3.03974H6.15068L10.1273 8.72795L10.7466 9.61374L15.9156 17.0075H13.7942L9.57608 10.9742V10.9738Z" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">LinkedIn</span>
<svg class="size-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</li>
<!-- More people... -->
</ul>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Our team</h2>
<p class="mt-6 text-lg/8 text-gray-600">We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.</p>
</div>
<ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-2 gap-x-8 gap-y-16 text-center sm:grid-cols-3 md:grid-cols-4 lg:mx-0 lg:max-w-none lg:grid-cols-5 xl:grid-cols-6">
<li>
<img class="mx-auto size-24 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
<h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900">Michael Foster</h3>
<p class="text-sm/6 text-gray-600">Co-Founder / CTO</p>
</li>
<!-- More people... -->
</ul>
</div>
</div>
<div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 text-center lg:px-8">
<div class="mx-auto max-w-2xl">
<h2 class="text-4xl font-semibold tracking-tight text-balance text-white sm:text-5xl">Meet our team</h2>
<p class="mt-6 text-lg/8 text-gray-400">We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.</p>
</div>
<ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-8">
<li class="rounded-2xl bg-gray-800 px-8 py-10">
<img class="mx-auto size-48 rounded-full md:size-56" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
<h3 class="mt-6 text-base/7 font-semibold tracking-tight text-white">Leonard Krasner</h3>
<p class="text-sm/6 text-gray-400">Senior Designer</p>
<ul role="list" class="mt-6 flex justify-center gap-x-6">
<li>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">X</span>
<svg class="size-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M11.4678 8.77491L17.2961 2H15.915L10.8543 7.88256L6.81232 2H2.15039L8.26263 10.8955L2.15039 18H3.53159L8.87581 11.7878L13.1444 18H17.8063L11.4675 8.77491H11.4678ZM9.57608 10.9738L8.95678 10.0881L4.02925 3.03974H6.15068L10.1273 8.72795L10.7466 9.61374L15.9156 17.0075H13.7942L9.57608 10.9742V10.9738Z" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">LinkedIn</span>
<svg class="size-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</li>
<!-- More people... -->
</ul>
</div>
</div>
<div class="bg-white py-24 md:py-32 lg:py-40">
<div class="mx-auto grid max-w-7xl grid-cols-1 gap-20 px-6 lg:px-8 xl:grid-cols-3">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Our team</h2>
<p class="mt-6 text-lg/8 text-gray-600">We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.</p>
</div>
<ul role="list" class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:gap-x-8 xl:col-span-2">
<li>
<img class="aspect-3/2 w-full rounded-2xl object-cover" src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
<h3 class="mt-6 text-lg/8 font-semibold text-gray-900">Emma Dorsey</h3>
<p class="text-base/7 text-gray-600">Senior Developer</p>
<p class="mt-4 text-base/7 text-gray-600">Praesentium iure error aliquam voluptas ut libero. Commodi placeat sit iure nulla officiis. Ut ex sit repellat tempora. Qui est accusamus exercitationem natus ut voluptas. Officiis velit eos ducimus.</p>
<ul role="list" class="mt-6 flex gap-x-6">
<li>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">X</span>
<svg class="size-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M11.4678 8.77491L17.2961 2H15.915L10.8543 7.88256L6.81232 2H2.15039L8.26263 10.8955L2.15039 18H3.53159L8.87581 11.7878L13.1444 18H17.8063L11.4675 8.77491H11.4678ZM9.57608 10.9738L8.95678 10.0881L4.02925 3.03974H6.15068L10.1273 8.72795L10.7466 9.61374L15.9156 17.0075H13.7942L9.57608 10.9742V10.9738Z" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">LinkedIn</span>
<svg class="size-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</li>
<!-- More people... -->
</ul>
</div>
</div>
<div class="bg-white py-24 md:py-32">
<div class="mx-auto grid max-w-7xl grid-cols-1 gap-20 px-6 lg:px-8 xl:grid-cols-5">
<div class="max-w-2xl xl:col-span-2">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">About the team</h2>
<p class="mt-6 text-lg/8 text-gray-600">We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.</p>
</div>
<ul role="list" class="divide-y divide-gray-200 xl:col-span-3">
<li class="flex flex-col gap-10 py-12 first:pt-0 last:pb-0 sm:flex-row">
<img class="aspect-4/5 w-52 flex-none rounded-2xl object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
<div class="max-w-xl flex-auto">
<h3 class="text-lg/8 font-semibold tracking-tight text-gray-900">Leslie Alexander</h3>
<p class="text-base/7 text-gray-600">Co-Founder / CEO</p>
<p class="mt-6 text-base/7 text-gray-600">Ultricies massa malesuada viverra cras lobortis. Tempor orci hac ligula dapibus mauris sit ut eu. Eget turpis urna maecenas cras. Nisl dictum.</p>
<ul role="list" class="mt-6 flex gap-x-6">
<li>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">X</span>
<svg class="size-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M11.4678 8.77491L17.2961 2H15.915L10.8543 7.88256L6.81232 2H2.15039L8.26263 10.8955L2.15039 18H3.53159L8.87581 11.7878L13.1444 18H17.8063L11.4675 8.77491H11.4678ZM9.57608 10.9738L8.95678 10.0881L4.02925 3.03974H6.15068L10.1273 8.72795L10.7466 9.61374L15.9156 17.0075H13.7942L9.57608 10.9742V10.9738Z" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">LinkedIn</span>
<svg class="size-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</div>
</li>
<!-- More people... -->
</ul>
</div>
</div>
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl sm:text-center">
<h2 class="text-34l font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">Meet our leadership</h2>
<p class="mt-6 text-lg/8 text-gray-600">We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.</p>
</div>
<ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:max-w-4xl lg:gap-x-8 xl:max-w-none">
<li class="flex flex-col gap-6 xl:flex-row">
<img class="aspect-4/5 w-52 flex-none rounded-2xl object-cover" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
<div class="flex-auto">
<h3 class="text-lg/8 font-semibold tracking-tight text-gray-900">Leonard Krasner</h3>
<p class="text-base/7 text-gray-600">Senior Designer</p>
<p class="mt-6 text-base/7 text-gray-600">Quia illum aut in beatae. Possimus dolores aliquid accusantium aut in ut non assumenda. Enim iusto molestias aut deleniti eos aliquid magnam molestiae. At et non possimus ab. Magni labore molestiae nulla qui.</p>
</div>
</li>
<!-- More people... -->
</ul>
</div>
</div>
<div class="bg-white py-32">
<div class="mx-auto max-w-7xl px-6 text-center lg:px-8">
<div class="mx-auto max-w-2xl">
<h2 class="text-34l font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">Meet our leadership</h2>
<p class="mt-6 text-lg/8 text-gray-600">We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.</p>
</div>
<ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<li>
<img class="mx-auto size-56 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
<h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900">Whitney Francis</h3>
<p class="text-sm/6 text-gray-600">Copywriter</p>
<ul role="list" class="mt-6 flex justify-center gap-x-6">
<li>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">X</span>
<svg class="size-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M11.4678 8.77491L17.2961 2H15.915L10.8543 7.88256L6.81232 2H2.15039L8.26263 10.8955L2.15039 18H3.53159L8.87581 11.7878L13.1444 18H17.8063L11.4675 8.77491H11.4678ZM9.57608 10.9738L8.95678 10.0881L4.02925 3.03974H6.15068L10.1273 8.72795L10.7466 9.61374L15.9156 17.0075H13.7942L9.57608 10.9742V10.9738Z" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">LinkedIn</span>
<svg class="size-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</li>
<!-- More people... -->
</ul>
</div>
</div>
<div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">Our team</h2>
<p class="mt-6 text-lg/8 text-gray-300">We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.</p>
</div>
<ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-14 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 xl:grid-cols-4">
<li>
<img class="aspect-14/13 w-full rounded-2xl object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
<h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">Leslie Alexander</h3>
<p class="text-base/7 text-gray-300">Co-Founder / CEO</p>
<p class="text-sm/6 text-gray-500">Toronto, Canada</p>
</li>
<!-- More people... -->
</ul>
</div>
</div>
<div class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-24 sm:pt-32 lg:px-8 lg:py-40">
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="lg:col-span-5">
<h2 class="text-3xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-4xl">Frequently asked questions</h2>
<p class="mt-4 text-base/7 text-pretty text-gray-600">Can’t find the answer you’re looking for? Reach out to our <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">customer support</a> team.</p>
</div>
<div class="mt-10 lg:col-span-7 lg:mt-0">
<dl class="space-y-10">
<div>
<dt class="text-base/7 font-semibold text-gray-900">How do you make holy water?</dt>
<dd class="mt-2 text-base/7 text-gray-600">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
</div>
<!-- More questions... -->
</dl>
</div>
</div>
</div>
</div>
<div class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8 lg:py-40">
<div class="mx-auto max-w-4xl">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Frequently asked questions</h2>
<dl class="mt-16 divide-y divide-gray-900/10">
<div class="py-6 first:pt-0 last:pb-0">
<dt>
<!-- Expand/collapse question button -->
<button type="button" class="flex w-full items-start justify-between text-left text-gray-900" aria-controls="faq-0" aria-expanded="false">
<span class="text-base/7 font-semibold">What's the best thing about Switzerland?</span>
<span class="ml-6 flex h-7 items-center">
<!--
Icon when question is collapsed.
Item expanded: "hidden", Item collapsed: ""
-->
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
<!--
Icon when question is expanded.
Item expanded: "", Item collapsed: "hidden"
-->
<svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 pr-12" id="faq-0">
<p class="text-base/7 text-gray-600">I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
</dd>
</div>
<!-- More questions... -->
</dl>
</div>
</div>
</div>
<div class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8 lg:py-40">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Frequently asked questions</h2>
<dl class="mt-20 divide-y divide-gray-900/10">
<div class="py-8 first:pt-0 last:pb-0 lg:grid lg:grid-cols-12 lg:gap-8">
<dt class="text-base/7 font-semibold text-gray-900 lg:col-span-5">What's the best thing about Switzerland?</dt>
<dd class="mt-4 lg:col-span-7 lg:mt-0">
<p class="text-base/7 text-gray-600">I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
</dd>
</div>
<!-- More questions... -->
</dl>
</div>
</div>
<div class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Frequently asked questions</h2>
<p class="mt-6 max-w-2xl text-base/7 text-gray-600">Have a different question and can’t find the answer you’re looking for? Reach out to our support team by <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">sending us an email</a> and we’ll get back to you as soon as we can.</p>
<div class="mt-20">
<dl class="space-y-16 sm:grid sm:grid-cols-2 sm:space-y-0 sm:gap-x-6 sm:gap-y-16 lg:grid-cols-3 lg:gap-x-10">
<div>
<dt class="text-base/7 font-semibold text-gray-900">What's the best thing about Switzerland?</dt>
<dd class="mt-2 text-base/7 text-gray-600">I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
</div>
<!-- More questions... -->
</dl>
</div>
</div>
</div>
<div class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Frequently asked questions</h2>
<p class="mt-6 max-w-2xl text-base/7 text-gray-600">Have a different question and can’t find the answer you’re looking for? Reach out to our support team by <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">sending us an email</a> and we’ll get back to you as soon as we can.</p>
<div class="mt-20">
<dl class="space-y-16 sm:grid sm:grid-cols-2 sm:space-y-0 sm:gap-x-6 sm:gap-y-16 lg:gap-x-10">
<div>
<dt class="text-base/7 font-semibold text-gray-900">What's the best thing about Switzerland?</dt>
<dd class="mt-2 text-base/7 text-gray-600">I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
</div>
<!-- More questions... -->
</dl>
</div>
</div>
</div>
<footer class="bg-gray-900">
<div class="mx-auto max-w-7xl px-6 pt-16 pb-8 sm:pt-24 lg:px-8 lg:pt-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-8">
<img class="h-9" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Company name">
<p class="text-sm/6 text-balance text-gray-300">Making the world a better place through constructing elegant hierarchies.</p>
<div class="flex gap-x-6">
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 lg:mt-24">
<p class="text-sm/6 text-gray-400">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>
<footer class="bg-white">
<div class="mx-auto max-w-7xl px-6 pt-16 pb-8 sm:pt-24 lg:px-8 lg:pt-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-8">
<img class="h-9" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Company name">
<p class="text-sm/6 text-balance text-gray-600">Making the world a better place through constructing elegant hierarchies.</p>
<div class="flex gap-x-6">
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-24">
<p class="text-sm/6 text-gray-600">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>
<footer class="bg-gray-900">
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8 lg:py-32">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-base/7 font-semibold text-indigo-400">Get started</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-balance text-white sm:text-5xl">Boost your productivity. Start using our app today.</p>
<p class="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-400">Incididunt sint fugiat pariatur cupidatat consectetur sit cillum anim id veniam aliqua proident excepteur commodo do ea.</p>
<div class="mt-8 flex justify-center">
<a href="#" class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">Get started</a>
</div>
</div>
<div class="mt-24 border-t border-white/10 pt-12 xl:grid xl:grid-cols-3 xl:gap-8">
<img class="h-9" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Company name">
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-12 border-t border-white/10 pt-8 md:flex md:items-center md:justify-between">
<div class="flex gap-x-6 md:order-2">
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-sm/6 text-gray-400 md:order-1 md:mt-0">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>
<footer class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8 lg:py-32">
<div class="mx-auto max-w-2xl text-center">
<hgroup>
<h2 class="text-base/7 font-semibold text-indigo-600">Get started</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">Boost your productivity. Start using our app today.</p>
</hgroup>
<p class="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-600">Incididunt sint fugiat pariatur cupidatat consectetur sit cillum anim id veniam aliqua proident excepteur commodo do ea.</p>
<div class="mt-8 flex justify-center">
<a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
</div>
</div>
<div class="mt-24 border-t border-gray-900/10 pt-12 xl:grid xl:grid-cols-3 xl:gap-8">
<img class="h-9" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Company name">
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-950">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-950">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-950">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-950">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-12 border-t border-gray-900/10 pt-8 md:flex md:items-center md:justify-between">
<div class="flex gap-x-6 md:order-2">
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-sm/6 text-gray-600 md:order-1 md:mt-0">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>
<footer class="bg-gray-900">
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8 lg:py-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<img class="h-9" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Company name">
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<footer class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8 lg:py-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<img class="h-9" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Company name">
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<footer class="bg-gray-900">
<div class="mx-auto max-w-7xl px-6 pt-20 pb-8 sm:pt-24 lg:px-8 lg:pt-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="grid grid-cols-2 gap-8 xl:col-span-2">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-white">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-400 hover:text-white">License</a>
</li>
</ul>
</div>
</div>
</div>
<div class="mt-10 xl:mt-0">
<h3 class="text-sm/6 font-semibold text-white">Subscribe to our newsletter</h3>
<p class="mt-2 text-sm/6 text-gray-300">The latest news, articles, and resources, sent to your inbox weekly.</p>
<form class="mt-6 sm:flex sm:max-w-md">
<label for="email-address" class="sr-only">Email address</label>
<input type="email" name="email-address" id="email-address" autocomplete="email" required class="w-full min-w-0 rounded-md bg-white/5 px-3 py-1.5 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-500 sm:w-64 sm:text-sm/6 xl:w-full" placeholder="Enter your email">
<div class="mt-4 sm:mt-0 sm:ml-4 sm:shrink-0">
<button type="submit" class="flex w-full items-center justify-center rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
<div class="flex gap-x-6 md:order-2">
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-sm/6 text-gray-400 md:order-1 md:mt-0">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>
<footer class="bg-white">
<div class="mx-auto max-w-7xl px-6 pt-20 pb-8 sm:pt-24 lg:px-8 lg:pt-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="grid grid-cols-2 gap-8 xl:col-span-2">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">License</a>
</li>
</ul>
</div>
</div>
</div>
<div class="mt-10 xl:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Subscribe to our newsletter</h3>
<p class="mt-2 text-sm/6 text-gray-600">The latest news, articles, and resources, sent to your inbox weekly.</p>
<form class="mt-6 sm:flex sm:max-w-md">
<label for="email-address" class="sr-only">Email address</label>
<input type="email" name="email-address" id="email-address" autocomplete="email" required class="w-full min-w-0 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:w-64 sm:text-sm/6 xl:w-full" placeholder="Enter your email">
<div class="mt-4 sm:mt-0 sm:ml-4 sm:shrink-0">
<button type="submit" class="flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
<div class="flex gap-x-6 md:order-2">
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-sm/6 text-gray-600 md:order-1 md:mt-0">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>
<footer class="bg-gray-900">
<div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
<div class="flex justify-center gap-x-6 md:order-2">
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-center text-sm/6 text-gray-400 md:order-1 md:mt-0">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</footer>
<footer class="bg-white">
<div class="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
<nav class="-mb-6 flex flex-wrap justify-center gap-x-12 gap-y-3 text-sm/6" aria-label="Footer">
<a href="#" class="text-gray-600 hover:text-gray-900">About</a>
<a href="#" class="text-gray-600 hover:text-gray-900">Blog</a>
<a href="#" class="text-gray-600 hover:text-gray-900">Jobs</a>
<a href="#" class="text-gray-600 hover:text-gray-900">Press</a>
<a href="#" class="text-gray-600 hover:text-gray-900">Accessibility</a>
<a href="#" class="text-gray-600 hover:text-gray-900">Partners</a>
</nav>
<div class="mt-16 flex justify-center gap-x-10">
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-10 text-center text-sm/6 text-gray-600">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</footer>
<footer class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
<div class="flex justify-center gap-x-6 md:order-2">
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-center text-sm/6 text-gray-600 md:order-1 md:mt-0">© 2024 Your Company, Inc. All rights reserved.</p>
</div>
</footer>
