@extends('front.layouts.layout')
@section('content')



<!-- Carousel Start -->
<div class="container-fluid p-0 wow fadeIn contaner-hero-slider" data-wow-delay="0.1s">
    <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">

            <!-- Slide 1 -->
            <div class="carousel-item active">
                <img class="w-100 img-fluid" src="{{ asset('images/9.jpeg') }}" alt="School Image">
                <div class="carousel-caption d-flex flex-column justify-content-center h-100">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8 col-md-10 text-center">
                                <h1 class="display-4 display-md-3 display-sm-5 text-light fw-bold mb-4 animated slideInDown">
                                    Virginia School inspires creativity and excellence.
                                </h1>
                                <a href="#" class="btn btn-light py-sm-2 px-sm-4">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide 2 -->
            <div class="carousel-item">
                <img class="w-100 img-fluid" src="{{ asset('images/9.jpeg') }}" alt="School Image">
                <div class="carousel-caption d-flex flex-column justify-content-center h-100">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8 col-md-10 text-center">
                                <h1 class="display-4 text-light fw-bold mb-4 animated slideInDown">
                                    We shape future leaders with modern learning.
                                </h1>
                                <a href="#" class="btn btn-primary py-sm-2 px-sm-4">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide 3 -->
            <div class="carousel-item">
                <img class="w-100 img-fluid" src="{{ asset('images/9.jpeg') }}" alt="School Image">
                <div class="carousel-caption d-flex flex-column justify-content-center h-100">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8 col-md-10 text-center">
                                <h1 class="display-4 text-light fw-bold mb-4 animated slideInDown">
                                    A community where students grow and succeed.
                                </h1>
                                <a href="#" class="btn btn-light py-sm-2 px-sm-4">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Controls -->
        <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon bg-dark rounded-circle p-2" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#header-carousel" data-bs-slide="next">
            <span class="carousel-control-next-icon bg-dark rounded-circle p-2" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>

        <!-- Indicators -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#header-carousel" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#header-carousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#header-carousel" data-bs-slide-to="2"></button>
        </div>
    </div>
</div>
<!-- Carousel End -->



<!-- Facts Start -->
<div class="container-fluid facts py-5 pt-lg-0">
    <div class="container py-5 pt-lg-0">
        <div class="row g-4 justify-content-center">

            <!-- School 1 -->
            <div class="col-lg-4 col-md-6 col-sm-12 wow fadeIn" data-wow-delay="0.1s">
                <a href="#">
                    <div class="bg-white shadow d-flex align-items-center h-100 p-3 inner-container-school rounded" style="min-height: 150px;">
                        <!-- Logo -->
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/logo1.jpg') }}" alt="Logo" width="80"
                                class="rounded-circle border">
                        </div>

                        <!-- Text -->
                        <div class="ps-3">
                            <h5 class="mb-1 fw-bold text-primary">School One</h5>
                            <span class="text-muted small">Clita erat ipsum lorem sit sed stet duo justo erat amet</span>
                        </div>
                    </div>
                </a>
            </div>

            <!-- School 2 -->
            <div class="col-lg-4 col-md-6 col-sm-12 wow fadeIn" data-wow-delay="0.3s">
                <a href="#">
                    <div class="bg-white shadow d-flex align-items-center h-100 p-3 inner-container-school rounded" style="min-height: 150px;">
                        <!-- Logo -->
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/logo2.jpg') }}" alt="Logo" width="80"
                                class="rounded-circle border">
                        </div>

                        <!-- Text -->
                        <div class="ps-3">
                            <h5 class="mb-1 fw-bold text-primary">School Two</h5>
                            <span class="text-muted small">Clita erat ipsum lorem sit sed stet duo justo erat amet</span>
                        </div>
                    </div>
                </a>
            </div>

            <!-- School 3 -->
            <div class="col-lg-4 col-md-6 col-sm-12 wow fadeIn" data-wow-delay="0.5s">
                <a href="#">
                    <div class="bg-white shadow d-flex align-items-center h-100 p-3 inner-container-school rounded" style="min-height: 150px;">
                        <!-- Logo -->
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/logo3.jpeg') }}" alt="Logo" width="80"
                                class="rounded-circle border">
                        </div>

                        <!-- Text -->
                        <div class="ps-3">
                            <h5 class="mb-1 fw-bold text-primary">School Three</h5>
                            <span class="text-muted small">Clita erat ipsum lorem sit sed stet duo justo erat amet</span>
                        </div>
                    </div>
                </a>
            </div>

        </div>
    </div>
