omg-wtf-ai/resources/views/tools/show.blade.php

<x-layouts.app :title="$title" :description="$description" :canonical="$canonical" :image="$image ?? null">
    @push('jsonld')
        <script type="application/ld+json">
            {!! json_encode([
                '@@context' => 'https://schema.org',
                '@type' => 'SoftwareApplication',
                'name' => $tool->name,
                'description' => $description,
                'url' => $tool->url,
                ...($tool->logo_url ? ['image' => $tool->logo_url] : []),
                'applicationCategory' => $tool->category_label,
                ...($tool->offer_data ? ['offers' => ['@type' => 'Offer', ...$tool->offer_data]] : []),
            ]) !!}
        </script>
    @endpush

    <p class="text-sm text-neutral-500">
        <a href="{{ route('tools.index') }}" class="hover:underline">AI Tools</a>
        <span aria-hidden="true">/</span>
        <a href="{{ route('tools.category', $tool->category) }}" class="hover:underline">{{ $tool->category_label }}</a>
    </p>

    <div class="mt-4 flex items-start gap-4">
        @if ($tool->logo_url)
            <img src="{{ $tool->logo_url }}" alt="{{ $tool->name }} logo" class="h-16 w-16 rounded-lg object-cover">
        @endif
        <div>
            <h1 class="text-3xl font-bold tracking-tight">{{ $tool->name }}</h1>
            <p class="mt-1 text-sm text-neutral-500">
                {{ $tool->category_label }}@if ($tool->subcategory) &middot; {{ $tool->subcategory }} @endif
                @if ($tool->pricing) &middot; {{ $tool->pricing }} @endif
            </p>
        </div>
    </div>

    <a
        href="{{ route('tools.visit', $tool) }}"
        target="_blank"
        rel="nofollow noopener sponsored"
        class="mt-6 inline-block rounded-lg bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-neutral-700"
    >
        Visit {{ $tool->name }} &rarr;
    </a>

    <p class="mt-8 text-neutral-700">{{ $tool->description }}</p>

    @if (! empty($tool->features))
        <div class="mt-8">
            <h2 class="text-lg font-semibold">Features</h2>
            <ul class="mt-3 list-inside list-disc space-y-1 text-neutral-700">
                @foreach ($tool->features as $feature)
                    <li>{{ $feature }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (! empty($tool->tags))
        <div class="mt-8 flex flex-wrap gap-2">
            @foreach ($tool->tags as $tag)
                <span class="rounded-full bg-neutral-100 px-3 py-1 text-sm text-neutral-700">#{{ $tag }}</span>
            @endforeach
        </div>
    @endif

    @if ($related->isNotEmpty())
        <div class="mt-12 border-t border-neutral-200 pt-8">
            <h2 class="text-lg font-semibold">More {{ $tool->category_label }} tools</h2>
            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                @foreach ($related as $relatedTool)
                    <x-tool-card :tool="$relatedTool" />
                @endforeach
            </div>
        </div>
    @endif
</x-layouts.app>