@include('_partials_frontend.head')
  <!--Header-->
  @include('_partials_frontend.navbar')
  
  
  <section class="section-program mobile-show">
    <div class="container">
      @foreach($program_about as $about)
      <h1 class="program-title-mobile">
                  We’re here to support the world of education
              </h1>
      <p class="program-desc-mobile">
                  {!! $about->deskripsi !!}
              </p>
      <a href="/Frontend/Program" class="btn btn-white">
        See Programs        <i class="mdi mdi-arrow-right-circle"></i>
      </a>
      @endforeach
    </div>
  </section>
  <section class="bg-gray section-padding section-program mobile-hide">
    <div class="container">
      <h1 class="title-section font-xl">
        Our Programs      </h1>
      <div class="row">
        @foreach($program as $prog)
        <div class="col-md-6 my-3">
          <div class="programs-item">
            <div class="icon">
              <img src="/upload/page/{{ $prog->thumbnail }}" alt="">
            </div>
            <div class="content">
              <h3 class="font-program" style="">{{ $prog->judul_page }}</h3>
              <font class="font-medium text-justify">
                <p>                  {!! \Illuminate\Support\Str::limit($prog->deskripsi, 250, $end='...') !!}
                              </p>
            </font>
            <a href="/Frontend/Program_detail?program=" class="btn btn-outline-primary font-medium">
              Read More              <i class="mdi mdi-arrow-right"></i></a>
            </div>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </section>
  <section class="section-partner">
    <div class="container">
      <div class="partner-title-nav">
        <h1 class="title-section font-xl">
          Our Partners        </h1>
        <ul class="nav nav-tabs mobile-hide" id="myTab" role="tablist">
          <li class="nav-item pb-5">
            <a class="nav-link active font-medium" id="international-tab" data-toggle="tab" href="#international" role="tab" aria-controls="international" aria-selected="true">
                              International
                          </a>
          </li>
          <li class="nav-item pb-5">
            <a class="nav-link font-medium" id="local-tab" data-toggle="tab" href="#local" role="tab" aria-controls="local" aria-selected="false">
                              Local
                          </a>
          </li>
        </ul>
      </div>
      <div class="partner-logo">
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="international" role="tabpanel" aria-labelledby="international-tab">
            <h3 class="mobile-show">
                              International
                          </h3>
            <div class="row">
              @foreach($partner_int as $int)
              <div class="col-4">
                <a href="{{ $int->link }}" target="_blank" class="partner-img mobile-hide">
                  <div class="jarak-partner">
                    <img src="/upload/partner/{{ $int->foto }}" class="img-display mx-auto d-block img-partner" alt="">
                  </div>
                  <div class="p-3 font-weight-bold text-center mt-3 mobile-hide text-partner">{{ $int->negara }}</div>
                </a>
                <div class="mobile-show">
                  <a href="#" title="" class="partner-img"><img src="/upload/partner/{{ $int->foto }}" alt=""></a>
                </div>
              </div>
              @endforeach
            </div>
            <div class="text-center mt-3 mobile-hide">
              <a href="/Frontend/Partner" class="btn btn-white font-medium">
                Read More              </a>
            </div>
          </div>
          <div class="tab-pane fade" id="local" role="tabpanel" aria-labelledby="local-tab">
            <h3 class="mobile-show">
                              Local
                          </h3>
            <div class="row">
              @foreach($partner_lok as $lok)
              <div class="col-4">
                <a href="{{ $lok->link }}" title="" class="partner-img mobile-hide">
                  <div class="jarak-partner">
                    <img src="/upload/partner/{{ $lok->foto }}" class="img-display img-partner" alt="">
                  </div>
                  <div class="p-3 font-weight-bold text-center mt-3 mobile-hide text-partner">{{ $lok->kota }} - {{ $lok->negara }}</div>
                </a>
                <div class="mobile-show">
                  <a href="#" title="" class="partner-img"><img src="/upload/partner/{{ $lok->foto }}" alt=""></a>
                </div>
              </div>
              @endforeach
            </div>
            <div class="text-center mt-3 mobile-show">
              <a href="/Frontend/Partner" class="btn btn-white font-medium">
                Read More              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="section-testimoni">
    <div class="container">
      <div class="testimoni-title mobile-hide">
        <h1 class="title-section font-xl">
          Testimony        </h1>
      </div>
      <div class="row testimoni-list">
        @foreach($testimoni as $testi)
        <div class="col-md-6">
          <div class="testimoni-item">
            <div class="images">
              <img src="/upload/testimoni/{{ $testi->foto }}" alt="">
            </div>
            <div class="content">
              <p class="desc">
                  
            </p>
            <div class="name">{{ $testi->nama }}</div>
            <div class="school font-asal-sekolah">{{ $testi->asal_sekolah }}</div>
          </div>
        </div>
      </div>
      @endforeach
      <div class="mobile-show text-left">
        <a href="javascript:;" class="see-more-testi">
                      + See More
                  </a>
      </div>
    </div>
  </section>

  <section class="section-grallery bg-gray">
    <div class="container">
      <h1 class="title-section font-xl">Gallery</h1>
      <div class="row gallery-list-section">
        @foreach($galeri as $media)
        <div class="col-md-3">
          <div class="gallery-item">
            <a href="/upload/galeri/{{ $media->foto }}" data-fancybox="gallery" data-caption="{{ $media->judul_foto }}" class="fancybox font-medium" >
              <img src="/upload/galeri/{{ $media->foto }}" alt="" />
              <div class="content">
                <h3 class="title font-medium">{{ $media->judul_foto }}</h3>
              </div>
            </a>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </section>

  <section class="section-events section-padding">
    <div class="container">
      <h1 class="title-section font-xl">
        Events      </h1>
      <div class="row event-list">
        @foreach($event as $berita)
        <div class="col-md-4">
          <div class="event-item">
            <div class="images">
              <a href="/Frontend/Event_detail?event=">
                <img src="/upload/page/{{ $berita->thumbnail }}" alt="">
              </a>
            </div>
            <div class="content">
              <div class="meta">
                <span class="date font-medium">Jan 01, 1970</span>
              </div>
              <h3 class="font-large font-weight-bold"><a href="/Frontend/Event_detail?event=">{{ $berita->judul_page }}</a></h3>
                <font class="font-medium">

                </font>
                <a href=" 
                /Frontend/Event_detail?event=" class="read-more font-medium">
                  Read More</a>
                </div>
              </div>
            </div>
            @endforeach
          </div>
             <!-- <div class="mobile-show text-left">
                <a href="javascript:;" class="see-more-event">+ See More</a>
              </div> -->
            </div>
          </section>

          @include('_partials_frontend.footer')