@extends('layouts.app')

@section('content')
    {{-- Header --}}
    <section
        class="py-20 text-center bg-gradient-to-r from-blue-50 to-white dark:from-gray-800 dark:to-gray-900"
        x-data="{ show: false }"
        x-init="setTimeout(() => show = true, 100)"
    >
        <div x-show="show"
             x-transition:enter="transition ease-out duration-1000"
             x-transition:enter-start="opacity-0 translate-y-10"
             x-transition:enter-end="opacity-100 translate-y-0">
            <h1 class="text-4xl font-bold text-blue-700 dark:text-white">
                Personel
            </h1>
            <p class="mt-3 text-gray-600 dark:text-gray-300 text-sm max-w-xl mx-auto">
                Temui tim luar biasa kami yang berdedikasi penuh.
            </p>
        </div>
    </section>

    {{-- Personel List --}}
    <section
        class="py-16 bg-white dark:bg-gray-900"
        x-data="{ loaded: false }"
        x-init="setTimeout(() => loaded = true, 300)"
    >
        <div class="container px-4 mx-auto"
             x-show="loaded"
             x-transition:enter="transition ease-out duration-1000"
             x-transition:enter-start="opacity-0 translate-y-8"
             x-transition:enter-end="opacity-100 translate-y-0">
            <livewire:personel-index />
        </div>
    </section>
@endsection