<?php $__env->startSection('title', 'About Us - Edunetra'); ?>

<?php $__env->startSection('content'); ?>
<!-- Hero Section -->
<section class="bg-edunetra-dark text-white position-relative overflow-hidden">
    <div class="container py-5">
        <div class="row align-items-center min-vh-50">
            <div class="col-lg-8 mx-auto text-center">
                <div class="animate-fade-in">
                    <h1 class="display-3 fw-bold mb-4 text-gradient">About Edunetra</h1>
                    <p class="lead mb-4 opacity-75">
                        Visual Impairment Solutions: Inclusive Opportunities and Navigation for English Learning
                    </p>
                    <div class="d-flex justify-content-center gap-3 flex-wrap">
                        <span class="badge bg-edunetra-yellow text-dark px-3 py-2 fs-6">Inclusive Education</span>
                        <span class="badge bg-light text-dark px-3 py-2 fs-6">English Learning</span>
                        <span class="badge bg-edunetra-yellow text-dark px-3 py-2 fs-6">Accessibility</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Decorative Elements -->
    <div class="position-absolute top-0 end-0 opacity-10">
        <i class="bi bi-eye display-1"></i>
    </div>
    <div class="position-absolute bottom-0 start-0 opacity-10">
        <i class="bi bi-book display-1"></i>
    </div>
</section>

<!-- Our Story Section -->
<section class="section-padding bg-light">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h2 class="display-5 fw-bold mb-4">Our Story</h2>
                <p class="lead text-muted">
                    Edunetra lahir dari visi untuk menciptakan dunia pendidikan yang inklusif dan accessible bagi semua
                </p>
            </div>
        </div>

        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <div class="card border-0 shadow-lg h-100">
                    <div class="card-body p-5">
                        <div class="d-flex align-items-center mb-4">
                            <div class="bg-edunetra-yellow rounded-circle p-3 me-3">
                                <i class="bi bi-lightbulb-fill text-dark fs-4"></i>
                            </div>
                            <h3 class="fw-bold mb-0">Sejarah Edunetra</h3>
                        </div>
                        <p class="text-muted mb-4">
                            Edunetra didirikan dengan semangat untuk mengatasi kesenjangan pendidikan yang dihadapi oleh
                            individu dengan gangguan penglihatan. Berawal dari keprihatinan terhadap terbatasnya akses
                            pendidikan bahasa Inggris yang berkualitas dan accessible.
                        </p>
                        <p class="text-muted mb-4">
                            Kami memahami bahwa setiap individu memiliki potensi yang luar biasa, terlepas dari keterbatasan
                            fisik yang dimiliki. Dengan dukungan teknologi modern dan metode pembelajaran inovatif,
                            kami berkomitmen untuk membuka pintu kesempatan yang sama bagi semua.
                        </p>
                        <div class="d-flex align-items-center">
                            <div class="bg-primary bg-opacity-10 rounded-circle p-2 me-3">
                                <i class="bi bi-calendar-event text-primary"></i>
                            </div>
                            <small class="text-muted fw-semibold">Established 2023</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card border-0 shadow-lg h-100">
                    <div class="card-body p-5">
                        <div class="d-flex align-items-center mb-4">
                            <div class="bg-primary rounded-circle p-3 me-3">
                                <i class="bi bi-heart-fill text-white fs-4"></i>
                            </div>
                            <h3 class="fw-bold mb-0">Filosofi Kami</h3>
                        </div>
                        <p class="text-muted mb-4">
                            "Edunetra" berasal dari kata "Edukasi" dan "Netra" yang melambangkan pendidikan yang
                            berfokus pada kebutuhan khusus individu dengan gangguan penglihatan. Kami percaya bahwa
                            pendidikan adalah hak fundamental setiap manusia.
                        </p>
                        <p class="text-muted mb-4">
                            Dengan pendekatan yang personal dan teknologi assistive, kami menciptakan lingkungan
                            pembelajaran yang tidak hanya accessible, tetapi juga engaging dan efektif untuk
                            mengembangkan kemampuan bahasa Inggris.
                        </p>
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="text-center">
                                    <div class="fw-bold text-primary fs-4">100+</div>
                                    <small class="text-muted">Students Served</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center">
                                    <div class="fw-bold text-primary fs-4">15+</div>
                                    <small class="text-muted">Expert Teachers</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Mission & Vision -->