</div>
<!-- Facts End -->



<!-- About Start -->
<div class="container-xxl py-6">
    <div class="container">
        <div class="row g-5 align-items-center">

            <!-- Left: Images -->
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="position-relative overflow-hidden ps-lg-5 pt-lg-5 h-100" style="min-height: 400px;">
                    <img class="position-absolute w-100 h-100 rounded shadow" src="{{ asset('images/1.jpeg') }}" alt="About Image" style="object-fit: cover;">
                    
                    <!-- Overlay smaller image -->
                    <img class="position-absolute top-0 start-0 bg-white p-2 rounded shadow d-none d-sm-block"
                        src="{{ asset('images/2.jpeg') }}" alt="Overlay Image"
                        style="width: 180px; height: 180px; object-fit: cover;">
                </div>
            </div>

            <!-- Right: Content -->
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                <div class="h-100">
                    <h6 class="text-primary text-uppercase mb-2">About Us</h6>
                    <h1 class="fw-bold mb-4">Shaping Bright Futures at Virginia School</h1>
                    <p class="mb-4">
                        Virginia School is dedicated to providing quality education in a supportive and innovative environment,
                        helping students reach their full potential. Through modern teaching methods and a caring community,
                        we inspire creativity, leadership, and a love for learning.
                    </p>
                    <p class="mb-4">
                        Our mission is to prepare students for a successful future by combining strong academics with personal
                        growth and global awareness.
                    </p>

                    <!-- Buttons -->
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <a class="btn btn-primary w-100 py-3 px-4" href="#">Read More</a>
                        </div>
                        <div class="col-sm-6">
                            <a class="d-flex align-items-center btn btn-outline-primary border-2 w-100 p-2"
                                href="tel:+01023864968">
                                <span class="flex-shrink-0 btn-square bg-primary d-flex align-items-center justify-content-center me-2" style="width: 40px; height: 40px;">
                                    <i class="fa fa-phone-alt text-white"></i>
                                </span>
                                <span class="fw-semibold">+01023864968</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- About End -->




<!--Start Slider Facility -->
<div class="container py-5">
  <h2 class="text-center mb-4 fw-bold">Our Facilities</h2>

  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <!-- Facility Item -->
      <div class="swiper-slide d-flex flex-column align-items-center p-4 shadow-sm rounded-4 bg-white">
        <img src="{{ asset('images/9.jpeg') }}" alt="Facility 1" class="mb-3 image-facility" width="100">
        <h6 class="fw-semibold">Virginia</h6>
      </div>
      <div class="swiper-slide d-flex flex-column align-items-center p-4 shadow-sm rounded-4 bg-white">
        <img src="{{ asset('images/9.jpeg') }}" alt="Facility 1" class="mb-3 image-facility" >
        <h6 class="fw-semibold">Virginia</h6>
      </div>
      <div class="swiper-slide d-flex flex-column align-items-center p-4 shadow-sm rounded-4 bg-white">
        <img src="{{ asset('images/9.jpeg') }}" alt="Facility 1" class="mb-3 image-facility">
        <h6 class="fw-semibold">Virginia</h6>
      </div>
      <div class="swiper-slide d-flex flex-column align-items-center p-4 shadow-sm rounded-4 bg-white">
        <img src="{{ asset('images/9.jpeg') }}" alt="Facility 1" class="mb-3 image-facility">
        <h6 class="fw-semibold">Virginia</h6>
      </div>


    </div>

    <!-- Pagination & Navigation -->
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <button class="btn btn-primary d-block mx-auto mt-5">Read More</button>
</div>
<!--End Slider Facility -->






