Here are all five 3D arena Blade snippets, ready to copy–paste into a text file. Each assumes you’ve saved the new 3D PNGs into public/img/ with the filenames shown in the comments.

1) CFL Speedway – 3D Indy Oval
Save as resources/views/arena/race-3d.blade.php (or merge into your existing race view).

text
{{-- Background image: public/img/cfl-speedway-indy-oval.png --}}

@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto py-8 text-white">
    <h1 class="text-xl font-bold mb-4">
        CFL Speedway – NNT Indy Series (3D)
    </h1>

    <div class="relative bg-slate-950 rounded-xl p-4 mb-4 overflow-hidden">
        {{-- 3D Indy track background --}}
        <div class="absolute inset-0 bg-center bg-cover"
             style="background-image: url('{{ asset('img/cfl-speedway-indy-oval.png') }}');">
        </div>

        {{-- HUD text --}}
        <div class="relative z-10 text-xs text-gray-200 mb-2 bg-slate-900/70 px-3 py-1 rounded inline-flex items-center gap-3">
            <span>CFL Speedway – NNT Indy Series</span>
            <span class="text-emerald-400">{{ $homeTeam->name }} (Apex)</span>
            <span class="text-amber-300">{{ $awayTeam->name }} (Vanguard)</span>
            <span class="text-gray-400">
                Showing {{ $homePlayers->count() }} vs {{ $awayPlayers->count() }} cars
            </span>
        </div>

        {{-- Player labels mapped loosely to car positions on the 3D oval --}}
        @foreach($homePlayers as $index => $player)
            @php
                // Approximate positions for Apex cars
                $positions = [
                    ['top' => '62%', 'left' => '30%'],
                    ['top' => '45%', 'left' => '72%'],
                    ['top' => '30%', 'left' => '18%'],
                ];
                $pos = $positions[$index] ?? $positions[array_key_first($positions)];
            @endphp
            <div class="absolute z-10 text-emerald-200 text-xs font-semibold px-2 py-1 rounded-full bg-emerald-900/80 border border-emerald-400/80 shadow"
                 style="top: {{ $pos['top'] }}; left: {{ $pos['left'] }};">
                P{{ $index + 1 }} – {{ $player->first_name }}
            </div>
        @endforeach

        @foreach($awayPlayers as $index => $player)
            @php
                // Approximate positions for Vanguard cars
                $positions = [
                    ['top' => '70%', 'left' => '55%'],
                    ['top' => '40%', 'left' => '50%'],
                    ['top' => '25%', 'left' => '80%'],
                ];
                $pos = $positions[$index] ?? $positions[array_key_first($positions)];
            @endphp
            <div class="absolute z-10 text-amber-200 text-xs font-semibold px-2 py-1 rounded-full bg-slate-900/90 border border-amber-400/80 shadow"
                 style="top: {{ $pos['top'] }}; left: {{ $pos['left'] }};">
                P{{ $index + 1 + $homePlayers->count() }} – {{ $player->first_name }}
            </div>
        @endforeach
    </div>

    <x-arena.players-strip
        :homeTeam="$homeTeam"
        :awayTeam="$awayTeam"
        :homePlayers="$homePlayers"
        :awayPlayers="$awayPlayers"
    />
</div>
@endsection
2) CFL Championship Course – 3D Golf
Save as resources/views/arena/golf-3d.blade.php.

text
{{-- Background image: public/img/cfl-golf-course-3d-gamified.png --}}

