56 lines
2.0 KiB
PHP
56 lines
2.0 KiB
PHP
@props([
|
|
'name',
|
|
'price',
|
|
'buttonText',
|
|
'perks' => [],
|
|
'featured' => false,
|
|
'dark' => false,
|
|
])
|
|
|
|
@php
|
|
$cardClass = match(true) {
|
|
$dark => 'bg-primary border border-primary text-white',
|
|
$featured => 'bg-white border-2 border-primary',
|
|
default => 'bg-white border border-zinc-300',
|
|
};
|
|
|
|
$buttonClass = $dark
|
|
? 'bg-white text-primary hover:bg-zinc-100'
|
|
: 'bg-primary text-white hover:bg-primary-dark';
|
|
@endphp
|
|
|
|
<div {{ $attributes->merge(['class' => "p-8 rounded-3xl flex flex-col relative $cardClass"]) }}>
|
|
|
|
@if ($featured)
|
|
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-white px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest whitespace-nowrap">
|
|
Most Popular
|
|
</div>
|
|
@endif
|
|
|
|
<div class="flex items-baseline justify-between mb-6">
|
|
<h4 class="text-xl font-bold">{{ $name }}</h4>
|
|
<div class="flex items-baseline gap-1">
|
|
<span @class(['text-3xl font-black', 'text-primary' => $featured])>{{ $price }}</span>
|
|
<span @class(['text-sm', 'text-zinc-500' => !$dark, 'text-zinc-400' => $dark])>/mo</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="space-y-2 mb-6 flex-1">
|
|
@foreach ($perks as $perk)
|
|
<li @class(['text-sm flex gap-2 items-center', 'text-zinc-500' => !$perk['included'] && !$dark])>
|
|
@if ($perk['included'])
|
|
<iconify-icon icon="lucide:check" class="text-primary shrink-0"></iconify-icon>
|
|
@else
|
|
<iconify-icon icon="lucide:x" class="text-zinc-300 shrink-0"></iconify-icon>
|
|
@endif
|
|
{{ $perk['text'] }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
|
|
<a href="{{ route('register') }}" class="w-full py-2.5 px-6 {{ $buttonClass }} rounded-full text-sm text-center font-bold shadow-lg transition-all hover:scale-105 active:scale-95">
|
|
{{ $buttonText }}
|
|
</a>
|
|
|
|
</div>
|