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/community/photos.blade.php

@@ -2,40 +2,23 @@
  @push('title', __('Photos'))
 
  <div class="col-span-12">
- <div class="mb-6 p-6 rounded-xl border-2">
- <div class="flex items-center gap-4">
- <div class="w-14 h-14 rounded-full flex items-center justify-center shadow-lg" style="background-color: var(--color-primary);">
- <svg class="w-8 h-8" style="color: var(--button-text-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
- </svg>
- </div>
- <div>
- <h1 class="text-2xl font-bold" style="color: var(--color-text)">{{ __('Photos') }}</h1>
- <p style="color: var(--color-text-muted)">Bekijk de beste momenten vastgelegd door gebruikers</p>
- </div>
- </div>
- </div>
+  <div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
+   <div class="relative w-full h-12" style="background: linear-gradient(140deg, #3A2068 0%, #3F2673 15%, #493085 30%, #523A97 45%, #5B44A9 60%, #654EBB 75%, #7068D0 90%, #786ED8 100%);">
+   <div class="flex items-center justify-center h-full">
+    <h2 class="text-white font-bold text-xl">{{ __('Photos') }}</h2>
+   </div>
+   </div>
+   <div class="p-4">
+   <x-photos :photos="$photos" />
+   </div>
+  </div>
 
- <x-content.content-card icon="camera-icon" classes="border dark:border-gray-900">
- <x-slot:title>
- {{ __('Photo Gallery') }}
- </x-slot:title>
-
- <x-slot:under-title>
- {{ __('Klik op een foto om deze te vergroten') }}
- </x-slot:under-title>
-
- <x-photos :photos="$photos" />
- </x-content.content-card>
-
- <div class="mt-6">
- {{ $photos->links() }}
- </div>
+  <div class="mt-6">
+  {{ $photos->links() }}
+  </div>
  </div>
 
  @push('javascript')
  <script src="{{ config('habbo.cdn.fancybox_js') }}"></script>
-
  <link rel="stylesheet" href="{{ config('habbo.cdn.fancybox_css') }}" />
 </x-app-layout>