spota-dev/rebuild/resources/views/home.blade.php

<x-layouts.app :title="$title">
    <main class="overflow-hidden bg-[#F5F7FB] pt-20">
        <section class="relative border-b border-slate-200 bg-white">
            <div class="absolute inset-x-0 top-0 h-56 bg-gradient-to-br from-[#0F5132] via-[#146C43] to-[#198754]"></div>
            <div class="relative mx-auto max-w-[1180px] px-4 pb-12 pt-10 sm:px-6 lg:pb-16 lg:pt-14 xl:px-0">
                <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_380px] lg:items-stretch">
                    <div class="rounded-[28px] border border-white/30 bg-white p-6 shadow-[0_24px_70px_rgba(15,23,42,0.14)] sm:p-8 lg:p-10">
                        <div class="inline-flex items-center gap-2 rounded-full border border-emerald-100 bg-emerald-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-emerald-800">
                            Teknik Informatika UNTAN
                        </div>
                        <h1 class="mt-6 max-w-3xl text-[34px] font-black leading-[1.05] tracking-[-0.04em] text-slate-950 sm:text-[48px] lg:text-[64px]">
                            SPOTA untuk pengajuan, review, dan monitoring tugas akhir.
                        </h1>
                        <p class="mt-6 max-w-2xl text-base leading-8 text-slate-600 sm:text-lg">
                            SPOTA membantu mahasiswa mengajukan outline tugas akhir, memantau status persetujuan, melihat jadwal seminar atau sidang, serta menerima pengumuman akademik. Dosen dan admin dapat meninjau usulan, mengelola penawaran judul, dan memantau proses tugas akhir dalam satu sistem.
                        </p>
                        <div class="mt-8 flex flex-col gap-3 sm:flex-row">
                            <a href="{{ route('legacy.login', 'mahasiswa') }}" class="inline-flex items-center justify-center rounded-2xl bg-slate-950 px-6 py-3.5 text-sm font-bold text-white shadow-lg shadow-slate-950/15 transition hover:-translate-y-0.5 hover:bg-slate-800">
                                Masuk Mahasiswa
                            </a>
                            <a href="{{ route('legacy.login', 'dosen') }}" class="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-6 py-3.5 text-sm font-bold text-slate-950 transition hover:-translate-y-0.5 hover:border-emerald-300 hover:text-emerald-800">
                                Masuk Dosen
                            </a>
                            <a href="{{ route('legacy.login', 'admin') }}" class="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-slate-50 px-6 py-3.5 text-sm font-bold text-slate-700 transition hover:-translate-y-0.5 hover:bg-white hover:text-slate-950">
                                Admin Prodi
                            </a>
                        </div>
                    </div>

                    <aside class="rounded-[28px] border border-white/30 bg-slate-950 p-6 text-white shadow-[0_24px_70px_rgba(15,23,42,0.22)] sm:p-8">
                        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-300">Status Rebuild</p>
                        <div class="mt-6 space-y-4">
                            @foreach ($systemStatus as $status)
                                <div class="rounded-2xl border border-white/10 bg-white/[0.06] p-4">
                                    <p class="text-xs font-semibold uppercase tracking-[0.16em] text-white/45">{{ $status['label'] }}</p>
                                    <p class="mt-2 text-lg font-bold text-white">{{ $status['value'] }}</p>
                                </div>
                            @endforeach
                        </div>
                        <div class="mt-6 rounded-2xl bg-emerald-400 p-5 text-slate-950">
                            <p class="text-sm font-black uppercase tracking-[0.16em]">Akses aktif</p>
                            <p class="mt-3 text-sm leading-7 font-medium">Login mahasiswa, dosen, dan admin sudah memakai akun dari database SPOTA.</p>
                        </div>
                    </aside>
                </div>
            </div>
        </section>

        <section class="mx-auto max-w-[1180px] px-4 py-10 sm:px-6 lg:py-14 xl:px-0">
            <div class="grid gap-4 md:grid-cols-3">
                @foreach ($highlights as $item)
                    <a href="{{ $item['href'] }}" class="group rounded-[24px] border border-slate-200 bg-white p-6 shadow-[0_14px_40px_rgba(15,23,42,0.06)] transition hover:-translate-y-1 hover:border-emerald-200 hover:shadow-[0_20px_50px_rgba(15,23,42,0.1)]">
                        <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-50 text-lg font-black text-emerald-700">{{ $item['number'] }}</div>
                        <h2 class="mt-5 text-xl font-black tracking-[-0.02em] text-slate-950">{{ $item['label'] }}</h2>
                        <p class="mt-3 text-sm leading-7 text-slate-600">{{ $item['description'] }}</p>
                        <p class="mt-5 text-sm font-bold text-emerald-700 group-hover:text-emerald-900">Buka portal</p>
                    </a>
                @endforeach
            </div>
        </section>

    </main>
</x-layouts.app>