96 lines
5.3 KiB
PHP
96 lines
5.3 KiB
PHP
<div>
|
|
<div class="grid gap-8 lg:grid-cols-3 lg:gap-6">
|
|
@foreach ([
|
|
[
|
|
'name' => __('Gratis'),
|
|
'description' => __('Voor wie Certified wil proberen of maar een handvol certificaten beheert.'),
|
|
'price' => '0',
|
|
'priceNote' => __('Voor altijd gratis, geen creditcard nodig'),
|
|
'featured' => false,
|
|
'cta' => __('Start gratis'),
|
|
'features' => [
|
|
__('Maximaal 5 certificaten'),
|
|
__('Automatische OCR-scan'),
|
|
__('Slimme e-mailreminders'),
|
|
__('Veilig delen via signed URL'),
|
|
],
|
|
],
|
|
[
|
|
'name' => 'Starter',
|
|
'description' => __("Voor wie meer dan een handvol eigen certificaten en diploma's bijhoudt."),
|
|
'price' => '12,50',
|
|
'priceNote' => __('Eén vast bedrag, jaarlijks gefactureerd'),
|
|
'featured' => true,
|
|
'cta' => __('Start met Starter'),
|
|
'features' => [
|
|
__('Maximaal 20 certificaten'),
|
|
__('Automatische OCR-scan'),
|
|
__('Slimme e-mailreminders'),
|
|
__('Veilig delen via signed URL'),
|
|
__('AES-256 versleutelde ZIP-export'),
|
|
],
|
|
],
|
|
[
|
|
'name' => __('Onbeperkt'),
|
|
'description' => __("Voor wie al zijn diploma's, VOG's en certificaten voorgoed op één plek wil bewaken."),
|
|
'price' => '45',
|
|
'priceNote' => __('Eén vast bedrag, jaarlijks gefactureerd'),
|
|
'featured' => false,
|
|
'cta' => __('Start met Onbeperkt'),
|
|
'features' => [
|
|
__('Onbeperkt certificaten'),
|
|
__('Automatische OCR-scan'),
|
|
__('Slimme e-mailreminders'),
|
|
__('Veilig delen via signed URL'),
|
|
__('AES-256 versleutelde ZIP-export'),
|
|
__('Prioriteit support'),
|
|
],
|
|
],
|
|
] as $tier)
|
|
<div @class([
|
|
'relative flex flex-col rounded-3xl p-8 transition-all duration-300',
|
|
'border-2 border-emerald-500 bg-white shadow-2xl shadow-emerald-500/15 lg:-my-4 lg:py-12 dark:bg-slate-900' => $tier['featured'],
|
|
'border border-slate-200 bg-white shadow-sm hover:-translate-y-1 hover:shadow-xl hover:shadow-slate-900/5 dark:border-slate-800 dark:bg-slate-900 dark:hover:shadow-black/30' => ! $tier['featured'],
|
|
])>
|
|
@if ($tier['featured'])
|
|
<span class="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 px-4 py-1 text-xs font-bold tracking-wide text-white uppercase shadow-lg shadow-emerald-500/30">
|
|
{{ __('Meest gekozen') }}
|
|
</span>
|
|
@endif
|
|
|
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $tier['name'] }}</h3>
|
|
<p class="mt-2 min-h-12 text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $tier['description'] }}</p>
|
|
|
|
<div class="mt-6 flex items-baseline gap-1.5">
|
|
<span class="text-4xl font-bold tracking-tight text-slate-900 dark:text-white">€{{ $tier['price'] }}</span>
|
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400">/ {{ __('jaar') }}</span>
|
|
</div>
|
|
<p class="mt-1 text-xs text-slate-400 dark:text-slate-500">{{ $tier['priceNote'] }}</p>
|
|
|
|
<ul class="mt-8 flex-1 space-y-3.5 text-sm">
|
|
@foreach ($tier['features'] as $feature)
|
|
<li class="flex items-start gap-3">
|
|
<svg class="mt-0.5 size-4.5 shrink-0 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
|
</svg>
|
|
<span class="text-slate-600 dark:text-slate-300">{{ $feature }}</span>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
|
|
<a
|
|
href="{{ route('register') }}"
|
|
@class([
|
|
'mt-10 block rounded-xl px-4 py-3 text-center text-sm font-semibold transition-all duration-200',
|
|
'bg-emerald-600 text-white shadow-lg shadow-emerald-600/25 hover:-translate-y-px hover:bg-emerald-500 hover:shadow-xl hover:shadow-emerald-500/30 active:translate-y-0' => $tier['featured'],
|
|
'border border-slate-300 text-slate-700 hover:border-emerald-500 hover:text-emerald-700 dark:border-slate-700 dark:text-slate-200 dark:hover:border-emerald-500 dark:hover:text-emerald-400' => ! $tier['featured'],
|
|
])
|
|
>{{ $tier['cta'] }}</a>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<p class="mt-10 text-center text-sm text-slate-500 dark:text-slate-400">
|
|
{{ __('Alle prijzen zijn per jaar en exclusief btw. Start gratis — upgraden kan altijd, opzeggen ook.') }}
|
|
</p>
|
|
</div>
|