Initial commit

2026-05-09 17:28:23 +02:00
commit 9d73f82529
5575 changed files with 281989 additions and 0 deletions
@@ -0,0 +1,24 @@
+@props(['article'])
+
+<div class="swiper-slide relative article-image rounded-lg overflow-hidden" style="background-image: url({{ asset('storage/' . $article->image) }})">
+    <div class="absolute h-[90px] w-full left-0 bottom-0 bg-[#171a23]/95 text-white py-2 px-4">
+        <h2 class="text-xl font-bold truncate">
+            {{ $article->title }}
+        </h2>
+
+        <div class="flex justify-between items-center mt-1">
+            <div class="py-1 px-2 rounded-md bg-black/60 text-sm mt-2 flex gap-1 items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+                </svg>
+
+                {{ $article->user->username }}
+            </div>
+
+            <a href="{{ route('article.show', $article->slug) }}" class="text-sm mt-1 read-more-link hover:underline">
+                Read more
+            </a>
+
+        </div>
+    </div>
+</div>
@@ -0,0 +1,50 @@
+<x-slot name="title">
+    <h2 class="text-2xl font-semibold">{{ __('Hello!') }}</h2>
+    <p class="dark:text-gray-400">
+        {{ __('There is currently :online users online', ['online' => cache()->remember('online_user_count', 30, fn() => DB::table('users')->where('online', '1')->count())]) }}
+    </p>
+</x-slot>
+
+<form class="flex flex-col gap-y-3" action="{{ route('login') }}" method="POST">
+    @csrf
+
+    <div>
+        <x-form.label for="username">
+            {{ __('Username') }}
+        </x-form.label>
+
+        <x-form.input error-bag="login" name="username" value="{{ old('username') }}" placeholder="{{ __('Username') }}"
+                      :autofocus="true" />
+    </div>
+
+    <div>
+        <x-form.label for="password">
+            {{ __('Password') }}
+        </x-form.label>
+
+        <x-form.input error-bag="login" name="password" placeholder="{{ __('Password') }}" type="password" />
+    </div>
+
+    @if (setting('google_recaptcha_enabled'))
+        <div class="g-recaptcha" data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
+    @endif
+
+    @if (setting('cloudflare_turnstile_enabled'))
+        <x-turnstile />
+    @endif
+
+    <x-form.primary-button>
+        {{ __('Login') }}
+    </x-form.primary-button>
+
+    <div class="text-center text-sm font-semibold text-gray-700 dark:text-gray-400">
+        <a href="{{ route('forgot.password.get') }}" class="hover:underline" x-on:click="open = false">
+            {{ __('Did you forget your password?') }}
+        </a>
+    </div>
+    <div class="text-center text-sm font-semibold text-gray-700 dark:text-gray-400">
+        <a href="{{ route('register') }}" class="hover:underline" x-on:click="open = false">
+            {{ __('Dont have an account? Join now!') }}
+        </a>
+    </div>
+</form>
@@ -0,0 +1,6 @@
+@props(['classes' => ''])
+
+<div
+    class="text-white rounded bg-[#eeb425] hover:bg-[#e3aa1e] border-[2px] border-[#cf9d15] transition ease-in-out text-center rounded py-1 px-2 text-sm text-white cursor-pointer {{ $classes }}">
+    {{ $slot }}
+</div>
@@ -0,0 +1,34 @@
+@props(['user'])
+
+<div class="relative group bg-[#1a1d26] rounded-xl overflow-hidden border border-gray-800 hover:border-gray-600 transition-all duration-300 hover:shadow-lg hover:shadow-black/20">
+    <div class="absolute inset-0 bg-gradient-to-br from-[#1e222d] to-[#15171f]"></div>
+    
+    <div class="relative p-5 flex items-center gap-4">
+        <div class="relative">
+            <div class="w-20 h-20 rounded-full overflow-hidden border-2 {{ $user->online ? 'border-green-500' : 'border-gray-600' }} shadow-lg">
+                <img style="image-rendering: pixelated;"
+                     src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
+                     alt="{{ $user->username }}"
+                     class="w-full h-full object-cover">
+            </div>
+            <div class="absolute -bottom-1 -right-1 w-5 h-5 rounded-full border-2 border-[#1a1d26] {{ $user->online ? 'bg-green-500' : 'bg-gray-500' }}"></div>
+        </div>
+
+        <div class="flex-1 min-w-0">
+            <a href="{{ route('profile.show', $user->username) }}" class="block">
+                <h3 class="text-lg font-bold text-white truncate hover:text-blue-400 transition-colors">
+                    {{ $user->username }}
+                </h3>
+            </a>
+            <p class="text-sm text-gray-400 truncate mt-1">
+                {{ $user->motto ?: 'No motto set' }}
+            </p>
+            <div class="flex items-center gap-2 mt-2">
+                <span class="inline-flex items-center gap-1 text-xs {{ $user->online ? 'text-green-400' : 'text-gray-500' }}">
+                    <span class="w-2 h-2 rounded-full {{ $user->online ? 'bg-green-400' : 'bg-gray-500' }}"></span>
+                    {{ $user->online ? 'Online' : 'Offline' }}
+                </span>
+            </div>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,22 @@
+
+@props(['icon' => '', 'classes' => ''])
+
+<div class="w-full flex flex-col gap-y-4 rounded-lg overflow-hidden bg-[#2b303c] pb-4 shadow-sm text-gray-100 {{ $classes }}">
+    <div class="flex gap-x-2 bg-[#21242e] p-3">
+        @if (!empty($icon))
+            <div class="max-w-12.5 max-h-12.5 min-w-12.5 min-h-12.5 rounded-full relative flex items-center justify-center {{ $icon }}"></div>
+        @endif
+
+        <div class="flex flex-col justify-center text-sm">
+            <p class="font-semibold text-gray-100">{{ $title }}</p>
+
+            @if(isset($underTitle))
+                <p class="text-gray-300">{{ $underTitle }}</p>
+            @endif
+        </div>
+    </div>
+
+    <section class="h-full flex flex-col px-4">
+        {{ $slot }}
+    </section>
+</div>
@@ -0,0 +1,19 @@
+@props(['icon', 'classes' => ''])
+
+<div class="w-full flex flex-col gap-y-4 p-3 rounded-lg overflow-hidden {{ $classes }}">
+    <div class="flex gap-x-2">
+        <div
+            class="max-w-[50px] max-h-[50px] min-w-[50px] min-h-[50px] rounded-full {{ $icon }} relative flex items-center justify-center">
+        </div>
+
+        <div class="flex flex-col">
+            <p class="font-semibold text-black dark:text-gray-200">{{ $title }}</p>
+
+            @if(isset($underTitle))
+                <p class="dark:text-gray-500">{{ $underTitle }}</p>
+            @endif
+        </div>
+    </div>
+
+    {{ $slot }}
+</div>
@@ -0,0 +1,22 @@
+
+@props(['iconUrl' => '', 'color' => '', 'classes' => ''])
+
+<div class="w-full flex flex-col gap-y-4 rounded overflow-hidden bg-[#2b303c] pb-3 shadow-sm text-gray-100 {{ $classes }}">
+    <div class="flex gap-x-2 bg-[#21242e] p-3 text-gray-100">
+        @if (!empty($iconUrl))
+            <div style="background-image: url({{ $iconUrl }}); background-color: {{ $color }}; background-repeat: no-repeat; background-position: center;" class="max-w-[50px] max-h-[50px] min-w-[50px] min-h-[50px] rounded-full relative flex items-center justify-center "></div>
+        @endif
+
+        <div class="flex flex-col justify-center text-sm w-full">
+            <div class="w-full text-[16px]">{{ $title }}</div>
+
+            @if(isset($underTitle))
+                <p class="text-gray-300">{{ $underTitle }}</p>
+            @endif
+        </div>
+    </div>
+
+    <section class="h-full flex flex-col px-3">
+        {{ $slot }}
+    </section>
+</div>
@@ -0,0 +1,22 @@
+ @props(['badge' => '', 'color' => '#327fa8'])
+
+ <div class="w-full flex flex-col gap-y-4 rounded-lg overflow-hidden bg-[#2b303c] pb-4 shadow-sm text-gray-100">
+     <div class="flex gap-x-2 bg-[#21242e] p-3">
+         <div class="max-w-12.5 max-h-12.5 min-w-12.5 min-h-12.5 rounded-full relative flex items-center justify-center"
+             style="background-color: {{ $color }}">
+             <img src="{{ asset(sprintf('%s/%s.gif', setting('badges_path'), $badge)) }}" alt="">
+         </div>
+
+         <div class="flex flex-col justify-center text-sm">
+             <p class="font-semibold text-gray-300">{{ $title }}</p>
+
+             @if(isset($underTitle))
+                 <p class="text-gray-500">{{ $underTitle }}</p>
+             @endif
+         </div>
+     </div>
+
+     <section class="px-3">
+         {{ $slot }}
+     </section>
+ </div>
@@ -0,0 +1,13 @@
+@props(['icon'])
+
+<div class="gap-x-3 flex">
+    <div class="h-[25px] w-[25px] rounded-full {{ $icon }} outline-offset-[3px]"></div>
+
+    <div class="dark:text-gray-400 flex gap-x-2">
+        <span class="font-semibold dark:text-white">
+            {{ $currency }}
+        </span>
+
+        {{ $slot }}
+    </div>
+</div>
@@ -0,0 +1,21 @@
+<div class="h-[210px] dark:bg-gray-900 rounded w-full bg-white shadow-sm relative overflow-hidden transition ease-in-out duration-200">
+    <div style="background: url('https://i.imgur.com/uGLDOUu.png');" class="article-image">
+    </div>
+
+    <div class="mt-4 px-4">
+        <p class="font-semibold text-lg truncate dark:text-gray-200">
+            {{ __('No published articles') }}
+        </p>
+
+        <div class="flex items-center gap-x-2">
+            <div
+                class="mt-3 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+                <img src="{{ setting('avatar_imager') }}&headonly=1" alt="">
+            </div>
+
+            <p class="mt-4 font-semibold dark:text-gray-400">
+                {{ setting('hotel_name') }}
+            </p>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,123 @@
+<footer class="w-full h-14 flex items-center justify-center bg-gray-900 text-gray-500 font-bold cursor-pointer transition duration-200 ease-in-out hover:text-gray-400" onclick="showFooter()">
+    &copy {{ date('Y') }} {{ setting('hotel_name') }} is a not for profit educational project & is in no way affiliated with Sulake Corporation Oy.
+</footer>
+
+<style>
+    .swal2-modal {
+        background-color: #21242e;
+        color: #fff;
+    }
+    .swal2-html-container {
+        max-height: 300px;
+        overflow-y: scroll;
+    }
+</style>
+
+<script>
+    function showFooter() {
+        const creditList = [
+            {
+                contributor: 'Kasja',
+                contributions: 'Designing Dusk theme, helping with general design, Fonts for the logo generator, ideas & GFX'
+            },
+            {
+                contributor: 'Nicollas',
+                contributions: 'Dark mode, Turbolinks, Performance improvements, Article reactions, User sessions, Layout improvements & PT-BR translations'
+            },
+            {
+                contributor: 'Dominic/Mikkel',
+                contributions: 'Performance improvements & User sessions'
+            },
+            {
+                contributor: 'EntenKoeniq',
+                contributions: 'Automatic language registration, rooms page, profile page fixes & Paypal shop contributions'
+            },
+            {
+                contributor: 'Kani',
+                contributions: 'Rcon System & Findretros API'
+            },
+            {
+                contributor: 'Beny',
+                contributions: 'Findretros API fixes & CF Fixes'
+            },
+            {
+                contributor: 'Live',
+                contributions: 'French translations, bugfixes & tweaks'
+            },
+            {
+                contributor: 'MisterDeen',
+                contributions: 'Custom Discord widget, bugfixes & tweaks'
+            },
+            {
+                contributor: 'Assholic',
+                contributions: 'Fonts for the logo generator'
+            },
+            {
+                contributor: 'DamienJolly',
+                contributions: 'Bugfixes'
+            },
+            {
+                contributor: 'Danbo',
+                contributions: 'Bugfixes'
+            },
+            {
+                contributor: 'Diddy/Josh',
+                contributions: 'Code readability improvements'
+            },
+            {
+                contributor: 'Oliver',
+                contributions: 'Finnish translations'
+            },
+            {
+                contributor: 'Damue & EntenKoeniq',
+                contributions: 'German translations'
+            },
+            {
+                contributor: 'Talion',
+                contributions: 'Turkish translations'
+            },
+            {
+                contributor: 'CentralCee, Rille & Tuborgs',
+                contributions: 'Swedish translations'
+            },
+            {
+                contributor: 'Yannick',
+                contributions: 'Netherland translations'
+            },
+            {
+                contributor: 'Gedomi',
+                contributions: 'Spanish translations'
+            },
+            {
+                contributor: 'Lorenzune',
+                contributions: 'Italian translations'
+            },
+            {
+                contributor: 'Twana',
+                contributions: 'Norwegian translations'
+            },
+            {
+                contributor: 'Plow',
+                contributions: 'French translations'
+            },
+        ];
+
+        const formattedCredits = creditList.map(credit =>
+            `<strong>${credit.contributor}</strong> ${credit.contributions} <br/>`
+        ).join('');
+
+        const creator =
+            '<a class="text-blue-400 underline" href="https://devbest.com/threads/atom-cms-a-multi-theme-cms.93034/" target="_blank">Object</a>';
+
+        const content =
+            '{{ __('Thank you for playing :hotel. We have put a lot of effort into making the hotel what it is, and we truly appreciate you being here', ['hotel' => setting('hotel_name')]) }}' + '❤️';
+
+        const drivenBy = '{{ __(':hotel is driven by Atom CMS made by:', ['hotel' => setting('hotel_name')]) }}';
+
+        Swal.fire(
+            '<span class="text-[26px]">{{ setting('hotel_name') }}</span>',
+            `<span class="text-sm">${content}<br/><br/>${drivenBy} ${creator}<br/><br/><span class="flex flex-col space-y-2">{{ __('Credits:') }}<br/>${formattedCredits}</span></span>`,
+            'question'
+        );
+    }
+</script>
@@ -0,0 +1,6 @@
+@props(['classes' => '', 'type' => 'submit'])
+
+<button type="{{ $type }}"
+    class="w-full rounded bg-[var(--button-danger-color)] hover:bg-[var(--button-danger-hover-color)] text-[var(--button-danger-text-color)] border-2 border-[var(--button-danger-border-color)] transition ease-in-out duration-150 font-semibold px-6 py-2 {{ $classes }}">
+    {{ $slot }}
+</button>
@@ -0,0 +1,14 @@
+@props(['errorBag' => '', 'classes' => '', 'name', 'type' => 'text', 'value' => '', 'placeholder' => '', 'required' => true, 'autofocus' => false, 'readonly' => false])
+
+<input
+    class="{{ $classes }} focus:ring-0 border-2 border-gray-700 rounded bg-[#21242e] focus:border-[#eeb425] w-full text-gray-200 @error($name, $errorBag) border-red-600 ring-red-500 @enderror"
+    id="{{ $name }}" type="{{ $type }}" name="{{ $name }}" value="{{ $value }}"
+    autocomplete="{{ $name }}" placeholder="{{ $placeholder }}" @if ($readonly) required @endif
+    @if ($autofocus) autofocus="{{ $name }}" @endif
+    @if ($readonly) readonly @endif>
+
+@error($name, $errorBag)
+    <p class="mt-1 text-xs italic text-red-500">
+        {{ $message }}
+    </p>
+@enderror
@@ -0,0 +1,11 @@
+@props(['for', 'info' => ''])
+
+<div class="mb-2">
+    <label class="block font-semibold text-gray-700 dark:text-gray-200" for="{{ $for }}">
+        {{ $slot }}
+    </label>
+
+    <p class="text-gray-500 dark:text-gray-400 text-[14px]">
+        {{ $info }}
+    </p>
+</div>
@@ -0,0 +1,6 @@
+@props(['classes' => '', 'type' => 'submit'])
+
+<button type="{{ $type }}"
+    class="w-full rounded bg-transparent hover:bg-[var(--button-outline-hover-color)] text-[var(--button-outline-text-color)] border-2 border-[var(--button-outline-color)] transition ease-in-out duration-150 font-semibold px-6 py-2 {{ $classes }}">
+    {{ $slot }}
+</button>
@@ -0,0 +1,6 @@
+@props(['classes' => '', 'type' => 'submit'])
+
+<button type="{{ $type }}"
+    class="{{ $classes }} w-full rounded bg-[#eeb425] text-white p-2 border-2 border-yellow-400 transition ease-in-out duration-200 hover:bg-[#d49f1c] font-semibold">
+    {{ $slot }}
+</button>
@@ -0,0 +1,6 @@
+@props(['classes' => '', 'type' => 'submit'])
+
+<button type="{{ $type }}"
+    class="w-full rounded bg-[var(--button-secondary-color)] hover:bg-[var(--button-secondary-hover-color)] text-[var(--button-secondary-text-color)] border-2 border-[var(--button-secondary-border-color)] transition ease-in-out duration-150 font-semibold px-6 py-2 {{ $classes }}">
+    {{ $slot }}
+</button>
@@ -0,0 +1,19 @@
+@props(['name', 'content' => null])
+
+<div class="mt-3">
+    <textarea name="content" id="editor">
+        {{ $content ?? ''}}
+    </textarea>
+</div>
+
+<script src="https://cdn.tiny.cloud/1/{{ setting('tinymce_api_key') }}/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
+<script>
+
+    tinymce.init({
+        selector: 'textarea#editor',
+        plugins: 'lists image',
+        toolbar: 'undo redo | blocks| bold italic | bullist numlist checklist | code | table'
+
+    });
+
+</script>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+</svg>
+
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+    stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+</svg>
+
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+    class="h-5 w-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+        d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 1 0 9.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1 1 14.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" />
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5">
+    <path
+        d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
+    <path
+        d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
+</svg>
@@ -0,0 +1,4 @@
+<svg {{ $attributes }} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+    class="h-5 w-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+        d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
+    <path fill-rule="evenodd"
+        d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z"
+        clip-rule="evenodd" />
+</svg>
@@ -0,0 +1,52 @@
+@props([
+    'title',
+    'icon',
+    'data',
+    'valueKey',
+    'valueType',
+    'relationship' => null,
+    'formatValue' => null,
+])
+
+<div class="flex flex-col gap-y-3">
+    <div class="flex gap-2 rounded-md py-2 px-4 bg-[#21242e]/90 text-gray-100 font-bold">
+        <div class="flex items-center">
+            <img src="{{ asset('/assets/images/icons/' . $icon) }}" alt="" class="w-4" style="image-rendering: pixelated;">
+        </div>
+
+        {{ $valueType }}
+    </div>
+
+    @foreach ($data as $index => $entry)
+        <div class="p-3 rounded-md flex items-center justify-between h-[60px] overflow-hidden bg-[#21242e]/90">
+           <div class="flex gap-2 items-center">
+              <div class="w-12 h-12 rounded-full overflow-hidden relative leaderboard-background">
+                  <img class="absolute -top-2 left-0"
+                       src="{{ setting('avatar_imager') }}{{ $relationship ? $entry->{$relationship}?->look : $entry->look }}&head_direction=3&gesture=sml"
+                       alt=""/>
+              </div>
+
+               <div class="flex flex-col">
+                   <p class="font-bold text-gray-100">
+                       {{ $relationship ? $entry->{$relationship}?->username : $entry->username }}
+                   </p>
+                   <p class="text-gray-200 text-sm">
+                       {{ $formatValue ? $formatValue($entry->{$valueKey}) : $entry->{$valueKey} }} {{ $valueType }}
+                   </p>
+               </div>
+           </div>
+
+            <div @class([
+                    'flex items-center justify-center',
+                    'w-8 h-8 rounded-full bg-gray-300' => ($index + 1) > 3,
+                    'leaderboard-position first' => ($index + 1) == 1,
+                    'leaderboard-position second' => ($index + 1) == 2,
+                    'leaderboard-position third' => ($index + 1) == 3,
+                ])>
+                @if(($index + 1) > 3)
+                    {{ ($index + 1) }}
+                @endif
+            </div>
+        </div>
+    @endforeach
+</div>
@@ -0,0 +1,55 @@
+<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+<script>
+    var Toast = Swal.mixin({
+        toast: true,
+        position: 'top-end',
+        showConfirmButton: false,
+        timer: 4000,
+        timerProgressBar: true,
+        didOpen: (toast) => {
+            toast.addEventListener('mouseenter', Swal.stopTimer)
+            toast.addEventListener('mouseleave', Swal.resumeTimer)
+        }
+    })
+</script>
+
+@if (session()->has('message'))
+    <script>
+        Toast.fire({
+            icon: 'error',
+            title: '{{ session()->get('message') }}'
+        })
+    </script>
+@endif
+
+@if ($errors->any())
+    @foreach ($errors->all() as $error)
+        <script>
+            Toast.fire({
+                icon: 'error',
+                title: '{{ $error }}'
+            })
+        </script>
+    @endforeach
+@endif
+
+@if ($errors->login)
+    @foreach ($errors->login->all() as $error)
+        <script>
+            Toast.fire({
+                icon: 'error',
+                title: '{{ $error }}'
+            })
+        </script>
+    @endforeach
+@endif
+
+@if (session()->has('success'))
+    <script>
+        Toast.fire({
+            icon: 'success',
+            title: '{{ session()->get('success') }}'
+        })
+    </script>
+@endif
@@ -0,0 +1,5 @@
+@props(['classes' => ''])
+
+<div x-data="{ open: false }" class="relative {{ $classes }}">
+    {{ $slot }}
+</div>
@@ -0,0 +1,29 @@
+<div x-show="open" style="display: none" x-on:keydown.escape.prevent.stop="open = false" role="dialog" aria-modal="true"
+    x-id="['modal-title']" :aria-labelledby="$id('modal-title')" class="fixed inset-0 z-50 overflow-y-auto">
+
+    <div x-show="open" x-transition x-on:click="open = false"
+        class="relative flex min-h-screen items-center justify-center overflow-hidden p-4">
+        {{-- Overlay --}}
+        <div x-show="open" x-transition.opacity class="fixed inset-0 bg-black/50"></div>
+
+        <div x-on:click.stop x-trap.noscroll.inert="open"
+            class="relative w-full max-w-xl rounded px-6 py-6 shadow-md bg-[#21242e] text-gray-200 lg:max-w-2xl lg:px-8">
+            <button type="button" x-on:click="open = false"
+                class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white">
+                <svg aria-hidden="true" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd"
+                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                        clip-rule="evenodd"></path>
+                </svg>
+                <span class="sr-only">{{ __('Close modal') }}</span>
+            </button>
+
+            <div class="my-4 flex flex-col items-center" :id="$id('modal-title')">
+                {{ $title }}
+            </div>
+
+            {{ $slot }}
+        </div>
+    </div>
+</div>
@@ -0,0 +1,6 @@
+@props(['route' => '', 'classes' => '', 'target' => '_self'])
+
+<a href="{{ $route }}" target="{{ $target }}" @class(['dropdown-item
+', $classes])>
+    {{ $slot }}
+</a>
@@ -0,0 +1,75 @@
+@props(['icon', 'routeGroup' => '', 'classes' => '', 'childClasses' => 'min-w-[150px]', 'uppercase' => false, 'showChevron' => false, 'flexCol' => true])
+
+<div
+    x-data="{
+        open: false,
+        toggle() {
+            if (this.open) {
+                return this.close()
+            }
+
+            this.$refs.button.focus()
+
+            this.open = true
+        },
+        close(focusAfter) {
+            if (! this.open) return
+
+            this.open = false
+
+            focusAfter && focusAfter.focus()
+        },
+        isTouchDevice: isTouchDevice()
+    }"
+    x-on:keydown.escape.prevent.stop="close($refs.button)"
+    x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
+    x-id="['dropdown-button']"
+    x-on:mouseenter="isTouchDevice ? false : toggle()"
+    x-on:mouseleave="isTouchDevice ? false : toggle()"
+    x-on:click.stop="isTouchDevice ? toggle() : {}"
+    @class([
+        'relative h-auto font-semibold transition duration-300 ease-in-out z-5',
+        'active' => request()->is($routeGroup),
+        $classes,
+    ])
+>
+    <!-- Button -->
+    <button
+        x-ref="button"
+        :aria-expanded="open"
+        :aria-controls="$id('dropdown-button')"
+        type="button"
+        @class([
+            'flex gap-1  items-center transition ease-in-out hover:text-[#ac93da] dropdown-parent',
+            'flex-col' => $flexCol,
+        ])
+    >
+        @if(isset($icon))
+            <img class="icon" src="{{ asset(sprintf('/assets/images/dusk/%s', $icon)) }}" alt="Missing icon">
+        @endif
+
+        {{ $slot }}
+
+        @if($showChevron)
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20"
+                 fill="currentColor">
+                <path fill-rule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      clip-rule="evenodd"/>
+            </svg>
+        @endif
+    </button>
+
+    <!-- Panel -->
+    <div
+        x-ref="panel"
+        x-show="open"
+        x-transition.origin.top.left
+        x-on:click.outside="close($refs.button)"
+        :id="$id('dropdown-button')"
+        style="display: none;"
+        @class(['absolute left-0 rounded bg-[#ac93da] shadow-sm whitespace-nowrap overflow-hidden z-[100] flex flex-col py-2 items-center gap-2 dropdown-children mt-1', $childClasses])
+    >
+        {{ $children }}
+    </div>
+</div>
@@ -0,0 +1,11 @@
+<x-navigation.dropdown classes="!border-none" childClasses="w-[50px] -ml-2 flex items-center" :show-chevron="true" :flex-col="false">
+    {{ $slot }}
+
+    <x-slot:children>
+        @foreach (languages() as $lang)
+            <x-navigation.dropdown-child :route="route('language.select', $lang->country_code)" classes="transition ease-in-out duration-300 hover:scale-110 flex justify-center">
+                <img src="/assets/images/icons/flags/{{ $lang->country_code }}.png" alt="{{ $lang->country_code }}">
+            </x-navigation.dropdown-child>
+        @endforeach
+    </x-slot:children>
+</x-navigation.dropdown>
@@ -0,0 +1,109 @@
+<nav class="nav-header" x-data="{
+    open: false,
+ }" x-on:keydown.escape="open = false" x-effect="document.body.classList.toggle('menu-open', open)">
+    <div class="w-full min-h-[60px] text-white px-5 relative">
+        <button @click="open = !open" class="absolute right-5 top-5 z-50 p-2 rounded-lg transition-all duration-200 hover:bg-white/10" aria-controls="dusk-mobile-menu" :aria-expanded="open">
+            <span class="sr-only">{{ __('Open main menu') }}</span>
+            <svg x-show="!open" x-cloak xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+            </svg>
+            <svg x-show="open" x-cloak xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+        </button>
+
+        <div x-show="open" x-cloak
+             x-transition:enter="transition ease-out duration-300"
+             x-transition:enter-start="opacity-0 -translate-y-4"
+             x-transition:enter-end="opacity-100 translate-y-0"
+             x-transition:leave="transition ease-in duration-200"
+             x-transition:leave-start="opacity-100 translate-y-0"
+             x-transition:leave-end="opacity-0 -translate-y-4"
+             class="flex flex-col text-white gap-x-14 p-4 space-y-3">
+            <x-navigation.dropdown route-group="help-center*" :show-chevron="true" :flex-col="false">
+                {{ __('Community') }}
+
+                <x-slot:children>
+                    <x-navigation.dropdown-child :route="route('article.index')" @click="open = false">
+                        {{ __('Articles') }}
+                    </x-navigation.dropdown-child>
+
+
+                    <x-navigation.dropdown-child :route="route('staff.index')" @click="open = false">
+                        {{ __('Staff') }}
+                    </x-navigation.dropdown-child>
+
+                    <x-navigation.dropdown-child :route="route('teams.index')" @click="open = false">
+                        {{ __('Teams') }}
+                    </x-navigation.dropdown-child>
+
+                    <x-navigation.dropdown-child :route="route('staff-applications.index')" @click="open = false">
+                        {{ __('Staff applications') }}
+                    </x-navigation.dropdown-child>
+
+                    <x-navigation.dropdown-child :route="route('help-center.index')" @click="open = false">
+                        {{ __('Help center') }}
+                    </x-navigation.dropdown-child>
+
+                    <x-navigation.dropdown-child :route="route('photos.index')" @click="open = false">
+                        {{ __('Photos') }}
+                    </x-navigation.dropdown-child>
+                </x-slot:children>
+            </x-navigation.dropdown>
+
+            <a href="{{ route('leaderboard.index') }}" class="transition ease-in-out hover:text-[#ac93da]" @click="open = false">
+                {{ __('Leaderboards') }}
+            </a>
+
+            <a href="{{ route('article.index') }}" class="transition ease-in-out hover:text-[#ac93da]" @click="open = false">
+                {{ __('News') }}
+            </a>
+
+            <a href="{{ route('welcome') }}" class="transition ease-in-out hover:text-[#ac93da]" @click="open = false">
+                {{ __('Events') }}
+            </a>
+
+            <a href="{{ route('shop.index') }}" class="transition ease-in-out hover:text-[#ac93da]" @click="open = false">
+                {{ __('Store') }}
+            </a>
+
+            <x-navigation.dropdown route-group="help-center*"  :show-chevron="true" :flex-col="false">
+                {{ __('Home') }}
+
+                <x-slot:children>
+                    @auth
+                        <x-navigation.dropdown-child :route="route('profile.show', Auth::user()->username)" @click="open = false">
+                            {{ __('My profile') }}
+                        </x-navigation.dropdown-child>
+
+
+                        <x-navigation.dropdown-child :route="route('settings.account.show')" @click="open = false">
+                            {{ __('Account settings') }}
+                        </x-navigation.dropdown-child>
+
+                        <form action="{{ route('logout') }}" method="POST">
+                            @csrf
+                            <button type="submit" class="dropdown-item dark:text-gray-200 dark:hover:bg-gray-700 w-full text-left flex items-center gap-2 text-red-400 hover:text-red-300">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                                </svg>
+                                {{ __('Logout') }}
+                            </button>
+                        </form>
+                    @endauth
+
+                    @guest
+                        <x-navigation.dropdown-child :route="route('login')" @click="open = false">
+                            {{ __('Login') }}
+                        </x-navigation.dropdown-child>
+
+
+                        <x-navigation.dropdown-child :route="route('register')" @click="open = false">
+                            {{ __('Register') }}
+                        </x-navigation.dropdown-child>
+                    @endguest
+                </x-slot:children>
+            </x-navigation.dropdown>
+        </div>
+    </div>
+</nav>
@@ -0,0 +1,107 @@
+<nav class="nav-header">
+    <div class="max-w-7xl w-full flex justify-between items-center h-[120px]">
+        <a href="/" class="transition duration-300 ease-in-out hover:scale-105">
+            <img src="{{ setting('cms_logo') }}" alt="">
+        </a>
+
+        <div class="flex text-white gap-x-14">
+            <x-navigation.dropdown icon="community_icon.png" route-group="help-center*" :uppercase="true">
+                {{ __('Community') }}
+
+                <x-slot:children>
+                    <x-navigation.dropdown-child :route="route('staff.index')">
+                        {{ __('Staff') }}
+                    </x-navigation.dropdown-child>
+
+                    <x-navigation.dropdown-child :route="route('teams.index')">
+                        {{ __('Teams') }}
+                    </x-navigation.dropdown-child>
+					
+        <x-navigation.dropdown-child :route="route('team-applications.index')">
+            {{ __('Team applications') }}
+        </x-navigation.dropdown-child>
+
+                    <x-navigation.dropdown-child :route="route('staff-applications.index')">
+                        {{ __('Staff applications') }}
+                    </x-navigation.dropdown-child>
+
+                    <x-navigation.dropdown-child :route="route('values.index')">
+                        {{ __('Rare values') }}
+                    </x-navigation.dropdown-child>
+
+                    <x-navigation.dropdown-child :route="route('help-center.index')">
+                        {{ __('Help center') }}
+                    </x-navigation.dropdown-child>
+
+                    <x-navigation.dropdown-child :route="route('photos.index')">
+                        {{ __('Photos') }}
+                    </x-navigation.dropdown-child>
+                </x-slot:children>
+            </x-navigation.dropdown>
+
+            <a href="{{ route('leaderboard.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out hover:text-[#ac93da]">
+                <img class="icon" src="{{ asset('/assets/images/dusk/leaderboard_icon.png') }}" alt="community icon">
+                Leaderboards
+            </a>
+
+            <a href="{{ route('article.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out hover:text-[#ac93da]">
+                <img class="icon" src="{{ asset('/assets/images/dusk/news_icon.png') }}" alt="community icon">
+                News
+            </a>
+
+            {{--
+            <a href="#" class="flex flex-col gap-1 items-center transition ease-in-out hover:text-[#ac93da]">
+                <img class="icon" src="{{ asset('/assets/images/dusk/events_icon.png') }}" alt="community icon">
+                Events
+            </a>
+            --}}
+
+
+            <a href="{{ route('shop.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out hover:text-[#ac93da]">
+                <img class="icon" src="{{ asset('/assets/images/dusk/store_icon.png') }}" alt="community icon">
+                Store
+            </a>
+
+            <x-navigation.dropdown icon="home_icon.png" route-group="user*" :uppercase="true">
+                {{ __('Home') }}
+
+                <x-slot:children>
+                    @auth
+                        <x-navigation.dropdown-child :route="route('profile.show', Auth::user()->username)">
+                            {{ __('My profile') }}
+                        </x-navigation.dropdown-child>
+						
+						<x-navigation.dropdown-child :route="route('draw-badge')">
+							{{ __('Badge Drawer') }}
+						</x-navigation.dropdown-child>
+
+                        <x-navigation.dropdown-child :route="route('settings.account.show')">
+                            {{ __('Account settings') }}
+                        </x-navigation.dropdown-child>
+
+                        <form action="{{ route('logout') }}" method="POST">
+                            @csrf
+                            <button type="submit" class="dropdown-item text-red-400 hover:text-red-300 flex items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                                </svg>
+                                {{ __('Logout') }}
+                            </button>
+                        </form>
+                    @endauth
+
+                    @guest
+                        <x-navigation.dropdown-child :route="route('login')">
+                            {{ __('Login') }}
+                        </x-navigation.dropdown-child>
+
+
+                        <x-navigation.dropdown-child :route="route('register')">
+                            {{ __('Register') }}
+                        </x-navigation.dropdown-child>
+                    @endguest
+                </x-slot:children>
+            </x-navigation.dropdown>
+        </div>
+    </div>
+</nav>
@@ -0,0 +1,17 @@
+@props(['icon' => '', 'classes' => '', 'subHeader'])
+
+<div class="w-full bg-[#21242e] p-3 rounded-lg flex gap-2 items-center {{ $classes }}">
+    @if (!empty($icon))
+        {{ $icon }}
+    @endif
+
+   <div class="flex-col px-2">
+       <div class="text-lg font-bold text-gray-100 flex items-center">
+           {{ $slot }}
+       </div>
+
+       @if(isset($subHeader))
+           <p class="text-gray-500">{{ $subHeader }}</p>
+       @endif
+   </div>
+</div>
@@ -0,0 +1,13 @@
+@props(['photo'])
+
+<a href="{{ $photo->url }}" data-fancybox="gallery" class="cursor-pointer relative transition duration-300 ease-in-out hover:scale-[102%]">
+    <div class="photo-overlay"></div>
+    <img class="h-[250px] w-full object-cover object-center rounded-md custom-shadow" src="{{ $photo->url }}" alt="">
+
+    <div class="absolute right-2 bottom-2 bg-black/70 p-2 rounded-md text-white flex gap-x-2 z-[5]">
+        <img class="self-center" src="{{ asset('/assets/images/dusk/author_camera_icon.png') }}" alt="">
+        <small>
+            {{ $photo->user->username }}
+        </small>
+    </div>
+</a>
@@ -0,0 +1,43 @@
+@props(['rare'])
+
+<div class="p-3 rounded bg-gray-200 dark:bg-gray-700 flex gap-x-6 gap-4 items-center overflow-hidden">
+    <div class="w-8 h-8">
+        <div class="w-10 h-10 overflow-hidden rounded-full flex items-center justify-center bg-gray-300 dark:bg-gray-800">
+            <img src="{{ sprintf('%s/%s', setting('furniture_icons_path'), $rare->furniture_icon) }}" alt="">
+        </div>
+    </div>
+    <div class="flex flex-col w-full">
+        <div class="font-bold text-gray-700 dark:text-gray-200 truncate flex items-center gap-x-[5px]">
+            @if($rare->item_id)
+                <a href="{{ route('values.value', $rare) }}" class="underline">
+                    {{ strLimit($rare->name, 15) }}
+                </a>
+            @else
+                {{ strLimit($rare->name, 20) }}
+            @endif
+
+            @if($rare->isLimitedEdition())
+                <img class="w-4 h-4" src="{{ asset('/assets/images/icons/ltd.png') }}" alt="">
+            @endif
+        </div>
+
+        <div class="w-full bg-yellow-400 rounded h-[35px] flex items-center mt-2">
+            <div class="bg-yellow-500 rounded-l w-1/3 px-4 h-full flex items-center justify-center">
+                <img src="{{ asset('assets/images/icons/currency/credits.png') }}" alt="">
+            </div>
+            <p class="w-full text-center truncate">
+                {{ $rare->credit_value ?? 0 }} {{ __('credits') }}
+            </p>
+        </div>
+
+        <div class="w-full bg-gray-500 rounded h-[35px] flex items-center mt-1">
+            <div class="bg-gray-600 rounded-l w-1/3 px-4 h-full flex items-center justify-center">
+                <img src="{{ asset('/assets/images/icons/navigation/shop.png') }}" alt="">
+            </div>
+
+            <p class="w-full text-center truncate">
+                {{ $rare->currency_value ?? 0 }} {{ $rare->currency_type === 0 ? 'Duckets' : ($rare->currency_type === 5 ? 'Diamonds' : 'Other') }}
+            </p>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,95 @@
+@props(['package', 'gift' => false])
+
+<x-modals.regular-modal>
+    <x-slot name="title">
+        <h2 class="text-2xl">
+            {{ __(':package contents', ['package' => $package->name]) }}
+        </h2>
+    </x-slot>
+
+    <ul class="list-disc pl-4">
+        @if($package->features)
+            @foreach($package->features as $feature)
+                <li class="ml-3">
+                    {{ $feature->content }}
+                </li>
+            @endforeach
+        @endif
+
+        @if ($package->credits)
+            <li class="ml-3">{{ number_format($package->credits, 0, '.', '.') }} credits</li>
+        @endif
+
+        @if ($package->duckets)
+            <li class="ml-3">{{ number_format($package->duckets, 0, '.', '.') }} duckets</li>
+        @endif
+
+        @if ($package->diamonds)
+            <li class="ml-3">{{ number_format($package->diamonds, 0, '.', '.') }} diamonds</li>
+        @endif
+
+        @if ($package->rank)
+            <li class="ml-3">
+                {{ $package->rank->rank_name }} rank
+            </li>
+        @endif
+    </ul>
+
+    <div class="mt-6">
+        <p class="font-bold">
+            {{ __('Other features:') }}
+        </p>
+
+        <div class="flex flex-col gap-3 text-gray-100 mt-3 bg-[#303642] p-4 rounded-md">
+            @if (!empty($package->badges))
+                <p>
+                    {{ __('Badge(s) included:') }}
+                </p>
+
+                <div class="flex flex-wrap gap-2 items-center">
+                    @foreach (explode(';', $package->badges) as $badge)
+                        <div
+                            class="h-[50px] w-[50px] overflow-hidden p-2 bg-[#444d5c] rounded-md flex items-center justify-center">
+                            <img data-tippy-content="1x {{ $badge }}"
+                                 src="/client/flash/c_images/album1584/{{$badge}}.gif" alt="{{ $badge }}"
+                                 style="image-rendering: auto;">
+                        </div>
+                    @endforeach
+                </div>
+            @endif
+
+            @if ($package->furniture)
+                <p>
+                    {{ __('Furniture included:') }}
+                </p>
+                <div class="flex flex-col dark:text-white">
+                    <div class="flex flex-wrap gap-2 items-center">
+                        @foreach ($package->furniItems() as $furni)
+                            <div
+                                class="h-[50px] w-[50px] overflow-hidden p-2 bg-[#444d5c] rounded-md flex items-center justify-center">
+                                <img
+                                    data-tippy-content="{{ collect(json_decode($package->furniture))->firstWhere('item_id', $furni->id)->amount }}x {{ $furni->public_name }}"
+                                    src="{{$furni->icon()}}" alt="{{ __('Missing icon') }}">
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            @endif
+        </div>
+    </div>
+
+    <div class="mt-4">
+        <form action="{{ route('shop.buy', $package) }}" method="POST" class="w-full">
+            @csrf
+
+            @if($gift)
+                <x-form.input name="receiver" type="text" placeholder="Enter the name of the recipient you want to gift" classes="mb-2"/>
+            @endif
+
+            <button type="submit"
+                    class="w-full rounded bg-green-600 hover:bg-green-700 text-white p-2 border-2 border-green-500 transition ease-in-out duration-150 font-semibold">
+                {{ __('Buy for $:cost', ['cost' => $package->price()]) }}
+            </button>
+        </form>
+    </div>
+</x-modals.regular-modal>
@@ -0,0 +1,62 @@
+<x-content.shop-card color="{{ $article->color }}">
+    <x-slot:title>
+        <div class="flex justify-between w-full">
+            <p>
+                {{ $article->name }}
+            </p>
+
+            <span class="font-bold">
+                ${{ $article->price() }}
+            </span>
+        </div>
+    </x-slot:title>
+
+    <div class="flex justify-between dark:text-white w-full">
+        <div class="flex flex-col items-center w-full">
+            <div class="flex justify-center w-full">
+                <div class="p-2 max-w-[65px] max-h-[65px]">
+                    <img src="{{ $article->icon_url }}" alt="">
+                </div>
+            </div>
+
+            <div class="text-gray-100 mt-4">
+                {{ $article->info }}
+            </div>
+        </div>
+    </div>
+
+    <div class="pt-4 mt-auto flex gap-4">
+        <div class="w-full flex gap-2">
+            <x-modals.modal-wrapper>
+                <div x-on:click="open = true">
+                    <x-form.primary-button classes="px-4 w-full !text-yellow-100">
+                        <x-icons.eye />
+                    </x-form.primary-button>
+                </div>
+
+
+                <x-shop.package-content :package="$article"/>
+            </x-modals.modal-wrapper>
+
+            @if($article->is_giftable)
+                <x-modals.modal-wrapper>
+                    <div x-on:click="open = true">
+                        <x-form.primary-button classes="!text-blue-100 px-4 w-full !bg-[#0b80b3] !border-[#1891c4] hover:!bg-[#096891] transition-all">
+                            <x-icons.gift />
+                        </x-form.primary-button>
+                    </div>
+
+                    <x-shop.package-content :package="$article" :gift="true"/>
+                </x-modals.modal-wrapper>
+            @endif
+        </div>
+
+        <form action="{{ route('shop.buy', $article) }}" method="POST">
+            @csrf
+
+            <x-form.secondary-button type="submit" classes="text-green-100 px-4">
+                Buy
+            </x-form.secondary-button>
+        </form>
+    </div>
+</x-content.shop-card>
@@ -0,0 +1,20 @@
+@props(['placement' => 'left', 'classes' => ''])
+
+<div
+    @class([
+        'w-full flex mt-3',
+        'justify-start' => $placement === 'left',
+        'justify-center' => $placement === 'center',
+        'justify-end' => $placement === 'right',
+    ])
+    class="{{ $classes }}"
+>
+    @if (setting('google_recaptcha_enabled'))
+        <div class="mt-4 g-recaptcha"
+             data-sitekey="{{ config('habbo.site.recaptcha_site_key') }}"></div>
+    @endif
+
+    @if (setting('cloudflare_turnstile_enabled') === '1')
+            <x-turnstile />
+    @endif
+</div>
@@ -0,0 +1,121 @@
+<x-content.content-card icon="discord-icon" classes="border dark:border-gray-900">
+    <x-slot:title>
+        {{ __('Discord') }}
+    </x-slot:title>
+
+    <x-slot:under-title>
+        <span id="guildName"></span>
+    </x-slot:under-title>
+
+    <div class="text-sm dark:text-gray-200">
+        <div id="guildUsers" class="h-[129px] overflow-auto"> </div>
+        <a id="guildInvite" target="blank">
+            <x-form.secondary-button classes="mt-3">
+                {{ __('Join server') }}
+            </x-form.secondary-button>
+        </a>
+    </div>
+</x-content.content-card>
+
+@push('javascript')
+    <script>
+        window.onload = DiscordApi();
+
+        function DiscordApi() {
+            let init = {
+                method: 'GET',
+                mode: 'cors',
+                cache: 'reload'
+            }
+            //gets discord widget json from url with in settings specifed id
+            fetch("https://discordapp.com/api/guilds/{{ setting('discord_widget_id') }}/widget.json", init).then(
+                function(res) {
+                    //if there is a problem with discord or id sends an error message in console
+                    if (res.status != 200) {
+                        console.error("Discord widget cant connect to discord (" + res.status + ")");
+                        return;
+                    }
+
+                    res.json().then(function(data) {
+                        let users = data.members;
+                        let guildName = data.name;
+                        //sets the subtitle of the card to the guild name
+                        document.getElementById('guildName').innerText = guildName;
+
+                        //loops over every user in json array and display them in the widget
+                        for (let i = 0; i < data.members.length; i++) {
+                            let container = document.createElement('div')
+                            let leftContainer = document.createElement('div')
+                            let imgContainer = document.createElement('div')
+                            let img = document.createElement('img')
+                            let status = document.createElement('div')
+                            let rightContainer = document.createElement('div')
+                            let name = document.createElement('p')
+                            let motto = document.createElement('p')
+
+                            //sets styleing
+                            container.classList.add('flex', 'items-center', 'gap-x-2')
+                            leftContainer.classList.add('relative')
+                            imgContainer.classList.add('h-9', 'w-9', 'bg-gray-100', 'dark:bg-gray-800',
+                                'rounded-full', 'flex', 'items-center', 'justify-center', 'overflow-hidden')
+                            status.classList.add('absolute', 'bottom-0', 'right-0', 'w-3', 'h-3',
+                                'rounded-full', 'border-2', 'dark:border-gray-800')
+                            name.classList.add('font-semibold')
+                            motto.classList.add('dark:text-gray-400')
+
+                            //sets styling for exceptions
+                            if (i === 0) {
+                                name.classList.add('mt-1')
+                            }
+                            if (i !== 0) {
+                                imgContainer.classList.add('mt-1')
+                                name.classList.add('mt-3')
+                            }
+                            if (users[i].status === 'online') {
+                                status.style.backgroundColor = "#16a34a";
+                            }
+                            if (users[i].status === 'idle') {
+                                status.style.backgroundColor = "#e9b124";
+                            }
+                            if (users[i].status === 'dnd') {
+                                status.style.backgroundColor = "#9c0017";
+                            }
+
+                            //adds attributes to elements
+                            img.setAttribute('src', data.members[i].avatar_url);
+
+                            if (users[i].nick === undefined) {
+                                name.innerText = users[i].username;
+                            } else {
+                                name.innerText = users[i].nick;
+                            }
+                            if (users[i].game !== undefined) {
+                                motto.innerText = users[i].game.name;
+                            }
+
+                            //append all elements to each other
+                            container.appendChild(leftContainer)
+                            leftContainer.appendChild(imgContainer)
+                            imgContainer.appendChild(img)
+                            leftContainer.appendChild(status)
+                            container.appendChild(rightContainer)
+                            rightContainer.appendChild(name)
+                            rightContainer.appendChild(motto)
+
+                            document.getElementById('guildUsers').appendChild(container)
+                        }
+
+                        //Checks if join server link is null and removes btn form webpage
+                        if (data.instant_invite === null) {
+                            document.getElementById('guildInvite').remove()
+                            document.getElementById('guildUsers').style.height = "176px"
+                        } else {
+                            //Gives the "Join server" button a href to the default selected channel in the server
+                            //link is recived from widget json
+                            document.getElementById('guildInvite').setAttribute('href', data.instant_invite)
+                        }
+                    })
+                });
+        }
+    </script>
+@endpush
@@ -0,0 +1,21 @@
+
+@props(['user'])
+
+<div class="relative flex items-center justify-between overflow-hidden rounded px-10 me-backdrop"
+    style="background: rgba(0, 0, 0, 0.3) url({{ setting('cms_me_backdrop') }});">
+    <div>
+        <a href="{{ route('profile.show', $user) }}"
+            class="absolute -bottom-12 left-0 drop-shadow transition duration-300 ease-in-out hover:scale-105">
+            <img style="image-rendering: pixelated;"
+                src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
+                alt="">
+        </a>
+    </div>
+
+    <a data-turbolinks="false" href="{{ route('nitro-client') }}">
+        <button
+            class="cms-button bg-yellow-500 hover:bg-yellow-400 text-yellow-900 font-bold py-2 px-4 rounded-lg shadow-lg transition-all duration-300 hover:scale-105">
+            {{ __('Go to :hotel', ['hotel' => setting('hotel_name')]) }}
+        </button>
+    </a>
+</div>
@@ -0,0 +1,15 @@
+@props(['colSpan'])
+
+<div class="col-span-2 lg:col-span-{{ $colSpan }}">
+    {{ $image }}
+
+    <div class="shadow">
+        <div class="flex gap-x-2 rounded-t border-b bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900">
+            <p class="font-semibold text-black dark:text-white">{{ $title }}</p>
+        </div>
+
+        <section class="rounded-b bg-white p-3 dark:bg-gray-800 dark:text-white">
+            {{ $slot }}
+        </section>
+    </div>
+</div>
@@ -0,0 +1,47 @@
+<a href="{{ route('settings.account.show') }}"
+    class="{{ request()->routeIs('settings.account.show') ? 'bg-[#eeb425] text-white' : 'bg-[#21242e]' }} text-gray-100 flex gap-x-2 justify-center items-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out hover:bg-[#eeb425] hover:text-white">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+        stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+
+    {{ __('Account settings') }}
+</a>
+
+<a href="{{ route('settings.password.show') }}"
+    class="{{ request()->routeIs('settings.password.show') ? 'bg-[#eeb425] text-white' : 'bg-[#21242e]' }} text-gray-100 flex gap-x-2 justify-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out hover:bg-[#eeb425] hover:text-white">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+        stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+    </svg>
+
+    {{ __('Password settings') }}
+</a>
+
+<a href="{{ route('settings.two-factor') }}"
+    class="{{ request()->routeIs('settings.two-factor') ? 'bg-[#eeb425] text-white' : 'bg-[#21242e]' }} text-gray-100 flex gap-x-2 justify-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out hover:bg-[#eeb425] hover:text-white">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        class="h-6 w-6">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33" />
+    </svg>
+
+    {{ __('Two factor') }}
+</a>
+
+<a href="{{ route('settings.session-logs') }}"
+    class="{{ request()->routeIs('settings.session-logs') ? 'bg-[#eeb425] text-white' : 'bg-[#21242e]' }} text-gray-100 flex gap-x-2 justify-center rounded p-2 md:p-6 text-center md:text-xl font-semibold transition duration-200 ease-in-out hover:bg-[#eeb425] hover:text-white">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
+        stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <rect x="5" y="3" width="14" height="18" rx="2" />
+        <line x1="9" y1="7" x2="15" y2="7" />
+        <line x1="9" y1="11" x2="15" y2="11" />
+        <line x1="9" y1="15" x2="13" y2="15" />
+    </svg>
+
+    {{ __('Session logs') }}
+</a>