147 lines
9.4 KiB
PHP
147 lines
9.4 KiB
PHP
@extends('layouts.appNew')
|
|
@section('title',@$title)
|
|
@section('css')
|
|
@endsection
|
|
@section('content')
|
|
<section id="directory" class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h3 class="text-3xl font-extrabold text-slate-900 mb-4">Direktori Sekolah Adiwiyata</h3>
|
|
<p class="text-slate-500 max-w-2xl mx-auto">Cari dan filter sekolah-sekolah di Jakarta yang telah berhasil meraih predikat Adiwiyata.</p>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="bg-slate-50 p-6 rounded-3xl mb-10 flex flex-col lg:flex-row gap-4 items-center">
|
|
<div class="flex-1 w-full relative">
|
|
<span class="absolute left-4 top-1/2 -translate-y-1/2 material-symbols-outlined text-slate-400">search</span>
|
|
<input type="text" id="schoolSearch" placeholder="Cari nama sekolah (contoh: SMAN 62)..." class="w-full pl-12 pr-4 py-3.5 bg-white border border-slate-200 rounded-2xl focus:ring-2 focus:ring-emerald-500 outline-none">
|
|
</div>
|
|
<div class="flex gap-4 w-full lg:w-auto">
|
|
<select id="filterCity" class="flex-1 lg:w-48 px-4 py-3.5 bg-white border border-slate-200 rounded-2xl outline-none">
|
|
<option value="All">Semua Kota</option>
|
|
<option value="Jakarta Timur">Jakarta Timur</option>
|
|
<option value="Jakarta Pusat">Jakarta Pusat</option>
|
|
<option value="Jakarta Selatan">Jakarta Selatan</option>
|
|
<option value="Jakarta Utara">Jakarta Utara</option>
|
|
<option value="Jakarta Barat">Jakarta Barat</option>
|
|
</select>
|
|
<select id="filterLevel" class="flex-1 lg:w-48 px-4 py-3.5 bg-white border border-slate-200 rounded-2xl outline-none">
|
|
<option value="All">Semua Jenjang</option>
|
|
<option value="Provinsi">Provinsi</option>
|
|
<option value="Nasional">Nasional</option>
|
|
<option value="Mandiri">Mandiri</option>
|
|
<option value="Kota">Kota</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- School Grid -->
|
|
<div id="schoolGrid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-amber-100 text-amber-700">
|
|
Nasional
|
|
</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 62 JAKARTA</h4>
|
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Timur
|
|
</p>
|
|
</div>
|
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-100 text-blue-700">
|
|
Provinsi
|
|
</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 9 JAKARTA</h4>
|
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Timur
|
|
</p>
|
|
</div>
|
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-emerald-100 text-emerald-700">
|
|
Kota
|
|
</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SDS Merpati</h4>
|
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Pusat
|
|
</p>
|
|
</div>
|
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-amber-100 text-amber-700">
|
|
Nasional
|
|
</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg text-slate-800 mb-1">MAN 4 JAKARTA</h4>
|
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Selatan
|
|
</p>
|
|
</div>
|
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-indigo-100 text-indigo-700">
|
|
Mandiri
|
|
</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SDN Rambutan 03 Pagi</h4>
|
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Timur
|
|
</p>
|
|
</div>
|
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-100 text-blue-700">
|
|
Provinsi
|
|
</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SMPN 23 JAKARTA</h4>
|
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Utara
|
|
</p>
|
|
</div>
|
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-amber-100 text-amber-700">
|
|
Nasional
|
|
</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 42 JAKARTA</h4>
|
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Timur
|
|
</p>
|
|
</div>
|
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-emerald-100 text-emerald-700">
|
|
Kota
|
|
</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SDN 01 Grogol</h4>
|
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Barat
|
|
</p>
|
|
</div>
|
|
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-100 text-blue-700">
|
|
Provinsi
|
|
</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 1 JAKARTA</h4>
|
|
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
|
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Pusat
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-12 text-center">
|
|
<button class="px-8 py-3 bg-slate-100 text-slate-600 rounded-full font-bold hover:bg-slate-200 transition-colors">Tampilkan Lebih Banyak</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endsection
|
|
@section('js')
|
|
@endsection |