<section class="section-padding bg-white">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-7">
                <div class="pe-lg-4">
                    <h2 class="display-6 fw-bold mb-4">Our Mission</h2>
                    <p class="fs-5 text-muted mb-4 lh-lg">
                        Menyediakan solusi pendidikan inklusif yang memberdayakan individu dengan gangguan penglihatan
                        untuk unggul dalam pembelajaran bahasa Inggris dan mencapai potensi penuh mereka.
                    </p>
                    <p class="text-muted mb-4">
                        Kami berkomitmen untuk menghancurkan barrier dan menciptakan jalur yang accessible menuju
                        pengetahuan dan pengembangan keterampilan. Melalui metode pengajaran inovatif, dukungan
                        khusus, dan teknologi cutting-edge, kami memastikan setiap learner dapat mencapai kesuksesan.
                    </p>

                    <div class="row g-3 mt-4">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <div class="bg-edunetra-yellow rounded-circle p-2 me-3">
                                    <i class="bi bi-check2 text-dark fw-bold"></i>
                                </div>
                                <span class="fw-semibold">Inclusive Learning</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <div class="bg-edunetra-yellow rounded-circle p-2 me-3">
                                    <i class="bi bi-check2 text-dark fw-bold"></i>
                                </div>
                                <span class="fw-semibold">Expert Support</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <div class="bg-edunetra-yellow rounded-circle p-2 me-3">
                                    <i class="bi bi-check2 text-dark fw-bold"></i>
                                </div>
                                <span class="fw-semibold">Modern Technology</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <div class="bg-edunetra-yellow rounded-circle p-2 me-3">
                                    <i class="bi bi-check2 text-dark fw-bold"></i>
                                </div>
                                <span class="fw-semibold">Personal Growth</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="card bg-edunetra-yellow border-0 shadow-lg">
                    <div class="card-body p-5 text-center">
                        <div class="mb-4">
                            <i class="bi bi-eye-fill display-1 text-dark opacity-75"></i>
                        </div>
                        <h3 class="fw-bold text-dark mb-4">OUR VISION</h3>
                        <p class="text-dark fw-medium fs-5 mb-0">
                            Menciptakan dunia di mana gangguan penglihatan bukan lagi penghalang untuk mendapatkan
                            pendidikan berkualitas dan pertumbuhan personal yang optimal.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Our Programs -->
<section class="section-padding bg-light">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h2 class="display-5 fw-bold mb-4">Program Kami</h2>
                <p class="lead text-muted">
                    Dukungan komprehensif dan kesempatan pembelajaran yang dirancang khusus untuk kebutuhan Anda
                </p>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <div class="card border-0 shadow-sm h-100 program-card">
                    <div class="card-body p-4 text-center">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style="width: 80px; height: 80px;">
                            <i class="bi bi-book-fill text-primary fs-2"></i>
                        </div>
                        <h4 class="fw-bold mb-3">English for Young Learner</h4>
                        <p class="text-muted mb-4">
                            Program pembelajaran bahasa Inggris khusus yang dirancang untuk anak-anak dan remaja
                            dengan gangguan penglihatan, menggunakan metode multisensori yang engaging.
                        </p>
                        <div class="d-flex justify-content-center">
                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2">Ages 6-17</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="card border-0 shadow-sm h-100 program-card">
                    <div class="card-body p-4 text-center">
                        <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style="width: 80px; height: 80px;">
                            <i class="bi bi-people-fill text-success fs-2"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Volunteer Program</h4>
                        <p class="text-muted mb-4">
                            Bergabunglah dengan komunitas volunteer kami yang berdedikasi membantu dan
                            membimbing siswa-siswa kami dalam perjalanan pembelajaran mereka.
                        </p>
                        <div class="d-flex justify-content-center">
                            <span class="badge bg-success bg-opacity-10 text-success px-3 py-2">Community Impact</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="card border-0 shadow-sm h-100 program-card">
                    <div class="card-body p-4 text-center">
                        <div class="bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style="width: 80px; height: 80px;">
                            <i class="bi bi-person-workspace text-warning fs-2"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Shadow Teacher</h4>
                        <p class="text-muted mb-4">
                            Dapatkan pengalaman mengajar langsung sambil mendukung siswa dengan kebutuhan khusus.
                            Program mentoring untuk calon educator.
                        </p>
                        <div class="d-flex justify-content-center">
                            <span class="badge bg-warning bg-opacity-10 text-warning px-3 py-2">Teaching Experience</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="card border-0 shadow-sm h-100 program-card">
                    <div class="card-body p-4 text-center">
                        <div class="bg-info bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style="width: 80px; height: 80px;">
                            <i class="bi bi-briefcase-fill text-info fs-2"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Open Recruitment</h4>
                        <p class="text-muted mb-4">
                            Kesempatan karir untuk educator dan staff pendukung yang passionate dalam
                            pendidikan inklusif dan pemberdayaan difabel netra.
                        </p>
                        <div class="d-flex justify-content-center">
                            <span class="badge bg-info bg-opacity-10 text-info px-3 py-2">Career Opportunities</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="card border-0 shadow-sm h-100 program-card">
                    <div class="card-body p-4 text-center">
                        <div class="bg-edunetra-yellow bg-opacity-75 rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style="width: 80px; height: 80px;">
                            <i class="bi bi-compass text-dark fs-2"></i>
                        </div>
                        <h4 class="fw-bold mb-3">LENTERA</h4>
                        <p class="text-muted mb-4">
                            <strong>Layanan Pendampingan Mobilitas Difabel Netra</strong> - Layanan khusus untuk
                            mendukung mobilitas dan kemandirian dalam aktivitas sehari-hari.
                        </p>
                        <div class="d-flex justify-content-center">
                            <span class="badge bg-edunetra-yellow text-dark px-3 py-2">Mobility Support</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="card border-0 shadow-sm h-100 program-card">
                    <div class="card-body p-4 text-center">
                        <div class="bg-secondary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style="width: 80px; height: 80px;">
                            <i class="bi bi-info-circle-fill text-secondary fs-2"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Information Hub</h4>
                        <p class="text-muted mb-4">
                            Tetap update dengan berita terbaru, resources, dan kesempatan-kesempatan menarik
                            di dunia pendidikan inklusif dan teknologi assistive.
                        </p>
                        <div class="d-flex justify-content-center">
                            <span class="badge bg-secondary bg-opacity-10 text-secondary px-3 py-2">Stay Updated</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Our Approach -->
