134 lines
5.4 KiB
PHP
134 lines
5.4 KiB
PHP
{{-- HERO SECTION --}}
|
|
<section class="hero-gradient relative overflow-hidden">
|
|
{{-- Decorative blobs --}}
|
|
<div class="absolute top-20 -left-20 w-72 h-72 bg-primary-200/30 blob blur-3xl"></div>
|
|
<div class="absolute bottom-10 right-10 w-96 h-96 bg-purple-200/20 blob blur-3xl"></div>
|
|
<div class="absolute top-40 right-1/3 w-48 h-48 bg-blue-200/20 rounded-full blur-2xl"></div>
|
|
|
|
<div
|
|
class="max-w-7xl mx-auto px-4 sm:px-6 py-14 sm:py-20 md:py-26
|
|
grid md:grid-cols-2 gap-10 md:gap-16 items-center relative z-10">
|
|
|
|
<div class="fade-up">
|
|
{{-- Badge --}}
|
|
<div
|
|
class="inline-flex items-center gap-2 px-3 py-2 bg-white/80
|
|
rounded-full shadow-sm border border-primary-100 mb-6">
|
|
<span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
|
|
|
|
<span class="text-[11px] sm:text-xs font-semibold text-primary-700 tracking-wide">
|
|
Sistem Informasi Perpustakaan
|
|
</span>
|
|
</div>
|
|
|
|
<h1
|
|
class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl
|
|
font-black leading-tight text-gray-900 tracking-tight">
|
|
Sistem Informasi Perpustakaan
|
|
|
|
<span class="gradient-text block mt-1 sm:mt-2">
|
|
Daerah Jember
|
|
</span>
|
|
</h1>
|
|
|
|
<p
|
|
class="mt-5 text-sm sm:text-base md:text-lg text-gray-500
|
|
max-w-lg leading-relaxed">
|
|
Akses ribuan koleksi buku, jurnal, dan referensi akademik
|
|
dalam satu platform terintegrasi — kapan saja, di mana saja.
|
|
</p>
|
|
|
|
{{-- BUTTONS --}}
|
|
<div class="mt-8 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
|
|
|
|
<a href="{{ route('katalog.index') }}"
|
|
class="w-full sm:w-auto px-6 py-3.5
|
|
bg-gradient-to-r from-blue-600 to-blue-700
|
|
text-white rounded-xl sm:rounded-2xl
|
|
font-bold text-sm shadow-xl shadow-blue-200
|
|
hover:from-blue-700 hover:to-blue-800
|
|
transition-all inline-flex items-center
|
|
gap-2 justify-center">
|
|
|
|
<i class="fas fa-search"></i>
|
|
Cari Katalog Buku
|
|
</a>
|
|
|
|
<a href="{{ route('buku_tamu.index') }}"
|
|
class="w-full sm:w-auto px-6 py-3.5
|
|
bg-gradient-to-r from-primary-600 to-primary-700
|
|
text-white rounded-xl sm:rounded-2xl
|
|
font-bold text-sm shadow-xl shadow-primary-200
|
|
hover:from-primary-700 hover:to-primary-800
|
|
transition-all inline-flex items-center
|
|
gap-2 justify-center">
|
|
|
|
<i class="fas fa-book-reader"></i>
|
|
Mulai Kunjungan
|
|
</a>
|
|
|
|
<a href="#fitur"
|
|
class="w-full sm:w-auto px-6 py-3.5
|
|
bg-white text-gray-700 rounded-xl sm:rounded-2xl
|
|
font-bold text-sm shadow-sm border border-gray-200
|
|
hover:border-primary-200 hover:text-primary-600
|
|
transition-all inline-flex items-center
|
|
gap-2 justify-center">
|
|
|
|
<i class="fas fa-info-circle"></i>
|
|
Pelajari Lebih Lanjut
|
|
</a>
|
|
</div>
|
|
|
|
{{-- STATS --}}
|
|
<div class="mt-10 grid grid-cols-3 gap-3 sm:gap-6">
|
|
|
|
<div class="bg-white/50 rounded-xl p-3 sm:p-4 text-center">
|
|
<div class="text-xl sm:text-3xl font-black text-gray-900">
|
|
1000+
|
|
</div>
|
|
|
|
<div class="text-[10px] sm:text-xs text-gray-400 font-medium mt-1">
|
|
Koleksi Buku
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white/50 rounded-xl p-3 sm:p-4 text-center">
|
|
<div class="text-xl sm:text-3xl font-black text-gray-900">
|
|
500+
|
|
</div>
|
|
|
|
<div class="text-[10px] sm:text-xs text-gray-400 font-medium mt-1">
|
|
Anggota Aktif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white/50 rounded-xl p-3 sm:p-4 text-center">
|
|
<div class="text-xl sm:text-3xl font-black text-gray-900">
|
|
24/7
|
|
</div>
|
|
|
|
<div class="text-[10px] sm:text-xs text-gray-400 font-medium mt-1">
|
|
Akses Digital
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
{{-- IMAGE --}}
|
|
<div class="hidden md:flex justify-center relative items-center">
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-tr
|
|
from-primary-400/10 to-purple-400/10
|
|
rounded-[3rem] blur-2xl">
|
|
</div>
|
|
|
|
<img src="{{ asset('img/buku sampul awal.png') }}"
|
|
class="w-[500px] lg:w-[600px] object-contain
|
|
drop-shadow-2xl relative z-10 rounded-3xl"
|
|
alt="Animasi Perpustakaan Digital">
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|