@extends('layouts.app')

@section('content')
    <section class="mx-auto max-w-7xl px-4 py-16">
        <h1 class="text-3xl font-bold text-slate-900">{{ $page->title }}</h1>
        <div class="prose prose-slate mt-4 max-w-none">{!! $page->content !!}</div>

        <div class="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-6">
            @foreach ($references as $reference)
                <div class="rounded-lg overflow-hidden border border-slate-200 bg-white">
                    <div class="aspect-video bg-slate-100"></div>
                    <div class="p-4">
                        <div class="font-semibold text-slate-900">{{ $reference['title'] }}</div>
                        <div class="text-sm text-slate-500">{{ $reference['desc'] }}</div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>
@endsection