detall post - pagina /gallery al projecte laravel12.test

C:\projectes\LARAVEL\laravel12\app\Http\Controllers\GalleryController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;
use App\Models\Category;
use App\Models\Etiqueta;

class GalleryController extends Controller
{
    public function index(Request $request)
{
    $category = Category::where('name', 'people')->first();

    if (!$category) {
        return view('gallery.index', ['posts' => [], 'etiquetas' => []]);
    }

    $query = Post::where('category_id', $category->id)->with('etiquetas');

    if ($request->has('etiqueta_id')) {
        $etiquetaId = $request->input('etiqueta_id');
        $query->whereHas('etiquetas', function ($q) use ($etiquetaId) {
            $q->where('etiquetas.id', $etiquetaId);
        });
    }

    if ($request->has('title')) {
        $title = $request->input('title');
        $query->where('title', 'like', '%' . $title . '%');
    }

    $posts = $query->get();

    // Recuperar las etiquetas de la categoría 'people' y ordenarlas alfabéticamente
    $etiquetas = Etiqueta::whereHas('posts', function ($query) use ($category) {
        $query->where('category_id', $category->id);
    })->orderBy('name', 'asc')->get();

    return view('gallery.index', compact('posts', 'etiquetas'));
}


    public function detalle($title)
    {
        $images = [];
        for ($i = 1; $i <= 12; $i++) {
            $images[] = asset("img/people/{$title}/{$i}.jpg");
        }

        return view('gallery.detalle', compact('title', 'images'));
    }
}

C:\projectes\LARAVEL\laravel12\resources\views\gallery\index.blade.php

@extends('layouts.prova')
@section('ruta', '/gallery')
@section('title', 'people')
@section('descripcio', 'filtra per etiquetes')
@section('content')

    <section class="text-gray-600 body-font overflow-hidden">
        <div class="container px-5 mx-auto">

            <!-- Div con background image -->
            <div class="w-full mx-auto text-center bg-cover bg-center mb-8"
                style="background-image: url('/path/to/your/image.jpg');">
                <h1
                    class="mb-2 text-4xl font-extrabold leading-none tracking-normal text-gray-900 md:text-6xl md:tracking-tight text-center">
                    @yield('ruta')<span
                        class="block w-full py-2 text-transparent bg-clip-text leading-12 bg-gradient-to-r from-green-400 to-purple-500 lg:inline"> @yield('title')</span>
                </h1>
               
            </div>
 <h2 class="text-xl text-center mb-4 font-bold">@yield('descripcio')</h2>
 
 <div class="flex justify-center mb-4">
    <ul class="flex flex-wrap space-x-6">
 <a href="/gallery"
                   class="uppercase  text-gray-400 hover:text-blue-600">
                    totes
                </a>
        @foreach($etiquetas as $etiqueta)
            <li>
                <a href="{{ route('gallery.index', ['etiqueta_id' => $etiqueta->id]) }}"
                   class="uppercase  text-gray-400 hover:text-blue-600">
                    {{ $etiqueta->name }}
                </a>
            </li>
        @endforeach
    </ul>
</div>
 <!-- Formulario de búsqueda -->
            <form method="GET" action="{{ route('gallery.index') }}" class="mb-8">
                <div class="flex items-center border-b border-orange-500 py-2">
                   <input type="text" name="title" placeholder="Search by title" value="{{ request('title') }}"
                        class="appearance-none border-none w-full text-teal-500 mr-3 py-1 px-2 leading-tight focus:outline-none">
                    <button type="submit"
                        class="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded">
                        Buscar
                    </button>
                </div>
            </form>
            
            </h1>
            <div class="masonry">
                @foreach ($posts as $post)
                    <div class="masonry-item bg-white shadow-md rounded-lg overflow-hidden">
                        <img src="{{ asset('storage/' . $post->img) }}" alt="{{ $post->title }}"
                            class="w-full h-100 object-cover">
                        <div class="p-4">
                            <a href="{{ route('gallery.detalle', ['title' => $post->title]) }}">
                                <h2 class="text-xl font-bold">{{ $post->title }}</h2>

                                <div class="flex space-x-4 mt-4">
                                    @if ($post->url)
                                        <a href="{{ $post->url }}" target="_blank" class="text-blue-500">
                                            <i class="fas fa-link"></i>
                                        </a>
                                    @endif
                                    @if ($post->ins)
                                        <a href="{{ $post->ins }}" target="_blank" class="text-pink-500">
                                            <i class="fab fa-instagram"></i>
                                        </a>
                                    @endif
                                    @if ($post->face)
                                        <a href="{{ $post->face }}" target="_blank" class="text-blue-700">
                                            <i class="fab fa-facebook"></i>
                                        </a>
                                    @endif
                                    @if ($post->youtube)
                                        <a data-fancybox="gallery"href="{{ $post->youtube }}" target="_blank"
                                            class="text-red-500">
                                            <i class="fab fa-youtube"></i>
                                        </a>
                                    @endif
                                </div>

                                <p class="mt-2">{{ $post->excerpt }}</p>
                                <div class="mt-4">
                                    @foreach ($post->etiquetas as $etiqueta)
                                        <a href="{{ route('gallery.index', ['etiqueta_id' => $etiqueta->id]) }}"
                                            class="inline-block bg-gray-200 text-gray-700 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">{{ $etiqueta->name }}</a>
                                    @endforeach
                                </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

    @stop

route: 

Route::get('/gallery', [GalleryController::class, 'index'])->name('gallery.index');