mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 18:20:48 +01:00
feat(skin-info): initial page redesign
This commit is contained in:
Rico van Zelst
@@ -1,166 +1,310 @@
|
|||||||
<section class="max-w-screen-xl mx-auto mt-12">
|
<section class="max-w-screen-xl mx-auto mt-12">
|
||||||
<h3
|
<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">
|
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
|
<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">
|
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
|
<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">
|
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 }}">
|
<a href="/champion/{{ $skin->champion->slug }}">
|
||||||
<span class="flex items-center justify-center">
|
<span class="flex items-center justify-center">
|
||||||
View
|
View champion info
|
||||||
champion
|
|
||||||
info
|
|
||||||
<x-iconsax-bul-arrow-square-right class="w-5" />
|
<x-iconsax-bul-arrow-square-right class="w-5" />
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
<x-ads.common />
|
<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">
|
<!-- Hero Section with Splash Art -->
|
||||||
<div
|
<div class="container mx-auto mt-8">
|
||||||
class="relative border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80 lg:col-span-2">
|
<!-- Full-width Splash Art -->
|
||||||
|
<div class="relative mb-8 border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80">
|
||||||
<div class="absolute inset-0 aspect-video glow-shadow rounded-2xl"
|
<div class="absolute inset-0 aspect-video glow-shadow rounded-2xl"
|
||||||
style="--splash-color: {{ $skin->splash_color }}"></div>
|
style="--splash-color: {{ $skin->splash_color }}"></div>
|
||||||
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=840&output=webp&q=90"
|
<img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute(true) }}&w=840&output=webp&q=90"
|
||||||
alt="{{ $skin->skin_name }} Splash Art"
|
alt="{{ $skin->skin_name }} Splash Art"
|
||||||
class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100 rounded-2xl">
|
class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100 rounded-2xl">
|
||||||
|
|
||||||
<div class="absolute bottom-0 left-0 p-4">
|
<div class="absolute bottom-0 left-0 p-4">
|
||||||
<a href="{{ $skin->getSkinImageAttribute(true) }}" rel="noopener" target="_blank"
|
<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
|
class="p-2 text-base font-bold text-white bg-black bg-opacity-50 rounded-xl">View in HD</a>
|
||||||
HD</a>
|
|
||||||
</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"
|
<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>
|
||||||
|
|
||||||
|
<!-- Quick Facts Card -->
|
||||||
|
<div class="p-4 transition-all duration-700 border shadow-md rounded-xl border-white/10"
|
||||||
style="--tw-shadow-color:{{ $skin->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $skin->splash_color }};">
|
style="--tw-shadow-color:{{ $skin->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $skin->splash_color }};">
|
||||||
|
<h4 class="mb-2 text-lg font-semibold text-center uppercase text-neutral-100">Quick Facts</h4>
|
||||||
<h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2">
|
<div class="text-base text-neutral-100">
|
||||||
{{ $skin->skin_name }} Details</h4>
|
<p class="mb-2"><span class="font-bold">Price:</span>
|
||||||
|
|
||||||
<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')
|
@if ($skin->rp_price == '99999')
|
||||||
Not Available for RP
|
Special Availability
|
||||||
@else
|
@else
|
||||||
<x-icon-RiotPoints class="inline-block w-4" />
|
<x-icon-RiotPoints class="inline-block w-4" /> {{ $skin->rp_price }} RP
|
||||||
{{ $skin->rp_price }} RP
|
|
||||||
@endif
|
@endif
|
||||||
</li>
|
</p>
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
<p class="mb-2"><span class="font-bold">Released:</span>
|
||||||
lang="en">
|
@if ($skin->release_date == '0000-00-00')
|
||||||
<span class="font-bold">Release Date:</span> {{ $skin->release_date }}
|
Coming Soon
|
||||||
</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
|
@else
|
||||||
None
|
{{ $skin->release_date }}
|
||||||
@endif
|
@endif
|
||||||
</li>
|
</p>
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
<p class="mb-2"><span class="font-bold">Rarity:</span> {{ $skin->rarity }}</p>
|
||||||
lang="en">
|
<p class="mb-2"><span class="font-bold">Available:</span> {{ $skin->availability }}</p>
|
||||||
<span class="font-bold">Lootable:</span> {{ $skin->loot_eligible ? 'Yes' : 'No' }}
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
</div>
|
||||||
lang="en">
|
|
||||||
<span class="font-bold">New Effects:</span> {{ $skin->new_effects ? 'Yes' : 'No' }}
|
<p>
|
||||||
</li>
|
@if ($skin->release_date == '0000-00-00')
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
Riot hasn't dropped this skin on live servers just yet, but it's definitely on the way!
|
||||||
lang="en">
|
{{ $skin->skin_name }}
|
||||||
<span class="font-bold">New Animations:</span> {{ $skin->new_animations ? 'Yes' : 'No' }}
|
might already be available on PBE, or maybe already has a SkinSpotlights video. While we don't
|
||||||
</li>
|
have an exact
|
||||||
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
|
release date yet, this {{ $skin->rarity }} tier skin will be joining
|
||||||
lang="en">
|
{{ $skin->champion->name }}'s collection soon.
|
||||||
<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
|
@else
|
||||||
@foreach ($skin->voice_actor as $voice_actor)
|
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
|
||||||
|
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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
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 }}
|
{{ $voice_actor }}
|
||||||
@endforeach
|
@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
|
@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
|
@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)
|
@foreach ($skin->splash_artist as $key => $splash_artist)
|
||||||
{{ $splash_artist }}
|
{{ $splash_artist }}
|
||||||
@if ($key < count($skin->splash_artist) - 2)
|
@if ($key < count($skin->splash_artist) - 2)
|
||||||
,
|
,
|
||||||
@elseif ($key == count($skin->splash_artist) - 2)
|
@elseif ($key == count($skin->splash_artist) - 2)
|
||||||
&
|
and
|
||||||
@endif
|
@endif
|
||||||
@endforeach
|
@endforeach. This collaboration resulted in the amazing artwork you
|
||||||
|
see on the champion select screen.
|
||||||
@endif
|
@endif
|
||||||
</li>
|
@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
|
||||||
</ul>
|
{{ $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>
|
</div>
|
||||||
|
|
||||||
|
<!-- Lore Section -->
|
||||||
<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"
|
<div class="p-6 mt-10 border rounded-2xl border-white/10"
|
||||||
style="--tw-shadow-color:{{ $skin->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $skin->splash_color }};">
|
style="background-color: {{ $skin->splash_color }};">
|
||||||
<div class="p-4">
|
<h3 class="mb-4 text-xl font-bold text-neutral-100">The Story Behind {{ $skin->skin_name }}</h3>
|
||||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
|
<div class="leading-relaxed text-neutral-100">
|
||||||
{{ $skin->name }} Lore</h4>
|
|
||||||
<p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose" lang="en">
|
|
||||||
@if ($skin->lore)
|
@if ($skin->lore)
|
||||||
{!! $skin->lore !!}
|
{!! $skin->lore !!}
|
||||||
@else
|
@else
|
||||||
Heimerdinger has looked far and wide but could not find any lore for
|
<p>
|
||||||
{{ $skin->skin_name }}.
|
We've dug through all of Riot's lore posts and cosmic archives, but sadly there's no
|
||||||
But we're sure it's a great skin! The things we do know is that it was released on
|
official backstory for
|
||||||
{{ $skin->release_date }} and costs {{ $skin->rp_price }} RP.
|
{{ $skin->skin_name }}... yet!
|
||||||
@endif
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
@if ($skin->release_date == '0000-00-00')
|
||||||
<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"
|
Since this skin is still on its way to the live servers, we might get some juicy lore
|
||||||
style="--tw-shadow-color:{{ $skin->splash_color }}; --tw-shadow: var(--tw-shadow-colored); background-color: {{ $skin->splash_color }};">
|
when it officially drops. Keep an eye on Riot's social media and the client for universe
|
||||||
<div class="p-4">
|
updates.
|
||||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
|
@else
|
||||||
{{ $skin->name }} Chromas ({{ count($skin->chromas) }}) </h4>
|
Don't let that stop you from enjoying this skin though! It first arrived on
|
||||||
<div id="skinsElement" class="overflow-x-scroll mt-2.5">
|
{{ $skin->release_date }} and costs
|
||||||
<div class="grid grid-flow-col grid-rows-2 w-max gap-4 mb-2.5">
|
{{ $skin->rp_price == '99999' ? 'a special rate' : $skin->rp_price . ' RP' }}.
|
||||||
@if (count($skin->chromas) < 1)
|
@endif
|
||||||
<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.
|
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>
|
</p>
|
||||||
@endif
|
@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)
|
@foreach ($skin->chromas as $key => $chroma)
|
||||||
<div class="flex flex-col group">
|
<div class="flex flex-col group">
|
||||||
<a href="/skin/{{ $skin->slug }}">
|
<a href="/skin/{{ $skin->slug }}">
|
||||||
@@ -169,20 +313,131 @@
|
|||||||
@if ($key < 6) loading="eager" @else loading="lazy" @endif
|
@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">
|
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>
|
</a>
|
||||||
<div>
|
<p class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
|
||||||
|
|
||||||
<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">
|
<span class="hover:text-orange-400 group-hover:text-orange-400">
|
||||||
{{ $chroma->chroma_name }}
|
{{ $chroma->chroma_name }}
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user