<div
class="relative mx-auto w-full max-w-lg rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
<div class="px-8 py-12 text-center">
<div class="mb-6">
<div
class="mx-auto mb-4 flex size-24 items-center justify-center rounded-3xl bg-purple-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
aria-hidden="true"
class="bi bi-plus-circle-dotted inline-block size-10 text-white"
>
<path
d="M8 0c-.176 0-.35.006-.523.017l.064.998a7.117 7.117 0 0 1 .918 0l.064-.998A8.113 8.113 0 0 0 8 0zM6.44.152c-.346.069-.684.16-1.012.27l.321.948c.287-.098.582-.177.884-.237L6.44.153zm4.132.271a7.946 7.946 0 0 0-1.011-.27l-.194.98c.302.06.597.14.884.237l.321-.947zm1.873.925a8 8 0 0 0-.906-.524l-.443.896c.275.136.54.29.793.459l.556-.831zM4.46.824c-.314.155-.616.33-.905.524l.556.83a7.07 7.07 0 0 1 .793-.458L4.46.824zM2.725 1.985c-.262.23-.51.478-.74.74l.752.66c.202-.23.418-.446.648-.648l-.66-.752zm11.29.74a8.058 8.058 0 0 0-.74-.74l-.66.752c.23.202.447.418.648.648l.752-.66zm1.161 1.735a7.98 7.98 0 0 0-.524-.905l-.83.556c.169.253.322.518.458.793l.896-.443zM1.348 3.555c-.194.289-.37.591-.524.906l.896.443c.136-.275.29-.54.459-.793l-.831-.556zM.423 5.428a7.945 7.945 0 0 0-.27 1.011l.98.194c.06-.302.14-.597.237-.884l-.947-.321zM15.848 6.44a7.943 7.943 0 0 0-.27-1.012l-.948.321c.098.287.177.582.237.884l.98-.194zM.017 7.477a8.113 8.113 0 0 0 0 1.046l.998-.064a7.117 7.117 0 0 1 0-.918l-.998-.064zM16 8a8.1 8.1 0 0 0-.017-.523l-.998.064a7.11 7.11 0 0 1 0 .918l.998.064A8.1 8.1 0 0 0 16 8zM.152 9.56c.069.346.16.684.27 1.012l.948-.321a6.944 6.944 0 0 1-.237-.884l-.98.194zm15.425 1.012c.112-.328.202-.666.27-1.011l-.98-.194c-.06.302-.14.597-.237.884l.947.321zM.824 11.54a8 8 0 0 0 .524.905l.83-.556a6.999 6.999 0 0 1-.458-.793l-.896.443zm13.828.905c.194-.289.37-.591.524-.906l-.896-.443c-.136.275-.29.54-.459.793l.831.556zm-12.667.83c.23.262.478.51.74.74l.66-.752a7.047 7.047 0 0 1-.648-.648l-.752.66zm11.29.74c.262-.23.51-.478.74-.74l-.752-.66c-.201.23-.418.447-.648.648l.66.752zm-1.735 1.161c.314-.155.616-.33.905-.524l-.556-.83a7.07 7.07 0 0 1-.793.458l.443.896zm-7.985-.524c.289.194.591.37.906.524l.443-.896a6.998 6.998 0 0 1-.793-.459l-.556.831zm1.873.925c.328.112.666.202 1.011.27l.194-.98a6.953 6.953 0 0 1-.884-.237l-.321.947zm4.132.271a7.944 7.944 0 0 0 1.012-.27l-.321-.948a6.954 6.954 0 0 1-.884.237l.194.98zm-2.083.135a8.1 8.1 0 0 0 1.046 0l-.064-.998a7.11 7.11 0 0 1-.918 0l-.064.998zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"
/>
</svg>
</div>
<h2 class="text-3xl font-extrabold text-zinc-800">LaunchPad Pro</h2>
<p class="mt-3 text-zinc-600">
Transform your startup ideas into reality with our all-in-one platform.
Build, deploy, and scale faster than ever before.
</p>
</div>
<ul class="mx-auto mb-4 inline-flex flex-col gap-3">
<li class="flex flex-none items-center gap-3 text-sm text-zinc-700">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-check inline-block size-4 text-purple-600"
>
<path d="M20 6 9 17l-5-5" />
</svg>
<span>Real-time collaboration tools</span>
</li>
<li class="flex flex-none items-center gap-3 text-sm text-zinc-700">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-check inline-block size-4 text-purple-600"
>
<path d="M20 6 9 17l-5-5" />
</svg>
<span>AI-powered analytics dashboard</span>
</li>
<li class="flex flex-none items-center gap-3 text-sm text-zinc-700">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-check inline-block size-4 text-purple-600"
>
<path d="M20 6 9 17l-5-5" />
</svg>
<span>One-click deployment to cloud</span>
</li>
</ul>
<div class="mb-6 text-center">
<div
class="inline-flex items-center gap-2 rounded-full bg-purple-50 px-4 py-2 text-sm"
>
<span class="hidden text-zinc-600 sm:inline">Starting at</span>
<span class="font-bold text-purple-700">$29/month</span>
<span
class="rounded-full bg-purple-500 px-2 py-0.5 text-xs font-medium text-white"
>50% OFF</span
>
</div>
</div>
<div class="mb-8 flex flex-col gap-3">
<button
type="button"
class="w-full rounded-xl bg-purple-600 px-6 py-3 text-sm font-medium text-white shadow-lg shadow-purple-500/25 hover:bg-purple-700 hover:shadow-purple-500/50"
>
Start free trial
</button>
<button
type="button"
class="w-full rounded-lg border border-zinc-200 bg-zinc-50 px-4 py-2.5 text-center text-sm font-medium text-zinc-700 hover:bg-zinc-100"
>
Schedule demo
</button>
</div>
<div class="mt-8 border-t border-dashed border-zinc-200 pt-8">
<p class="mb-3 text-xs text-zinc-500">Trusted by 10,000+ companies</p>
<div class="flex items-center justify-center gap-3">
<div
class="rounded-lg bg-zinc-100 px-2 py-1.5 text-xs font-semibold text-zinc-600"
>
TechCorp
</div>
<div
class="rounded-lg bg-zinc-100 px-2 py-1.5 text-xs font-semibold text-zinc-600"
>
StartupX
</div>
<div
class="rounded-lg bg-zinc-100 px-2 py-1.5 text-xs font-semibold text-zinc-600"
>
InnovateLab
</div>
</div>
</div>
</div>
</div>