46 lines
2.8 KiB
PHP
46 lines
2.8 KiB
PHP
<div class="space-y-6" x-data="{ open: null, msgs: @js(['sent' => __('support.new_toast')]) }">
|
|
<div class="flex flex-wrap items-center gap-3 animate-rise">
|
|
<div>
|
|
<h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('support.title') }}</h1>
|
|
<p class="mt-1 text-sm text-muted">{{ __('support.subtitle') }}</p>
|
|
</div>
|
|
<x-ui.button variant="primary" class="ml-auto" @click="$dispatch('notify', { message: msgs.sent })">
|
|
<x-ui.icon name="plus" class="size-4" />{{ __('support.new') }}
|
|
</x-ui.button>
|
|
</div>
|
|
|
|
{{-- Contact --}}
|
|
@php $delays = ['[animation-delay:60ms]', '[animation-delay:120ms]', '[animation-delay:180ms]']; @endphp
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
@foreach ([
|
|
['life-buoy', __('support.contact_hours'), __('support.contact_hours_val')],
|
|
['external-link', __('support.contact_email'), 'support@clupilot.com'],
|
|
['shield-check', __('support.contact_sla'), __('support.contact_sla_val')],
|
|
] as $i => [$icon, $label, $val])
|
|
<div class="flex items-center gap-3 rounded-lg border border-line bg-surface p-4 shadow-xs animate-rise {{ $delays[$i] }}">
|
|
<span class="grid size-10 shrink-0 place-items-center rounded-lg bg-surface-2 text-accent-active"><x-ui.icon :name="$icon" class="size-5" /></span>
|
|
<div class="min-w-0">
|
|
<p class="text-xs font-semibold text-muted">{{ $label }}</p>
|
|
<p class="mt-0.5 truncate text-sm font-medium text-ink">{{ $val }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Tickets --}}
|
|
<div class="rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:300ms]">
|
|
<div class="border-b border-line px-5 py-3"><h2 class="font-semibold text-ink">{{ __('support.faq') }}</h2></div>
|
|
<ul class="divide-y divide-line">
|
|
@foreach ($faqs as $i => $f)
|
|
<li>
|
|
<button type="button" class="flex w-full items-center gap-3 px-5 py-4 text-left text-sm font-medium text-ink hover:bg-surface-hover" @click="open = open === {{ $i }} ? null : {{ $i }}" :aria-expanded="open === {{ $i }}">
|
|
<span class="flex-1">{{ $f['q'] }}</span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0 text-muted transition-transform" :class="open === {{ $i }} ? 'rotate-180' : ''" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
|
|
</button>
|
|
<div x-show="open === {{ $i }}" x-cloak x-transition class="px-5 pb-4 text-sm text-muted">{{ $f['a'] }}</div>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|