59 lines
3.0 KiB
PHP
59 lines
3.0 KiB
PHP
<div>
|
|
<div class="mb-6">
|
|
<h1 class="text-2xl font-semibold text-t1">Billing</h1>
|
|
<p class="text-sm text-t2 mt-1">Manage your plan and billing</p>
|
|
</div>
|
|
|
|
{{-- Current Plan --}}
|
|
<div class="bg-s1 border border-white/[.06] rounded-xl p-6 mb-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="text-xs font-medium text-t2 uppercase tracking-wider mb-1">Current Plan</div>
|
|
<div class="text-xl font-semibold text-t1">Free</div>
|
|
<div class="text-sm text-t2 mt-1">20 / 50 links used</div>
|
|
</div>
|
|
<button class="px-4 py-2.5 bg-accent-gradient text-white text-sm font-medium rounded-lg hover:opacity-90">
|
|
Upgrade Plan
|
|
</button>
|
|
</div>
|
|
<div class="mt-4 bg-s3 rounded-full h-2">
|
|
<div class="bg-blue h-2 rounded-full" style="width: 40%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Plan Features --}}
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
@foreach([
|
|
['name' => 'Free', 'price' => '€0', 'period' => '/mo', 'features' => ['50 links', '1 workspace', '1.000 clicks/mo', 'nimu.li domain'], 'current' => true],
|
|
['name' => 'Pro', 'price' => '€12', 'period' => '/mo', 'features' => ['Unlimited links', '3 workspaces', '50.000 clicks/mo', 'Custom domain', 'QR Codes', 'Bio pages'], 'current' => false],
|
|
['name' => 'Business', 'price' => '€49', 'period' => '/mo', 'features' => ['Unlimited everything', '10 workspaces', 'Unlimited clicks', 'API access', 'Team members', 'Priority support'], 'current' => false],
|
|
] as $plan)
|
|
<div class="bg-s1 border {{ $plan['current'] ? 'border-blue/40' : 'border-white/[.06]' }} rounded-xl p-5">
|
|
@if($plan['current'])
|
|
<div class="text-xs font-medium text-blue mb-2">Current plan</div>
|
|
@endif
|
|
<div class="text-lg font-semibold text-t1">{{ $plan['name'] }}</div>
|
|
<div class="mt-2 mb-4">
|
|
<span class="text-2xl font-bold text-t1">{{ $plan['price'] }}</span>
|
|
<span class="text-sm text-t2">{{ $plan['period'] }}</span>
|
|
</div>
|
|
<ul class="space-y-2 mb-5">
|
|
@foreach($plan['features'] as $feature)
|
|
<li class="flex items-center gap-2 text-sm text-t2">
|
|
<svg class="w-3.5 h-3.5 text-green flex-shrink-0" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
|
|
</svg>
|
|
{{ $feature }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
@if(!$plan['current'])
|
|
<button class="w-full px-4 py-2 bg-accent-gradient text-white text-sm font-medium rounded-lg hover:opacity-90">
|
|
Upgrade to {{ $plan['name'] }}
|
|
</button>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|