

<?php $__env->startSection('content'); ?>

<!-- HERO -->
<section class="hero">
    <div data-aos="zoom-in">
        <h1 style="font-size:55px;">🌾 SPK Hama</h1>
        <p>Sistem Pelaporan Hama Pertanian yang Cepat, Mudah, dan Tepat</p>

        <br>

        <a href="/pelaporan" class="btn">Mulai Sekarang</a>
    </div>
</section>

<!-- INTRO -->
<section class="section">
    <h2 data-aos="fade-up">Kenapa SPK Hama?</h2>

    <p data-aos="fade-up" data-aos-delay="200" style="max-width:700px; margin:auto;">
        SPK Hama membantu petani melaporkan serangan hama dengan cepat sehingga 
        dapat segera ditangani oleh penyuluh sebelum menimbulkan kerugian besar.
    </p>
</section>

<!-- KEUNGGULAN (VARIASI ICON BESAR) -->
<section class="section">
    <h2 data-aos="fade-up">Keunggulan Sistem</h2>

    <div class="grid">

        <div class="card" data-aos="zoom-in">
            <h1 style="font-size:40px;">⚡</h1>
            <h3>Cepat</h3>
            <p>Proses pelaporan hanya dalam hitungan menit.</p>
        </div>

        <div class="card" data-aos="zoom-in" data-aos-delay="200">
            <h1 style="font-size:40px;">📊</h1>
            <h3>Terpantau</h3>
            <p>Laporan langsung diterima dan diproses.</p>
        </div>

        <div class="card" data-aos="zoom-in" data-aos-delay="400">
            <h1 style="font-size:40px;">🎯</h1>
            <h3>Tepat</h3>
            <p>Penanganan berdasarkan kondisi lapangan.</p>
        </div>

    </div>
</section>

<!-- ALUR (STEP STYLE 🔥) -->
<section class="section">
    <h2 data-aos="fade-up">Cara Menggunakan</h2>

    <div class="grid">

        <div class="card" data-aos="fade-up">
            <h1>1️⃣</h1>
            <p>Login ke sistem</p>
        </div>

        <div class="card" data-aos="fade-up" data-aos-delay="200">
            <h1>2️⃣</h1>
            <p>Isi data laporan</p>
        </div>

        <div class="card" data-aos="fade-up" data-aos-delay="400">
            <h1>3️⃣</h1>
            <p>Kirim laporan</p>
        </div>

        <div class="card" data-aos="fade-up" data-aos-delay="600">
            <h1>4️⃣</h1>
            <p>Diproses penyuluh</p>
        </div>

    </div>
</section>

<!-- CTA (BIAR HIDUP 🔥) -->
<section class="section" style="background:#e8f5e9;">
    <h2 data-aos="zoom-in">🚀 Siap Melapor?</h2>
    <p data-aos="zoom-in" data-aos-delay="200">
        Laporkan sekarang dan lindungi hasil panen Anda
    </p>

    <br>

    <a href="/login" class="btn">Login Sekarang</a>
</section>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.main', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\Maylha\pelaporanpertanian\resources\views/about.blade.php ENDPATH**/ ?>