{% extends "base.html" %}

{% block title %}Opciones de diseño | Sublimaciones Matiguan{% endblock %}

{% block content %}
<div class="space-y-8">
  <section class="space-y-3">
    <p class="text-sm font-medium uppercase tracking-[0.18em] text-fuchsia-600">Estilos</p>
    <h3 class="text-3xl font-bold tracking-tight text-slate-900">Selecciona una opción de dashboard</h3>
  </section>

  <section class="grid gap-6 xl:grid-cols-3">
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="mb-4 flex items-center justify-between">
        <span class="rounded-full bg-blue-100 px-2.5 py-1 text-xs font-semibold uppercase tracking-wide text-blue-700">Opción 1</span>
        <span class="text-xs text-slate-500">Corporativo</span>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
        <div class="mb-4 h-32 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-600"></div>
        <div class="space-y-2">
          <div class="h-3 w-2/3 rounded-full bg-slate-200"></div>
          <div class="h-3 w-1/2 rounded-full bg-slate-200"></div>
          <div class="grid grid-cols-2 gap-2 pt-2">
            <div class="h-14 rounded-xl bg-blue-100"></div>
            <div class="h-14 rounded-xl bg-slate-200"></div>
          </div>
        </div>
      </div>
      <a href="/dashboard/1" class="mt-5 inline-flex w-full items-center justify-center rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-blue-600/20">Ver opción</a>
    </article>

    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="mb-4 flex items-center justify-between">
        <span class="rounded-full bg-violet-100 px-2.5 py-1 text-xs font-semibold uppercase tracking-wide text-violet-700">Opción 2</span>
        <span class="text-xs text-slate-500">Premium</span>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
        <div class="mb-4 h-32 rounded-2xl bg-gradient-to-br from-violet-600 via-fuchsia-500 to-pink-500"></div>
        <div class="space-y-2">
          <div class="h-3 w-2/3 rounded-full bg-slate-200"></div>
          <div class="h-3 w-1/2 rounded-full bg-slate-200"></div>
          <div class="grid grid-cols-2 gap-2 pt-2">
            <div class="h-14 rounded-xl bg-violet-100"></div>
            <div class="h-14 rounded-xl bg-pink-100"></div>
          </div>
        </div>
      </div>
      <a href="/dashboard/2" class="mt-5 inline-flex w-full items-center justify-center rounded-2xl bg-gradient-to-r from-violet-600 to-fuchsia-600 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-violet-600/20">Ver opción</a>
    </article>

    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="mb-4 flex items-center justify-between">
        <span class="rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold uppercase tracking-wide text-emerald-700">Opción 3</span>
        <span class="text-xs text-slate-500">Minimal</span>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
        <div class="mb-4 h-32 rounded-2xl bg-gradient-to-br from-slate-800 to-slate-600"></div>
        <div class="space-y-2">
          <div class="h-3 w-2/3 rounded-full bg-slate-200"></div>
          <div class="h-3 w-1/2 rounded-full bg-slate-200"></div>
          <div class="grid grid-cols-2 gap-2 pt-2">
            <div class="h-14 rounded-xl bg-emerald-100"></div>
            <div class="h-14 rounded-xl bg-slate-200"></div>
          </div>
        </div>
      </div>
      <a href="/dashboard/3" class="mt-5 inline-flex w-full items-center justify-center rounded-2xl bg-gradient-to-r from-slate-700 to-slate-900 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-slate-700/20">Ver opción</a>
    </article>
  </section>
</div>
{% endblock %}