@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto py-8 text-white">
    <h1 class="text-xl font-bold mb-4">
        CFL Championship Course – Golf (3D)
    </h1>

    <div class="relative bg-slate-950 rounded-xl p-4 mb-4 overflow-hidden">
        {{-- 3D golf course background --}}
        <div class="absolute inset-0 bg-center bg-cover"
             style="background-image: url('{{ asset('img/cfl-golf-course-3d-gamified.png') }}');">
        </div>

        <div class="relative z-10 text-xs text-gray-200 mb-2 bg-slate-900/70 px-3 py-1 rounded inline-flex items-center gap-3">
            <span>CFL Championship Course – Live Round</span>
            <span class="text-emerald-400">{{ $homeTeam->name }}</span>
            <span class="text-amber-300">{{ $awayTeam->name }}</span>
            <span class="text-gray-400">
                {{ $homePlayers->count() }} vs {{ $awayPlayers->count() }} golfers
            </span>
        </div>

        {{-- Apex players on later holes (right side of map) --}}
        @foreach($homePlayers as $index => $player)
            @php
                $positions = [
                    ['top' => '28%', 'left' => '72%'], // hole 15 area
                    ['top' => '40%', 'left' => '60%'],
                    ['top' => '52%', 'left' => '78%'],
                    ['top' => '62%', 'left' => '66%'],
                    ['top' => '70%', 'left' => '82%'],
                    ['top' => '50%', 'left' => '90%'],
                ];
                $pos = $positions[$index] ?? $positions[array_key_first($positions)];
            @endphp
            <div class="absolute z-10 text-emerald-200 text-xs font-semibold px-2 py-1 rounded-full bg-emerald-900/80 border border-emerald-400/80 shadow"
                 style="top: {{ $pos['top'] }}; left: {{ $pos['left'] }};">
                {{ $player->first_name }}
            </div>
        @endforeach

        {{-- Vanguard players on earlier holes (left / mid) --}}
        @foreach($awayPlayers as $index => $player)
            @php
                $positions = [
                    ['top' => '32%', 'left' => '24%'],
                    ['top' => '44%', 'left' => '18%'],
                    ['top' => '56%', 'left' => '30%'],
                    ['top' => '68%', 'left' => '22%'],
                    ['top' => '38%', 'left' => '40%'],
                    ['top' => '60%', 'left' => '46%'],
                ];
                $pos = $positions[$index] ?? $positions[array_key_first($positions)];
            @endphp
            <div class="absolute z-10 text-amber-200 text-xs font-semibold px-2 py-1 rounded-full bg-slate-900/90 border border-amber-400/80 shadow"
                 style="top: {{ $pos['top'] }}; left: {{ $pos['left'] }};">
                {{ $player->first_name }}
            </div>
        @endforeach
    </div>

    <x-arena.players-strip
        :homeTeam="$homeTeam"
        :awayTeam="$awayTeam"
        :homePlayers="$homePlayers"
        :awayPlayers="$awayPlayers"
    />
</div>
@endsection
3) CFL Ice Arena – 3D Hockey
Save as resources/views/arena/hockey-3d.blade.php.

text
{{-- Background image: public/img/cfl-hockey-3d-gamified.png --}}

