<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zakat Warga - Kelola Zakat dengan Mudah</title>
    <link rel="stylesheet" href="<?php echo e(asset('css/nprogress.css')); ?>">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        primary: '#1c523c',
                        primaryHover: '#143c2c',
                        surface: '#f9fafb'
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; }
        .bg-hero-pattern {
            background-color: #1c523c;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23286b50' stroke-width='1.5'%3E%3Ccircle cx='0' cy='0' r='40'/%3E%3Ccircle cx='80' cy='0' r='40'/%3E%3Ccircle cx='0' cy='80' r='40'/%3E%3Ccircle cx='80' cy='80' r='40'/%3E%3Ccircle cx='40' cy='40' r='40'/%3E%3C/g%3E%3C/svg%3E");
        }
    </style>
</head>
<body class="bg-surface antialiased text-gray-900">

    
    <nav class="bg-white border-b border-gray-100 py-4 px-6 md:px-12 flex justify-between items-center sticky top-0 z-50">
        <div class="flex items-center gap-2">
            <i class="bi bi-mosque text-primary text-2xl"></i>
            <span class="font-bold text-xl text-gray-900 tracking-tight">Zakat Warga</span>
        </div>
        <a href="<?php echo e(url('/login')); ?>" class="bg-primary hover:bg-primaryHover text-white px-6 py-2.5 rounded-full font-medium text-sm transition shadow-sm">Masuk</a>
    </nav>

    
    <section class="bg-hero-pattern relative overflow-hidden py-16 md:py-28 px-6 md:px-12">
        <div class="container mx-auto max-w-6xl flex flex-col-reverse md:flex-row items-center gap-12 relative z-10">
            <!-- Text Content -->
            <div class="w-full md:w-1/2 text-white">
                <h1 class="text-4xl md:text-5xl lg:text-5xl font-bold leading-[1.2] mb-6">
                    Kelola Zakat Masjid Anda dengan Mudah dan Amanah
                </h1>
                <p class="text-gray-100 text-lg mb-10 max-w-lg leading-relaxed font-medium">
                    Platform pendataan mustahik dan distribusi zakat yang transparan, dirancang khusus untuk mempermudah operasional pengurus masjid.
                </p>
                <a href="<?php echo e(url('/pengajuan')); ?>" class="inline-flex items-center gap-3 bg-white text-primary hover:bg-gray-100 font-semibold px-8 py-3.5 rounded-full transition shadow-lg hover:shadow-xl">
                    Daftarkan Masjid Anda <i class="bi bi-arrow-right"></i>
                </a>
            </div>
            
            <!-- Illustration -->
            <div class="w-full md:w-1/2 flex justify-center md:justify-end">
                <img src="<?php echo e(asset('images/mosque_vector.png')); ?>" alt="Ilustrasi Masjid" class="w-full max-w-lg rounded-2xl shadow-2xl object-cover">
            </div>
        </div>
    </section>

    
    <section class="bg-[#f8f9fc] py-20 px-6 md:px-12">
        <div class="container mx-auto max-w-6xl grid grid-cols-1 md:grid-cols-3 gap-8">
            
            <!-- Card 1 -->
            <div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition">
                <div class="w-12 h-12 rounded-full bg-[#edf4f1] flex items-center justify-center mb-6 text-primary">
                    <i class="bi bi-people-fill text-xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3 tracking-tight">Pendataan Mustahik</h3>
                <p class="text-gray-500 leading-relaxed text-sm">
                    Sistem database yang terstruktur untuk mencatat dan memverifikasi data penerima zakat di lingkungan masjid Anda dengan akurat.
                </p>
            </div>

            <!-- Card 2 -->
            <div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition">
                <div class="w-12 h-12 rounded-full bg-[#edf4f1] flex items-center justify-center mb-6 text-primary">
                    <i class="bi bi-box2-heart text-xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3 tracking-tight">Distribusi Zakat</h3>
                <p class="text-gray-500 leading-relaxed text-sm">
                    Alur penyaluran zakat yang tercatat rapi, memastikan setiap dana yang terkumpul sampai kepada yang berhak tepat waktu.
                </p>
            </div>

            <!-- Card 3 -->
            <div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition">
                <div class="w-12 h-12 rounded-full bg-[#edf4f1] flex items-center justify-center mb-6 text-primary">
                    <i class="bi bi-file-earmark-text text-xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3 tracking-tight">Laporan Transparan</h3>
                <p class="text-gray-500 leading-relaxed text-sm">
                    Hasilkan laporan penerimaan dan penyaluran zakat secara instan dan komprehensif untuk menjaga kepercayaan jamaah.
                </p>
            </div>

        </div>
    </section>



    
    <footer class="bg-white border-t border-gray-100 py-8 px-6 md:px-12">
        <div class="container mx-auto max-w-6xl flex flex-col md:flex-row justify-between items-center gap-4">
            <div class="flex items-center gap-2">
                <i class="bi bi-mosque text-primary text-xl"></i>
                <span class="font-bold text-lg text-gray-900">Zakat Warga</span>
            </div>
            <p class="text-gray-500 text-sm font-medium">&copy; 2024 Zakat Warga. Membangun umat yang berdaya.</p>
        </div>
    </footer>

</body>


<script src="<?php echo e(asset('js/nprogress.min.js')); ?>"></script>
<script>
NProgress.configure({ minimum: 0.2, showSpinner: false, speed: 250 });
// Intercept semua link di halaman publik
document.addEventListener('click', function(e) {
    var a = e.target.closest('a[href]');
    if (!a) return;
    if (e.ctrlKey || e.metaKey || e.shiftKey) return;
    if (a.target === '_blank') return;
    var href = a.getAttribute('href');
    if (!href || href.startsWith('#') || href.startsWith('javascript:') || href.startsWith('mailto:')) return;
    try {
        var url = new URL(a.href, window.location.href);
        if (url.origin !== window.location.origin) return;
    } catch(e) { return; }
    NProgress.start();
});
window.addEventListener('pageshow', function() { NProgress.done(); });
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() { NProgress.done(); });
} else { NProgress.done(); }
</script>
</html><?php /**PATH D:\Skripsi\zakat-masjid\resources\views/landing_page.blade.php ENDPATH**/ ?>