Certified/resources/views/marketing/partials/pricing-grid.blade.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 zzp\'ers en kleine praktijken met een groeiende certificaatmap.',
                '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 organisaties die al hun certificaten op één plek willen 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">&euro;{{ $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>