<!DOCTYPE html>
<html lang="en">

<head>
    <?php
    include('./include/header/header.php');
    ?>
    <title>MNHOS</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="WebDuckDesigns MN">
</head>

<body>
    <?php
    include('./include/header/navigation.php');
    ?>
    <section class="hero-banner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-12">
                    <h1>ONLINE HIGH SCHOOL,<br class="d-none d-md-block"><span>BUILT AROUND YOU</span></h1>
                    <div class="hero-info-box">
                        <div class="tagline">
                            <span>CREATIVE, CONNECTED, FLEXIBLE, FREE</span>
                        </div>
                        <p>Personalized learning, real teacher connections, and flexible pathways to help you succeed—wherever life takes you.</p>
                    </div>
                    <div class="cta-actions">
                        <a href="#">ENROLL NOW <i class="fa-solid fa-chevron-right"></i></a>
                        <a href="#">WHY MNOHS <i class="fa-solid fa-chevron-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-6 col-12 position-relative text-center">
                    <img src="./assets/images/banner.png" alt="Smiling student using a laptop">
                    <img src="./assets/images/curvedotline.png" class="dotted-arrow" alt="">
                </div>
            </div>
        </div>
    </section>

    <!-- Welcome Section -->
    <section class="welcome-section">
        <div class="container">
            <!-- Header Text Block -->
            <div class="row text-center">
                <div class="col-12">
                    <!-- <span class="welcome-tag">WELCOME TO MNOHS</span> -->
                    <h2 class="welcome-title">Welcome to Minnesota Online High School (MNOHS)</h2>
                    <div class="welcome-line"></div>
                    <p class="welcome-desc">
                        Minnesota Online High School is the outstanding online public high school with 20 years of experience and counting! With a 10.5-to-one student-teacher ratio, we have time to learn all about you and encourage you to expect joy in learning. Full-time or part-time, find just the right balance—for you—of challenge, community and support at MNOHS
                    </p>
                </div>
            </div>

            <!-- Icons/Features Columns Area -->
            <div class="row align-items-center mt-5 welcome-grid">
                <!-- Left Column (Right-aligned text, Icon on Right) -->
                <div class="col-lg-4 col-md-12 text-lg-end left-features">
                    <div class="welcome-feature-item">
                        <div class="feature-content">
                            <h3>CustomMade</h3>
                            <p>Your interests, strengths and needs. Your time well spent!</p>
                        </div>
                        <div class="feature-icon-box">
                            <img src="./assets/images/welcomeicon1.png" alt="CustomMade icon">
                        </div>
                    </div>
                    <div class="welcome-feature-item">
                        <div class="feature-content">
                            <h3>Real Connections</h3>
                            <p>One-on-one support from Minnesota teachers, counselors, connect with peers</p>
                        </div>
                        <div class="feature-icon-box">
                            <img src="./assets/images/welcomeicon2.png" alt="Real Connections icon">
                        </div>
                    </div>
                </div>

                <!-- Center Graphic Image -->
                <div class="col-lg-4 col-md-12 text-center central-graphic-box">
                    <img src="./assets/images/welcome.png" alt="Welcome Image illustration">
                </div>

                <!-- Right Column (Left-aligned text, Icon on Left) -->
                <div class="col-lg-4 col-md-12 text-lg-start right-features">
                    <div class="welcome-feature-item">
                        <div class="feature-icon-box">
                            <img src="./assets/images/welcomeicon3.png" alt="Anytime, Anywhere icon">
                        </div>
                        <div class="feature-content">
                            <h3>Anytime, Anywhere</h3>
                            <p>Bye-bye class bells! Make your own daily and weekly schedule</p>
                        </div>
                    </div>
                    <div class="welcome-feature-item">
                        <div class="feature-icon-box">
                            <img src="./assets/images/welcomeicon4.png" alt="Flexible Pathways icon">
                        </div>
                        <div class="feature-content">
                            <h3>Flexible Pathways</h3>
                            <p>Academic support? PSEO? Adult diploma prep? Plot your course to graduation</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bottom Pill Button -->
            <div class="row text-center mt-5">
                <div class="col-12">
                    <a href="#" class="welcome-cta">ENROLL NOW <i class="fa-solid fa-chevron-right"></i></a>
                </div>
            </div>
        </div>
    </section>

  

    <!-- Tuition Free Section -->
    <section class="tuition-section">
        <div class="container position-relative" style="margin-top:160px">
            <div class="row align-items-center position-relative" style="z-index: 2;">
                <!-- Left Side: Main Student Image -->
                <div class="col-lg-6 col-12 image-col">
                    <img src="./assets/images/tution.png" alt="Student working on laptop" class="img-fluid main-img">
                </div>

                <!-- Right Side: Overlapping White Information Card -->
                <div class="col-lg-6 col-12 content-col position-relative">
                    <!-- Stylized Green Outline Bracket Frame positioned absolutely behind info-card -->
                    <div class="outline-frame"></div>
                    <div class="info-card">
                        <h2>TUITION FREE FULLY<br>ACCREDITED ONLINE<br>HIGH SCHOOL</h2>
                        <div class="card-line"></div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrQuis ipsum suspendisse ultr Quis ipsum suspendisse ultr</p>
                        <a href="#" class="btn-learn-more">LEARN MORE <i class="fa-solid fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Calendar & Testimonials Section -->
    <section class="calendar-testimonials-section py-5">
        <div class="container">
            <div class="row gy-5">
                <!-- Left Column: Calendar -->
                <div class="col-lg-6 col-12">
                    <div class="section-header text-center text-lg-start mb-4">
                        <h2 class="section-title fw-bold">MNOHS CALENDAR</h2>
                        <div class="header-line mx-auto mx-lg-0"></div>
                    </div>
                    <div class="calendar-container">
                        <!-- Calendar Header -->
                        <div class="calendar-header d-flex justify-content-between align-items-center">
                            <a href="#" class="calendar-nav-btn" id="calendar-prev-btn" aria-label="Previous Month"><i class="fa-solid fa-chevron-left"></i></a>
                            <span class="calendar-month-year" id="calendar-month-year">MAY 2026</span>
                            <a href="#" class="calendar-nav-btn" id="calendar-next-btn" aria-label="Next Month"><i class="fa-solid fa-chevron-right"></i></a>
                        </div>
                        <!-- Calendar Days of Week -->
                        <div class="calendar-weekdays-grid">
                            <div>SU</div>
                            <div>MO</div>
                            <div>TU</div>
                            <div>WE</div>
                            <div>TH</div>
                            <div>FR</div>
                            <div>SA</div>
                        </div>
                        <!-- Calendar Days Grid -->
                        <div class="calendar-days-grid" id="calendar-days-grid">
                            <!-- Populated dynamically via JavaScript -->
                        </div>
                    </div>
                </div>

                <!-- Right Column: Testimonials -->
                <div class="col-lg-6 col-12 ps-lg-5">
                    <div class="section-header text-center text-lg-start mb-4">
                        <h2 class="section-title fw-bold">WE ARE UNIQUELY<br>COMMITTED TO HELP<br>YOU SUCCEED.</h2>
                        <div class="header-line mx-auto mx-lg-0"></div>
                    </div>
                    
                    <div class="testimonials-list mt-5">
                        <!-- Testimonial 1 -->
                        <div class="testimonial-item d-flex gap-4 align-items-start mb-5">
                            <div class="testimonial-avatar">
                                <img src="./assets/images/studenttestimonial1.png" alt="Sierra, part-time student avatar" class="img-fluid">
                            </div>
                            <div class="testimonial-content">
                                <span class="testimonial-category">MY SCHEDULE</span>
                                <p class="testimonial-quote">"I could work at my own pace and go faster than I normally would in a classroom."</p>
                                <span class="testimonial-author">—Sierra, part-time student</span>
                            </div>
                        </div>

                        <!-- Testimonial 2 -->
                        <div class="testimonial-item d-flex gap-4 align-items-start">
                            <div class="testimonial-avatar">
                                <img src="./assets/images/studenttestimonial2.png" alt="Arwa, MNOHS graduate avatar" class="img-fluid">
                            </div>
                            <div class="testimonial-content">
                                <span class="testimonial-category">STUDENT LEADERSHIP</span>
                                <p class="testimonial-quote">"In the MNOHS Peer Leaders Program, I connected, made a contribution, and found friends."</p>
                                <span class="testimonial-author">—Arwa, MNOHS graduate</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
      <!-- Why MNOHS? Section -->
    <section class="why-mnohs-section">
        <div class="container-fluid p-0">
            <div class="row g-0 align-items-stretch">
                <!-- Left Column: Red Text and Stats Block -->
                <div class="col-lg-6 col-12 why-text-col order-2 order-lg-1">
                    <h2 class="why-title">WHY MNOHS?</h2>
                    <div class="why-line"></div>
                    <p class="why-desc">
                        Students from all walks of life find a creative, connected, and personalized education here at Minnesota Online High School. We have part-time, full-time, and individual course opportunities.
                    </p>
                    <div class="why-stats-container">
                        <!-- Stat Row 1 -->
                        <div class="why-stat-row">
                            <div class="stat-number">20 YEARS</div>
                            <div class="stat-label">OF EXTRAORDINARY ONLINE<br>LEARNING EXPERIENCE</div>
                        </div>
                        <!-- Stat Row 2 -->
                        <div class="why-stat-row">
                            <div class="stat-number">10.5 TO 1</div>
                            <div class="stat-label">STUDENT-TO-<br>TEACHER RATIO</div>
                        </div>
                        <!-- Stat Row 3 -->
                        <div class="why-stat-row">
                            <div class="stat-number">10.5 TO 1</div>
                            <div class="stat-label">AVERAGE TENURE<br>OF CORE TEACHERS</div>
                        </div>
                    </div>
                </div>
                <!-- Right Column: Student Group Cutout Image -->
                <div class="col-lg-6 col-12 why-image-col order-1 order-lg-2">
                    <img src="./assets/images/why.png" alt="MNOHS student group" class="why-desktop-img img-fluid d-none d-lg-block w-100 h-100">
                    <img src="./assets/images/why-mobile.png" alt="MNOHS student group mobile view" class="why-mobile-img img-fluid d-block d-lg-none w-100">
                </div>
            </div>
        </div>
    </section>

   
    <!-- Learn More About MNOHS Section -->
    <section class="learn-more-section py-5">
        <div class="container">
            <!-- Section Header -->
            <div class="row text-center mb-5">
                <div class="col-12">
                    <img src="./assets/images/headinglogo.png" alt="Wireless signal icon" class="learn-header-icon mb-2">
                    <h2 class="learn-header-title fw-bold">LEARN MORE ABOUT MNOHS</h2>
                    <div class="learn-header-line"></div>
                </div>
            </div>

            <!-- Portal Cards Row -->
            <div class="row gy-4">
                <!-- Card 1: Family Portal -->
                <div class="col-lg-6 col-12">
                    <div class="portal-card family-card d-flex align-items-stretch">
                        <div class="portal-card-content flex-grow-1">
                            <h3 class="portal-card-title">FAMILY PORTAL</h3>
                            <p class="portal-card-desc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                            </p>
                            <a href="#" class="portal-card-btn btn-blue">LEARN MORE <i class="fa-solid fa-chevron-right"></i></a>
                        </div>
                        <div class="portal-card-img-box">
                            <img src="./assets/images/family.png" alt="Family portal card" class="portal-card-img">
                        </div>
                    </div>
                </div>

                <!-- Card 2: Student Info -->
                <div class="col-lg-6 col-12">
                    <div class="portal-card student-card d-flex align-items-stretch">
                        <div class="portal-card-content flex-grow-1">
                            <h3 class="portal-card-title">STUDENT INFO</h3>
                            <p class="portal-card-desc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                            </p>
                            <a href="#" class="portal-card-btn btn-orange">LEARN MORE <i class="fa-solid fa-chevron-right"></i></a>
                        </div>
                        <div class="portal-card-img-box">
                            <img src="./assets/images/student.png" alt="Student info card" class="portal-card-img">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
     <!-- Latest News Section -->
    <section class="latest-news-section py-5">
        <div class="container">
            <!-- Section Header -->
            <div class="section-header text-start mb-5">
                <h2 class="section-title fw-bold">LATEST NEWS</h2>
                <div class="header-line"></div>
            </div>

            <!-- News Grid -->
            <div class="row gy-4 mb-5">
                <!-- Left Column: Large Feature Card -->
                <div class="col-lg-6 col-12">
                    <div class="feature-news-card position-relative overflow-hidden h-100">
                        <img src="./assets/images/news1.png" alt="Featured News Image" class="w-100 h-100 feature-news-img">
                        <div class="feature-news-overlay">
                            <span class="news-date-tag"><i class="fa-regular fa-clock me-1"></i> 19 MAY 2026</span>
                            <h3 class="feature-news-title">
                                LOREM IPSUM DOLOR SIT AMET CONSECTETUR ADIPISCING ELIT SED DO
                            </h3>
                        </div>
                    </div>
                </div>

                <!-- Right Column: Two Horizontal Items -->
                <div class="col-lg-6 col-12 d-flex flex-column gap-4 justify-content-between">
                    <!-- Top News Item -->
                    <div class="horizontal-news-card d-flex align-items-stretch">
                        <div class="horizontal-news-img-box">
                            <img src="./assets/images/news2.png" alt="News Image 2" class="horizontal-news-img">
                        </div>
                        <div class="horizontal-news-content flex-grow-1">
                            <span class="news-date-tag mb-2"><i class="fa-regular fa-clock me-1"></i> 19 MAY 2026</span>
                            <h4 class="horizontal-news-title">LOREM IPSUM DOLOR SIT</h4>
                            <p class="horizontal-news-desc">
                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                            </p>
                        </div>
                    </div>

                    <!-- Bottom News Item -->
                    <div class="horizontal-news-card d-flex align-items-stretch">
                        <div class="horizontal-news-img-box">
                            <img src="./assets/images/news3.png" alt="News Image 3" class="horizontal-news-img">
                        </div>
                        <div class="horizontal-news-content flex-grow-1">
                            <span class="news-date-tag mb-2"><i class="fa-regular fa-clock me-1"></i> 19 MAY 2026</span>
                            <h4 class="horizontal-news-title">LOREM IPSUM DOLOR SIT</h4>
                            <p class="horizontal-news-desc">
                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bottom Button -->
            <div class="row text-center mt-4">
                <div class="col-12">
                    <a href="#" class="news-cta">ENROLL NOW <i class="fa-solid fa-chevron-right"></i></a>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact/Question Form Section -->
    <section class="contact-section">
        <div class="container">
            <div class="row align-items-center">
                <!-- Left Column: Student cutout with wireless background -->
                <div class="col-lg-6 col-12 contact-image-col order-2 order-lg-1">
                    <img src="./assets/images/contactstudent.png" alt="Student cutout image" class="img-fluid contact-student-img">
                </div>

                <!-- Right Column: Form -->
                <div class="col-lg-6 col-12 contact-form-col text-start order-1 order-lg-2">
                    <h2 class="contact-form-title">WE’RE HERE TO ANSWER<br>YOUR QUESTIONS</h2>
                    <div class="contact-header-line"></div>
                    
                    <form class="contact-form-container" action="#" method="POST">
                        <div class="form-row-double">
                            <input type="text" class="contact-input" placeholder="First Name" name="first_name" required>
                            <input type="text" class="contact-input" placeholder="Last Name" name="last_name" required>
                        </div>
                        <input type="email" class="contact-input" placeholder="Email address" name="email" required>
                        <input type="tel" class="contact-input" placeholder="Phone Number" name="phone">
                        <textarea class="contact-input" placeholder="How can we help you" name="message" required></textarea>
                        <button type="submit" class="contact-submit-btn">SEND MESSAGE <i class="fa-solid fa-chevron-right"></i></button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <div class="overlap">
        <?php
        include('./include/footer/footer.php');
        ?>
    </div>