146 lines
5.5 KiB
Vue
146 lines
5.5 KiB
Vue
<script setup>
|
|
import { router } from "@inertiajs/vue3";
|
|
|
|
import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
|
|
import NotificationController from "@/Controllers/NotificationController";
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
|
|
const notificationCtl = NotificationController;
|
|
|
|
const logout = () => {
|
|
router.post(
|
|
route("logout"),
|
|
{},
|
|
{
|
|
onBefore: () => {
|
|
notificationCtl.stop();
|
|
},
|
|
}
|
|
);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout>
|
|
<div
|
|
class="min-h-screen font-sans bg-gradient-to-br from-[#621132] via-[#621132] to-[#621132] text-[#621132] antialiased"
|
|
>
|
|
<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-1 gap-3 sm:gap-4">
|
|
<!-- Botón 1 -->
|
|
<a
|
|
:href="route('app.tramites')"
|
|
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="route('app.atencion')"
|
|
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 y DIF
|
|
</h2>
|
|
<p class="text-sm text-slate-300">
|
|
Gráficas de apoyo a Beneficiarios y 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(98, 17, 50, 0.12),
|
|
transparent 40%
|
|
);
|
|
"
|
|
></span>
|
|
</a>
|
|
|
|
<!-- Botón 3 -->
|
|
<a
|
|
:href="route('app.obras')"
|
|
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>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|