You've already forked Atomcms-edit
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
This commit is contained in:
root
@@ -1,105 +1,79 @@
|
||||
<x-app-layout>
|
||||
@push('title', __('Staff'))
|
||||
|
||||
<div class="col-span-12 lg:col-span-9 space-y-8">
|
||||
@foreach ($employees as $employee)
|
||||
@php
|
||||
$sectionColor = $employee->staff_color ?? '#eeb425';
|
||||
@endphp
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl border-2 overflow-hidden transition-all duration-300"
|
||||
style="border-color: {{ $sectionColor }}30; box-shadow: 0 8px 32px {{ $sectionColor }}10;">
|
||||
<div class="px-6 py-5 border-b flex items-center gap-4 transition-all duration-300"
|
||||
style="background: linear-gradient(135deg, {{ $sectionColor }}12 0%, transparent 100%); border-color: {{ $sectionColor }}30;">
|
||||
@if($employee->badge)
|
||||
<div class="relative">
|
||||
<img src="{{ asset(setting('badges_path') . $employee->badge . '.gif') }}"
|
||||
alt="{{ $employee->rank_name }}"
|
||||
class="w-14 h-14 -lg">
|
||||
</div>
|
||||
@endif
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="text-2xl font-extrabold tracking-tight"
|
||||
style="color: {{ $sectionColor }};">
|
||||
{{ $employee->rank_name }}
|
||||
</h2>
|
||||
</div>
|
||||
@if($employee->job_description)
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ $employee->job_description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="px-4 py-1.5 rounded-full text-sm font-bold"
|
||||
style="background-color: {{ $sectionColor }}20; color: {{ $sectionColor }}; border: 1px solid {{ $sectionColor }}40;">
|
||||
{{ count($employee->users) }} {{ count($employee->users) == 1 ? __('member') : __('members') }}
|
||||
</span>
|
||||
<span class="text-4xl font-black tracking-tighter"
|
||||
style="color: {{ $sectionColor }}; text-shadow: 0 0 20px {{ $sectionColor }}60;">
|
||||
>>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
@if(count($employee->users) > 0)
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5">
|
||||
@foreach ($employee->users as $staff)
|
||||
<x-community.staff-card :user="$staff" />
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center py-16">
|
||||
<div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
|
||||
<svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-lg text-gray-500 dark:text-gray-400 font-medium">{{ __('No staff members in this position') }}</p>
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500 mt-1">{{ __('Check back later for updates') }}</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
<div class="col-span-12 lg:col-span-9">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
@foreach ($employees as $employee)
|
||||
@php
|
||||
$sectionColor = $employee->staff_color ?? '#eeb425';
|
||||
@endphp
|
||||
<div class="rounded-lg overflow-hidden w-full"
|
||||
style="background-color: var(--color-surface, #ffffff); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full overflow-hidden">
|
||||
<div class="rank-header">
|
||||
<div class="relative w-full"
|
||||
style="background: linear-gradient(140deg, {{ $sectionColor }} 0%, color-mix(in srgb, {{ $sectionColor }} 80%, black) 100%);">
|
||||
<div class="flex items-center justify-start h-full relative">
|
||||
<h2 class="text-white font-bold text-xl" style="padding: 2% 3%;">{{ $employee->rank_name }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if(count($employee->users) > 0)
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4">
|
||||
@foreach ($employee->users as $staff)
|
||||
<x-community.staff-card :user="$staff" />
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center py-16">
|
||||
<p class="text-lg font-medium" style="color: var(--color-text-muted);">{{ __('No staff members in this position') }}</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3 space-y-4">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1.5 bg-gradient-to-b from-amber-400 to-amber-500"></div>
|
||||
<div class="p-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-lg font-bold" style="color: var(--color-text)">
|
||||
{{ setting('hotel_name') }} {{ __('Staff') }}
|
||||
</h3>
|
||||
<span style="color: var(--color-primary);" class="text-2xl font-black">>></span>
|
||||
</div>
|
||||
<p class="text-xs uppercase tracking-wider mb-4" style="color: var(--color-text-muted)">{{ __('About our team') }}</p>
|
||||
<div class="space-y-3 text-sm" style="color: var(--color-text)">
|
||||
<p>{{ __('The :hotel staff team is one big happy family, each staff member has a different role and duties to fulfill.', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
<p>{{ __('Most of our team usually consists of players that have been around :hotel for quite a while, but this does not mean we only recruit old & known players, we recruit those who shine out to us!', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-lg overflow-hidden"
|
||||
style="background-color: var(--color-surface, #ffffff); 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">{{ setting('hotel_name') }} {{ __('Staff') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm mb-4" style="color: var(--color-text-muted);">{{ __('About our team') }}</p>
|
||||
<div class="space-y-3 text-sm" style="color: var(--color-text);">
|
||||
<p>{{ __('The :hotel staff team is one big happy family, each staff member has a different role and duties to fulfill.', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
<p>{{ __('Most of our team usually consists of players that have been around :hotel for quite a while, but this does not mean we only recruit old & known players, we recruit those who shine out to us!', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg overflow-hidden"
|
||||
style="background-color: var(--color-surface, #ffffff); 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, #1a5c3a 0%, #1e6e42 20%, #2a8050 40%, #3a9060 60%, #4aa070 75%, #3a9060 90%, #2a8050 100%);">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<h2 class="text-white font-bold text-xl">{{ __('Join the Team') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm mb-4" style="color: var(--color-text-muted);">{{ __('Become a staff member') }}</p>
|
||||
<div class="space-y-3 text-sm" style="color: var(--color-text);">
|
||||
<p>{{ __('Every now and then staff applications may open up. Once they do we always make sure to post a news article explaining the process - So make sure you keep an eye out for those in you are interested in joining the :hotel staff team.', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
<a href="{{ route('staff-applications.index') }}"
|
||||
class="inline-flex items-center gap-2 mt-2 px-4 py-2 rounded-lg font-semibold text-sm transition-all hover:scale-105"
|
||||
style="background: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('View Open Positions') }}
|
||||
<span class="text-lg">>></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border overflow-hidden" style="background-color: var(--color-surface); border-color: var(--color-text-muted);">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1.5" style="background: linear-gradient(to bottom, var(--color-primary), var(--color-primary));"></div>
|
||||
<div class="p-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-lg font-bold" style="color: var(--color-text)">
|
||||
{{ __('Join the Team') }}
|
||||
</h3>
|
||||
<span style="color: var(--color-primary);" class="text-2xl font-black">>></span>
|
||||
</div>
|
||||
<p class="text-xs uppercase tracking-wider mb-4" style="color: var(--color-text-muted)">{{ __('Become a staff member') }}</p>
|
||||
<div class="space-y-3 text-sm" style="color: var(--color-text)">
|
||||
<p>{{ __('Every now and then staff applications may open up. Once they do we always make sure to post a news article explaining the process - So make sure you keep an eye out for those in you are interested in joining the :hotel staff team.', ['hotel' => setting('hotel_name')]) }}</p>
|
||||
<a href="/community/staff-applications" class="inline-flex items-center gap-2 mt-2 px-4 py-2 rounded-lg font-semibold text-sm transition-all hover:scale-105"
|
||||
style="background: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('View Open Positions') }}
|
||||
<span class="text-lg">>></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
Reference in New Issue
Block a user