<!-- Latest News Start -->
<div class="container-xxl my-6 py-6 pb-0"
    style="background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    url('{{ asset('images/7.jpeg') }}') center center no-repeat;
    background-size: cover;">
    <div class="container">

        <!-- Section Title -->
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
            <h6 class="text-primary text-uppercase mb-2">Latest News</h6>
            <h2 class="fw-bold mb-4">Stay updated with the latest news and highlights from Virginia School</h2>
        </div>

        <!-- News Grid -->
        <div class="row g-4 justify-content-center">

            <!-- News Item -->
            <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="bg-white shadow-sm rounded d-flex flex-column overflow-hidden h-100">
                    <div class="position-relative">
                        <img class="img-fluid w-100 image-news" src="{{ asset('images/6.jpeg') }}" alt="News Image" style="object-fit: cover; height: 220px;">
                        <div class="position-absolute top-0 start-0 bg-primary text-white small px-3 py-1 rounded-end">
                            <i class="fa fa-calendar me-1"></i>21 / 6 / 2023
                        </div>
                    </div>
                    <div class="p-4 text-center flex-grow-1">
                        <h5 class="fw-bold mb-3">Virginia School Launches</h5>
                        <p class="text-muted small">Virginia School has introduced an innovative science program designed to enhance students' learning experience.</p>
                    </div>
                    <div class="text-center pb-3">
                        <a class="btn btn-outline-primary border-2 px-4" href="{{ route('new') }}">Read More</a>
                    </div>
                </div>
            </div>

            <!-- News Item -->
            <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
                <div class="bg-white shadow-sm rounded d-flex flex-column overflow-hidden h-100">
                    <div class="position-relative">
                        <img class="img-fluid w-100 image-news" src="{{ asset('images/6.jpeg') }}" alt="News Image" style="object-fit: cover; height: 220px;">
                        <div class="position-absolute top-0 start-0 bg-primary text-white small px-3 py-1 rounded-end">
                            <i class="fa fa-calendar me-1"></i>21 / 6 / 2023
                        </div>
                    </div>
                    <div class="p-4 text-center flex-grow-1">
                        <h5 class="fw-bold mb-3">Virginia School Launches</h5>
                        <p class="text-muted small">Virginia School has introduced an innovative science program designed to enhance students' learning experience.</p>
                    </div>
                    <div class="text-center pb-3">
                        <a class="btn btn-outline-primary border-2 px-4" href="{{ route('new') }}">Read More</a>
                    </div>
                </div>
            </div>

            <!-- News Item -->
            <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                <div class="bg-white shadow-sm rounded d-flex flex-column overflow-hidden h-100">
                    <div class="position-relative">
                        <img class="img-fluid w-100 image-news" src="{{ asset('images/6.jpeg') }}" alt="News Image" style="object-fit: cover; height: 220px;">
                        <div class="position-absolute top-0 start-0 bg-primary text-white small px-3 py-1 rounded-end">
                            <i class="fa fa-calendar me-1"></i>21 / 6 / 2023
                        </div>
                    </div>
                    <div class="p-4 text-center flex-grow-1">
                        <h5 class="fw-bold mb-3">Virginia School Launches</h5>
                        <p class="text-muted small">Virginia School has introduced an innovative science program designed to enhance students' learning experience.</p>
                    </div>
                    <div class="text-center pb-3">
                        <a class="btn btn-outline-primary border-2 px-4" href="{{ route('new') }}">Read More</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- Latest News End -->