@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto py-8 text-white">
    <h1 class="text-xl font-bold mb-4">
        CFL Ice Arena – Hockey (3D)
    </h1>

    <div class="relative bg-slate-950 rounded-xl p-4 mb-4 overflow-hidden">
        {{-- 3D ice rink background --}}
        <div class="absolute inset-0 bg-center bg-cover"
             style="background-image: url('{{ asset('img/cfl-hockey-3d-gamified.png') }}');">
        </div>

        <div class="relative z-10 text-xs text-gray-200 mb-2 bg-slate-900/70 px-3 py-1 rounded inline-flex items-center gap-3">
            <span>CFL Ice Arena – Live Match</span>
            <span class="text-emerald-400">{{ $homeTeam->name }}</span>
            <span class="text-amber-300">{{ $awayTeam->name }}</span>
            <span class="text-gray-400">
                {{ $homePlayers->count() }} vs {{ $awayPlayers->count() }} skaters
            </span>
        </div>

        {{-- Apex attacking right goal --}}
        @foreach($homePlayers as $index => $player)
            @php
                $positions = [
                    ['top' => '50%', 'left' => '58%'], // center
                    ['top' => '45%', 'left' => '64%'], // RW
                    ['top' => '55%', 'left' => '64%'], // LW
                    ['top' => '40%', 'left' => '52%'], // RD
                    ['top' => '60%', 'left' => '52%'], // LD
                    ['top' => '50%', 'left' => '46%'], // goalie
                ];
                $pos = $positions[$index] ?? $positions[array_key_first($positions)];
            @endphp
            <div class="absolute z-10 text-emerald-200 text-xs font-semibold px-2 py-1 rounded-full bg-emerald-900/80 border border-emerald-400/80 shadow"
                 style="top: {{ $pos['top'] }}; left: {{ $pos['left'] }};">
                {{ $player->first_name }}
            </div>
        @endforeach

        {{-- Vanguard defending right goal / attacking left --}}
        @foreach($awayPlayers as $index => $player)
            @php
                $positions = [
                    ['top' => '50%', 'left' => '42%'],
                    ['top' => '45%', 'left' => '36%'],
                    ['top' => '55%', 'left' => '36%'],
                    ['top' => '40%', 'left' => '48%'],
                    ['top' => '60%', 'left' => '48%'],
                    ['top' => '50%', 'left' => '54%'],
                ];
                $pos = $positions[$index] ?? $positions[array_key_first($positions)];
            @endphp
            <div class="absolute z-10 text-amber-200 text-xs font-semibold px-2 py-1 rounded-full bg-slate-900/90 border border-amber-400/80 shadow"
                 style="top: {{ $pos['top'] }}; left: {{ $pos['left'] }};">
                 {{ $player->first_name }}
            </div>
        @endforeach
    </div>

    <x-arena.players-strip
        :homeTeam="$homeTeam"
        :awayTeam="$awayTeam"
        :homePlayers="$homePlayers"
        :awayPlayers="$awayPlayers"
    />
</div>
@endsection
4) CFL Hoops Arena – 3D Basketball
Save as resources/views/arena/basketball-3d.blade.php.

text
{{-- Background image: public/img/cfl-basketball-3d-gamified.png --}}

@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto py-8 text-white">
    <h1 class="text-xl font-bold mb-4">
        CFL Hoops Arena – Basketball (3D)
    </h1>

    <div class="relative bg-slate-950 rounded-xl p-4 mb-4 overflow-hidden">
        {{-- 3D basketball court background --}}
        <div class="absolute inset-0 bg-center bg-cover"
             style="background-image: url('{{ asset('img/cfl-basketball-3d-gamified.png') }}');">
        </div>

        <div class="relative z-10 text-xs text-gray-200 mb-2 bg-slate-900/70 px-3 py-1 rounded inline-flex items-center gap-3">
            <span>CFL Hoops Arena – Live Game</span>
            <span class="text-emerald-400">{{ $homeTeam->name }}</span>
            <span class="text-amber-300">{{ $awayTeam->name }}</span>
            <span class="text-gray-400">
                {{ $homePlayers->count() }} vs {{ $awayPlayers->count() }} players
            </span>
        </div>

        {{-- Apex offense attacking right basket --}}
        @foreach($homePlayers as $index => $player)
            @php
                $positions = [
                    ['top' => '58%', 'left' => '58%'], // PG
                    ['top' => '50%', 'left' => '65%'], // SG
                    ['top' => '66%', 'left' => '65%'], // SF
                    ['top' => '50%', 'left' => '52%'], // PF
                    ['top' => '66%', 'left' => '52%'], // C
                    ['top' => '74%', 'left' => '60%'], // bench / extra
                ];
                $pos = $positions[$index] ?? $positions[array_key_first($positions)];
            @endphp
            <div class="absolute z-10 text-emerald-200 text-xs font-semibold px-2 py-1 rounded-full bg-emerald-900/80 border border-emerald-400/80 shadow"
                 style="top: {{ $pos['top'] }}; left: {{ $pos['left'] }};">
                {{ $player->first_name }}
            </div>
        @endforeach

        {{-- Vanguard defending / on offense left side --}}
        @foreach($awayPlayers as $index => $player)
            @php
                $positions = [
                    ['top' => '58%', 'left' => '42%'],
                    ['top' => '50%', 'left' => '35%'],
                    ['top' => '66%', 'left' => '35%'],
                    ['top' => '50%', 'left' => '48%'],
                    ['top' => '66%', 'left' => '48%'],
                    ['top' => '74%', 'left' => '40%'],
                ];
                $pos = $positions[$index] ?? $positions[array_key_first($positions)];
            @endphp
            <div class="absolute z-10 text-amber-200 text-xs font-semibold px-2 py-1 rounded-full bg-slate-900/90 border border-amber-400/80 shadow"
                 style="top: {{ $pos['top'] }}; left: {{ $pos['left'] }};">
                {{ $player->first_name }}
            </div>
        @endforeach
    </div>

    <x-arena.players-strip
        :homeTeam="$homeTeam"
        :awayTeam="$awayTeam"
        :homePlayers="$homePlayers"
        :awayPlayers="$awayPlayers"
    />
