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/layouts/app.blade.php

@@ -179,20 +179,36 @@
  <x-site-header />
 
  {{-- Navigation --}}
- <nav class="relative bg-white shadow-sm dark:bg-gray-900" style="background-color: var(--color-navbar)">
- <div class="max-w-7xl min-h-[60px] px-4 md:flex md:items-center md:justify-between md:mx-auto">
- <x-navigation.navigation-menu />
+ <nav x-data="{
+  dropdownVisible: false,
+  isMobile: window.innerWidth < 768
+ }"
+  x-init="dropdownVisible = false; isMobile = window.innerWidth < 768; window.addEventListener('resize', () => { isMobile = window.innerWidth < 768; });"
+   class="relative z-40 shadow overflow-visible" style="background-color: var(--color-navbar, #ffffff);"
+  x-on:click.outside="dropdownVisible = false">
+ <div class="max-w-7xl min-h-[60px] px-4 mx-auto flex items-center justify-between">
+ <div class="relative flex flex-col items-center w-full h-full py-5 md:flex-row md:gap-x-8 md:py-0">
 
- <div class="hidden lg:flex items-center">
- <x-navigation.theme-mode-switcher />
+  <div class="flex items-center justify-between w-full md:w-auto">
+  <button class="relative block text-gray-900 dark:text-white md:hidden" x-on:click="dropdownVisible = !dropdownVisible">
+   <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+   <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+   </svg>
+  </button>
 
- <x-navigation.language-selector>
- <img src="/assets/images/icons/flags/{{ session()->has('locale') ? session()->get('locale') : config('habbo.site.default_language') }}.png"
- alt="">
- </x-navigation.language-selector>
+  <div class="flex items-center md:hidden">
+   <x-navigation.theme-mode-switcher />
+  </div>
+  </div>
+
+  <div class="mobile-nav-menu flex flex-col md:flex-row md:items-center md:justify-center w-full gap-y-3 md:gap-x-8 md:gap-y-0"
+  :class="{ 'show-mobile': dropdownVisible }">
+  <x-navigation.navigation-menu />
+  <div class="hidden md:flex items-center">
+   <x-navigation.theme-mode-switcher />
+  </div>
+  </div>
  </div>
-
- <x-navigation.mobile-menu />
  </div>
  </nav>