@extends('layouts.main')
@section('content')

    <section class="ftco-services ftco-no-pb">
        <div class="container-wrap">
            <div class="row no-gutters">
                <div class="col-md-3 d-flex services align-self-stretch py-5 px-4 ftco-animate bg-primary">
                    <div class="media block-6 d-block text-center">
                        <div class="icon d-flex justify-content-center align-items-center">
                            <span class="flaticon-teacher"></span>
                        </div>
                        <div class="media-body p-2 mt-3">
                            <h3 class="heading">Kursus Bahasa</h3>
                            <p>Bagian ini dapat menampilkan berbagai kursus bahasa jadwal kursus, tingkat kesulitan, dan informasi pendaftaran.
</p>
                        </div>
                    </div>      
                </div>
                <div class="col-md-3 d-flex services align-self-stretch py-5 px-4 ftco-animate bg-darken">
                    <div class="media block-6 d-block text-center">
                        <div class="icon d-flex justify-content-center align-items-center">
                            <span class="flaticon-reading"></span>
                        </div>
                        <div class="media-body p-2 mt-3">
                            <h3 class="heading">Tes Bahasa Akademik</h3>
                            <p>
                                Tes Akademik Bahasa Inggris,
                                Tes Akademik Bahasa Arab,
                                mencakup tes (TOEFL, IELTS, TOAFL),
                                Jadwal tes dan prosedur pendaftaran.

                            </p>
                        </div>
                    </div>    
                </div>
                <div class="col-md-3 d-flex services align-self-stretch py-5 px-4 ftco-animate bg-primary">
                    <div class="media block-6 d-block text-center">
                        <div class="icon d-flex justify-content-center align-items-center">
                            <span class="flaticon-books"></span>
                        </div>
                        <div class="media-body p-2 mt-3">
                            <h3 class="heading">Buku & Perpustakaan</h3>
                            <p>
                                English Daily (Inggris),
                                Maharah al-Kalam (Arab),
                                Akses ke jurnal daring dan bahan pembelajaran bahasa.

                            </p>
                        </div>
                    </div>      
                </div>
                <div class="col-md-3 d-flex services align-self-stretch py-5 px-4 ftco-animate bg-darken">
                    <div class="media block-6 d-block text-center">
                        <div class="icon d-flex justify-content-center align-items-center">
                            <span class="flaticon-diploma"></span>
                        </div>
                        <div class="media-body p-2 mt-3">
                            <h3 class="heading">Fasilitas</h3>
                            <p>
                                Laboratorium bahasa
                                Ruang belajar mandiri
                                Ruang multimedia

                            </p>
                        </div>
                    </div>      
                </div>
            </div>
        </div>
    </section>
    
    <section class="ftco-section ftco-no-pt ftc-no-pb">
        <div class="container">
            <div class="row d-flex">
                <div class="col-md-5 order-md-last wrap-about wrap-about d-flex align-items-stretch">
                    <div class="img" style="background-image: url(front/fox/images/hedo2.png); border"></div>
                </div>
                <div class="col-md-7 wrap-about py-3 pr-md-4 ftco-animate">
                    <h2 class="mb-4">Layanan PPB</h2>
                    <p>Kami hadir untuk mendukung pengembangan kemampuan bahasa dan kebahasaan bagi seluruh civitas akademika serta masyarakat umum. 
                        Dengan layanan yang komprehensif, kami berkomitmen membantu meningkatkan kompetensi bahasa, baik untuk kebutuhan akademik, 
                        profesional, maupun personal. Berbagai program kami dirancang untuk memenuhi kebutuhan pembelajaran, pengujian, riset, hingga kolaborasi internasional.</p>
                    <div class="row mt-5">
                        <div class="col-lg-6">
                            <div class="services-2 d-flex">
                                <div class="icon mt-2 d-flex justify-content-center align-items-center"><span class="flaticon-security"></span></div>
                                <div class="text pl-3">
                                    <h3>Sertifikasi Bahasa</h3>
                                    <p>Menyediakan layanan uji sertifikasi kompetensi bahasa bagi mahasiswa, dosen, staf, dan masyarakat umum</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="services-2 d-flex">
                                <div class="icon mt-2 d-flex justify-content-center align-items-center"><span class="flaticon-reading"></span></div>
                                <div class="text pl-3">
                                    <h3>Penguatan Bahasa Akademik</h3>
                                    <p>Meningkatkan kemampuan civitas akademika dalam menggunakan bahasa asing</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="services-2 d-flex">
                                <div class="icon mt-2 d-flex justify-content-center align-items-center"><span class="flaticon-diploma"></span></div>
                                <div class="text pl-3">
                                    <h3>Kursus Bahasa</h3>
                                    <p>Kursus bahasa Inggris dan Arab bagi mahasiswa, dosen, staf, dan masyarakat umum</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="services-2 d-flex">
                                <div class="icon mt-2 d-flex justify-content-center align-items-center"><span class="flaticon-education"></span></div>
                                <div class="text pl-3">
                                    <h3>Kerjasama Internasional</h3>
                                    <p>Program kemitraan dengan institusi bahasa nasional dan internasional.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="services-2 d-flex">
                                <div class="icon mt-2 d-flex justify-content-center align-items-center"><span class="flaticon-jigsaw"></span></div>
                                <div class="text pl-3">
                                    <h3>Layanan Terjemah</h3>
                                    <p>Layanan terjemahan dokumen akademik dan non-akademik Indonesia, Inggris, Arab</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="services-2 d-flex">
                                <div class="icon mt-2 d-flex justify-content-center align-items-center"><span class="flaticon-kids"></span></div>
                                <div class="text pl-3">
                                    <h3>Riset Kebahasaan</h3>
                                    <p>Program penelitian dalam bidang linguistik, sastra, dan pengajaran bahasa.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    
    
    <section class="ftco-section ftco-counter img" id="section-counter" style="background-image: url({{ asset('front/fox/images/bg_3.jpg')}});" data-stellar-background-ratio="0.5">
        <div class="container">
            	
            <div class="row d-md-flex align-items-center justify-content-center">
                <div class="col-lg-12">
                    <div class="row d-md-flex align-items-center">
                        <div class="col-md d-flex justify-content-center counter-wrap ftco-animate">
                            <div class="block-18">
                                <div class="icon"><span class="flaticon-doctor"></span></div>
                                <div class="text">
                                    <strong class="number" data-number="12">0</strong>
                                    <span>Pengajar</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md d-flex justify-content-center counter-wrap ftco-animate">
                            <div class="block-18">
                                <div class="icon"><span class="flaticon-doctor"></span></div>
                                <div class="text">
                                    <strong class="number" data-number="300">0</strong>
                                    <span>Anggota</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md d-flex justify-content-center counter-wrap ftco-animate">
                            <div class="block-18">
                                <div class="icon"><span class="flaticon-doctor"></span></div>
                                <div class="text">
                                    <strong class="number" data-number="1200">0</strong>
                                    <span>Alumni</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md d-flex justify-content-center counter-wrap ftco-animate">
                            <div class="block-18">
                                <div class="icon"><span class="flaticon-doctor"></span></div>
                                <div class="text">
                                    <strong class="number" data-number="3">0</strong>
                                    <span>Kelas</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="ftco-section bg-light">
        <div class="container">
            <div class="row justify-content-center mb-5 pb-2">
                <div class="col-md-8 text-center heading-section ftco-animate">
                    <h2 class="mb-4"><span>Info</span> Terkini</h2>
                </div>
            </div>	
            <div class="row">
            @foreach($beritas as $berita)
            <div class="col-md-6 col-lg-4 ftco-animate">
                <div class="blog-entry">
                    <a href="blog-single.html" class="block-20 d-flex align-items-end" style="background-image: url({{ asset('storage/'.$berita->foto) }});">
                        <div class="meta-date text-center p-2">
                            <span class="day">{{ \Carbon\Carbon::parse($berita->created_at)->translatedFormat('d') }}</span>
                            <span class="mos">{{ \Carbon\Carbon::parse($berita->created_at)->translatedFormat('F') }}</span>
                            <span class="yr">{{ \Carbon\Carbon::parse($berita->created_at)->translatedFormat('Y') }}</span>
                        </div>
                    </a>
                    <div class="text bg-white p-4">
                        <h3 class="heading"><a href="#">{{ $berita->judul_berita }}</a></h3>
                        <p>{{Str::limit($berita->isi_berita,100) }}</p>
                        <div class="d-flex align-items-center mt-4">
                            <p class="mb-0"><a href="#" class="btn btn-primary">Baca <span class="ion-ios-arrow-round-forward"></span></a></p>
                            <p class="ml-auto mb-0">
                                <a href="#" class="mr-2">By {{ $berita->penulis}}</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        </div>
    </section>

  

    
@endsection