<div
class="relative mx-auto w-full max-w-sm rounded-xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
<div class="flex flex-col gap-6 px-6 py-10 sm:px-10 sm:py-14">
<div class="text-center">
<div
class="relative mx-auto mb-4 flex size-14 rotate-6 items-center justify-center rounded-2xl bg-linear-to-br from-blue-600 to-purple-500 text-white ring-4 ring-indigo-500/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hi-outline hi-check inline-block size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m4.5 12.75 6 6 9-13.5"
/>
</svg>
</div>
<h2 class="text-2xl font-extrabold text-zinc-900">AI Assistant Ready</h2>
<p class="mt-2 text-sm/relaxed text-zinc-600">
Your intelligent companion is online and ready to help with any task.
</p>
</div>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3 rounded-lg bg-emerald-50 p-4">
<div
class="flex size-8 items-center justify-center rounded-full bg-emerald-200/75 text-emerald-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-check-circle inline-block size-4"
>
<path
fill-rule="evenodd"
d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="grow">
<div class="text-sm font-medium text-emerald-950">
Natural Language Processing
</div>
<div class="mt-1 text-xs text-emerald-800">
Advanced conversational AI
</div>
</div>
</div>
<div class="flex items-center gap-3 rounded-lg bg-blue-50 p-4">
<div
class="flex size-8 items-center justify-center rounded-full bg-blue-200/75 text-blue-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-bolt inline-block size-4"
>
<path
fill-rule="evenodd"
d="M9.58 1.077a.75.75 0 0 1 .405.82L9.165 6h4.085a.75.75 0 0 1 .567 1.241l-6.5 7.5a.75.75 0 0 1-1.302-.638L6.835 10H2.75a.75.75 0 0 1-.567-1.241l6.5-7.5a.75.75 0 0 1 .897-.182Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="grow">
<div class="text-sm font-medium text-blue-950">
Real-time Learning
</div>
<div class="mt-1 text-xs text-blue-800">
Continuously improving responses
</div>
</div>
</div>
<div class="flex items-center gap-3 rounded-lg bg-purple-50 p-4">
<div
class="flex size-8 items-center justify-center rounded-full bg-purple-200/75 text-purple-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-shield-check inline-block size-4"
>
<path
fill-rule="evenodd"
d="M8.5 1.709a.75.75 0 0 0-1 0 8.963 8.963 0 0 1-4.84 2.217.75.75 0 0 0-.654.72 10.499 10.499 0 0 0 5.647 9.672.75.75 0 0 0 .694-.001 10.499 10.499 0 0 0 5.647-9.672.75.75 0 0 0-.654-.719A8.963 8.963 0 0 1 8.5 1.71Zm2.34 5.504a.75.75 0 0 0-1.18-.926L7.394 9.17l-1.156-.99a.75.75 0 1 0-.976 1.138l1.75 1.5a.75.75 0 0 0 1.078-.106l2.75-3.5Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="grow">
<div class="text-sm font-medium text-purple-950">
Privacy Protected
</div>
<div class="mt-1 text-xs text-purple-800">
End-to-end encryption enabled
</div>
</div>
</div>
</div>
<div class="flex gap-2">
<button
type="button"
class="flex grow items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-700 active:bg-zinc-700"
>
Start Conversation
</button>
<button
type="button"
class="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white px-4 py-3 text-sm leading-5 font-medium text-zinc-700 hover:border-zinc-300 hover:bg-zinc-50 hover:text-zinc-900 focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-400 active:bg-zinc-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-cog-6-tooth inline-block size-4"
>
<path
fill-rule="evenodd"
d="M6.455 1.45A.5.5 0 0 1 6.952 1h2.096a.5.5 0 0 1 .497.45l.186 1.858a4.996 4.996 0 0 1 1.466.848l1.703-.769a.5.5 0 0 1 .639.206l1.047 1.814a.5.5 0 0 1-.14.656l-1.517 1.09a5.026 5.026 0 0 1 0 1.694l1.516 1.09a.5.5 0 0 1 .141.656l-1.047 1.814a.5.5 0 0 1-.639.206l-1.703-.768c-.433.36-.928.649-1.466.847l-.186 1.858a.5.5 0 0 1-.497.45H6.952a.5.5 0 0 1-.497-.45l-.186-1.858a4.993 4.993 0 0 1-1.466-.848l-1.703.769a.5.5 0 0 1-.639-.206l-1.047-1.814a.5.5 0 0 1 .14-.656l1.517-1.09a5.033 5.033 0 0 1 0-1.694l-1.516-1.09a.5.5 0 0 1-.141-.656L2.46 3.593a.5.5 0 0 1 .639-.206l1.703.769c.433-.36.928-.65 1.466-.848l.186-1.858Zm-.177 7.567-.022-.037a2 2 0 0 1 3.466-1.997l.022.037a2 2 0 0 1-3.466 1.997Z"
clip-rule="evenodd"
/>
</svg>
<span class="sr-only">Settings</span>
</button>
</div>
</div>
</div>