</div>
@endsection
5) CFL Ballpark – 3D Baseball
Save as resources/views/arena/baseball-3d.blade.php.

text
{{-- Background image: public/img/cfl-baseball-3d-gamified.png --}}

@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto py-8 text-white">
    <h1 class="text-xl font-bold mb-4">
        CFL Ballpark – Baseball (3D)
    </h1>

    <div class="relative bg-slate-950 rounded-xl p-4 mb-4 overflow-hidden">
        {{-- 3D baseball field background --}}
        <div class="absolute inset-0 bg-center bg-cover"
             style="background-image: url('{{ asset('img/cfl-baseball-3d-gamified.png') }}');">
        </div>

        <div class="relative z-10 text-xs text-gray-200 mb-2 bg-slate-900/70 px-3 py-1 rounded inline-flex items-center gap-3">
            <span>CFL Ballpark – Live Game</span>
            <span class="text-emerald-400">{{ $homeTeam->name }} (fielding)</span>
            <span class="text-amber-300">{{ $awayTeam->name }} (batting)</span>
            <span class="text-gray-400">
                {{ $homePlayers->count() }} vs {{ $awayPlayers->count() }} players
            </span>
        </div>

        {{-- Apex fielders --}}
        @foreach($homePlayers as $index => $player)
            @php
                $positions = [
                    ['top' => '58%', 'left' => '52%'], // pitcher
                    ['top' => '70%', 'left' => '52%'], // catcher
                    ['top' => '62%', 'left' => '64%'], // 1B
                    ['top' => '48%', 'left' => '52%'], // 2B
                    ['top' => '62%', 'left' => '40%'], // 3B
                    ['top' => '32%', 'left' => '52%'], // CF
                ];
                $pos = $positions[$index] ?? $positions[array_key_first($positions)];
            @endphp
            <div class="absolute z-10 text-emerald-200 text-xs font-semibold px-2 py-1 rounded-full bg-emerald-900/80 border border-emerald-400/80 shadow"
                 style="top: {{ $pos['top'] }}; left: {{ $pos['left'] }};">
                {{ $player->first_name }}
            </div>
        @endforeach

        {{-- Vanguard runners / batter --}}
        @foreach($awayPlayers as $index => $player)
            @php
                $basePath = [
                    ['top' => '74%', 'left' => '52%'], // batter at home
                    ['top' => '66%', 'left' => '68%'], // 1B
                    ['top' => '50%', 'left' => '68%'], // between 1st & 2nd
                    ['top' => '40%', 'left' => '52%'], // 2B
                    ['top' => '50%', 'left' => '36%'], // between 2nd & 3rd
                    ['top' => '66%', 'left' => '36%'], // 3B
                ];
                $pos = $basePath[$index] ?? $basePath[array_key_first($basePath)];
            @endphp
            <div class="absolute z-10 text-amber-200 text-xs font-semibold px-2 py-1 rounded-full bg-slate-900/90 border border-amber-400/80 shadow"
                 style="top: {{ $pos['top'] }}; left: {{ $pos['left'] }};">
                {{ $player->first_name }}
            </div>
        @endforeach
    </div>

    <x-arena.players-strip
        :homeTeam="$homeTeam"
        :awayTeam="$awayTeam"
        :homePlayers="$homePlayers"
        :awayPlayers="$awayPlayers"
    />
</div>
@endsection