Complete Hubbly theme conversion: all pages rewritten with CSS variable theming

- Converted all views from Dusk components (x-content.content-card, x-form.*) to inline Hubbly style
- All pages use consistent card pattern: rounded-lg, gradient headers, color-mix borders
- Added Hubbly-style homepage with 2-column layout, login card, swiper news carousel
- Rewrote navigation with Alpine.js dropdowns, CSS variable colors, Hubbly assets
- Updated profile page with Hubbly cards, fixed data bugs (friend/guild relationships)
- Rewrote register page to match Hubbly layout: banner header, avatar preview with Frank GIF, 2-column form, avatar carousel selector, border-4 inputs
- Rewrote login, settings, help center, radio, applications, utility pages
- All colors use CSS variables controlled by Filament theme editor
- Added Hubbly assets: banner, Frank GIF, navigation icons, online badge
- Removed all dependencies on x-content.* and x-form.* components

resources/themes/atom/views/components/site-header.blade.php

@@ -1,5 +1,5 @@
-<div class="relative flex min-h-[13rem] h-52 w-full items-center justify-center header-bg"
- style="background: url({{ setting('cms_header') }});">
+<div class="relative flex min-h-[13rem] h-52 w-full items-center justify-center"
+ style="background-image: url({{ asset('assets/images/mybobba_banner.png') }}); background-size: cover; background-position: center; background-repeat: no-repeat;">
  <div class="absolute h-full w-full bg-black/50"></div>
 
  @auth
@@ -51,37 +51,27 @@
  @endauth
 
  @guest
- <x-modals.modal-wrapper>
- <div class="flex justify-center">
- <div class="font-semibold flex-col md:w-[600px]" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">
-  <p class="hidden text-center text-xl md:block" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">
-  {{ __('An online virtual world where you can create your own avatar, make friends, chat, create rooms and much more!') }}
-  </p>
+   <div x-data="{ open: false }" class="relative">
+   <div class="flex flex-col items-center justify-center md:w-[600px] mx-auto">
+   <a href="{{ route('welcome') }}" class="transition-all duration-300 hover:scale-110 mb-2.5">
+   <img src="{{ setting('cms_logo') }}" alt="{{ setting('hotel_name') }}" class="drop-shadow block" />
+   </a>
 
-  <div class="flex flex-col items-center justify-center gap-x-6 gap-y-4 md:mt-6 md:flex-row md:gap-y-0">
-  <button type="button" x-on:click="open = true"
-  class="rounded-full border-2 px-8! py-2! uppercase transition! duration-200! ease-in-out!"
-  style="border-color: var(--color-primary); background-color: var(--color-primary); color: var(--button-text-color)">
-  {{ __('Login') }}
-  </button>
+   <div class="relative flex items-center rounded-md h-[50px] px-4 mt-2 md:mt-0"
+   style="margin-top: 5px; cursor: pointer; background-color: var(--color-surface, #ffffff); color: var(--color-text, #1f2937);" x-on:click="open = true">
+   <div class="absolute w-6 h-6 z-0 diamond" aria-hidden="true" style="background-color: var(--color-surface, #ffffff);"></div>
+   <div class="flex items-center space-x-2 relative z-10">
+    <img src="{{ asset('assets/images/user-online.png') }}" alt="Online Icon" class="p-1"
+    style="margin-top: -2px;" />
+    <span class="whitespace-nowrap text-m text-gray-800 dark:text-white">{{ cache()->remember('online_user_count', 30, fn() => DB::table('users')->where('online', '1')->count()) }} {{ __('users online') }}</span>
+   </div>
+   </div>
+  </div>
 
-  <p class="text-sm uppercase" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">{{ __('Or') }}</p>
+  <x-modals.regular-modal x-model="show {{ session()->get('wrong-auth') }}">
+   <x-auth.login-form />
+  </x-modals.regular-modal>
+  </div>
 
- <a data-turbolinks="false" href="{{ route('register') }}">
- <button
- class="uppercase px-8! py-2.5! rounded-full transition! ease-in-out! duration-200!"
- style="background-color: var(--color-accent); color: var(--button-text-color, #ffffff);">
- {{ __('Create an account') }}
- </button>
- </a>
- </div>
- </div>
- </div>
-
- <x-modals.regular-modal x-model="show {{ session()->get('wrong-auth') }}">
- <x-auth.login-form />
- </x-modals.regular-modal>
- </x-modals.modal-wrapper>
-
- @endguest
+  @endguest
 </div>