added premium subscribe button

This commit is contained in:
Gitea
2025-05-07 23:39:26 +05:30
parent 622085d143
commit e8779a7a85
3 changed files with 155 additions and 0 deletions

View File

@@ -45,6 +45,14 @@
{{ __('Refresh') }}
</button>
<flux:modal.trigger name="premium">
<button type="button" class="premium-btn mt-2">
<span class="crown"></span>
<span class="crown-bg1"></span>
<span class="crown-bg2"></span>
<span class="btn-text">Get Premium</span>
</button>
</flux:modal.trigger>
</flux:navlist>
<div id="sidebar-magic" class="items-center border-1 dark:border-zinc-800 border-zinc-200 hidden">
<p class="px-6 py-4 text-sm dark:bg-zinc-900 bg-zinc-100 dark:text-white accent-zinc-700">Support us by disabling ad blockеrs on our site 🙏</p>
@@ -162,6 +170,64 @@
</div>
</div>
</flux:modal>
<flux:modal name="premium" class="min-w-[22rem]" class="bg-pricing-modal">
<div class="space-y-6">
<div>
<!-- From Uiverse.io by themrsami -->
<div class="max-w-[300px] w-full pt-5 px-5 pb-4 bg-zinc-100 dark:bg-zinc-900 rounded-3xl">
<div class="text-center mb-6">
<h5 class="text-2xl font-semibold text-gray-500 mb-3">Zemail Premium</h5>
<span class="block text-5xl font-bold text-accent mb-3">${{ config('app.plans')[0]->price ?? 10 }}</span>
<span class="block text-gray-400 font-medium mb-6">per month</span
>
<a class="relative group inline-block w-full py-4 px-6 text-center text-gray-50 hover:text-gray-500 bg-amber-400 font-semibold rounded-full overflow-hidden transition duration-200"
href="{{ route('dashboard') }}">
<div class="absolute top-0 right-full w-full h-full bg-white transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
<span class="relative">Subscribe now</span>
</a>
</div>
<ul>
<li class="flex mb-4 items-center">
<flux:icon.check />
<span class="ml-2 text-accent wrap-normal">No Ads</span>
</li>
<li class="flex mb-4 items-center">
<flux:icon.check />
<span class="ml-2 text-accent wrap-normal">Dedicated premium domains</span>
</li>
<li class="flex mb-4 items-center">
<flux:icon.check />
<span class="ml-2 text-accent wrap-normal">Up to 100 addresses at the same time</span>
</li>
<li class="flex mb-4 items-center">
<flux:icon.check />
<span class="ml-2 text-accent wrap-normal">Dedicated Premium Gmail Addresses</span>
</li>
<li class="flex mb-4 items-center">
<flux:icon.check />
<span class="ml-2 text-accent wrap-normal">100% Private address with full ownership</span>
</li>
<li class="flex mb-4 items-center">
<flux:icon.check />
<span class="ml-2 text-accent wrap-normal">History Upto 30 Days</span>
</li>
<li class="flex mb-4 items-center">
<flux:icon.check />
<span class="ml-2 text-accent wrap-normal">Enhanced privacy and security</span>
</li>
</ul>
</div>
</div>
<flux:separator text="or" />
<di class="mt-3 flex justify-center">
<p class="text-center ">Already subscribed?</p>&nbsp;<a class="text-amber-400" href="{{ route('dashboard') }}">Login now</a>
</di>
</div>
</flux:modal>
</flux:header>
<flux:main class="dark:bg-gray-900 bg-gray-100">