<section class="section-padding bg-white">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h2 class="display-5 fw-bold mb-4">Pendekatan Kami</h2>
                <p class="lead text-muted">
                    Bagaimana kami membuat pembelajaran menjadi accessible, efektif, dan menyenangkan
                </p>
            </div>
        </div>

        <div class="row g-5">
            <div class="col-lg-6">
                <div class="approach-steps">
                    <div class="d-flex align-items-start mb-4">
                        <div class="bg-edunetra-yellow rounded-circle d-flex align-items-center justify-content-center me-4 flex-shrink-0" style="width: 60px; height: 60px;">
                            <span class="text-dark fw-bold fs-4">1</span>
                        </div>
                        <div>
                            <h4 class="fw-bold mb-3">Personalized Learning</h4>
                            <p class="text-muted">
                                Pengalaman pembelajaran yang disesuaikan dengan kebutuhan unik dan gaya belajar
                                setiap siswa, memastikan setiap individu dapat berkembang optimal.
                            </p>
                        </div>
                    </div>

                    <div class="d-flex align-items-start mb-4">
                        <div class="bg-edunetra-yellow rounded-circle d-flex align-items-center justify-content-center me-4 flex-shrink-0" style="width: 60px; height: 60px;">
                            <span class="text-dark fw-bold fs-4">2</span>
                        </div>
                        <div>
                            <h4 class="fw-bold mb-3">Assistive Technology</h4>
                            <p class="text-muted">
                                Teknologi cutting-edge dan software khusus yang dirancang untuk meningkatkan
                                aksesibilitas pembelajaran dan engagement siswa.
                            </p>
                        </div>
                    </div>

                    <div class="d-flex align-items-start mb-4">
                        <div class="bg-edunetra-yellow rounded-circle d-flex align-items-center justify-content-center me-4 flex-shrink-0" style="width: 60px; height: 60px;">
                            <span class="text-dark fw-bold fs-4">3</span>
                        </div>
                        <div>
                            <h4 class="fw-bold mb-3">Expert Guidance</h4>
                            <p class="text-muted">
                                Educator berpengalaman yang specialized dalam mengajar siswa dengan gangguan
                                penglihatan, dengan pemahaman mendalam tentang kebutuhan khusus.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="approach-steps">
                    <div class="d-flex align-items-start mb-4">
                        <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-4 flex-shrink-0" style="width: 60px; height: 60px;">
                            <span class="text-white fw-bold fs-4">4</span>
                        </div>
                        <div>
                            <h4 class="fw-bold mb-3">Community Support</h4>
                            <p class="text-muted">
                                Jaringan kuat dari peers, mentor, dan support staff yang menciptakan lingkungan
                                pembelajaran inklusif dan supportive.
                            </p>
                        </div>
                    </div>

                    <div class="d-flex align-items-start mb-4">
                        <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-4 flex-shrink-0" style="width: 60px; height: 60px;">
                            <span class="text-white fw-bold fs-4">5</span>
                        </div>
                        <div>
                            <h4 class="fw-bold mb-3">Continuous Innovation</h4>
                            <p class="text-muted">
                                Terus mengembangkan metode dan materi pembelajaran untuk memberikan pengalaman
                                belajar terbaik yang mengikuti perkembangan zaman.
                            </p>
                        </div>
                    </div>

                    <div class="d-flex align-items-start mb-4">
                        <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-4 flex-shrink-0" style="width: 60px; height: 60px;">
                            <span class="text-white fw-bold fs-4">6</span>
                        </div>
                        <div>
                            <h4 class="fw-bold mb-3">Holistic Development</h4>
                            <p class="text-muted">
                                Fokus pada pencapaian akademik dan pertumbuhan personal, membangun kepercayaan
                                diri dan kemandirian untuk masa depan yang cerah.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Statistics Section -->
