| {# Empty State Component |
| Usage: {% include "components/empty_state.html" with title="Welcome" message="Get started..." cta_url=url('...') cta_label="Create" %} |
| #} |
| <div class="flex flex-col items-center justify-center py-20 px-4 text-center animate-fade-in"> |
| <div class="flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 shadow-xl shadow-indigo-500/20 mb-8"> |
| <svg class="h-10 w-10 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/> |
| </svg> |
| </div> |
| <h2 class="text-3xl font-bold tracking-tight text-[--foreground] sm:text-4xl mb-4">{{ title }}</h2> |
| <p class="max-w-md mx-auto text-lg text-[--muted-foreground] mb-10">{{ message }}</p> |
| {% if cta_url %} |
| <a href="{{ cta_url }}" class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-6 py-3.5 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 transition-all hover:scale-[1.02]"> |
| <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> |
| {{ cta_label|default('Get Started') }} |
| </a> |
| {% endif %} |
| </div> |
|
|
