<?php include('../header/header.php'); ?>

<section class="py-5">
    <div class="container">
        <div class="row align-items-center">
            
            <!-- LEFT SIDE: TEXT -->
            <div class="col-md-6 animate-on-scroll order-md-1 order-2" data-animation="animate__fadeInLeft">
                <h2 class="fw-bold mb-4">About Hessar College</h2>
                <p class="lead">
                    Hessar College is a premier institution dedicated to providing accessible, high-quality education through innovative technology.
                </p>
                <p>
                    Founded in 2020, we have grown to become a leader in online learning and professional development. 
                    Our platform connects expert lecturers with students from all over the world.
                </p>
                <p>
                    Our mission is to empower students with the knowledge and skills they need to excel in their careers.
                </p>
                <div class="mt-4">
                    <a href="signup.php" class="btn btn-primary btn-lg">Join Our Community</a>
                </div>
            </div>

            <!-- RIGHT SIDE: IMAGE SLIDER -->
            <div class="col-md-6 order-md-2 order-1">
                <div id="aboutCarousel" class="carousel slide" data-bs-ride="carousel">
                    
                    <!-- Indicators -->
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#aboutCarousel" data-bs-slide-to="0" class="active"></button>
                        <button type="button" data-bs-target="#aboutCarousel" data-bs-slide-to="1"></button>
                        <button type="button" data-bs-target="#aboutCarousel" data-bs-slide-to="2"></button>
                    </div>

                    <!-- Slides -->
                    <div class="carousel-inner rounded shadow-lg">

                        <div class="carousel-item active">
                            <img src="https://images.unsplash.com/photo-1541339907198-e08756ebafe3?auto=format&fit=crop&w=1350&q=80"
                                 class="d-block w-100"
                                 style="height: 400px; object-fit: cover;"
                                 alt="Campus">
                        </div>

                        <div class="carousel-item">
                            <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1350&q=80"
                                 class="d-block w-100"
                                 style="height: 400px; object-fit: cover;"
                                 alt="Students">
                        </div>

                        <div class="carousel-item">
                            <img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=1350&q=80"
                                 class="d-block w-100"
                                 style="height: 400px; object-fit: cover;"
                                 alt="Classroom">
                        </div>

                    </div>

                    <!-- Controls -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#aboutCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </button>

                    <button class="carousel-control-next" type="button" data-bs-target="#aboutCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </button>

                </div>
            </div>

        </div>
    </div>
</section>

<!-- CORE VALUES -->
<section class="py-5 bg-light">
    <div class="container text-center animate-on-scroll" data-animation="animate__fadeInUp">
        <h3 class="fw-bold mb-5">Our Core Values</h3>

        <div class="row g-4">
            
            <div class="col-md-4">
                <div class="p-4 bg-white rounded shadow-sm h-100">
                    <i class="fas fa-award fa-3x text-primary mb-3"></i>
                    <h5 class="fw-bold">Excellence</h5>
                    <p class="text-muted">We strive for the highest standards in everything we do.</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="p-4 bg-white rounded shadow-sm h-100">
                    <i class="fas fa-lightbulb fa-3x text-primary mb-3"></i>
                    <h5 class="fw-bold">Innovation</h5>
                    <p class="text-muted">Embracing new technologies to enhance the learning journey.</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="p-4 bg-white rounded shadow-sm h-100">
                    <i class="fas fa-users fa-3x text-primary mb-3"></i>
                    <h5 class="fw-bold">Community</h5>
                    <p class="text-muted">Building a supportive and inclusive environment.</p>
                </div>
            </div>

        </div>
    </div>
</section>

<?php include('../footer/footer.php'); ?>