<section class="section-padding bg-light">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h2 class="display-5 fw-bold mb-4">Impact Kami</h2>
                <p class="lead text-muted">
                    Angka-angka yang menunjukkan dedikasi kami dalam menciptakan pendidikan inklusif
                </p>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-3 col-md-6">
                <div class="card border-0 shadow-sm text-center h-100">
                    <div class="card-body p-4">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="bi bi-people-fill text-primary fs-2"></i>
                        </div>
                        <h3 class="fw-bold text-primary mb-2">150+</h3>
                        <p class="text-muted mb-0">Siswa Terdaftar</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card border-0 shadow-sm text-center h-100">
                    <div class="card-body p-4">
                        <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="bi bi-mortarboard-fill text-success fs-2"></i>
                        </div>
                        <h3 class="fw-bold text-success mb-2">25+</h3>
                        <p class="text-muted mb-0">Expert Teachers</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card border-0 shadow-sm text-center h-100">
                    <div class="card-body p-4">
                        <div class="bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="bi bi-book-fill text-warning fs-2"></i>
                        </div>
                        <h3 class="fw-bold text-warning mb-2">50+</h3>
                        <p class="text-muted mb-0">Courses Available</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card border-0 shadow-sm text-center h-100">
                    <div class="card-body p-4">
                        <div class="bg-info bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="bi bi-award-fill text-info fs-2"></i>
                        </div>
                        <h3 class="fw-bold text-info mb-2">95%</h3>
                        <p class="text-muted mb-0">Success Rate</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="section-padding bg-edunetra-dark text-white position-relative overflow-hidden">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <div class="mb-4">
                    <i class="bi bi-heart-fill text-edunetra-yellow display-4 animate-bounce"></i>
                </div>
                <h2 class="display-5 fw-bold mb-4">Bergabunglah dengan Komunitas Kami</h2>
                <p class="lead mb-5 opacity-75">
                    Jadilah bagian dari misi kami untuk menciptakan kesempatan pendidikan inklusif untuk semua.
                    Bersama-sama kita dapat membuat perbedaan yang nyata.
                </p>

                <div class="d-flex flex-wrap justify-content-center gap-3 mb-5">
                    <a href="<?php echo e(route('courses.public')); ?>"
                       class="btn btn-edunetra btn-lg px-5 py-3">
                        <i class="bi bi-book me-2"></i>
                        Jelajahi Kursus
                    </a>
                    <a href="<?php echo e(route('contact')); ?>"
                       class="btn btn-outline-light btn-lg px-5 py-3">
                        <i class="bi bi-envelope me-2"></i>
                        Hubungi Kami
                    </a>
                </div>

                <div class="row g-3 justify-content-center">
                    <div class="col-auto">
                        <div class="d-flex align-items-center text-light opacity-75">
                            <i class="bi bi-check-circle-fill text-edunetra-yellow me-2"></i>
                            <small>Pembelajaran Inklusif</small>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="d-flex align-items-center text-light opacity-75">
                            <i class="bi bi-check-circle-fill text-edunetra-yellow me-2"></i>
                            <small>Teknologi Assistive</small>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="d-flex align-items-center text-light opacity-75">
                            <i class="bi bi-check-circle-fill text-edunetra-yellow me-2"></i>
                            <small>Expert Support</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Decorative Elements -->
    <div class="position-absolute top-0 start-0 opacity-5">
        <i class="bi bi-mortarboard display-1"></i>
    </div>
    <div class="position-absolute bottom-0 end-0 opacity-5">
        <i class="bi bi-lightbulb display-1"></i>
    </div>
</section>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /Users/reihanpraja/ProjectWork/edunetra/resources/views/about.blade.php ENDPATH**/ ?>