@extends('layouts.appNew')
@section('title',@$title)
@section('content')
    <div class="relative pt-30 bg-[url('{{ asset('text.jpg') }}')] bg-cover bg-black/30 bg-blend-darken">
        <div class="container mx-auto text-center w-1/2 flex flex-col gap-3">
            <h1 class="text-[50px] poppins-black">Mewujudkan <br> <span class="text-success">Sekolah Hijau & Berkelanjutan </span> di Jakarta</h1>
            <p class="text-[16px]">Mendorong transformasi budaya peduli lingkungan di satuan pendidikan DKI Jakarta melalui Gerakan Peduli dan Berbudaya Lingkungan Hidup di Sekolah (PBLHS).</p>
        </div>
        <div class="w-full grid grid-cols-4 mt-30 text-white">
            <div class="bg-black/90 flex flex-col justify-center p-10 gap-1 backdrop-blur-xs">
                <span class="poppins-bold text-[30px]">1,200+</span>
                <span class="text-success text-[14px] uppercase">Sekolah Terdaftar</span>
            </div>
            <div class="bg-black/90 flex flex-col justify-center p-10 gap-1">
                <span class="poppins-bold text-[30px]">789</span>
                <span class="text-success text-[14px] uppercase">Sekolah Adiwiyata</span>
            </div>
            <div class="bg-black/90 flex flex-col justify-center p-10 gap-1">
                <span class="poppins-bold text-[30px]">258+</span>
                <span class="text-success text-[14px] uppercase">Predikat Mandiri</span>
            </div>
            <div class="bg-black/90 flex flex-col justify-center p-10 gap-1">
                <span class="poppins-bold text-[30px]">31+</span>
                <span class="text-success text-[14px] uppercase">Provinsi Terhubung</span>
            </div>
        </div>
    </div>
@endsection