mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 18:20:48 +01:00
feat(assets): update assets index page layout and content
- Updated the layout of the assets index page to extend the 'layouts.app' template. - Added a title and description for better SEO optimization. - Reorganized the HTML structure for improved readability. - Updated the section titles for clarity. - Adjusted the styling of the main heading and subheading. - Added an image and descriptive text to enhance user engagement. - Improved the alignment and spacing of elements on the page. - Updated the links to asset categories with improved hover effects. This commit improves the overall user experience on the assets index page by enhancing its layout, content, and visual appeal.
This commit is contained in:
Rico van Zelst
@@ -42,3 +42,7 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shadow-footer {
|
||||||
|
box-shadow: 0 50vh 0 50vh #292524;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,64 +1,23 @@
|
|||||||
<!DOCTYPE html>
|
@extends('layouts.app')
|
||||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
||||||
|
|
||||||
<head>
|
@section('title', 'Heimerdinger.LoL • Assets')
|
||||||
<meta charset="utf-8">
|
@section('description', 'Explore game assets on Heimerdinger.LoL. Find detailed information on all icons and emotes
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
available in League of Legends!')
|
||||||
|
|
||||||
<!-- Favicon -->
|
@section('content')
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
|
<h1
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
|
|
||||||
<link rel="manifest" href="/img/icons/site.webmanifest">
|
|
||||||
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#e6855e">
|
|
||||||
<link rel="shortcut icon" href="/img/icons/favicon.ico">
|
|
||||||
<meta name="msapplication-TileColor" content="#ff7c47">
|
|
||||||
<meta name="msapplication-config" content="/img/icons/browserconfig.xml">
|
|
||||||
<meta name="theme-color" content="#ff7c47">
|
|
||||||
|
|
||||||
<title>Heimerdinger.LoL • Assets</title>
|
|
||||||
<meta name="description"
|
|
||||||
content="Explore game assets on Heimerdinger.LoL. Find detailed information on all icons and emotes available in League of Legends!">
|
|
||||||
|
|
||||||
<!-- OpenGraph -->
|
|
||||||
<meta property="og:site_name" content="Heimerdinger.LoL">
|
|
||||||
<meta property="og:title" content="Heimerdinger.LoL • Assets">
|
|
||||||
<meta property="og:description"
|
|
||||||
content="Explore game assets on Heimerdinger.LoL. Find detailed information on all icons and emotes available in League of Legends!">
|
|
||||||
<meta property="og:locale" content="en">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<meta property="og:image" content="{{asset('img/og_image.png')}}">
|
|
||||||
|
|
||||||
<!-- Twitter -->
|
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
|
||||||
<meta property="twitter:domain" content="heimerdinger.lol">
|
|
||||||
<meta property="twitter:title" content="Heimerdinger.LoL • Assets">
|
|
||||||
<meta property="twitter:description"
|
|
||||||
content="Explore game assets on Heimerdinger.LoL. Find detailed information on all icons and emotes available in League of Legends!">
|
|
||||||
<meta property="twitter:image" content="{{asset('img/og_image.png')}}">
|
|
||||||
|
|
||||||
<link rel="preconnect" href="https://rsms.me/">
|
|
||||||
<link rel="preload" href="https://rsms.me/inter/inter.css" as="style">
|
|
||||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" media="print" onload="this.media='all'">
|
|
||||||
|
|
||||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body class="antialiased bg-stone-900 dark scroll-smooth flex flex-col min-h-screen">
|
|
||||||
<x-navbar/>
|
|
||||||
<h1
|
|
||||||
class="mt-7 text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
|
class="mt-7 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">
|
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||||
Assets</h1>
|
Assets</h1>
|
||||||
<h2
|
<h2
|
||||||
class="text-lg font-bold text-center text-transparent uppercase
|
class="text-lg font-bold text-center text-transparent uppercase
|
||||||
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text ">
|
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text ">
|
||||||
LoL Icons & Emotes</h2>
|
LoL Icons & Emotes</h2>
|
||||||
|
|
||||||
|
<div class="container mx-auto p-4 flex items-center justify-center mt-3 flex-grow">
|
||||||
<div class="container mx-auto p-4 flex items-center justify-center mt-3 flex-grow">
|
|
||||||
<div class="text-center items-center justify-center align-middle">
|
<div class="text-center items-center justify-center align-middle">
|
||||||
<img class="items-center mx-auto" src="{{asset('img/heimerdinger-emote.webp')}}" alt="Heimerdinger Emote">
|
<img class="items-center mx-auto" src="{{asset('img/heimerdinger-emote.webp')}}"
|
||||||
|
alt="Heimerdinger Emote">
|
||||||
<p class="text-gray-100">Tired of endless browsing to find that one icon or emote you love?</p>
|
<p class="text-gray-100">Tired of endless browsing to find that one icon or emote you love?</p>
|
||||||
<p class="text-gray-100 ">We got you covered! Search through <span
|
<p class="text-gray-100 ">We got you covered! Search through <span
|
||||||
class="underline decoration-orange-500/50 font-medium">all</span>
|
class="underline decoration-orange-500/50 font-medium">all</span>
|
||||||
@@ -73,11 +32,5 @@
|
|||||||
class="bg-orange-500 text-white font-bold py-2 px-4 rounded hover:bg-orange-600">Emotes</a>
|
class="bg-orange-500 text-white font-bold py-2 px-4 rounded hover:bg-orange-600">Emotes</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@endsection
|
||||||
|
|
||||||
<x-footer/>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
<footer class="p-4 mt-7 md:p-8 lg:p-10 bg-stone-800">
|
<footer class="p-4 mt-7 md:p-8 lg:p-10 bg-stone-800 shadow-footer">
|
||||||
<div class="mx-auto max-w-screen-xl text-center">
|
<div class="mx-auto max-w-screen-xl text-center">
|
||||||
<a href="/" class="flex justify-center items-center text-2xl font-semibold text-gray-100">
|
<a href="/" class="flex justify-center items-center text-2xl font-semibold text-gray-100">
|
||||||
<x-logo class="w-auto mr-2 h-9" alt="Heimerdinger.lol Logo"/>
|
<x-logo class="w-auto mr-2 h-9" alt="Heimerdinger.lol Logo"/>
|
||||||
|
|||||||
Reference in New Issue
Block a user