CluPilotCloud/resources/views/components/auth/brand.blade.php

47 lines
2.1 KiB
PHP

@props([
'headline' => '',
'sub' => '',
/** @var array<int, string> shown as a specification plate, not as a feature list */
'facts' => [],
])
{{--
The sign-in brand panel, shared by every guest page so they cannot drift
apart. An ink plate rather than a colour gradient: the public site presents
the product as a controlled document, and this is the same voice.
Hidden below `lg` on a phone the form is the page, and a decorative half
would only push it under the fold.
--}}
<aside class="relative hidden w-[44%] shrink-0 overflow-hidden bg-plate lg:flex lg:flex-col lg:justify-between lg:p-12 xl:p-14">
{{-- One warm glow, the same one the public site's dark bands carry. --}}
<div aria-hidden="true" class="pointer-events-none absolute inset-0"
style="background:radial-gradient(ellipse 52% 46% at 24% 18%,rgba(249,115,22,.20),transparent 68%);"></div>
<div class="relative flex items-center gap-2.5">
<x-ui.logo class="size-8" />
<span class="text-xl font-bold tracking-tight text-white">CluPilot</span>
</div>
<div class="relative">
<p class="mb-7 inline-flex items-center gap-2 rounded-pill px-3.5 py-1.5 text-xs font-semibold"
style="background:rgba(249,115,22,.16);color:#ffb27a">{{ __('auth.brand_eyebrow') }}</p>
<h2 class="max-w-md text-4xl font-bold leading-[1.08] tracking-tight text-white xl:text-[2.9rem]">{{ $headline }}</h2>
<p class="mt-5 max-w-sm leading-relaxed text-plate-text">{{ $sub }}</p>
@if ($facts !== [])
<dl class="mt-10 max-w-sm border-t border-plate-rule">
@foreach ($facts as $term => $value)
<div class="flex items-baseline justify-between gap-6 border-b border-plate-rule py-3">
<dt class="text-sm text-plate-muted">{{ $term }}</dt>
<dd class="text-right text-sm font-medium text-white">{{ $value }}</dd>
</div>
@endforeach
</dl>
@endif
</div>
<p class="relative text-xs text-plate-muted">{{ __('auth.brand_footer') }}</p>
</aside>