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/article-card.blade.php

@@ -1,45 +1,28 @@
 @props(['article', 'forSlider' => false])
 
 <div @class([
- 'h-[180px] md:h-[210px] rounded w-full shadow-sm relative overflow-hidden transition ease-in-out duration-200',
- 'hover:scale-[101%]' => !$forSlider,
- 'swiper-slide group' => $forSlider,
-]) style="background-color: var(--color-surface)"
-@if (!$forSlider)
- onmouseover="slideImage({{ $article->id }})" onmouseleave="unslideImage({{ $article->id }})"
- @endif>
- <a href="{{ route('article.show', $article->slug) }}">
- <div id="article-{{ $article->id }}" style="background: url('/storage/{{ $article->image }}');" class="article-image">
- </div>
+    'group rounded w-full relative overflow-hidden transition ease-in-out duration-200',
+    'hover:scale-[101%]' => !$forSlider,
+    'swiper-slide' => $forSlider,
+]) style="height: 215px; background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
+    <div class="relative w-full h-full overflow-hidden rounded-[6px]">
+        <a href="{{ route('article.show', $article->slug ?? $article->id) }}" class="block w-full h-full">
+            <img src="{{ $article->image ? '/storage/' . $article->image : '' }}"
+                onerror="this.parentElement.style.background='var(--color-surface)';this.style.display='none';"
+                alt="{{ $article->title }}"
+                class="object-cover w-full h-full transition-all duration-300 rounded-[6px] hover:scale-105"
+                loading="lazy">
 
- <div class="mt-3 md:mt-4 px-3 md:px-4">
- <p @class([
- 'font-semibold text-base md:text-lg truncate',
- 'group-hover:text-[var(--color-primary)] transition duration-200' => $forSlider,
- ]) >
- {{ $article->title }}
- </p>
-
- <div class="flex items-center gap-x-2">
- <div
- class="mt-2 md:mt-3 flex h-8 w-8 md:h-10 md:w-10 items-center justify-center overflow-hidden rounded-full" style="background-color: var(--color-background)">
- <img src="{{ setting('avatar_imager') }}{{ $article->user?->look }}&headonly=1" alt="">
- </div>
-
- <p class="mt-2 md:mt-4 font-semibold text-sm md:text-base" style="color: var(--color-text-muted)">
- {{ $article->user->username ?? setting('hotel_name') }}
- </p>
- </div>
- </div>
- </a>
+            <div class="absolute left-0 w-full p-2" style="bottom: -2px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);">
+                <h3 class="text-lg font-semibold text-white text-shadow-sm truncate">
+                    {{ $article->title }}
+                </h3>
+                @if($article->short_story)
+                    <p class="text-xs font-normal text-white text-shadow-sm truncate">
+                        {{ Str::limit($article->short_story, 80) }}
+                    </p>
+                @endif
+            </div>
+        </a>
+    </div>
 </div>
-
-<script>
- function slideImage(articleId) {
- document.getElementById('article-' + articleId).classList.add('article-image-slide');
- }
-
- function unslideImage(articleId) {
- document.getElementById('article-' + articleId).classList.remove('article-image-slide');
- }
-</script>