<?php  require_once('includes/header.php')?>

    <!-- hero section start -->
    <div style="position: relative; background-color: #4E8AD7;  ">


        <div class="container-sm  vh-100 border-bottom-0">
            <div class="row">
                <div class="col-md-6 mt-5 mt-md-0 justify-content-center align-content-center">
                    <h1 class="fs-1 mt-5">Empower your learning journy</h1>
                    <p class="fs-5 pb-5">Explore thousands of courses and expend your knowledge</p>
                    <div class="d-flex ">
                        <button class="px-3 rounded-1 fs-4 border border-end-0 bg-white"><i
                                class='bi bi-search'></i></button>
                        <input class="form-control border border-start-0 border-end-0" type="text" name="search"
                            id="search" placeholder="search for courses..." />
                        <button class="btn btn-info text-white ">Browse Courses</button>
                    </div>
                </div>
                <div class="mt-5 col-md-6 d-none d-md-flex justify-content-center align-content-center">
                    <img src="assets/images/education.png" width="auto" height="400" alt="hero-image" />
                </div>
            </div>

        </div>
        <!-- shape devider  -->
        <div class="custom-shape-divider-bottom-1765983440">
            <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"
                preserveAspectRatio="none">
                <path
                    d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
                    class="shape-fill"></path>
            </svg>
        </div>

    </div>
    <!-- hero section end -->
    <!-- classes category start  -->
    <div class="container">
        <h1 class="my-4 fs-3">Browse by class</h1>
        <div class="row g-3">
            <div class="col-md-3 ">
                <div class="card border-1 rounded-2 p-5 bg-white text-center">

                    <a href="http://" class="fs-3 text-info text-decoration-none">class 1</a>
                </div>

            </div>
            <div class="col-md-3">
                <div class="card border-1 rounded-2 p-5 bg-white text-center">
                    <a href="http://" class="fs-3 text-info text-decoration-none">class 1</a>
                </div>

            </div>
            <div class="col-md-3">
                <div class="card border-1 rounded-2 p-5 bg-white text-center">
                    <a href="http://" class="fs-3 text-info text-decoration-none">class 1</a>
                </div>

            </div>
            <div class="col-md-3">
                <div class="card border-1 rounded-2 p-5 bg-white text-center">
                    <a href="http://" class="fs-3 text-info text-decoration-none">class 1</a>
                </div>

            </div>
            <div class="col-md-3">
                <div class="card border-1 rounded-2 p-5 bg-white text-center">
                    <a href="http://" class="fs-3 text-info text-decoration-none">class 1</a>
                </div>

            </div>
            <div class="col-md-3">
                <div class="card border-1 rounded-2 p-5 bg-white text-center">
                    <a href="http://" class="fs-3 text-info text-decoration-none">class 1</a>
                </div>

            </div>
            <div class="col-md-3">
                <div class="card border-1 rounded-2 p-5 bg-white text-center">
                    <a href="http://" class="fs-3 text-info text-decoration-none">class 1</a>
                </div>

            </div>
        </div>
    </div>
    <!-- classes category end  -->
    <!-- feafured courses start -->
    <div class="container my-3">
        <div class="d-flex   justify-content-between my-5">
            <h1 class="fs-3">Featured courses</h1>
            <button class="btn btn-light px-3 border-1 py-1 ">View all courses</button>
        </div>
        <div class="row g-3">
            <div class="col-md-4 col-lg-4">
                <div class="card overflow-hidden">
                    <img src="assets/images/education.png" width="100%" height="300px" class="object-fit-cover"
                        alt="cardimg" />
                    <div class="card-body">
                        <h5 class="fs-5">Basic Mathematics</h5>
                        <p class="fs-6">Start Learning Now</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="card overflow-hidden">
                    <img src="assets/blankimg.avif" width="100%" height="300px" class="object-fit-cover"
                        alt="cardimg" />
                    <div class="card-body">
                        <h5 class="fs-5">Basic Mathematics</h5>
                        <p class="fs-6">Start Learning Now</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="card overflow-hidden">
                    <img src="assets/blankimg.avif" width="100%" height="300px" class="object-fit-cover"
                        alt="cardimg" />
                    <div class="card-body">
                        <h5 class="fs-5">Basic Mathematics</h5>
                        <p class="fs-6">Start Learning Now</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="card overflow-hidden">
                    <img src="assets/profile-image.jpg" width="100%" height="300px" class="object-fit-cover"
                        alt="cardimg" />
                    <div class="card-body">
                        <h5 class="fs-5">Basic Mathematics</h5>
                        <p class="fs-6">Start Learning Now</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="card overflow-hidden">
                    <img src="assets/images/pexels-xiao-zheng-geng-3386673-27300376.jpg" width="100%" height="300px"
                        class="object-fit-cover" alt="cardimg" />
                    <div class="card-body">
                        <h5 class="fs-5">Basic Mathematics</h5>
                        <p class="fs-6">Start Learning Now</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center mt-3 py-3 ">
            <button class="px-3 py-1 btn btn-info">View all courses</button>
        </div>
    </div>
    <!-- feafured courses end -->

<?php  require_once('includes/footer.php')?>