Archive/HeimerdingerLoL
1
0
Fork 0
mirror of https://github.com/rico-vz/HeimerdingerLoL.git synced 2025-12-06 10:10:48 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(assets): update assets index page layout and content

Browse Source 
- 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
2023-12-08 17:57:37 +01:00
parent 40fada31bd
commit ba5f1f8b10
3 changed files with 34 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/css/app.css
View File

@@ -42,3 +42,7 @@
display: none; display: none;
} }
} }
.shadow-footer {
box-shadow: 0 50vh 0 50vh #292524;
}

105
resources/views/assets/index.blade.php
View File

@@ -1,83 +1,36 @@
<!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"> class="mt-7 text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
<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
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')}}"
<img class="items-center mx-auto" src="{{asset('img/heimerdinger-emote.webp')}}" alt="Heimerdinger Emote"> 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>
icons & icons &
emotes with ease. </p> emotes with ease. </p>
<p class="mb-6 text-gray-100">Automatically updated and sorted by release date.</p> <p class="mb-6 text-gray-100">Automatically updated and sorted by release date.</p>
<p class="text-gray-200 mb-3">Click on the asset category you'd like to view below to get started!</p> <p class="text-gray-200 mb-3">Click on the asset category you'd like to view below to get started!</p>
<div class="flex justify-center space-x-4"> <div class="flex justify-center space-x-4">
<a href="{{route('assets.icons.index')}}" <a href="{{route('assets.icons.index')}}"
class="bg-orange-500 text-white font-bold py-2 px-4 rounded hover:bg-orange-600">Icons</a> class="bg-orange-500 text-white font-bold py-2 px-4 rounded hover:bg-orange-600">Icons</a>
<a href="{{route('assets.emotes.index')}}" <a href="{{route('assets.emotes.index')}}"
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>

2
resources/views/components/footer.blade.php
View File

@@ -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"/>