maquetador-graficas/resources/js/Pages/Dashboard/Index.vue

<script setup>
import { router } from '@inertiajs/vue3';

import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
import NotificationController from '@/Controllers/NotificationController';

const notificationCtl = NotificationController;

const logout = () => {
  router.post(route('logout'), {}, {
    onBefore: () => {
      notificationCtl.stop();
    }
  });
};
</script>

<template>
  <div
    class="min-h-screen font-sans bg-gradient-to-br from-[#621132] via-[#621132] to-[#621132] text-[#621132] antialiased"
  >
    <div class="flex items-center justify-end p-5 text-white">
      <div class="border p-1 rounded">
          <button type="button" @click.prevent="logout">
            {{ $t("auth.logout") }}
          </button>
      </div>
    </div>
    <main class="grid min-h-screen place-items-center p-4">
      <!-- Tarjeta -->
      <section
        class="w-full max-w-2xl rounded-3xl border border-white/10 bg-white/5 p-6 sm:p-8 shadow-2xl backdrop-blur supports-[backdrop-filter]:bg-white/10"
      >
        <!-- Encabezado -->
        <header class="mb-6 sm:mb-8">
          <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-white">
            Accesos rápidos
          </h1>
          <p class="mt-2 text-sm sm:text-base text-white">
            Selecciona un destino.
          </p>
        </header>

        <!-- Grid de botones -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
          <!-- Botón 1 -->
          <a
            :href="route('dashboard.api-tramite')"
            target="_blank"
            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 active:scale-[0.99]"
            aria-label="Ir al sitio 1"
          >
            <div class="flex items-center gap-3">
              <!-- Ícono externo simple -->
              <span class="rounded-xl bg-white/10 p-2">
                <GoogleIcon name="open_in_new" class="text-white" />
              </span>
              <div class="min-w-0">
                <h2 class="font-semibold text-white">
                  Reporte Especial de Trámites
                </h2>
                <p class="text-sm text-slate-300">
                  Resumen de trámites por unidad administrativa
                </p>
              </div>
            </div>
            <!-- Efecto -->
            <span
              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
              style="
                background: radial-gradient(
                  600px circle at var(--x, 50%) var(--y, 50%),
                  rgba(199, 12, 12, 0.12),
                  transparent 40%
                );
              "
            ></span>
          </a>

          <!-- Botón 2 -->
          <a
            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=1&period=week&type=almacen"
            target="_blank"
            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 active:scale-[0.99]"
            aria-label="Ir al sitio 2"
          >
            <div class="flex items-center gap-3">
              <span class="rounded-xl bg-white/10 p-2">
                <GoogleIcon name="open_in_new" class="text-white" />
              </span>
              <div class="min-w-0">
                <h2 class="font-semibold text-white">Apoyo a Beneficiarios</h2>
                <p class="text-sm text-slate-300">
                  Dashboard de apoyo a Beneficiarios
                </p>
              </div>
            </div>
            <span
              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
              style="
                background: radial-gradient(
                  600px circle at var(--x, 50%) var(--y, 50%),
                  rgba(98, 17, 50, 0.12),
                  transparent 40%
                );
              "
            ></span>
          </a>

          <!-- Botón 3 -->
          <a
            :href="route('dashboard.api-obra')"
            target="_blank"
            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400 active:scale-[0.99]"
            aria-label="Ir al sitio 3"
          >
            <div class="flex items-center gap-3">
              <span class="rounded-xl bg-white/10 p-2">
                <GoogleIcon name="open_in_new" class="text-white" />
              </span>
              <div class="min-w-0">
                <h2 class="font-semibold text-white">Información de Obras</h2>
                <p class="text-sm text-slate-300">Proyectos en seguimiento</p>
              </div>
            </div>
            <span
              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
              style="
                background: radial-gradient(
                  600px circle at var(--x, 50%) var(--y, 50%),
                  rgba(255, 255, 255, 0.12),
                  transparent 40%
                );
              "
            ></span>
          </a>

          <!-- Botón 4 -->
          <a
            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=3&period=week&type=almacen"
            target="_blank"
            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 active:scale-[0.99]"
            aria-label="Ir al sitio 4"
          >
            <div class="flex items-center gap-3">
              <span class="rounded-xl bg-white/10 p-2">
                <GoogleIcon name="open_in_new" class="text-white" />
              </span>
              <div class="min-w-0">
                <h2 class="font-semibold text-white">DIF</h2>
                <p class="text-sm text-slate-300">Dashboard de DIF</p>
              </div>
            </div>
            <span
              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
              style="
                background: radial-gradient(
                  600px circle at var(--x, 50%) var(--y, 50%),
                  rgba(255, 255, 255, 0.12),
                  transparent 40%
                );
              "
            ></span>
          </a>
        </div>
      </section>
    </main>
  </div>
</template>