mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 10:10: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,14 +1,77 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $champion->name . ' • Heimerdinger.LoL')
|
||||
@section('description', 'Heimerdinger.LoL: ' . $champion->name . ' details showing all the information you need to know
|
||||
about ' . $champion->name . ', ' . $champion->title . '. ' . substr($champion->lore, 0, 50) . '...')
|
||||
@section('description',
|
||||
'Heimerdinger.LoL: ' .
|
||||
$champion->name .
|
||||
' details showing all the information you need to know
|
||||
about ' .
|
||||
$champion->name .
|
||||
', ' .
|
||||
$champion->title .
|
||||
'. ' .
|
||||
substr($champion->lore, 0, 50) .
|
||||
'...')
|
||||
|
||||
@section('content')
|
||||
<x-champions.grid_info :champion="$champion" :streamers="$streamers"/>
|
||||
<x-champions.grid_info :champion="$champion" :streamers="$streamers" />
|
||||
@endsection
|
||||
|
||||
@push('bottom_scripts')
|
||||
@vite('resources/js/vert-scroll.js')
|
||||
@endpush
|
||||
<script type="application/ld+json">
|
||||
@php
|
||||
$description = $champion->name . " is a " . strtolower(implode('/', $champion->roles)) . " champion in League of Legends";
|
||||
|
||||
$jsonObject = [
|
||||
"@context" => "https://schema.org/",
|
||||
"@type" => "SoftwareApplication",
|
||||
"applicationCategory" => "Game",
|
||||
"name" => "League of Legends",
|
||||
"operatingSystem" => "Windows, macOS",
|
||||
"publisher" => [
|
||||
"@type" => "Organization",
|
||||
"name" => "Riot Games"
|
||||
],
|
||||
"offers" => [
|
||||
"@type" => "Offer",
|
||||
"price" => "0",
|
||||
"priceCurrency" => "USD"
|
||||
],
|
||||
"character" => [
|
||||
"@type" => "Character",
|
||||
"name" => $champion->name,
|
||||
"description" => $description,
|
||||
"image" => $champion->getChampionImageAttribute(true)
|
||||
],
|
||||
"url" => url()->current()
|
||||
];
|
||||
|
||||
$jsonObject["character"]["characterAttribute"] = $champion->roles;
|
||||
$jsonObject["character"]["additionalProperty"] = [
|
||||
[
|
||||
"@type" => "PropertyValue",
|
||||
"name" => "Attack Type",
|
||||
"value" => $champion->attack_type
|
||||
],
|
||||
[
|
||||
"@type" => "PropertyValue",
|
||||
"name" => "Damage Type",
|
||||
"value" => $champion->adaptive_type
|
||||
],
|
||||
[
|
||||
"@type" => "PropertyValue",
|
||||
"name" => "Resource",
|
||||
"value" => $champion->resource_type
|
||||
],
|
||||
[
|
||||
"@type" => "PropertyValue",
|
||||
"name" => "Release Date",
|
||||
"value" => $champion->release_date
|
||||
]
|
||||
];
|
||||
|
||||
echo json_encode($jsonObject, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
|
||||
@endphp
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,111 +1,356 @@
|
||||
<section class="min-h-[80vh] flex items-center justify-center">
|
||||
<div class="items-center justify-center mx-auto my-auto align-middle">
|
||||
<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">
|
||||
ICON DETAILS</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">
|
||||
{{ $icon->title }}</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">
|
||||
Released in: {{ $icon->release_year }}</h2>
|
||||
<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">
|
||||
Icon 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">
|
||||
{{ $icon->title }}
|
||||
</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">
|
||||
Released in {{ $icon->release_year }}
|
||||
</h2>
|
||||
|
||||
<div class="flex justify-center my-4">
|
||||
<x-ads.horizontal-banner />
|
||||
</div>
|
||||
<x-ads.common />
|
||||
|
||||
<div class="container flex items-center justify-center p-4 mx-auto my-auto mt-3">
|
||||
<div class="grid w-screen grid-cols-1 gap-8 md:grid-cols-2">
|
||||
<div
|
||||
class="flex flex-col items-center align-middle border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80">
|
||||
<h4 class="text-center text-2xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mb-3">
|
||||
The {{ $icon->title }}</h4>
|
||||
<img src="//wsrv.nl/?url={{ $icon->image }}&w=400&output=webp&q=100&il"
|
||||
alt="{{ $icon->title }} Icon"
|
||||
class="transition-transform duration-700 border-2 shadow-md rounded-2xl bg-clip-border border-orange-400/40 shadow-orange-400/20" />
|
||||
<div class="container mx-auto mt-8">
|
||||
<div class="relative p-6 overflow-hidden border shadow-md rounded-2xl bg-stone-800/40 border-neutral-300/5">
|
||||
<div class="flex flex-col items-center gap-8 md:flex-row md:items-start">
|
||||
<div class="flex flex-col items-center flex-shrink-0">
|
||||
<div class="mb-3 transition-all duration-500 group">
|
||||
<div class="relative w-64 h-64" style="aspect-ratio: 1/1;">
|
||||
<div
|
||||
class="absolute inset-0 transition-opacity duration-300 opacity-0 bg-gradient-to-br from-orange-400/20 to-orange-500/30 rounded-2xl group-hover:opacity-100">
|
||||
</div>
|
||||
|
||||
<img src="//wsrv.nl/?url={{ $icon->image }}&w=20&h=20&output=webp&q=30&blur=5"
|
||||
alt="{{ $icon->title }} Loading"
|
||||
class="absolute inset-0 object-cover w-full h-full rounded-2xl" width="256"
|
||||
height="256" />
|
||||
|
||||
<img src="//wsrv.nl/?url={{ $icon->image }}&w=256&output=webp&q=80"
|
||||
srcset="//wsrv.nl/?url={{ $icon->image }}&w=128&output=webp&q=80 128w,
|
||||
//wsrv.nl/?url={{ $icon->image }}&w=256&output=webp&q=80 256w,
|
||||
//wsrv.nl/?url={{ $icon->image }}&w=512&output=webp&q=85 512w"
|
||||
sizes="(max-width: 768px) 128px, 256px" alt="{{ $icon->title }} Icon" loading="eager"
|
||||
width="256" height="256"
|
||||
class="relative z-10 object-contain w-full h-full transition-transform duration-500 border-2 shadow-lg rounded-2xl bg-clip-border border-orange-400/40 shadow-orange-400/20 group-hover:scale-105" />
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ $icon->image }}" rel="noopener" target="_blank"
|
||||
class="px-4 py-2 text-sm font-medium text-center text-neutral-100">
|
||||
View in HD
|
||||
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 Size</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 class="border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80">
|
||||
<h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2">
|
||||
{{ $icon->title }} Details
|
||||
</h4>
|
||||
<div class="flex flex-col justify-between h-max">
|
||||
<ul class="flex-1 mx-5 h-max">
|
||||
<li class="items-center text-base leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Icon ID:</span>
|
||||
<span class="font-mono font-semibold">{{ $icon->icon_id }}</span>
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Icon Name:</span> {{ $icon->title }}
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Release Year:</span> {{ $icon->release_year }}
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Legacy<span class="font-extralight">*</span>:</span>
|
||||
{{ $icon->legacy ? 'Yes' : 'No' }}
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Esports Icon:</span>
|
||||
{{ $icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Yes' : 'No' }}
|
||||
</li>
|
||||
<div class="flex-grow">
|
||||
<h3
|
||||
class="mb-4 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
About This Icon
|
||||
</h3>
|
||||
<div class="space-y-4 text-lg leading-relaxed text-neutral-100">
|
||||
<p>
|
||||
The <strong>{{ $icon->title }}</strong> is a {{ $icon->legacy ? 'legacy' : 'standard' }}
|
||||
summoner icon first introduced to League of Legends in {{ $icon->release_year }}.
|
||||
@if ($icon->esports_team || $icon->esports_region || $icon->esports_event)
|
||||
This is an esports-themed icon
|
||||
@if ($icon->esports_team)
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Esports Team:</span> {{ $icon->esports_team }}
|
||||
</li>
|
||||
representing the team <strong>{{ $icon->esports_team }}</strong>
|
||||
@endif
|
||||
@if ($icon->esports_region)
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Esports Region:</span> {{ $icon->esports_region }}
|
||||
</li>
|
||||
from the <strong>{{ $icon->esports_region }}</strong> region
|
||||
@endif
|
||||
@if ($icon->esports_event)
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Esports Event:</span> {{ $icon->esports_event }}
|
||||
</li>
|
||||
@endif
|
||||
featured during the <strong>{{ $icon->esports_event }}</strong> event
|
||||
@endif.
|
||||
@endif
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Description:</span> {{ $icon->description }}
|
||||
</li>
|
||||
</p>
|
||||
|
||||
@if ($icon->icon_id === 6584)
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Guide:</span> <a
|
||||
href="https://heimerdinger.lol/post/how-to-get-hatty-crabby-icon-in-league-of-legends"
|
||||
class="underline hover:text-orange-400 decoration-orange-400">How to get the
|
||||
Hatty Crabby Icon in
|
||||
League of Legends</a>
|
||||
</li>
|
||||
<p>{{ $icon->description }}</p>
|
||||
|
||||
<p>
|
||||
Summoner icons like the {{ $icon->title }} let you personalize your League of
|
||||
Legends account, displaying next to your name in friend lists, lobbies, and post-game
|
||||
screens.
|
||||
It's also generally shown on 3rd-party sites like op.gg and u.gg.
|
||||
They're a popular way for players to express their personality, support for
|
||||
teams or to create a nice looking profile for themselves.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
@if ($icon->release_year < 2016)
|
||||
This icon comes from the {{ $icon->release_year < 2013 ? 'early' : 'classic' }} era of
|
||||
League of Legends, when icon releases were less frequent and often tied to significant
|
||||
game events or milestones. Icons from this period are particularly valued by long-time
|
||||
players.
|
||||
@elseif ($icon->release_year >= 2016 && $icon->release_year <= 2020)
|
||||
Released during {{ $icon->release_year }}, this icon arrived during a period when Riot
|
||||
began expanding the variety and availability of summoner icons, offering more ways for
|
||||
players to customize their profiles and express themselves in the game client.
|
||||
@else
|
||||
As a more recent addition to League's icon collection, the {{ $icon->title }} features
|
||||
the modern design aesthetic that matches Riot's current approach to player
|
||||
customization.
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<li class="items-center mt-8 text-sm font-light leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">* Legacy Icons:</span> Legacy Icons don't act the same as legacy
|
||||
skins.
|
||||
It seems like some icons that are marked as legacy are still obtainable or the other way
|
||||
around
|
||||
where some icons that are not marked as legacy are not obtainable anymore.
|
||||
</li>
|
||||
</ul>
|
||||
@if ($icon->legacy)
|
||||
<div class="p-4 mt-4 border rounded-lg bg-stone-700/30 border-orange-500/20">
|
||||
<p class="text-base text-neutral-200">
|
||||
<span class="font-bold text-orange-400">Legacy Status:</span> This is considered a
|
||||
legacy icon, which means it may have limited availability. Unlike legacy skins,
|
||||
legacy icons don't follow consistent rules. Some can still be obtainable through
|
||||
special events or promotions, while others might be permanently unavailable.
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($icon->icon_id === 6584)
|
||||
<div class="p-4 mt-4 border rounded-lg bg-stone-700/30 border-orange-500/20">
|
||||
<p class="text-base font-medium text-neutral-100">
|
||||
<span class="font-bold text-orange-400">Special Guide:</span> Wondering how to get
|
||||
this icon? Check out our
|
||||
href="/post/how-to-get-hatty-crabby-icon-in-league-of-legends"
|
||||
class="text-orange-400 underline hover:text-orange-300">complete guide on
|
||||
obtaining the Hatty Crabby Icon</a>.
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($icon->icon_id === 6846)
|
||||
<div class="p-4 mt-4 border rounded-lg bg-stone-700/30 border-orange-500/20">
|
||||
<p class="text-base font-medium text-neutral-100">
|
||||
<span class="font-bold text-orange-400">Special Guide:</span> Wondering how to get
|
||||
this icon? Check out our <a href="/post/how-to-get-ez-be-real-icon"
|
||||
class="text-orange-400 underline hover:text-orange-300">complete guide on
|
||||
obtaining the Ez-be-real Icon</a>.
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 mt-8 md:grid-cols-2">
|
||||
<div class="p-6 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
|
||||
<h3 class="mb-4 text-xl font-bold text-orange-400">
|
||||
How to Obtain
|
||||
</h3>
|
||||
<div class="text-neutral-100">
|
||||
<p>
|
||||
@if ($icon->legacy)
|
||||
As a legacy icon from {{ $icon->release_year }}, the {{ $icon->title }} icon might not be
|
||||
directly available for purchase. Legacy icons typically appear during special events,
|
||||
promotions, or through hextech crafting.
|
||||
|
||||
@if ($icon->esports_team || $icon->esports_region || $icon->esports_event)
|
||||
Since this is an esports icon, it may reappear during relevant tournaments or team
|
||||
promotions.
|
||||
@endif
|
||||
@else
|
||||
The {{ $icon->title }} icon, released in {{ $icon->release_year }}, may be available
|
||||
through the League of Legends store, event passes, missions, or hextech crafting.
|
||||
|
||||
@if ($icon->esports_team || $icon->esports_region || $icon->esports_event)
|
||||
As an esports-themed icon, it's often available during relevant tournaments or through
|
||||
team support bundles.
|
||||
@endif
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<p class="mt-3">
|
||||
When available in the store, summoner icons usually cost 250 RP, though
|
||||
special or limited editions may be priced differently. Some icons are also obtainable with Blue
|
||||
Essence during special promotions or through the Essence Emporium when it's active.
|
||||
</p>
|
||||
|
||||
<p class="mt-3">
|
||||
Riot occasionally brings back legacy content during special events like anniversaries, seasonal
|
||||
celebrations, or game milestones. If you're specifically looking to add the {{ $icon->title }}
|
||||
to your collection, watch for event announcements in the client or on the official <a
|
||||
href="https://www.leagueoflegends.com/en-us/news/"
|
||||
class="text-orange-400 underline hover:text-orange-300">League of
|
||||
Legends</a> website.
|
||||
</p>
|
||||
|
||||
<p class="mt-3">
|
||||
Keep an eye on the in-game client for special promotions or events where this icon might become
|
||||
available again.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-full p-6 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
|
||||
<h3 class="mb-4 text-xl font-bold text-orange-400">
|
||||
Technical Details
|
||||
</h3>
|
||||
<div class="grid grid-rows-[auto_1fr] text-neutral-100">
|
||||
<p>
|
||||
Each summoner icon in League of Legends has some technical specifications. The
|
||||
{{ $icon->title }} is identified in Riot's systems by the icon ID <span
|
||||
class="font-mono font-semibold">{{ $icon->icon_id }}</span>.
|
||||
</p>
|
||||
|
||||
<div class="pt-4 mt-auto ">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-3 rounded-lg bg-stone-700/30">
|
||||
<span class="block text-sm text-neutral-400">Icon ID</span>
|
||||
<span class="font-mono font-medium">{{ $icon->icon_id }}</span>
|
||||
</div>
|
||||
|
||||
<div class="p-3 rounded-lg bg-stone-700/30">
|
||||
<span class="block text-sm text-neutral-400">Release Year</span>
|
||||
<span>{{ $icon->release_year }}</span>
|
||||
</div>
|
||||
|
||||
<div class="p-3 rounded-lg bg-stone-700/30">
|
||||
<span class="block text-sm text-neutral-400">Legacy Status</span>
|
||||
<span>{{ $icon->legacy ? 'Legacy' : 'Standard' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="p-3 rounded-lg bg-stone-700/30">
|
||||
<span class="block text-sm text-neutral-400">Type</span>
|
||||
<span>{{ $icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Esports' : 'Standard' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
|
||||
<h3 class="mb-4 text-xl font-bold text-orange-400">
|
||||
Design & Significance
|
||||
</h3>
|
||||
<div class="text-neutral-100">
|
||||
<p>
|
||||
The {{ $icon->title }} features a classic design that captures its thematic elements in League
|
||||
of Legends' iconic art style. A lot of players like to use icons to make their profile look nice,
|
||||
and match with profile backgrounds, borders, etc.
|
||||
</p>
|
||||
|
||||
<p class="mt-3">
|
||||
@if ($icon->esports_team)
|
||||
As an esports team icon, it prominently displays {{ $icon->esports_team }}'s branding elements
|
||||
and color scheme, allowing fans to show their support in the game client. Team icons often
|
||||
become collectors' items, especially for teams with historical significance or memorable
|
||||
tournament performances.
|
||||
@elseif (strpos(strtolower($icon->title), 'poro') !== false)
|
||||
This icon features League's beloved Poro character, the fluffy creature native to the Howling
|
||||
Abyss. Poro-themed items are consistently popular among players due to their cute and whimsical
|
||||
design aesthetic.
|
||||
@elseif (strpos(strtolower($icon->title), 'champie') !== false ||
|
||||
strpos(strtolower($icon->description), 'champie') !== false ||
|
||||
strpos(strtolower($icon->title), 'illustration') !== false)
|
||||
This champion-themed icon captures elements of a League character's identity, allowing fans of
|
||||
that champion to showcase their preference or mastery.
|
||||
@else
|
||||
The art style and thematic elements of this icon reflect Riot's approach to visual design in
|
||||
{{ $icon->release_year }}, with the characteristic attention to detail and distinctive style
|
||||
that League of Legends is known for.
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<p class="mt-3">
|
||||
Players often select icons that represent their main role, favorite champion, esports team they
|
||||
like, or
|
||||
just looks cool. The {{ $icon->title }} offers a way for summoners to personalize
|
||||
their League experience and express themselves within the community.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl">
|
||||
<h3 class="mb-4 text-xl font-bold text-orange-400">
|
||||
Related Content
|
||||
</h3>
|
||||
<div class="text-neutral-100">
|
||||
<p>
|
||||
Interested in more summoner icons or related League of Legends content? Here are some resources that
|
||||
might help:
|
||||
</p>
|
||||
|
||||
<p class="mt-3">
|
||||
League of Legends has over 1500 summoner icons spanning more than a decade of the game's
|
||||
history. They range from esports team icons to event commemorations, champion icons, and
|
||||
ranked achievements.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 mt-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<a href="/icons?filter%5Brelease_year%5D={{ $icon->release_year }}"
|
||||
class="block p-4 transition-all duration-300 border rounded-lg bg-stone-700/20 border-white/10 hover:border-orange-500/30 hover:bg-stone-700/30">
|
||||
<h4 class="mb-2 font-semibold text-orange-400">Icons from {{ $icon->release_year }}</h4>
|
||||
<p class="text-sm text-neutral-300">Explore other summoner icons released in the same year.</p>
|
||||
</a>
|
||||
|
||||
@if ($icon->esports_team)
|
||||
<a href="/icons?filter%5Besports_team%5D={{ urlencode($icon->esports_team) }}"
|
||||
class="block p-4 transition-all duration-300 border rounded-lg bg-stone-700/20 border-white/10 hover:border-orange-500/30 hover:bg-stone-700/30">
|
||||
<h4 class="mb-2 font-semibold text-orange-400">{{ $icon->esports_team }} Icons</h4>
|
||||
<p class="text-sm text-neutral-300">View all icons related to this esports team.</p>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
<a href="/icons"
|
||||
class="block p-4 transition-all duration-300 border rounded-lg bg-stone-700/20 border-white/10 hover:border-orange-500/30 hover:bg-stone-700/30">
|
||||
<h4 class="mb-2 font-semibold text-orange-400">All Summoner Icons</h4>
|
||||
<p class="text-sm text-neutral-300">Browse our complete collection of League of Legends icons.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@push('bottom_scripts')
|
||||
<script type="application/ld+json">
|
||||
@php
|
||||
$description = "The " . $icon->title . " is a " . ($icon->legacy ? 'legacy' : 'standard') . " summoner icon for League of Legends released in " . $icon->release_year . ".";
|
||||
if ($icon->description) {
|
||||
$description .= " " . $icon->description;
|
||||
}
|
||||
|
||||
// Create the JSON object
|
||||
$jsonObject = [
|
||||
"@context" => "https://schema.org/",
|
||||
"@type" => "WebPage",
|
||||
"name" => $icon->title . " - League of Legends Summoner Icon",
|
||||
"description" => $description,
|
||||
"mainEntity" => [
|
||||
"@type" => "VisualArtwork",
|
||||
"name" => $icon->title,
|
||||
"description" => $description,
|
||||
"image" => $icon->image,
|
||||
"dateCreated" => $icon->release_year,
|
||||
"artform" => "Digital Icon",
|
||||
"artworkSurface" => "Digital",
|
||||
"creator" => [
|
||||
"@type" => "Organization",
|
||||
"name" => "Riot Games"
|
||||
],
|
||||
"contentLocation" => [
|
||||
"@type" => "Place",
|
||||
"name" => "League of Legends"
|
||||
]
|
||||
],
|
||||
"publisher" => [
|
||||
"@type" => "Organization",
|
||||
"name" => "Heimerdinger.lol"
|
||||
],
|
||||
"url" => url()->current()
|
||||
];
|
||||
|
||||
echo json_encode($jsonObject, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
|
||||
@endphp
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@@ -1,185 +1,663 @@
|
||||
<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">
|
||||
SKIN DETAILS</h3>
|
||||
Skin 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">
|
||||
{{ $skin->skin_name }}</h1>
|
||||
{{ $skin->skin_name }}
|
||||
</h1>
|
||||
<p
|
||||
class="text-sm font-medium text-center text-orange-400 uppercase transition-all duration-700 hover:underline decoration-1 decoration-transparent hover:decoration-orange-400">
|
||||
<a href="/champion/{{ $skin->champion->slug }}">
|
||||
<span class="flex items-center justify-center">
|
||||
View
|
||||
champion
|
||||
info
|
||||
View champion info
|
||||
<x-iconsax-bul-arrow-square-right class="w-5" />
|
||||
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<x-ads.common />
|
||||
<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 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: {{ $skin->splash_color }}"></div>
|
||||
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=840&output=webp&q=90"
|
||||
alt="{{ $skin->skin_name }} Splash Art"
|
||||
class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100 rounded-2xl">
|
||||
<x-ads.common />
|
||||
|
||||
<div class="absolute bottom-0 left-0 p-4">
|
||||
<a href="{{ $skin->getSkinImageAttribute(true) }}" rel="noopener" target="_blank"
|
||||
class="p-2 text-base font-bold text-white bg-black bg-opacity-50 rounded-xl">View in
|
||||
HD</a>
|
||||
<!-- Hero Section with Splash Art -->
|
||||
<div class="container mx-auto mt-8">
|
||||
<!-- Compact Splash Art Section -->
|
||||
<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>
|
||||
|
||||
<!-- Splash Art -->
|
||||
<div class="relative w-full h-full">
|
||||
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=30&h=20&fit=cover&blur=5&output=webp"
|
||||
class="absolute inset-0 object-cover w-full h-full blur-sm" alt="{{ $skin->skin_name }} Loading" />
|
||||
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=800&h=350&fit=cover&output=webp&q=85"
|
||||
srcset="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=480&h=350&fit=cover&output=webp&q=85 480w,
|
||||
//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=800&h=350&fit=cover&output=webp&q=85 800w,
|
||||
//wsrv.nl/?url={{ $skin->getSkinImageAttribute(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="{{ $skin->skin_name }} Splash Art" loading="eager" />
|
||||
|
||||
<!-- Gradient Overlay for Text Readability -->
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-stone-900/90 via-stone-900/40 to-transparent"></div>
|
||||
|
||||
<!-- Info Overlay -->
|
||||
<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">{{ $skin->skin_name }}</h3>
|
||||
<p class="mb-2 text-sm font-medium text-orange-300">{{ $skin->rarity }} Skin for
|
||||
{{ $skin->champion->name }}</p>
|
||||
<a href="{{ $skin->getSkinImageAttribute(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 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>
|
||||
|
||||
<!-- Quick Price Info -->
|
||||
<div class="px-3 py-2 border rounded-lg bg-stone-900/80 border-orange-500/40">
|
||||
@if ($skin->rp_price == '99999')
|
||||
<span class="font-bold text-orange-400">Special Offer</span>
|
||||
@else
|
||||
<span class="flex items-center font-bold text-white">
|
||||
<x-icon-RiotPoints class="inline-block w-5 mr-1" />
|
||||
{{ $skin->rp_price }} RP
|
||||
</span>
|
||||
@endif
|
||||
<div class="mt-1 text-xs text-gray-300">
|
||||
@if ($skin->release_date == '0000-00-00')
|
||||
Coming Soon
|
||||
@else
|
||||
Released: {{ $skin->release_date }}
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Article Content -->
|
||||
<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">
|
||||
Everything You Need to Know About {{ $skin->skin_name }}
|
||||
</h2>
|
||||
|
||||
<div class="transition-all duration-700 border shadow-md rounded-2xl border-3 border-white/10 lg:col-start-3"
|
||||
style="--tw-shadow-color:{{ $skin->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $skin->splash_color }};">
|
||||
<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">The Basics</h3>
|
||||
<p>
|
||||
Looking to spice up your games with a killer new look for {{ $skin->champion->name }}?
|
||||
Let's
|
||||
dive into everything you need to know about <strong>{{ $skin->skin_name }}</strong>, a
|
||||
unique skin for
|
||||
{{ $skin->champion->name }}. This skin is all about giving your favorite champion a fresh
|
||||
new look!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2">
|
||||
{{ $skin->skin_name }} Details</h4>
|
||||
|
||||
<ul class="mx-5">
|
||||
<li class="items-center mt-4 text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Price:</span>
|
||||
@if ($skin->rp_price == '99999')
|
||||
Not Available for RP
|
||||
@else
|
||||
<x-icon-RiotPoints class="inline-block w-4" />
|
||||
{{ $skin->rp_price }} RP
|
||||
@endif
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Release Date:</span> {{ $skin->release_date }}
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Rarity:</span> {{ $skin->rarity }}
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Availability:</span> {{ $skin->availability }}
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Chromas:</span>
|
||||
@if ($skin->chromas->count() > 0)
|
||||
{{ $skin->chromas->count() }}
|
||||
@else
|
||||
None
|
||||
@endif
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Lootable:</span> {{ $skin->loot_eligible ? 'Yes' : 'No' }}
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">New Effects:</span> {{ $skin->new_effects ? 'Yes' : 'No' }}
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">New Animations:</span> {{ $skin->new_animations ? 'Yes' : 'No' }}
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">New Recall:</span> {{ $skin->new_recall ? 'Yes' : 'No' }}
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">New Voice:</span> {{ $skin->new_voice ? 'Yes' : 'No' }}
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">New Quotes:</span> {{ $skin->new_quotes ? 'Yes' : 'No' }}
|
||||
</li>
|
||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Voice Actor:</span>
|
||||
@if (count($skin->voice_actor) < 1)
|
||||
Unknown
|
||||
@else
|
||||
@foreach ($skin->voice_actor as $voice_actor)
|
||||
{{ $voice_actor }}
|
||||
@endforeach
|
||||
@endif
|
||||
</li>
|
||||
<li class="items-center mb-4 text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
||||
lang="en">
|
||||
<span class="font-bold">Splash Artist:</span>
|
||||
@if (count($skin->splash_artist) < 1)
|
||||
Unknown
|
||||
@else
|
||||
@foreach ($skin->splash_artist as $key => $splash_artist)
|
||||
{{ $splash_artist }}
|
||||
@if ($key < count($skin->splash_artist) - 2)
|
||||
,
|
||||
@elseif ($key == count($skin->splash_artist) - 2)
|
||||
&
|
||||
<!-- Quick Facts Card -->
|
||||
<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">Quick Facts</h4>
|
||||
<div class="text-base text-neutral-100">
|
||||
<p class="mb-2"><span class="font-bold">Price:</span>
|
||||
@if ($skin->rp_price == '99999')
|
||||
Special Availability
|
||||
@else
|
||||
<x-icon-RiotPoints class="inline-block w-4" /> {{ $skin->rp_price }} RP
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
</li>
|
||||
</p>
|
||||
<p class="mb-2"><span class="font-bold">Released:</span>
|
||||
@if ($skin->release_date == '0000-00-00')
|
||||
Coming Soon
|
||||
@else
|
||||
{{ $skin->release_date }}
|
||||
@endif
|
||||
</p>
|
||||
<p class="mb-2"><span class="font-bold">Rarity:</span> {{ $skin->rarity }}</p>
|
||||
<p class="mb-2"><span class="font-bold">Available:</span> {{ $skin->availability }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</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:{{ $skin->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $skin->splash_color }};">
|
||||
<div class="p-4">
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
|
||||
{{ $skin->name }} Lore</h4>
|
||||
<p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose" lang="en">
|
||||
@if ($skin->lore)
|
||||
{!! $skin->lore !!}
|
||||
<p>
|
||||
@if ($skin->release_date == '0000-00-00')
|
||||
Riot hasn't dropped this skin on live servers just yet, but it's definitely on the way!
|
||||
{{ $skin->skin_name }}
|
||||
might already be available on PBE, or maybe already has a SkinSpotlights video. While we don't
|
||||
have an exact
|
||||
release date yet, this {{ $skin->rarity }} tier skin will be joining
|
||||
{{ $skin->champion->name }}'s collection soon.
|
||||
@else
|
||||
Since its release on <strong>{{ $skin->release_date }}</strong>, this {{ $skin->rarity }} tier
|
||||
skin has become
|
||||
@if ($skin->availability == 'Available')
|
||||
a popular pick among players who want to make their {{ $skin->champion->name }} stand out
|
||||
from the crowd.
|
||||
@elseif ($skin->availability == 'Legacy')
|
||||
a legacy skin. This means it's no longer available for purchase in the store, but you might
|
||||
be able to
|
||||
get it from chests, rerolling skins, or during specific periods in the year when Riot brings
|
||||
it back.
|
||||
@elseif ($skin->availability == 'Limited')
|
||||
an extremely rare sight on the Rift. If you spot someone rocking this skin, you know they're
|
||||
either a long-time player or incredibly lucky.
|
||||
@elseif ($skin->availability == 'Upcoming')
|
||||
an upcoming skin addition to the game that some players can't wait to get their hands on.
|
||||
@else
|
||||
Heimerdinger has looked far and wide but could not find any lore for
|
||||
{{ $skin->skin_name }}.
|
||||
But we're sure it's a great skin! The things we do know is that it was released on
|
||||
{{ $skin->release_date }} and costs {{ $skin->rp_price }} RP.
|
||||
a unique addition to {{ $skin->champion->name }}'s wardrobe that offers a fresh take on
|
||||
this champion's look and feel.
|
||||
@endif
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<h3 class="mt-8 mb-2 text-xl font-bold text-orange-400">What Makes This Skin Special</h3>
|
||||
|
||||
<p>
|
||||
Let's talk about what makes {{ $skin->skin_name }} worth your RP.
|
||||
@if ($skin->rp_price == '99999')
|
||||
This isn't your standard RP purchase - it's part of a special promotion or event, making it a
|
||||
bit more exclusive than your typical skin. It might be available exclusively through a
|
||||
battlepass, gacha systems (The Sanctum), or something else.
|
||||
@else
|
||||
At <strong>{{ $skin->rp_price }} RP</strong>, you're getting
|
||||
@if ($skin->rp_price < 975)
|
||||
a budget-friendly option that still gives {{ $skin->champion->name }} a fresh look, so you
|
||||
can stand out.
|
||||
@elseif ($skin->rp_price >= 975 && $skin->rp_price < 1350)
|
||||
a relatively cheap skin with decent quality visuals, sometimes even some new animations or
|
||||
effects.
|
||||
@elseif ($skin->rp_price >= 1350 && $skin->rp_price < 1820)
|
||||
a feature-rich skin with plenty of new visuals that really change how
|
||||
{{ $skin->champion->name }} looks in-game.
|
||||
@elseif ($skin->rp_price >= 1820)
|
||||
a premium experience, likely with completely overhauled visuals, animations, and potentially
|
||||
voice
|
||||
work.
|
||||
@endif
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<div class="pl-5 my-4 border-l-4 border-orange-500/50">
|
||||
<p class="text-neutral-200">
|
||||
@if ($skin->new_effects && $skin->new_animations && $skin->new_recall && $skin->new_voice && $skin->new_quotes)
|
||||
This skin is loaded with upgrades! It's got completely new visual effects, fresh animations,
|
||||
a custom recall, a new voice over, and unique voice lines. When you buy
|
||||
{{ $skin->skin_name }}, you're basically getting a completely reimagined version of
|
||||
{{ $skin->champion->name }}.
|
||||
@else
|
||||
Here's what you get with {{ $skin->skin_name }}:
|
||||
@if ($skin->new_effects)
|
||||
<span class="block mt-1">✓ Brand new visual effects that add serious flair to your
|
||||
abilities</span>
|
||||
@endif
|
||||
@if ($skin->new_animations)
|
||||
<span class="block mt-1">✓ Fresh animations that make {{ $skin->champion->name }} move
|
||||
in new, thematic ways</span>
|
||||
@endif
|
||||
@if ($skin->new_recall)
|
||||
<span class="block mt-1">✓ A custom recall animation that's worth showing off before you
|
||||
head back to base</span>
|
||||
@endif
|
||||
@if ($skin->new_voice)
|
||||
<span class="block mt-1">✓ A completely new voice that transforms the champion's
|
||||
personality</span>
|
||||
@endif
|
||||
@if ($skin->new_quotes)
|
||||
<span class="block mt-1">✓ New voice lines that add depth and storytelling to the skin's
|
||||
theme</span>
|
||||
@endif
|
||||
@if (!$skin->new_effects && !$skin->new_animations && !$skin->new_recall && !$skin->new_voice && !$skin->new_quotes)
|
||||
While this skin doesn't add new effects or animations, it offers a visual
|
||||
redesign that gives {{ $skin->champion->name }} a fresh look on the Rift.
|
||||
@endif
|
||||
@endif
|
||||
</p>
|
||||
</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:{{ $skin->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $skin->splash_color }};">
|
||||
<div class="p-4">
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
|
||||
{{ $skin->name }} Chromas ({{ count($skin->chromas) }}) </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">
|
||||
@if (count($skin->chromas) < 1)
|
||||
<p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose" lang="en">
|
||||
Sadly there are no chromas for {{ $skin->skin_name }} yet.
|
||||
</p>
|
||||
@endif
|
||||
@foreach ($skin->chromas as $key => $chroma)
|
||||
<div class="flex flex-col group">
|
||||
<a href="/skin/{{ $skin->slug }}">
|
||||
<img src="//wsrv.nl/?url={{ $chroma->getChromaImageAttribute() }}&w=220&output=webp&q=70&il"
|
||||
alt="{{ $chroma->chroma_name }} {{ $chroma->skin_name }} ScreenShot"
|
||||
@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>
|
||||
@if (count($skin->chromas) > 0)
|
||||
If one look isn't enough for you, {{ $skin->skin_name }} comes with
|
||||
<strong>{{ $skin->chromas->count() }} different chroma options</strong>. That means once you
|
||||
own the base skin, you can pick up these color variants to match your mood or your team comp.
|
||||
Some players collect them all, while others just grab their favorite color.
|
||||
@else
|
||||
Unlike some skins that come with a rainbow of chromas, {{ $skin->skin_name }} keeps it focused
|
||||
with just the base design. So sadly, no chroma options here.
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
|
||||
<span class="hover:text-orange-400 group-hover:text-orange-400">
|
||||
{{ $chroma->chroma_name }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
<p>
|
||||
One thing to keep in mind: this skin is {{ $skin->loot_eligible ? 'available' : 'not available' }}
|
||||
through the loot system.
|
||||
@if ($skin->loot_eligible)
|
||||
So if you're the type to save your RP, you might get lucky with a hextech chest or event orb.
|
||||
But don't count on it - if you really want this skin, buying it directly is your best bet.
|
||||
@else
|
||||
That means you won't find it in hextech chests or event orbs, so direct purchase is your only
|
||||
option if you want to add it to your collection.
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<div class="mt-10">
|
||||
<h3 class="mb-3 text-xl font-bold text-orange-400">Who made {{ $skin->skin_name }}?</h3>
|
||||
<p>
|
||||
Ever wonder who's responsible for making these skins? We'll break it down for you:
|
||||
</p>
|
||||
|
||||
<p class="mt-3">
|
||||
@if (count($skin->voice_actor) > 0)
|
||||
When you hear {{ $skin->skin_name }} in game, you're listening to
|
||||
@if (count($skin->voice_actor) == 1)
|
||||
the work of voice actor {{ $skin->voice_actor[0] }}, who brings real personality to the
|
||||
lines.
|
||||
@else
|
||||
a team of voice talents including
|
||||
@foreach ($skin->voice_actor as $key => $voice_actor)
|
||||
{{ $voice_actor }}
|
||||
@if ($key < count($skin->voice_actor) - 2)
|
||||
,
|
||||
@elseif ($key == count($skin->voice_actor) - 2)
|
||||
and
|
||||
@endif
|
||||
@endforeach, who collaborated to create the skin's unique sound.
|
||||
@endif
|
||||
@else
|
||||
Riot hasn't shared who voiced {{ $skin->skin_name }}, but we hope you enjoy the new lines
|
||||
and
|
||||
personality they bring to the game anyway!
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<p class="mt-3">
|
||||
@if (count($skin->splash_artist) > 0)
|
||||
That splash art that caught your eye? It came from the tablet of
|
||||
@if (count($skin->splash_artist) == 1)
|
||||
{{ $skin->splash_artist[0] }}, one of Riot's talented artists who really captured the
|
||||
essence of {{ $skin->skin_name }}.
|
||||
@else
|
||||
several artists working together:
|
||||
@foreach ($skin->splash_artist as $key => $splash_artist)
|
||||
{{ $splash_artist }}
|
||||
@if ($key < count($skin->splash_artist) - 2)
|
||||
,
|
||||
@elseif ($key == count($skin->splash_artist) - 2)
|
||||
and
|
||||
@endif
|
||||
@endforeach. This collaboration resulted in the amazing artwork you
|
||||
see on the champion select screen.
|
||||
@endif
|
||||
@else
|
||||
Riot hasn't revealed who created the splash art for {{ $skin->skin_name }}, but we can
|
||||
appreciate the effort that went into it regardless. This could mean the splash art of
|
||||
{{ $skin->skin_name }}
|
||||
was created by Riot's internal team, or perhaps still a freelance artist that hasn't been
|
||||
revealed yet.
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lore Section -->
|
||||
<div class="p-6 mt-10 border rounded-2xl border-white/10" style="background-color: #704e3d;">
|
||||
<h3 class="mb-4 text-xl font-bold text-neutral-100">The Story Behind {{ $skin->skin_name }}</h3>
|
||||
<div class="leading-relaxed text-neutral-100">
|
||||
@if ($skin->lore)
|
||||
{!! $skin->lore !!}
|
||||
@else
|
||||
<p>
|
||||
We've dug through all of Riot's lore posts and cosmic archives, but sadly there's no
|
||||
official backstory for
|
||||
{{ $skin->skin_name }}... yet!
|
||||
|
||||
@if ($skin->release_date == '0000-00-00')
|
||||
Since this skin is still on its way to the live servers, we might get some juicy lore
|
||||
when it officially drops. Keep an eye on Riot's social media and the client for universe
|
||||
updates.
|
||||
@else
|
||||
Don't let that stop you from enjoying this skin though! It first arrived on
|
||||
{{ $skin->release_date }} and costs
|
||||
{{ $skin->rp_price == '99999' ? 'a special rate' : $skin->rp_price . ' RP' }}.
|
||||
@endif
|
||||
|
||||
You can always make up your own headcanon about how {{ $skin->champion->name }} came to
|
||||
have this look. That's half the fun of League's multiverse of skin lines!
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Chromas Gallery Section -->
|
||||
@if (count($skin->chromas) > 0)
|
||||
<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">
|
||||
Color Options: {{ $skin->skin_name }} Chromas
|
||||
</h2>
|
||||
|
||||
<p class="mb-6 text-neutral-100">
|
||||
Can't decide on just one look? We don't blame you! {{ $skin->skin_name }} comes with
|
||||
{{ count($skin->chromas) }} different chroma options that let you customize your favorite skin.
|
||||
Whether you want to match your team's color scheme or just feel like switching things up, these
|
||||
variants have got you covered without changing any of the awesome features of the base skin.
|
||||
</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 ($skin->chromas as $key => $chroma)
|
||||
<div class="flex flex-col group">
|
||||
<a href="/skin/{{ $skin->slug }}">
|
||||
<img src="//wsrv.nl/?url={{ $chroma->getChromaImageAttribute() }}&w=220&output=webp&q=70&il"
|
||||
alt="{{ $chroma->chroma_name }} {{ $chroma->skin_name }} ScreenShot"
|
||||
@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>
|
||||
<p class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
|
||||
<span class="hover:text-orange-400 group-hover:text-orange-400">
|
||||
{{ $chroma->chroma_name }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 text-neutral-100">
|
||||
Each chroma costs 290 RP, or you can often grab them all in a bundle at a discount. Keep an eye out
|
||||
for essence emporiums too, where you might be able to snag these with Blue Essence instead of RP.
|
||||
Which one's your favorite?
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Conclusion 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">
|
||||
Is {{ $skin->skin_name }} Worth It?
|
||||
</h2>
|
||||
|
||||
<div class="text-lg leading-relaxed text-neutral-100">
|
||||
<p>
|
||||
So, should you pick up {{ $skin->skin_name }} for your collection? Let's break it down:
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 my-6 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">Reasons to Buy:</h4>
|
||||
<ul class="space-y-1 list-disc list-inside">
|
||||
@if ($skin->new_effects)
|
||||
<li>Fresh visual effects that make abilities pop</li>
|
||||
@endif
|
||||
@if ($skin->new_animations)
|
||||
<li>Smooth new animations that feel great to play</li>
|
||||
@endif
|
||||
@if ($skin->new_recall)
|
||||
<li>A recall animation worth showing off</li>
|
||||
@endif
|
||||
@if ($skin->new_voice)
|
||||
<li>New voice lines and personality</li>
|
||||
@endif
|
||||
@if (count($skin->chromas) > 0)
|
||||
<li>{{ count($skin->chromas) }} chroma options for variety</li>
|
||||
@endif
|
||||
<li>{{ $skin->rarity }} tier quality visuals</li>
|
||||
@if ($skin->availability == 'Limited' || $skin->availability == 'Legacy')
|
||||
<li>Rare skin that not everyone has</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">Consider This:</h4>
|
||||
<ul class="space-y-1 list-disc list-inside">
|
||||
@if ($skin->rp_price > 1350)
|
||||
<li>Higher price point than basic skins</li>
|
||||
@endif
|
||||
@if (!$skin->new_effects)
|
||||
<li>Doesn't have new visual effects</li>
|
||||
@endif
|
||||
@if (!$skin->new_animations)
|
||||
<li>Uses the base animation set</li>
|
||||
@endif
|
||||
@if (!$skin->loot_eligible)
|
||||
<li>Can't be obtained through loot</li>
|
||||
@endif
|
||||
@if ($skin->availability == 'Upcoming' || $skin->release_date == '0000-00-00')
|
||||
<li>Not available just yet</li>
|
||||
@endif
|
||||
@if (count($skin->chromas) == 0)
|
||||
<li>No chroma options for variety</li>
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
@if ($skin->rp_price <= 975)
|
||||
At just {{ $skin->rp_price }} RP, {{ $skin->skin_name }} offers good value for a visual
|
||||
refresh on {{ $skin->champion->name }}. It's a budget-friendly option if you main this champion
|
||||
or just want to change things up without breaking the bank.
|
||||
@elseif ($skin->rp_price > 975 && $skin->rp_price <= 1350)
|
||||
For {{ $skin->rp_price }} RP, {{ $skin->skin_name }} sits in the mid-range of skin pricing. It
|
||||
offers a solid upgrade from the base skin with enough new features to feel fresh and exciting
|
||||
while playing. {{ $skin->rp_price }} RP is a common price point for skins, so if you want to
|
||||
invest a little more in your {{ $skin->champion->name }} experience, this skin could be a great
|
||||
choice. If {{ $skin->rp_price }} RP is a bit steep, consider checking out our <a
|
||||
href="/sale-rotation" class="text-orange-400 transition-colors hover:text-orange-300">sale
|
||||
rotation page</a> from time to time
|
||||
to see when it goes on sale.
|
||||
@elseif ($skin->rp_price > 1350 && $skin->rp_price != 99999)
|
||||
At {{ $skin->rp_price }} RP, {{ $skin->skin_name }} is definitely higher priced than most
|
||||
skins. But for
|
||||
dedicated {{ $skin->champion->name }} players, the comprehensive changes and high production
|
||||
value make it worth considering if you spend a lot of time on this champion. If you're a casual
|
||||
{{ $skin->champion->name }} player, you might want to wait for a sale or consider other skins
|
||||
that
|
||||
offer a better bang for your buck. To find out when this skin goes on sale, check out our <a
|
||||
href="/sale-rotation" class="text-orange-400 transition-colors hover:text-orange-300">sale
|
||||
rotation page</a>
|
||||
@else
|
||||
With its special availability, {{ $skin->skin_name }} is for the collectors and dedicated
|
||||
{{ $skin->champion->name }} enthusiasts. If you're passionate about this champion or the skin's
|
||||
theme, you'll want to keep an eye out for how to add this to your collection.
|
||||
If you're still looking for a {{ $skin->champion->name }} skin, check out the <a
|
||||
href="/champion/{{ $skin->champion->slug }}#skins"
|
||||
class="text-orange-400 transition-colors hover:text-orange-300">champion
|
||||
page</a> for more options.
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<p class="mt-4">
|
||||
Ultimately, skins are about personal preference and how much you enjoy playing
|
||||
{{ $skin->champion->name }}. If you're looking for a fresh experience with this champion and the
|
||||
theme of {{ $skin->skin_name }} appeals to you, it could be the perfect addition to your
|
||||
collection! If you want to consider other options, check out our dedicated <a
|
||||
href="/champion/{{ $skin->champion->slug }}#skins"
|
||||
class="text-orange-400 transition-colors hover:text-orange-300">{{ $skin->champion->name }}</a>
|
||||
page for more {{ $skin->champion->name }} skins and their details.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="p-6 mt-8 border shadow-md bg-stone-800/40 border-neutral-300/5 rounded-2xl" itemscope
|
||||
itemtype="https://schema.org/FAQPage">
|
||||
<h2
|
||||
class="mb-4 text-2xl font-bold text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
|
||||
<div class="divide-y divide-stone-700/50">
|
||||
<div class="py-4" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
||||
<h3 itemprop="name" class="mb-2 text-lg font-bold text-orange-400">How can I get
|
||||
{{ $skin->skin_name }} if it's not in the store?</h3>
|
||||
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
||||
<div itemprop="text" class="text-neutral-100">
|
||||
@if ($skin->rp_price == '99999')
|
||||
{{ $skin->skin_name }} is a special skin that can't be purchased directly with RP.
|
||||
Instead, you need to
|
||||
@if ($skin->availability == 'Limited')
|
||||
obtain it through special events or promotions. This might include The Sanctum
|
||||
(gacha system), Battle Pass progression, watching esports, or limited-time
|
||||
promotions. Since it's a limited-access skin, check the League client news for the
|
||||
specific method currently available.
|
||||
@elseif ($skin->availability == 'Upcoming')
|
||||
wait for its release, which will likely be part of a special event. When available,
|
||||
it will be obtainable through alternative means like The Sanctum (gacha system),
|
||||
Battle Pass progression, watching esports, or special promotions rather than direct
|
||||
RP purchase.
|
||||
@else
|
||||
access it through special means such as The Sanctum (gacha system), Battle Pass
|
||||
progression, watching esports, or limited-time promotions. Check the current event
|
||||
details in the League client for the exact method.
|
||||
@endif
|
||||
@elseif ($skin->availability == 'Legacy')
|
||||
While {{ $skin->skin_name }} is a legacy skin and not regularly available in the store,
|
||||
you can still obtain it through hextech crafting, event orbs, or during special sales
|
||||
when legacy vaults are temporarily opened. Keep an eye on the League client for events
|
||||
like Lunar Revel, Snowdown, or special champion spotlights when legacy skins often
|
||||
return.
|
||||
@elseif ($skin->availability == 'Limited')
|
||||
{{ $skin->skin_name }} is a limited skin, which means it's rare. Limited skins
|
||||
typically don't return to the store, but in some cases, you might find it in special
|
||||
bundles, through "Your Shop" personalized discounts, or during major game anniversaries
|
||||
when Riot occasionally brings back limited content.
|
||||
@elseif ($skin->availability == 'Upcoming')
|
||||
{{ $skin->skin_name }} hasn't been released yet! Once it launches, you'll be able to
|
||||
purchase it directly from the store for {{ $skin->rp_price }} RP.
|
||||
@else
|
||||
If {{ $skin->skin_name }} is not currently in your store, try restarting your client.
|
||||
You can purchase it directly for {{ $skin->rp_price }} RP, get it through hextech
|
||||
crafting (if you're lucky), or ask a friend to gift it to you.
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
||||
<h3 itemprop="name" class="mb-2 text-lg font-bold text-orange-400">Can I gift
|
||||
{{ $skin->skin_name }} to a friend?</h3>
|
||||
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
||||
<div itemprop="text" class="text-neutral-100">
|
||||
@if ($skin->rp_price == '99999')
|
||||
No, {{ $skin->skin_name }} cannot be gifted directly to friends. Since it's a special
|
||||
skin obtained through
|
||||
@if ($skin->availability == 'Upcoming')
|
||||
upcoming special means (like Battle Pass, The Sanctum, or other events), there is no
|
||||
direct gifting option. Your friend will need to participate in the event or
|
||||
promotion to obtain it themselves once it becomes available.
|
||||
@else
|
||||
alternative means (like Battle Pass, The Sanctum, or other events) rather than
|
||||
direct RP purchase, there is no gifting option available. Your friend will need to
|
||||
participate in the event or promotion to obtain it themselves.
|
||||
@endif
|
||||
@elseif ($skin->availability == 'Available')
|
||||
Yes! You can gift {{ $skin->skin_name }} to friends who have been on your friends list
|
||||
for at least 24 hours. Just go to the store, select the gifting icon, find your friend,
|
||||
and select the skin. Keep in mind that gifting costs the same amount
|
||||
({{ $skin->rp_price }} RP) as buying it for yourself.
|
||||
@elseif ($skin->availability == 'Legacy' || $skin->availability == 'Limited')
|
||||
When {{ $skin->skin_name }} becomes temporarily available during special events, you
|
||||
can gift it to friends who have been on your friends list for at least 24 hours. Since
|
||||
this is a {{ strtolower($skin->availability) }} skin, gifting it is a special surprise
|
||||
that not everyone will have access to.
|
||||
@elseif ($skin->availability == 'Upcoming')
|
||||
Once {{ $skin->skin_name }} is released, you'll be able to gift it to any friend who
|
||||
has been on your friends list for at least 24 hours. New skins are almost always
|
||||
giftable upon release.
|
||||
@else
|
||||
Yes, as long as the person has been on your friends list for at least 24 hours, you can
|
||||
gift this skin. Gifting costs the same ({{ $skin->rp_price }} RP) as buying it for
|
||||
yourself.
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
||||
<h3 itemprop="name" class="mb-2 text-lg font-bold text-orange-400">How does
|
||||
{{ $skin->skin_name }} compare to other {{ $skin->champion->name }} skins?</h3>
|
||||
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
||||
<div itemprop="text" class="text-neutral-100">
|
||||
@if ($skin->rp_price == '99999')
|
||||
{{ $skin->skin_name }} is a special skin that can't be directly purchased
|
||||
with RP, making it more exclusive than standard {{ $skin->champion->name }} skins.
|
||||
These special skins often have production quality comparable to higher-tier skins (1350
|
||||
RP+) with unique thematic elements.
|
||||
@else
|
||||
{{ $skin->skin_name }} offers a {{ strtolower($skin->rarity) }} tier experience at
|
||||
{{ $skin->rp_price }} RP, making it
|
||||
{{ $skin->rp_price < 1350 ? 'more affordable than other skins' : 'one of the higher-end options' }}
|
||||
for {{ $skin->champion->name }}.
|
||||
@endif
|
||||
|
||||
@if ($skin->new_effects && $skin->new_animations)
|
||||
What sets it apart from lower-tier {{ $skin->champion->name }} skins is the
|
||||
combination of custom visual effects and animations, which give a completely fresh feel
|
||||
to the champion.
|
||||
@elseif ($skin->new_effects)
|
||||
Unlike some basic {{ $skin->champion->name }} skins, this one includes custom visual
|
||||
effects that really change how your abilities look in game.
|
||||
@elseif ($skin->new_animations)
|
||||
The unique animations separate it from simpler {{ $skin->champion->name }} skins,
|
||||
giving the champion new personality through movement.
|
||||
@endif
|
||||
|
||||
For a detailed comparison with all other {{ $skin->champion->name }} skins, check out our
|
||||
<a href="/champion/{{ $skin->champion->slug }}"
|
||||
class="text-orange-400 hover:text-orange-300">{{ $skin->champion->name }}
|
||||
page</a> that lists all skins.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
||||
<h3 itemprop="name" class="mb-2 text-lg font-bold text-orange-400">
|
||||
@if ($skin->rp_price == '99999')
|
||||
What's the best way to get {{ $skin->skin_name }}?
|
||||
@else
|
||||
When does {{ $skin->skin_name }} go on sale?
|
||||
@endif
|
||||
</h3>
|
||||
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
||||
<div itemprop="text" class="text-neutral-100">
|
||||
@if ($skin->rp_price == '99999')
|
||||
The most efficient way to obtain {{ $skin->skin_name }} depends on its specific
|
||||
acquisition method. For Battle Pass skins, purchase the pass early and complete missions
|
||||
consistently. For Sanctum skins, use the free orbs first, then strategically purchase
|
||||
additional orbs if needed. For event-specific skins, check the event details in the
|
||||
League client for the most efficient path. Sometimes these special skins reappear in
|
||||
future events, but there's no guarantee, so it's best to grab them when initially
|
||||
available.
|
||||
@elseif ($skin->availability == 'Upcoming' || $skin->release_date == '0000-00-00')
|
||||
New skins like {{ $skin->skin_name }} typically don't go on sale immediately after
|
||||
release. You'll usually need to wait 4-6 months before seeing it in a regular sale
|
||||
rotation. However, it might appear in "Your Shop" with a personalized discount if you
|
||||
play {{ $skin->champion->name }} frequently.
|
||||
@elseif ($skin->availability == 'Legacy' || $skin->availability == 'Limited')
|
||||
Since {{ $skin->skin_name }} is a {{ strtolower($skin->availability) }} skin, it
|
||||
doesn't follow the regular sale schedule. Instead, watch for special events when legacy
|
||||
vaults open, usually at holidays or during champion updates. When available again, it
|
||||
might be at full price or occasionally discounted as part of a bundle.
|
||||
@else
|
||||
Riot typically puts skins on sale approximately every 6-8 months.
|
||||
{{ $skin->skin_name }} could appear in the weekly sale rotation for 30-50% off its
|
||||
original price ({{ $skin->rp_price }} RP). The most reliable way to get a discount is
|
||||
through "Your Shop," which offers personalized discounts on skins for champions you play
|
||||
often. Check our <a href="/sale-rotation"
|
||||
class="text-orange-400 hover:text-orange-300">sale rotation tracker</a> to see if
|
||||
this skin is on sale currently.
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,77 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $skin->skin_name . ' • Heimerdinger.LoL')
|
||||
@section('description', 'Heimerdinger.LoL: ' . $skin->skin_name . ' details showing all the information about
|
||||
the ' . $skin->rarity . ' ' . $skin->champion->name . ' skin. ' . substr($skin->lore, 0, 50) . '...')
|
||||
@section('description',
|
||||
'Heimerdinger.LoL: ' .
|
||||
$skin->skin_name .
|
||||
' details showing all the information about
|
||||
the ' .
|
||||
$skin->rarity .
|
||||
' ' .
|
||||
$skin->champion->name .
|
||||
' skin. ' .
|
||||
substr($skin->lore, 0, 50) .
|
||||
'...')
|
||||
|
||||
@section('content')
|
||||
<x-skins.grid_info :skin="$skin"/>
|
||||
<x-skins.grid_info :skin="$skin" />
|
||||
@endsection
|
||||
|
||||
@push('bottom_scripts')
|
||||
@vite('resources/js/vert-scroll.js')
|
||||
<script type="application/ld+json">
|
||||
@php
|
||||
$description = $skin->skin_name . " is a " . $skin->rarity . " tier skin for " . $skin->champion->name . " in League of Legends";
|
||||
$realCurrencyPrice = match (true) {
|
||||
$skin->rp_price == '99999' => 0,
|
||||
$skin->rp_price >= 3250 => 25,
|
||||
$skin->rp_price >= 1820 => 15,
|
||||
$skin->rp_price >= 1350 => 10,
|
||||
$skin->rp_price >= 975 => 7.5,
|
||||
$skin->rp_price >= 520 => 5,
|
||||
default => 0,
|
||||
};
|
||||
|
||||
if($skin->new_effects) $description .= " with custom visual effects";
|
||||
if($skin->new_animations) $description .= ", new animations";
|
||||
if($skin->new_recall) $description .= ", custom recall animation";
|
||||
if($skin->new_voice) $description .= ", new voice over";
|
||||
if($skin->new_quotes) $description .= ", unique voice lines";
|
||||
$description .= ".";
|
||||
|
||||
// creating json object cause blade parsing
|
||||
$jsonObject = [
|
||||
"@context" => "https://schema.org/",
|
||||
"@type" => "Product",
|
||||
"name" => $skin->skin_name . " - League of Legends Skin",
|
||||
"image" => $skin->getSkinImageAttribute(true),
|
||||
"description" => $description,
|
||||
"brand" => [
|
||||
"@type" => "Brand",
|
||||
"name" => "Riot Games"
|
||||
],
|
||||
"sku" => "lol-skin-" . $skin->id,
|
||||
"offers" => [
|
||||
"@type" => "Offer",
|
||||
"url" => url()->current(),
|
||||
"priceCurrency" => "EUR",
|
||||
"price" => $skin->rp_price == '99999' ? '' : $realCurrencyPrice,
|
||||
"priceValidUntil" => date('Y-m-d', strtotime('+1 year')),
|
||||
"availability" => $skin->availability == 'Available'
|
||||
? 'https://schema.org/InStock'
|
||||
: ($skin->availability == 'Upcoming' || $skin->release_date == '0000-00-00'
|
||||
? 'https://schema.org/PreOrder'
|
||||
: 'https://schema.org/LimitedAvailability'),
|
||||
"seller" => [
|
||||
"@type" => "Organization",
|
||||
"name" => "Riot Games"
|
||||
]
|
||||
],
|
||||
"category" => "Video Game Cosmetic Item",
|
||||
"releaseDate" => $skin->release_date == '0000-00-00' ? '' : $skin->release_date
|
||||
];
|
||||
|
||||
echo json_encode($jsonObject, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
|
||||
@endphp
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user