mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 18:20:48 +01:00
[feature] info pages redesign (#306)
* feat(skin-info): initial page redesign * feat(skin-info): improve page header & colors * feat(skin-info): optimize splash loading * feat(skin-info): add product schema * feat(skin-info): add faq section * feat(champ-info): full page redesign * fix: remove unused splash_color * feat(icon-info): full page redesign * feat(skin-info): convert RP to EUR in skin schema * fix: prevent error on missing element
This commit is contained in:
Rico
GitHub
@@ -1,161 +1,437 @@
|
||||
<section class="max-w-screen-xl mx-auto mt-12">
|
||||
<h3
|
||||
class="text-sm font-bold text-center text-transparent uppercase sm:text-md bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
CHAMPION DETAILS</h3>
|
||||
Champion Spotlight
|
||||
</h3>
|
||||
<h1
|
||||
class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
{{ $champion->name }}</h1>
|
||||
{{ $champion->name }}
|
||||
</h1>
|
||||
<h2
|
||||
class="text-sm font-bold text-center text-transparent uppercase md:text-lg bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
{{ $champion->title }}</h2>
|
||||
{{ $champion->title }}
|
||||
</h2>
|
||||
|
||||
<x-ads.common />
|
||||
|
||||
<x-ads.common />
|
||||
<!-- Hero Section with Splash Art -->
|
||||
<div class="container mx-auto mt-8">
|
||||
<div class="relative overflow-hidden border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80"
|
||||
style="height: 350px;">
|
||||
<div class="absolute inset-0 glow-shadow rounded-2xl"></div>
|
||||
|
||||
<div class="container flex items-center justify-center p-4 mx-auto mt-3">
|
||||
<div class="grid w-screen grid-cols-1 gap-5 md-grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
class="relative border shadow-sm aspect-video rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80 lg:col-span-2">
|
||||
<div class="absolute inset-0 aspect-video glow-shadow rounded-2xl"
|
||||
style="--splash-color: {{ $champion->splash_color }}"></div>
|
||||
<div class="relative overflow-hidden aspect-video rounded-2xl">
|
||||
<img src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(true) }}&w=880&output=webp&q=85&il"
|
||||
alt="{{ $champion->name }} Splash Art"
|
||||
class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100 hover:scale-105">
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-full h-full">
|
||||
<img src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(true) }}&w=30&h=20&fit=cover&blur=5&output=webp"
|
||||
class="absolute inset-0 object-cover w-full h-full blur-sm" alt="{{ $champion->name }} Loading" />
|
||||
<img src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(true) }}&w=800&h=350&fit=cover&output=webp&q=85"
|
||||
srcset="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(true) }}&w=480&h=350&fit=cover&output=webp&q=85 480w,
|
||||
//wsrv.nl/?url={{ $champion->getChampionImageAttribute(true) }}&w=800&h=350&fit=cover&output=webp&q=85 800w,
|
||||
//wsrv.nl/?url={{ $champion->getChampionImageAttribute(true) }}&w=1200&h=350&fit=cover&output=webp&q=90 1200w"
|
||||
sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1200px"
|
||||
class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100"
|
||||
alt="{{ $champion->name }} Splash Art" loading="eager" />
|
||||
|
||||
<div class="transition-all duration-700 border shadow-md rounded-2xl border-3 border-white/10 lg:col-start-3"
|
||||
style="--tw-shadow-color:{{ $champion->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $champion->splash_color }};">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/90 via-stone-900/40 to-transparent"></div>
|
||||
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm">
|
||||
{{ $champion->name }} Information</h4>
|
||||
|
||||
<ul class="ml-7">
|
||||
<li class="mt-8 text-base font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Full Title:</span> {{ $champion->name }}, {{ $champion->title }}.
|
||||
</li>
|
||||
<li class="text-base font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Popular Positions:</span>
|
||||
@if (isset($champion->lanes) && isset($champion->lanes->roles))
|
||||
@foreach ($champion->lanes->roles as $lane)
|
||||
<span class="inline-block lowercase capitalize-first">{{ $lane }}
|
||||
@svg(getRoleIconSvg($lane), 'w-5 h-5 inline-block')
|
||||
@if (!$loop->last)
|
||||
-
|
||||
@endif
|
||||
</span>
|
||||
@endforeach
|
||||
@else
|
||||
<span class="inline-block lowercase capitalize-first">Not Enough Data</span>
|
||||
@endif
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Blue Essence Cost:</span>
|
||||
<x-icon-lcu-be-svg class="inline-block w-4" /> {{ $champion->price_be }} BE
|
||||
</li>
|
||||
<li class="items-center font-medium leading-loose text-neutral-100 hyphens-auto text-medium"
|
||||
lang="en">
|
||||
<span class="font-bold">Riot Points Cost:</span>
|
||||
<x-icon-RiotPoints class="inline-block w-4" /> {{ $champion->price_rp }} RP
|
||||
</li>
|
||||
<li class="font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Roles:</span>
|
||||
@foreach ($champion->roles as $role)
|
||||
<span class="inline-block lowercase capitalize-first">{{ $role }}
|
||||
@if (!$loop->last)
|
||||
-
|
||||
@endif
|
||||
</span>
|
||||
@endforeach
|
||||
</li>
|
||||
<li class="font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Attack Type:</span> <span
|
||||
class="inline-block lowercase capitalize-first">{{ $champion->attack_type }}</span>
|
||||
</li>
|
||||
<li class="font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Damage Type:</span> {{ $champion->adaptive_type }}
|
||||
</li>
|
||||
<li class="font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Resource Type:</span> {{ $champion->resource_type }}
|
||||
</li>
|
||||
<li class="text-base font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Champion ID:</span> <span
|
||||
class="font-mono font-medium">{{ $champion->champion_id }}</span>
|
||||
</li>
|
||||
<li class="font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Release Date:</span> {{ $champion->release_date }}
|
||||
</li>
|
||||
<li class="font-medium leading-loose text-neutral-100 hyphens-auto" lang="en">
|
||||
<span class="font-bold">Release Patch:</span> Patch {{ $champion->release_patch }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="transition-all duration-700 border shadow-md rounded-2xl border-3 border-white/10 shadow-stone-800/80 hover:shadow-orange-500/20"
|
||||
style="--tw-shadow-color:{{ $champion->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $champion->splash_color }};">
|
||||
<div class="p-4">
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
|
||||
{{ $champion->name }} Streamers</h4>
|
||||
<p class="text-neutral-100/75 hyphens-auto mt-2.5 leading-loose text-center text-sm" lang="en">
|
||||
A list of streamers who play {{ $champion->name }} and are atleast Diamond 2 or higher.
|
||||
</p>
|
||||
<div class="grid grid-cols-1 gap-4 mt-2.5 lg:grid-cols-2">
|
||||
@foreach ($streamers as $streamer)
|
||||
<div class="flex justify-center items -center">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<a href="{{ $streamer->streamer_url }}" target="_blank" rel="noopener noreferrer"
|
||||
class="text-center text-neutral-100 text-sm mt-1.5 items-center drop-shadow-lg text-shadow-{{ strtolower($streamer->platform) }}">
|
||||
{{ $streamer->displayname }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
<div class="absolute inset-x-0 bottom-0 z-20 flex items-end justify-between w-full p-4">
|
||||
<div>
|
||||
<h3 class="mb-1 text-2xl font-bold text-white drop-shadow-lg">{{ $champion->name }}</h3>
|
||||
<p class="mb-2 text-sm font-medium text-orange-300">{{ $champion->title }}</p>
|
||||
<a href="{{ $champion->getChampionImageAttribute(true) }}" rel="noopener" target="_blank"
|
||||
class="inline-flex items-center px-3 py-1 text-sm font-bold text-white transition bg-orange-500 rounded-lg bg-opacity-80 hover:bg-opacity-100">
|
||||
<span>View Full Splash Art</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transition-all duration-700 border shadow-md rounded-2xl border-3 border-white/10 shadow-stone-800/80 lg:col-span-2 hover:shadow-orange-500/20"
|
||||
style="--tw-shadow-color:{{ $champion->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $champion->splash_color }};">
|
||||
<div class="p-4">
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
|
||||
{{ $champion->name }} Skins ({{ count($champion->skins) }}) </h4>
|
||||
<div id="skinsElement" class="overflow-x-scroll mt-2.5">
|
||||
<div class="grid grid-flow-col grid-rows-2 w-max gap-4 mb-2.5">
|
||||
@foreach ($champion->skins as $key => $skin)
|
||||
<div class="flex flex-col group">
|
||||
<a href="/skin/{{ $skin->slug }}">
|
||||
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=450&output=webp&q=70&il"
|
||||
alt="{{ $champion->name }} {{ $skin->name }} Splash Art"
|
||||
@if ($key < 6) loading="eager" @else loading="lazy" @endif
|
||||
class="inline-block h-36 object-cover rounded-2xl shadow-md border border-3 border-white/10 hover:shadow-orange-500/20 transition-all duration-700 mr-2.5">
|
||||
</a>
|
||||
<div>
|
||||
<p
|
||||
class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
|
||||
<a href="/skin/{{ $skin->slug }}"
|
||||
class="hover:text-orange-400 group-hover:text-orange-400">
|
||||
{{ $skin->skin_name }}
|
||||
<x-iconsax-bul-arrow-right class="inline-block w-5" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<div class="px-3 py-2 border rounded-lg bg-stone-900/80 border-orange-500/40">
|
||||
<div class="flex items-center space-x-2">
|
||||
@if (isset($champion->lanes) && isset($champion->lanes->roles))
|
||||
@foreach ($champion->lanes->roles as $lane)
|
||||
<span class="flex items-center text-white">
|
||||
@svg(getRoleIconSvg($lane), 'w-5 h-5 inline-block mr-1')
|
||||
<span class="text-sm capitalize-first">{{ $lane }}</span>
|
||||
</span>
|
||||
@endforeach
|
||||
@else
|
||||
<span class="text-sm text-white">Not Enough Data</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="transition-all duration-700 border shadow-md lg:col-span-3 rounded-2xl border-3 border-white/10 shadow-stone-800/80 hover:shadow-orange-500/20"
|
||||
style="--tw-shadow-color:{{ $champion->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $champion->splash_color }};">
|
||||
<div class="p-4">
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
|
||||
{{ $champion->name }} Lore</h4>
|
||||
<p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose w-9/12 mx-auto"
|
||||
lang="en">
|
||||
{{ $champion->lore }}
|
||||
</p>
|
||||
<article class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
|
||||
<h2
|
||||
class="mb-6 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
All About {{ $champion->name }}
|
||||
</h2>
|
||||
|
||||
<div class="space-y-5 text-lg leading-relaxed text-neutral-100">
|
||||
<div class="grid grid-cols-1 gap-6 mb-6 md:grid-cols-4">
|
||||
<div class="md:col-span-3">
|
||||
<h3 class="mb-2 text-xl font-bold text-orange-400">Champion Overview</h3>
|
||||
<p>
|
||||
<strong>{{ $champion->name }}</strong>, {{ $champion->title }}, is a powerful
|
||||
{{ strtolower(implode('/', $champion->roles)) }} champion in League of Legends who is
|
||||
mostly played
|
||||
in
|
||||
@if (isset($champion->lanes) && isset($champion->lanes->roles))
|
||||
{{ strtolower(implode(' and ', $champion->lanes->roles)) }}
|
||||
@else
|
||||
some lanes
|
||||
@endif
|
||||
of Summoner's Rift. First released on {{ $champion->release_date }} during Patch
|
||||
{{ $champion->release_patch }}, {{ $champion->name }} has become known for their
|
||||
{{ strtolower($champion->attack_type) }} playstyle and
|
||||
{{ strtolower($champion->adaptive_type) }} damage output.
|
||||
</p>
|
||||
|
||||
<p class="mt-3">
|
||||
With {{ count($champion->skins) }} unique skins available, {{ $champion->name }} offers
|
||||
plenty of customization options for players who enjoy this champion.
|
||||
@if (count($champion->skins) <= 3)
|
||||
While {{ $champion->name }} doesn't have many skins yet, each one offers a unique take
|
||||
on this champion's theme.
|
||||
@elseif (count($champion->skins) <= 6)
|
||||
{{ $champion->name }} has a decent collection of skins to choose from, giving players
|
||||
plenty of options to switch up their look.
|
||||
@elseif (count($champion->skins) <= 10)
|
||||
{{ $champion->name }} has a good amount of skins, including some really nice
|
||||
reimaginings of the character.
|
||||
@else
|
||||
{{ $champion->name }} has a ton of skins to choose from, so players can really
|
||||
customize their experience with this champion.
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<p class="mt-3">
|
||||
As a champion who uses {{ $champion->resource_type }} as their resource,
|
||||
{{ $champion->name }} brings a unique set of abilities to League of Legends that makes them
|
||||
a
|
||||
great champ for any team comp.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-4 transition-all duration-700 border shadow-md rounded-xl border-white/10"
|
||||
style="--tw-shadow-color:#704e3d; --tw-shadow: var(--tw-shadow-colored); background-color: #704e3d;">
|
||||
<h4 class="mb-2 text-lg font-semibold text-center uppercase text-neutral-100">Champion Stats
|
||||
</h4>
|
||||
<div class="text-base text-neutral-100">
|
||||
<p class="mb-2"><span class="font-bold">BE Cost:</span>
|
||||
<x-icon-lcu-be-svg class="inline-block w-4" /> {{ $champion->price_be }} BE
|
||||
</p>
|
||||
<p class="mb-2"><span class="font-bold">RP Cost:</span>
|
||||
<x-icon-RiotPoints class="inline-block w-4" /> {{ $champion->price_rp }} RP
|
||||
</p>
|
||||
<p class="mb-2"><span class="font-bold">Role:</span>
|
||||
@foreach ($champion->roles as $role)
|
||||
{{ ucfirst(strtolower($role)) }}{{ !$loop->last ? ', ' : '' }}
|
||||
@endforeach
|
||||
</p>
|
||||
<p class="mb-2"><span class="font-bold">Damage:</span> {{ $champion->adaptive_type }}</p>
|
||||
<p class="mb-2"><span class="font-bold">Attack:</span>
|
||||
{{ ucfirst(strtolower($champion->attack_type)) }}</p>
|
||||
<p class="mb-2"><span class="font-bold">Resource:</span> {{ $champion->resource_type }}
|
||||
</p>
|
||||
<p><span class="font-bold">Champion ID:</span>
|
||||
{{ $champion->champion_id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 mb-4 border rounded-lg bg-stone-700/20 border-orange-500/20">
|
||||
<div class="flex flex-col items-start sm:flex-row sm:items-center">
|
||||
<div class="mb-2 sm:mr-4 sm:mb-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-orange-400" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm text-neutral-200 sm:text-base">
|
||||
Looking for a {{ $champion->name }} icon for your profile? Check out our <a
|
||||
href="/icons?filter%5Btitle%5D={{ urlencode($champion->name) }}"
|
||||
class="text-orange-400 hover:text-orange-300">{{ $champion->name }} Icons List</a>.
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-neutral-200 sm:text-base">
|
||||
Want to save on {{ $champion->name }} skins? Check our <a href="/sale-rotation"
|
||||
class="text-orange-400 hover:text-orange-300">Sale Rotation Tracker</a> to see if
|
||||
any {{ $champion->name }} skins are currently discounted!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-8 mb-2 text-xl font-bold text-orange-400">Gameplay Style</h3>
|
||||
|
||||
<p>
|
||||
{{ $champion->name }} is primarily played as a {{ strtolower(implode('/', $champion->roles)) }},
|
||||
leveraging their {{ strtolower($champion->attack_type) }} combat style to dominate
|
||||
@if (isset($champion->lanes) && isset($champion->lanes->roles))
|
||||
in the {{ strtolower(implode(' or ', $champion->lanes->roles)) }}.
|
||||
@else
|
||||
on the Rift.
|
||||
@endif
|
||||
Since their release in Patch {{ $champion->release_patch }}, players have come up with a bunch of
|
||||
different
|
||||
strategies and builds to maximize {{ $champion->name }}'s potential.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
As a {{ strtolower($champion->adaptive_type) }}-focused champion who uses
|
||||
{{ $champion->resource_type }} to cast their abilities, {{ $champion->name }} requires players to
|
||||
carefully manage their resources while positioning effectively to deal maximum damage. The
|
||||
champion's design makes them particularly effective against
|
||||
@if (strpos(strtolower(implode('', $champion->roles)), 'assassin') !== false)
|
||||
squishy targets like ADCs and mages, allowing for quick kills in fights.
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'tank') !== false)
|
||||
opponents by absorbing damage and disrupting enemy formations with CC.
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'mage') !== false)
|
||||
grouped enemies with AoE abilities and burst damage.
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'marksman') !== false)
|
||||
targets at range, dealing consistent damage throughout extended fights. High DPS.
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'support') !== false)
|
||||
enemy strategies by providing utility, protection, and setup for teammates.
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'fighter') !== false)
|
||||
both squishier targets and frontline opponents with a balance of damage and durability.
|
||||
@else
|
||||
a variety of opponents, adapting to different situations as needed.
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<div class="mt-10">
|
||||
<h3 class="mb-4 text-xl font-bold text-orange-400">{{ $champion->name }}'s Story</h3>
|
||||
<div class="px-5 py-4 border-l-4 rounded-r-lg border-orange-500/40 bg-stone-800/30">
|
||||
<p class="italic text-neutral-200">
|
||||
{{ $champion->lore }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Skins Section with Optimized Image Loading -->
|
||||
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
|
||||
<h2
|
||||
class="mb-6 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
{{ $champion->name }} Skins Collection ({{ count($champion->skins) }})
|
||||
</h2>
|
||||
|
||||
<p class="mb-6 text-neutral-100">
|
||||
Customize your {{ $champion->name }} experience with these amazing skins. From the base look to
|
||||
legendary alternatives, each skin offers a unique visual style and sometimes new animations or voice
|
||||
lines. Click on any skin to learn more about its features, release date, and pricing.
|
||||
</p>
|
||||
|
||||
<div id="skinsElement" class="mt-4 overflow-x-scroll">
|
||||
<div class="grid grid-flow-col grid-rows-2 gap-4 mb-4 w-max">
|
||||
@foreach ($champion->skins as $key => $skin)
|
||||
<div class="flex flex-col group">
|
||||
<a href="/skin/{{ $skin->slug }}"
|
||||
class="relative inline-block overflow-hidden border shadow-md h-36 rounded-2xl border-3 border-white/10 group-hover:shadow-orange-500/20">
|
||||
<!-- LQIP -->
|
||||
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=20&h=12&output=webp&q=30&blur=5"
|
||||
class="absolute inset-0 object-cover w-full h-full transform scale-110 filter "
|
||||
alt="{{ $champion->name }} {{ $skin->name }} Loading" />
|
||||
|
||||
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=240&h=142&output=webp&q=80&fit=cover"
|
||||
srcset="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=240&h=142&output=webp&q=80&fit=cover 1x,
|
||||
//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=480&h=284&output=webp&q=80&fit=cover 2x"
|
||||
@if ($key < 6) loading="eager" @else loading="lazy" @endif
|
||||
class="relative z-10 object-cover w-full h-full transition-transform duration-700 group-hover:scale-105"
|
||||
alt="{{ $champion->name }} {{ $skin->name }} Splash Art" />
|
||||
</a>
|
||||
<div>
|
||||
<p class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
|
||||
<a href="/skin/{{ $skin->slug }}"
|
||||
class="hover:text-orange-400 group-hover:text-orange-400">
|
||||
{{ $skin->skin_name }}
|
||||
<x-iconsax-bul-arrow-right class="inline-block w-5" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Streamers Section -->
|
||||
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
|
||||
<h2
|
||||
class="mb-4 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
Top {{ $champion->name }} Players & Streamers
|
||||
</h2>
|
||||
|
||||
<p class="mb-6 text-neutral-100">
|
||||
Want to improve your {{ $champion->name }} gameplay? Learn from these high elo players who main or
|
||||
play a lot of {{ $champion->name }}. All streamers listed are at least Diamond 2 or higher, providing
|
||||
high-quality gameplay to learn from, or just enjoy watching. Click on their names to check out their
|
||||
content.
|
||||
</p>
|
||||
|
||||
@if (count($streamers) > 0)
|
||||
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
|
||||
@foreach ($streamers as $streamer)
|
||||
<div
|
||||
class="p-3 transition-all border rounded-lg bg-stone-700/20 border-white/5 hover:bg-stone-700/30">
|
||||
<a href="{{ $streamer->streamer_url }}" target="_blank" rel="noopener noreferrer"
|
||||
class="flex flex-col items-center text-neutral-100 hover:text-orange-400">
|
||||
<span
|
||||
class="mb-1 text-sm font-bold drop-shadow-lg text-shadow-{{ strtolower($streamer->platform) }}">
|
||||
{{ $streamer->displayname }}
|
||||
</span>
|
||||
<span class="text-xs text-gray-300">{{ strtoupper($streamer->platform) }}</span>
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="p-4 text-center border rounded-lg bg-stone-700/20 border-white/5">
|
||||
<div class="flex flex-col items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 mb-3 text-orange-400/70"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p class="text-neutral-100">
|
||||
Heimerdinger.lol is currently not aware of any High ELO {{ $champion->name }} streamers. We
|
||||
are working on a streamer submission form. Check back soon.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
|
||||
<h2
|
||||
class="mb-6 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
Learning {{ $champion->name }}
|
||||
</h2>
|
||||
|
||||
<div class="space-y-6 text-neutral-100">
|
||||
<p>
|
||||
Whether you're just picking up {{ $champion->name }} or looking to improve your skills with this
|
||||
{{ strtolower(implode('/', $champion->roles)) }} champion, understanding their strengths and
|
||||
weaknesses is crucial. This champion thrives in
|
||||
@if (isset($champion->lanes) && isset($champion->lanes->roles))
|
||||
{{ strtolower(implode(' and ', $champion->lanes->roles)) }}
|
||||
@else
|
||||
various roles
|
||||
@endif
|
||||
with their unique kit.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div class="p-4 border rounded-lg bg-stone-700/30 border-white/5">
|
||||
<h4 class="mb-2 font-bold text-orange-400">Champion Strengths</h4>
|
||||
<ul class="space-y-1 list-disc list-inside">
|
||||
@if (strpos(strtolower(implode('', $champion->roles)), 'assassin') !== false)
|
||||
<li>High burst damage potential</li>
|
||||
<li>High solo kill potential</li>
|
||||
<li>Strong roaming capabilities</li>
|
||||
<li>Good mobility for escapes</li>
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'tank') !== false)
|
||||
<li>Impressive durability</li>
|
||||
<li>Strong crowd control abilities</li>
|
||||
<li>Good at starting fights</li>
|
||||
<li>Great at frontlining</li>
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'mage') !== false)
|
||||
<li>Powerful AoE damage</li>
|
||||
<li>Strong waveclear</li>
|
||||
<li>Good scaling into late game</li>
|
||||
<li>Useful utility for team fights</li>
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'marksman') !== false)
|
||||
<li>Consistent damage output</li>
|
||||
<li>Strong late-game scaling</li>
|
||||
<li>Nice at spacing</li>
|
||||
<li>Good range for safety</li>
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'support') !== false)
|
||||
<li>Strong utility for the team</li>
|
||||
<li>Good protection capabilities</li>
|
||||
<li>Effective vision control</li>
|
||||
<li>Useful in team engagements</li>
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'fighter') !== false)
|
||||
<li>Good balance of damage and durability</li>
|
||||
<li>Strong dueling potential</li>
|
||||
<li>Amazing in extended fights</li>
|
||||
@else
|
||||
<li>Versatile kit for various situations</li>
|
||||
<li>Adaptable playstyle</li>
|
||||
<li>Unique abilities in the champion roster</li>
|
||||
<li>Effective in the right team compositions</li>
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="p-4 border rounded-lg bg-stone-700/30 border-white/5">
|
||||
<h4 class="mb-2 font-bold text-orange-400">Champion Weaknesses</h4>
|
||||
<ul class="space-y-1 list-disc list-inside">
|
||||
@if (strpos(strtolower(implode('', $champion->roles)), 'assassin') !== false)
|
||||
<li>Vulnerable to crowd control</li>
|
||||
<li>Relatively squishy in team fights</li>
|
||||
<li>Can fall off in very late game</li>
|
||||
<li>Requires good timing to be effective</li>
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'tank') !== false)
|
||||
<li>Limited damage output</li>
|
||||
<li>Can be kited by other champions</li>
|
||||
<li>Vulnerable to percent health damage</li>
|
||||
<li>Reliant on team follow-up</li>
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'mage') !== false)
|
||||
<li>Usually lacks mobility</li>
|
||||
<li>Vulnerable to assassins</li>
|
||||
<li>Skill-shot dependent abilities</li>
|
||||
<li>Can struggle against magic resistance</li>
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'marksman') !== false)
|
||||
<li>Weaker early game</li>
|
||||
<li>Vulnerable to assassins</li>
|
||||
<li>Reliant on positioning</li>
|
||||
<li>Limited escape options</li>
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'support') !== false)
|
||||
<li>Limited income for items</li>
|
||||
<li>Lower damage output</li>
|
||||
<li>Vulnerable when caught alone</li>
|
||||
<li>Dependent on team play</li>
|
||||
@elseif (strpos(strtolower(implode('', $champion->roles)), 'fighter') !== false)
|
||||
<li>Can be kited by ranged champions</li>
|
||||
<li>May struggle against true tanks</li>
|
||||
<li>Often lacks strong engage tools</li>
|
||||
<li>Can be outscaled in late game</li>
|
||||
@else
|
||||
<li>May struggle against specialized champions</li>
|
||||
<li>Has counterplay options available</li>
|
||||
<li>Requires good game knowledge to maximize potential</li>
|
||||
<li>May not excel in any specific area</li>
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-4">
|
||||
{{ $champion->name }} currently costs <x-icon-lcu-be-svg class="inline-block w-4" />
|
||||
{{ $champion->price_be }} BE or <x-icon-RiotPoints class="inline-block w-4" />
|
||||
{{ $champion->price_rp }} RP to unlock, making them
|
||||
@if ($champion->price_be <= 1350)
|
||||
one of the more cheaper champions for new players.
|
||||
@elseif ($champion->price_be <= 3150)
|
||||
reasonably priced for players building their champion pool.
|
||||
@elseif ($champion->price_be <= 4800)
|
||||
on the more expensive side for new players.
|
||||
@else
|
||||
one of the more expensive champions.
|
||||
@endif
|
||||
Players looking to master {{ $champion->name }} should spend time learning their unique mechanics
|
||||
and optimal build paths for different matchups.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user