62 lines
4.0 KiB
PHP
62 lines
4.0 KiB
PHP
{{-- FITUR SECTION --}}
|
|
<section id="fitur" class="py-24 bg-white relative overflow-hidden">
|
|
{{-- Decorative --}}
|
|
<div class="absolute top-0 right-0 w-96 h-96 bg-primary-50 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
|
|
|
|
<div class="max-w-7xl mx-auto px-6 relative z-10">
|
|
|
|
<div class="text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 bg-primary-50 rounded-full mb-6">
|
|
<i class="fas fa-star text-primary-500 text-xs"></i>
|
|
<span class="text-xs font-semibold text-primary-600 tracking-wide">Fitur Unggulan</span>
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">
|
|
Kenapa Memilih <span class="gradient-text">Sarakata</span>?
|
|
</h2>
|
|
<p class="mt-4 text-gray-500 max-w-2xl mx-auto leading-relaxed">
|
|
Dirancang untuk kemudahan pengelolaan perpustakaan dengan teknologi modern dan antarmuka intuitif.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
|
|
{{-- Fitur 1 --}}
|
|
<div class="card-hover bg-gradient-to-br from-white to-primary-50/50 p-8 rounded-3xl border border-gray-100 shadow-sm relative overflow-hidden group">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-primary-100/30 rounded-full blur-2xl translate-x-8 -translate-y-8 group-hover:bg-primary-200/40 transition-colors"></div>
|
|
<div class="w-14 h-14 bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl flex items-center justify-center shadow-lg shadow-primary-200 mb-6 relative z-10">
|
|
<i class="fas fa-book text-white text-xl"></i>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-3 text-gray-900 relative z-10">Manajemen Buku</h3>
|
|
<p class="text-gray-500 text-sm leading-relaxed relative z-10">
|
|
Kelola data buku dengan mudah — stok, pengarang, penerbit, dan kategori dalam satu dashboard terintegrasi.
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Fitur 2 --}}
|
|
<div class="card-hover bg-gradient-to-br from-white to-accent-50/50 p-8 rounded-3xl border border-gray-100 shadow-sm relative overflow-hidden group">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-accent-100/30 rounded-full blur-2xl translate-x-8 -translate-y-8 group-hover:bg-accent-200/40 transition-colors"></div>
|
|
<div class="w-14 h-14 bg-gradient-to-br from-accent-500 to-accent-600 rounded-2xl flex items-center justify-center shadow-lg shadow-accent-200 mb-6 relative z-10">
|
|
<i class="fas fa-users text-white text-xl"></i>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-3 text-gray-900 relative z-10">Data Anggota</h3>
|
|
<p class="text-gray-500 text-sm leading-relaxed relative z-10">
|
|
Sistem keanggotaan terstruktur dengan profil lengkap, pencarian cepat, dan manajemen data yang aman.
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Fitur 3 --}}
|
|
<div class="card-hover bg-gradient-to-br from-white to-purple-50/50 p-8 rounded-3xl border border-gray-100 shadow-sm relative overflow-hidden group">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-100/30 rounded-full blur-2xl translate-x-8 -translate-y-8 group-hover:bg-purple-200/40 transition-colors"></div>
|
|
<div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-purple-700 rounded-2xl flex items-center justify-center shadow-lg shadow-purple-200 mb-6 relative z-10">
|
|
<i class="fas fa-exchange-alt text-white text-xl"></i>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-3 text-gray-900 relative z-10">Peminjaman & Pengembalian</h3>
|
|
<p class="text-gray-500 text-sm leading-relaxed relative z-10">
|
|
Proses peminjaman dan pengembalian buku tercatat otomatis dengan notifikasi dan tracking real-time.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|