<?= $this->extend('layout/templatetool');?>

<!-- Untuk Css -->
<?= $this->section('css') ?>
	<style>
        body { font-family: 'Inter', sans-serif; }

        .page-hero {
            border-radius: 14px;
            padding: 18px 20px;
            margin-bottom: 14px;
            background: linear-gradient(to right, #005580, #0088aa);
        }

        .value-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 18px;
            transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
        }
        .value-card:hover { box-shadow: 0 4px 16px rgba(0,136,170,0.10); border-color: #7dd3fc; transform: translateY(-2px); }

        .value-icon {
            width: 42px; height: 42px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; margin-bottom: 12px;
        }

        .stat-box { flex: 1; background: #f8fafc; border-radius: 10px; padding: 14px 12px; text-align: center; border: 1px solid #f1f5f9; }
        .stat-num { font-size: 22px; font-weight: 800; color: #1e293b; }
        .stat-lbl { font-size: 10.5px; color: #94a3b8; margin-top: 2px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }

        .timeline-item { position: relative; padding-left: 28px; padding-bottom: 22px; border-left: 2px solid #e2e8f0; }
        .timeline-item:last-child { border-left: 2px solid transparent; padding-bottom: 0; }
        .timeline-dot {
            position: absolute; left: -7px; top: 2px;
            width: 12px; height: 12px; border-radius: 50%;
            background: #0099b8; border: 3px solid #dff6fb;
        }
        .timeline-year { font-size: 11px; font-weight: 800; color: #0099b8; letter-spacing: 0.04em; }
        .timeline-title { font-size: 13px; font-weight: 700; color: #1e293b; margin-top: 2px; }
        .timeline-desc { font-size: 11.5px; color: #64748b; margin-top: 3px; line-height: 1.5; }

        .team-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; text-align: center; }
        .team-avatar {
            width: 64px; height: 64px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; margin: 0 auto 10px; font-weight: 700; color: #fff;
        }

        .sb-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; }

        .cta-box {
            border-radius: 16px;
            padding: 28px 24px;
            background: linear-gradient(135deg, #005580, #0099b8 60%, #00aa99);
            position: relative;
            overflow: hidden;
        }
    </style>
<?= $this->endSection(); ?>


<!-- Untuk Main -->
<?= $this->section('conten');?>

<section class="bg-gradient-to-r from-[#005580] via-[#0088aa] to-[#00aa99] text-white overflow-hidden relative">
        <div class="max-w-7xl mx-auto px-6 py-12 md:py-14">
            <p class="text-xs text-blue-100 uppercase tracking-widest font-medium mb-3">Pena Ilmu · About</p>
            <h1 class="text-2xl md:text-3xl font-bold leading-tight tracking-wide mb-3">
                About Us
            </h1>
            <p class="text-sm text-blue-50/90 max-w-xl leading-relaxed">
                Platform edukasi digital yang menyediakan referensi, perangkat pembelajaran, dokumen administrasi, media belajar, serta informasi bermanfaat bagi dunia pendidikan.
            </p>
            <p class="text-[11px] text-blue-100/70 mt-4">"Berbagi Ilmu, Menginspirasi Masa Depan."</p>
        </div>
    </section>
	<main class="max-w-7xl mx-auto px-4 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 items-start">

            <!-- ===== KONTEN UTAMA ===== -->
            <div class="lg:col-span-3 space-y-6">

                <!-- BAR DETAIL -->
                <div class="bg-gradient-to-r from-blue-50 to-sky-100/50 border border-sky-100 rounded-xl px-4 py-3 flex flex-wrap items-center justify-between gap-3 shadow-sm">
                    <div class="flex items-center gap-3">
                        <a href="index.html" class="bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 text-[11px] font-bold py-1 px-3 rounded-lg shadow-sm transition">⬅ Beranda</a>
                        <div class="h-4 w-px bg-slate-300"></div>
                        <h2 class="text-xs font-bold text-slate-800 flex items-center gap-1.5 uppercase tracking-wide">
                            Tentang Pena Ilmu <span>🖋️</span>
                        </h2>
                    </div>
                    <span class="bg-[#0099b8] text-white text-[9px] font-bold px-2 py-0.5 rounded-full tracking-wider uppercase">Pena Ilmu Hub</span>
                </div>

                <!-- STATISTIK -->
               <!--  <div class="flex gap-3 flex-wrap">
                    <div class="stat-box"><div class="stat-num">40+</div><div class="stat-lbl">Dokumen & Template</div></div>
                    <div class="stat-box"><div class="stat-num">12</div><div class="stat-lbl">Infografis Edukasi</div></div>
                    <div class="stat-box"><div class="stat-num">5</div><div class="stat-lbl">Kategori Panduan</div></div>
                    <div class="stat-box"><div class="stat-num">100%</div><div class="stat-lbl">Gratis Diakses</div></div>
                </div> -->

                <!-- SELAMAT DATANG -->
                <div class="bg-white border border-slate-200/70 rounded-xl p-5 shadow-sm">
                    <h2 class="text-sm font-bold text-slate-800 mb-3 flex items-center gap-2"><i class="fa-solid fa-compass text-[#0099b8]"></i> Siapa Kami</h2>
                    <p class="text-[12.5px] text-slate-600 leading-relaxed mb-3">
                        Pena Ilmu merupakan platform edukasi digital yang menyediakan berbagai referensi, perangkat pembelajaran, dokumen administrasi, media belajar, serta informasi yang bermanfaat bagi dunia pendidikan.
                    </p>
                    <p class="text-[12.5px] text-slate-600 leading-relaxed">
                        Kami berkomitmen untuk menghadirkan konten yang berkualitas, mudah dipahami, dan dapat digunakan oleh guru, tenaga kependidikan, mahasiswa, pelajar, maupun masyarakat umum. Melalui Pena Ilmu, kami berharap proses belajar, mengajar, dan berbagi pengetahuan menjadi lebih mudah, efektif, dan menyenangkan.
                    </p>
                </div>

                <!-- VISI & MISI -->
                <h2 class="text-sm font-bold text-slate-800 flex items-center gap-2 -mb-2"><i class="fa-solid fa-flag text-[#0099b8]"></i> Visi & Misi</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="rounded-xl p-5 text-white" style="background:linear-gradient(135deg,#005580,#0099b8);">
                        <h3 class="text-sm font-bold mb-3 flex items-center gap-2"><i class="fa-solid fa-eye"></i> Visi</h3>
                        <p class="text-[12.5px] leading-relaxed text-blue-50/95">
                            Menjadi platform edukasi digital yang terpercaya, inovatif, dan bermanfaat dalam mendukung kemajuan pendidikan di Indonesia.
                        </p>
                    </div>
                    <div class="bg-white border border-slate-200/70 rounded-xl p-5 shadow-sm">
                        <h3 class="text-sm font-bold text-slate-800 mb-3 flex items-center gap-2"><i class="fa-solid fa-bullseye text-[#0099b8]"></i> Misi</h3>
                        <ul class="space-y-2 text-[11.5px] text-slate-600">
                            <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#0099b8] mt-0.5 text-[10px]"></i><span>Menyediakan materi pembelajaran yang berkualitas dan mudah diakses.</span></li>
                            <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#0099b8] mt-0.5 text-[10px]"></i><span>Membagikan perangkat administrasi pendidikan yang siap digunakan.</span></li>
                            <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#0099b8] mt-0.5 text-[10px]"></i><span>Menyediakan berbagai template dokumen untuk kebutuhan sekolah maupun perkantoran.</span></li>
                            <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#0099b8] mt-0.5 text-[10px]"></i><span>Mengembangkan media pembelajaran yang kreatif dan inovatif.</span></li>
                            <li class="flex items-start gap-2"><i class="fa-solid fa-check text-[#0099b8] mt-0.5 text-[10px]"></i><span>Mendorong budaya belajar, berbagi ilmu, dan literasi digital.</span></li>
                        </ul>
                    </div>
                </div>

                <!-- APA YANG TERSEDIA -->
                <div>
                    <h2 class="text-sm font-bold text-slate-800 mb-1 flex items-center gap-2"><i class="fa-solid fa-boxes-stacked text-[#0099b8]"></i> Apa yang Tersedia di Pena Ilmu?</h2>
                    <p class="text-[11.5px] text-slate-500 mb-4">Semua konten disusun agar mudah dipelajari, digunakan, dan membantu meningkatkan kualitas pembelajaran.</p>

                    <div class="text-[11px] font-bold text-slate-500 uppercase tracking-wide mb-2">Format Dokumen</div>
                    <div class="grid grid-cols-2 sm:grid-cols-5 gap-3 mb-5">
                        <a href="dokumenfile.html?type=word" class="value-card text-center !p-4 block">
                            <div class="value-icon mx-auto" style="background:#dbeeff;color:#2563eb;"><i class="fa-regular fa-file-word"></i></div>
                            <div class="text-[12px] font-bold text-slate-800">Template Word</div>
                            <div class="text-[10px] text-slate-400 mb-2">Format .docx</div>
                            <span class="inline-block bg-blue-600 text-white text-[9px] font-bold px-2.5 py-1 rounded-full"><?= $total_word ?> FILE</span>
                        </a>
                        <a href="dokumenfile.html?type=excel" class="value-card text-center !p-4 block">
                            <div class="value-icon mx-auto" style="background:#d6f0de;color:#15803d;"><i class="fa-regular fa-file-excel"></i></div>
                            <div class="text-[12px] font-bold text-slate-800">Spreadsheet</div>
                            <div class="text-[10px] text-slate-400 mb-2">Format .xlsx</div>
                            <span class="inline-block bg-emerald-600 text-white text-[9px] font-bold px-2.5 py-1 rounded-full"><?= $total_xls ?> FILE</span>
                        </a>
                        <a href="dokumenfile.html?type=ppt" class="value-card text-center !p-4 block">
                            <div class="value-icon mx-auto" style="background:#dbeafe;color:#0c4a6e;"><i class="fa-regular fa-file-powerpoint"></i></div>
                            <div class="text-[12px] font-bold text-slate-800">Presentasi</div>
                            <div class="text-[10px] text-slate-400 mb-2">Format .pptx</div>
                            <span class="inline-block bg-orange-500 text-white text-[9px] font-bold px-2.5 py-1 rounded-full"><?= $total_ppt ?> FILE</span>
                        </a>
                        <a href="dokumenfile.html?type=pdf" class="value-card text-center !p-4 block">
                            <div class="value-icon mx-auto" style="background:#fee2e2;color:#dc2626;"><i class="fa-regular fa-file-pdf"></i></div>
                            <div class="text-[12px] font-bold text-slate-800">Dokumen PDF</div>
                            <div class="text-[10px] text-slate-400 mb-2">Format .pdf</div>
                            <span class="inline-block bg-red-600 text-white text-[9px] font-bold px-2.5 py-1 rounded-full"><?= $total_pdf ?> FILE</span>
                        </a>
                        <a href="dokumenfile.html?type=zip" class="value-card text-center !p-4 block">
                            <div class="value-icon mx-auto" style="background:#e2e8f0;color:#334155;"><i class="fa-regular fa-file-zipper"></i></div>
                            <div class="text-[12px] font-bold text-slate-800">Paket Bundle</div>
                            <div class="text-[10px] text-slate-400 mb-2">Format .zip</div>
                            <span class="inline-block bg-amber-500 text-white text-[9px] font-bold px-2.5 py-1 rounded-full"><?= $total_zip ?> FILE</span>
                        </a>
                    </div>

                    <div class="text-[11px] font-bold text-slate-500 uppercase tracking-wide mb-2">Jelajahi & Pelajari</div>
                    <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-3 mb-5">
                        <a href="tutorial.html" class="rounded-xl p-4 text-white block" style="background:linear-gradient(160deg,#2563eb,#0ea5e9);">
                            <span class="inline-block bg-white/20 text-[9px] font-bold px-2 py-0.5 rounded-full mb-8"><i class="fa-solid fa-bookmark mr-1"></i>Tutorial</span>
                            <div class="text-[13px] font-bold mb-1">Pusat Tutorial</div>
                            <div class="text-[10.5px] text-white/85 leading-relaxed">Cari solusi mudah untuk setiap kebutuhanmu.</div>
                        </a>
                        <a href="infografis.html" class="rounded-xl p-4 text-white block" style="background:linear-gradient(160deg,#f97316,#fb923c);">
                            <span class="inline-block bg-white/20 text-[9px] font-bold px-2 py-0.5 rounded-full mb-8"><i class="fa-solid fa-image mr-1"></i>Gambar</span>
                            <div class="text-[13px] font-bold mb-1">Infografis</div>
                            <div class="text-[10.5px] text-white/85 leading-relaxed">Ringkasan informasi materi lewat sajian visual yang menarik.</div>
                        </a>
                        <a href="perpustakaan.html" class="rounded-xl p-4 text-white block" style="background:linear-gradient(160deg,#7c3aed,#a855f7);">
                            <span class="inline-block bg-white/20 text-[9px] font-bold px-2 py-0.5 rounded-full mb-8"><i class="fa-solid fa-book mr-1"></i>Referensi</span>
                            <div class="text-[13px] font-bold mb-1">Perpustakaan Digital</div>
                            <div class="text-[10.5px] text-white/85 leading-relaxed">Buku, Skripsi, Modul, Makalah, semua dalam satu tempat.</div>
                        </a>
                        <a href="pojokilmu.html" class="rounded-xl p-4 text-white block" style="background:linear-gradient(160deg,#db2777,#f43f5e);">
                            <span class="inline-block bg-white/20 text-[9px] font-bold px-2 py-0.5 rounded-full mb-8"><i class="fa-solid fa-lightbulb mr-1"></i>Edukatif</span>
                            <div class="text-[13px] font-bold mb-1">Pojok Ilmu</div>
                            <div class="text-[10.5px] text-white/85 leading-relaxed">Kenali ilmu baru lewat artikel ringan yang mudah dipahami semua kalangan.</div>
                        </a>
                        <a href="alatdigital.html" class="rounded-xl p-4 text-white block" style="background:linear-gradient(160deg,#b91c1c,#dc2626);">
                            <span class="inline-block bg-white/20 text-[9px] font-bold px-2 py-0.5 rounded-full mb-8"><i class="fa-solid fa-wand-magic-sparkles mr-1"></i>Alat Digital</span>
                            <div class="text-[13px] font-bold mb-1">Alat Digital Gratis</div>
                            <div class="text-[10.5px] text-white/85 leading-relaxed">Semua proses di browser, tidak ada file yang dikirim ke server. Privat & aman.</div>
                        </a>
                    </div>

                    <div class="text-[11px] font-bold text-slate-500 uppercase tracking-wide mb-2">Juga Tersedia</div>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-white border border-slate-200 text-slate-600 text-[11px] font-medium px-3 py-1.5 rounded-full">RPP, ATP, RPM & Modul Ajar</span>
                        <span class="bg-white border border-slate-200 text-slate-600 text-[11px] font-medium px-3 py-1.5 rounded-full">Administrasi Guru & Sekolah</span>
                        <span class="bg-white border border-slate-200 text-slate-600 text-[11px] font-medium px-3 py-1.5 rounded-full">Buku Digital (E-Book)</span>
                        <span class="bg-white border border-slate-200 text-slate-600 text-[11px] font-medium px-3 py-1.5 rounded-full">Soal, LKPD & Lembar Kerja</span>
                        <span class="bg-white border border-slate-200 text-slate-600 text-[11px] font-medium px-3 py-1.5 rounded-full">Tips Produktivitas & Pendidikan</span>
                    </div>
                </div>

                <!-- MENGAPA MEMILIH -->
                <div>
                    <h2 class="text-sm font-bold text-slate-800 mb-3 flex items-center gap-2"><i class="fa-solid fa-star text-[#0099b8]"></i> Mengapa Memilih Pena Ilmu?</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div class="value-card !p-4 flex items-start gap-3">
                            <div class="value-icon !mb-0 !w-9 !h-9 shrink-0" style="background:#dbeeff;color:#1d6fad;"><i class="fa-solid fa-rotate"></i></div>
                            <span class="text-[12px] text-slate-700 font-medium leading-snug">Konten terus diperbarui secara berkala.</span>
                        </div>
                        <div class="value-card !p-4 flex items-start gap-3">
                            <div class="value-icon !mb-0 !w-9 !h-9 shrink-0" style="background:#fef3cd;color:#854f0b;"><i class="fa-solid fa-swatchbook"></i></div>
                            <span class="text-[12px] text-slate-700 font-medium leading-snug">Desain dokumen profesional dan siap pakai.</span>
                        </div>
                        <div class="value-card !p-4 flex items-start gap-3">
                            <div class="value-icon !mb-0 !w-9 !h-9 shrink-0" style="background:#d0f4ec;color:#0f6e56;"><i class="fa-solid fa-download"></i></div>
                            <span class="text-[12px] text-slate-700 font-medium leading-snug">Mudah diunduh dan digunakan.</span>
                        </div>
                        <div class="value-card !p-4 flex items-start gap-3">
                            <div class="value-icon !mb-0 !w-9 !h-9 shrink-0" style="background:#ede9fe;color:#534ab7;"><i class="fa-solid fa-users"></i></div>
                            <span class="text-[12px] text-slate-700 font-medium leading-snug">Cocok untuk guru, mahasiswa, pelajar, serta masyarakat umum.</span>
                        </div>
                        <div class="value-card !p-4 flex items-start gap-3 sm:col-span-2">
                            <div class="value-icon !mb-0 !w-9 !h-9 shrink-0" style="background:#fce7f3;color:#9d174d;"><i class="fa-solid fa-laptop"></i></div>
                            <span class="text-[12px] text-slate-700 font-medium leading-snug">Mendukung proses belajar mengajar secara digital.</span>
                        </div>
                    </div>
                </div>

                <!-- KOMITMEN -->
                <div class="bg-white border border-slate-200/70 rounded-xl p-5 shadow-sm">
                    <h2 class="text-sm font-bold text-slate-800 mb-3 flex items-center gap-2"><i class="fa-solid fa-handshake text-[#0099b8]"></i> Komitmen Kami</h2>
                    <p class="text-[12.5px] text-slate-600 leading-relaxed">
                        Pena Ilmu akan terus berkembang dengan menghadirkan konten edukasi yang lebih lengkap, berkualitas, dan bermanfaat. Kami terbuka terhadap kritik, saran, maupun kerja sama demi memberikan layanan terbaik kepada seluruh pengguna.
                    </p>
                </div>

                <!-- PENUTUP -->
                <div class="rounded-xl p-6 text-center border border-slate-200/70" style="background:#f8fafc;">
                    <p class="text-[12.5px] text-slate-600 leading-relaxed max-w-xl mx-auto">
                        Terima kasih telah mengunjungi Pena Ilmu. Semoga setiap materi, dokumen, dan informasi yang kami sajikan dapat menjadi sumber inspirasi serta membantu perjalanan belajar dan berkarya Anda.
                    </p>
                    <div class="mt-4">
                        <div class="text-sm font-bold text-[#006699] tracking-wide">PENA ILMU</div>
                        <div class="text-[12px] text-slate-500 italic mt-1">"Berbagi Ilmu, Menginspirasi Masa Depan."</div>
                    </div>
                </div>

                <!-- CTA -->
                <div class="cta-box text-white">
                    <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-4">
                        <div>
                            <div class="text-base font-bold mb-1">Punya dokumen atau topik yang ingin diminta?</div>
                            <div class="text-[12px] text-blue-50/90">Kirimkan permintaan Anda, tim kami akan berusaha menyiapkannya.</div>
                        </div>
                        <a href="<?= base_url('kontak')?>" class="bg-white text-[#0088aa] text-xs font-bold px-5 py-2.5 rounded-lg shadow-sm hover:opacity-90 transition whitespace-nowrap">
                            Request & Kontak <i class="fa-solid fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>

            </div>

            <!-- ===== SIDEBAR ===== -->
            <aside class="space-y-4">
                <div class="bg-white border border-slate-200/70 rounded-xl p-4 shadow-sm">
                    <h4 class="text-xs font-bold text-slate-800 uppercase tracking-wide border-b border-slate-100 pb-2 mb-3">🎯 Untuk Siapa?</h4>
                    <ul class="space-y-2.5 text-[11px] text-slate-600">
                        <li class="flex items-center gap-2"><i class="fa-solid fa-chalkboard-user text-[#0099b8] w-4 text-center"></i> Guru & tenaga kependidikan</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-user-graduate text-[#0099b8] w-4 text-center"></i> Mahasiswa & pelajar</li>
                        <li class="flex items-center gap-2"><i class="fa-solid fa-people-group text-[#0099b8] w-4 text-center"></i> Masyarakat umum</li>
                    </ul>
                </div>

                <div class="sb-card">
                    <div class="p-4 border-b border-slate-100">
                        <h4 class="text-xs font-bold text-slate-800 uppercase tracking-wide">📬 Hubungi Kami</h4>
                    </div>
                    <div class="p-4 space-y-3 text-[11px] text-slate-600">
                        <div class="flex items-center gap-2"><i class="fa-solid fa-envelope text-[#0099b8] w-4 text-center"></i> penailmu@gmail.com</div>
                        <div class="flex items-center gap-2"><i class="fa-brands fa-instagram text-[#0099b8] w-4 text-center"></i> @penailmu</div>
                        <a href="kontak.html" class="block text-center mt-2 bg-[#0099b8] text-white text-[11px] font-bold py-2 rounded-lg hover:opacity-90 transition">Kirim Request</a>
                    </div>
                </div>

                <div class="bg-white border border-slate-200/70 rounded-xl p-4 shadow-sm">
                    <h4 class="text-xs font-bold text-slate-800 uppercase tracking-wide border-b border-slate-100 pb-2 mb-3">🔗 Jelajahi Lainnya</h4>
                    <ul class="space-y-2.5 text-[11px] font-semibold text-slate-600">
                        <li><a href="dokumenfile.html" class="flex items-center justify-between hover:text-[#0099b8] transition"><span>Format Dokumen</span><i class="fa-solid fa-chevron-right text-[10px] text-slate-300"></i></a></li>
                        <li><a href="tutorial.html" class="flex items-center justify-between hover:text-[#0099b8] transition"><span>Pusat Tutorial</span><i class="fa-solid fa-chevron-right text-[10px] text-slate-300"></i></a></li>
                        <li><a href="infografis.html" class="flex items-center justify-between hover:text-[#0099b8] transition"><span>Infografis</span><i class="fa-solid fa-chevron-right text-[10px] text-slate-300"></i></a></li>
                        <li><a href="perpustakaan.html" class="flex items-center justify-between hover:text-[#0099b8] transition"><span>Perpustakaan Digital</span><i class="fa-solid fa-chevron-right text-[10px] text-slate-300"></i></a></li>
                        <li><a href="pojokilmu.html" class="flex items-center justify-between hover:text-[#0099b8] transition"><span>Pojok Ilmu</span><i class="fa-solid fa-chevron-right text-[10px] text-slate-300"></i></a></li>
                        <li><a href="alatdigital.html" class="flex items-center justify-between hover:text-[#0099b8] transition"><span>Alat Digital Gratis</span><i class="fa-solid fa-chevron-right text-[10px] text-slate-300"></i></a></li>
                    </ul>
                </div>
            </aside>
        </div>
    </main>
<?= $this->endSection(); ?>


