---
---

<!-- Pricing -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
	<!-- Title -->
	<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
		<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Pricing</h2>
		<p class="mt-1 text-gray-600 dark:text-gray-400">
			Whatever your status, our offers evolve according to your needs.
		</p>
	</div>
	<!-- End Title -->

	<!-- Grid -->
	<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:items-center">
		<!-- Card -->
		<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
			<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Free</h4>
			<span class="mt-7 font-bold text-5xl text-gray-800 dark:text-gray-200">Free</span>
			<p class="mt-2 text-sm text-gray-500">Forever free</p>

			<ul class="mt-7 space-y-2.5 text-sm">
				<li class="flex space-x-2">
					<svg
						class="flex-shrink-0 h-5 w-5 text-blue-600"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
							fill="currentColor"></path>
					</svg>
					<span class="text-gray-800 dark:text-gray-400"> 1 user</span>
				</li>

				<li class="flex space-x-2">
					<svg
						class="flex-shrink-0 h-5 w-5 text-blue-600"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
							fill="currentColor"></path>
					</svg>
					<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
				</li>

				<li class="flex space-x-2">
					<svg
						class="flex-shrink-0 h-5 w-5 text-blue-600"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
							fill="currentColor"></path>
					</svg>
					<span class="text-gray-800 dark:text-gray-400"> Product support</span>
				</li>
			</ul>

			<button class="mt-5 btn">Sign up</button>
		</div>
		<!-- End Card -->

		<!-- Card -->
		<div class="flex flex-col border-2 border-blue-600 text-center shadow-xl rounded-xl p-8 dark:border-blue-500">
			<p class="mb-3">
				<span
					class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs uppercase font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-white"
					>Most popular</span
				>
			</p>
			<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Startup</h4>
			<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
				<span class="font-bold text-2xl -mr-2">$</span>
				39
			</span>
			<p class="mt-2 text-sm text-gray-500">All the basics for starting a new business</p>

			<ul class="mt-7 space-y-2.5 text-sm">
				<li class="flex space-x-2">
					<svg
						class="flex-shrink-0 h-5 w-5 text-blue-600"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
							fill="currentColor"></path>
					</svg>
					<span class="text-gray-800 dark:text-gray-400"> 2 users</span>
				</li>

				<li class="flex space-x-2">
					<svg
						class="flex-shrink-0 h-5 w-5 text-blue-600"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
							fill="currentColor"></path>
					</svg>
					<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
				</li>

				<li class="flex space-x-2">
					<svg
						class="flex-shrink-0 h-5 w-5 text-blue-600"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
							fill="currentColor"></path>
					</svg>
					<span class="text-gray-800 dark:text-gray-400"> Product support</span>
				</li>
			</ul>

			<button class="mt-5 btn">Sign up</button>
		</div>
		<!-- End Card -->

		<!-- Card -->
		<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
			<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Team</h4>
			<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
				<span class="font-bold text-2xl -mr-2">$</span>
				89
			</span>
			<p class="mt-2 text-sm text-gray-500">Everything you need for a growing business</p>

			<ul class="mt-7 space-y-2.5 text-sm">
				<li class="flex space-x-2">
					<svg
						class="flex-shrink-0 h-5 w-5 text-blue-600"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
							fill="currentColor"></path>
					</svg>
					<span class="text-gray-800 dark:text-gray-400"> 5 users</span>
				</li>

				<li class="flex space-x-2">
					<svg
						class="flex-shrink-0 h-5 w-5 text-blue-600"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
							fill="currentColor"></path>
					</svg>
					<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
				</li>

				<li class="flex space-x-2">
					<svg
						class="flex-shrink-0 h-5 w-5 text-blue-600"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
							fill="currentColor"></path>
					</svg>
					<span class="text-gray-800 dark:text-gray-400"> Product support</span>
				</li>
			</ul>

			<button class="mt-5 btn">Sign up</button>
		</div>
		<!-- End Card -->

		<!-- Card -->
		<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
			<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Enterprise</h4>
			<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
				<span class="font-bold text-2xl -mr-2">$</span>
				149
			</span>
			<p class="mt-2 text-sm text-gray-500">Advanced features for scaling your business</p>

			<ul class="mt-7 space-y-2.5 text-sm">
				<li class="flex space-x-2">
					<svg
						class="flex-shrink-0 h-5 w-5 text-blue-600"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
							fill="currentColor"></path>
					</svg>
					<span class="text-gray-800 dark:text-gray-400"> 10 users</span>
				</li>

				<li class="flex space-x-2">
					<svg
						class="flex-shrink-0 h-5 w-5 text-blue-600"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
							fill="currentColor"></path>
					</svg>
					<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
				</li>

				<li class="flex space-x-2">
					<svg
						class="flex-shrink-0 h-5 w-5 text-blue-600"
						width="16"
						height="16"
						viewBox="0 0 16 16"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
							fill="currentColor"></path>
					</svg>
					<span class="text-gray-800 dark:text-gray-400"> Product support</span>
				</li>
			</ul>

			<button class="mt-5 btn">Sign up</button>
		</div>
		<!-- End Card -->
	</div>
	<!-- End Grid -->
</div>
<!-- End Pricing -->