<!-- Contact Section -->
<div class="container-fluid py-5 bg-light" id="contact">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="fw-bold">Contact Us</h2>
      <p class="text-muted">Get in touch with Virginia School</p>
    </div>

    <div class="row g-4">
      <!-- Map -->
      <div class="col-lg-6">
        <div class="rounded-3 shadow-sm overflow-hidden" style="height: 100%;">
          <iframe 
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3455.1275229694347!2d31.347727799999998!3d30.004494500000003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14583eacb00007a3%3A0x1375c93d12a6db76!2z2YXYr9in2LHYsyDZgdix2KzZitmG2YrYpyDYp9mE2K_ZiNmE2YrZhw!5e0!3m2!1sar!2seg!4v1755611958654!5m2!1sar!2seg" 
            width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy">
          </iframe>
        </div>
      </div>
      <!-- Contact Info & Form -->
      <div class="col-lg-6">
        <div class="bg-white p-4 rounded-3 shadow-sm h-100">
          <!-- Contact Info -->
          <div class="mb-4">
            <p><i class="fa fa-map-marker-alt text-primary me-2"></i> 123 Main Street, City</p>
            <p><i class="fa fa-phone text-primary me-2"></i> +01023864968</p>
            <p><i class="fa fa-envelope text-primary me-2"></i> info@virginiaschool.com</p>
          </div>

          <!-- Contact Form -->
          <form>
            <div class="mb-3">
              <input type="text" class="form-control" placeholder="Your Name" required>
            </div>
            <div class="mb-3">
              <input type="email" class="form-control" placeholder="Your Email" required>
            </div>
            <div class="mb-3">
              <input type="text" class="form-control" placeholder="Your Phone Number" required>
            </div>
            <div class="mb-3">
              <textarea class="form-control" rows="4" placeholder="Your Message" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary w-100 rounded-pill">
              Send Message
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Contact Section -->








    <!-- Features Start -->
<div class="container-xxl py-6">
    <div class="container">
        <div class="row g-5">
            <!-- Text Content -->
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                <h6 class="text-primary text-uppercase mb-2">Why Choose Us!</h6>
                <h3 class=" mb-2">A Leading Educational Experience at Virginia School</h3>
                <p class="mb-2">
                    At Virginia School, we provide a nurturing and inspiring learning environment 
                    where students can grow academically, socially, and creatively. Our focus is on 
                    delivering high-quality education that prepares students for a successful future.
                </p>
                <div class="row gy-3 gx-4">
                    <div class="col-sm-6 wow fadeIn" data-wow-delay="0.1s">
                        <div class="d-flex align-items-center mb-2">
                            <div class="flex-shrink-0 btn-square bg-primary me-3">
                                <i class="fa fa-check text-white"></i>
                            </div>
                            <h5 class="mb-0">Qualified Teachers</h5>
                        </div>
                        <span>Experienced educators committed to excellence and student success.</span>
                    </div>
                    <div class="col-sm-6 wow fadeIn" data-wow-delay="0.2s">
                        <div class="d-flex align-items-center mb-2">
                            <div class="flex-shrink-0 btn-square bg-primary me-3">
                                <i class="fa fa-check text-white"></i>
                            </div>
                            <h5 class="mb-0">Modern Facilities</h5>
                        </div>
                        <span>State-of-the-art classrooms, labs, and activity spaces.</span>
                    </div>
                    <div class="col-sm-6 wow fadeIn" data-wow-delay="0.3s">
                        <div class="d-flex align-items-center mb-2">
                            <div class="flex-shrink-0 btn-square bg-primary me-3">
                                <i class="fa fa-check text-white"></i>
                            </div>
                            <h5 class="mb-0">Affordable Education</h5>
                        </div>
                        <span>High-quality learning with accessible and reasonable fees.</span>
                    </div>
                    <div class="col-sm-6 wow fadeIn" data-wow-delay="0.4s">
                        <div class="d-flex align-items-center mb-2">
                            <div class="flex-shrink-0 btn-square bg-primary me-3">
                                <i class="fa fa-check text-white"></i>
                            </div>
                            <h5 class="mb-0">Holistic Development</h5>
                        </div>
                        <span>We focus on academics, character, and extracurricular activities.</span>
                    </div>
                </div>
            </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="position-relative overflow-hidden pe-5 pt-5 h-100" style="min-height: 400px;">
                        <img class="position-absolute w-100 h-100" src="{{ asset('images/3.jpeg') }}" alt="" style="object-fit: cover;">
                        <img class="position-absolute top-0 end-0 bg-white ps-3 pb-3" src="{{ asset('images/4.jpeg') }}" alt=""
                            style="width: 200px; height: 200px">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Features End -->


@endsection