@extends('layouts.frontend')
@section('main-content')
    <section id="deskripsi" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="relative rounded-lg overflow-hidden mb-8">
                <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('{{asset('assets/admin/images/breadcum.jpg')}}');"></div>
                <div class="absolute inset-0 bg-gradient-to-r from-yellow-400/70 via-yellow-200/30 to-emerald-600/70"></div>
                
                <div class="relative z-10 max-w-7xl mx-auto px-4 py-5 md:py-9 flex flex-col md:flex-row md:items-center md:justify-between">
                    
                    <div>
                        <h1 class="text-2xl md:text-4xl font-bold text-white">{{$title}}</h1>
                        <p class="mt-2 text-white/85 max-w-xl">Seputar data {{$title}}</p>
                    </div>

                    <nav class="text-sm text-white/95 mt-4 md:mt-0" aria-label="Breadcrumb">
                        <ol class="list-reset flex items-center space-x-2 justify-start md:justify-end">
                            <li><a href="{{ url('/') }}" class="hover:underline text-white">Beranda</a></li>
                            <li class="text-white/60">/</li>
                            <li class="text-white font-semibold">{{$title}}</li>
                        </ol>
                    </nav>

                </div>
            </div>  
            <div class="prose max-w-none">
                @if ($description->fill_content == null)
                    <p class="text-gray-700 text-center">Tidak ada data.</p>  
                @else
                    {!! $description->fill_content !!}
                @endif
            </div>          
        </div>
    </section>

@endsection