- Add centered, card-based layout with clean design - Implement 3-step progress indicator component - Add proper dark/light mode support following Coolify design system - Implement Livewire URL state persistence for browser navigation - Separate private key textareas for "Generate" vs "Add your own" modes - Consistent checkpoint styling across all onboarding phases - Enhanced typography with prominent titles (semibold, white in dark mode) - Fixed state restoration on page refresh and browser back/forward navigation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
29 lines
1.1 KiB
PHP
29 lines
1.1 KiB
PHP
<div class="w-full max-w-4xl">
|
|
<div class="bg-white dark:bg-coolgray-100 rounded-lg shadow-sm border border-neutral-200 dark:border-coolgray-300 overflow-hidden">
|
|
<div class="p-8 lg:p-12">
|
|
<h1 class="text-3xl font-bold lg:text-4xl mb-4">{{ $title }}</h1>
|
|
@isset($question)
|
|
<div class="text-base lg:text-lg dark:text-neutral-400 mb-8">
|
|
{{ $question }}
|
|
</div>
|
|
@endisset
|
|
|
|
@if ($actions)
|
|
<div class="flex flex-col gap-4">
|
|
{{ $actions }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@isset($explanation)
|
|
<div class="dark:bg-coolgray-200 border-t border-neutral-200 dark:border-coolgray-300 p-8 lg:p-12 bg-neutral-50">
|
|
<h3 class="text-sm font-bold uppercase tracking-wide mb-4 dark:text-neutral-400">
|
|
Technical Details
|
|
</h3>
|
|
<div class="space-y-3 text-sm dark:text-neutral-400">
|
|
{{ $explanation }}
|
|
</div>
|
|
</div>
|
|
@endisset
|
|
</div>
|
|
</div>
|