@extends('layouts.app')
@section('content')
<section class="mb-6 rounded-[2rem] bg-gradient-to-br from-slate-950 to-teal-900 p-8 text-white shadow-soft">
    <span class="badge">Direktori Warga</span>
    <h2 class="mt-5 text-4xl font-black">Data Warga</h2>
    <p class="mt-3 text-slate-300">Akses warga hanya menampilkan nama dan alamat.</p>
</section>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
    @foreach($residents as $resident)
    <div class="card p-5">
        <h3 class="font-black text-slate-950"><i class="fa-solid fa-user mr-2 text-teal-600"></i>{{ $resident->name }}</h3>
        <p class="mt-2 text-slate-500"><i class="fa-solid fa-location-dot mr-2 text-emerald-600"></i>{{ $resident->address }}</p>
    </div>
    @endforeach
</div>
@endsection