added premium subscribe button
This commit is contained in:
Gitea
@@ -73,3 +73,92 @@
|
||||
.magic-box {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.premium-btn {
|
||||
perspective: 1000px;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 20px;
|
||||
background: linear-gradient(145deg, #f7b42f, #fdd832);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.premium-btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.premium-btn .crown,
|
||||
.premium-btn .crown-bg1,
|
||||
.premium-btn .crown-bg2 {
|
||||
transform-style: preserve-3d;
|
||||
position: absolute;
|
||||
background: url('https://zemailnator.test/images/crown.webp') no-repeat center center;
|
||||
background-size: contain;
|
||||
animation: rotateCrownY 2s linear infinite;
|
||||
}
|
||||
|
||||
/* Main Crown */
|
||||
.premium-btn .crown {
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* Background Crown 1 */
|
||||
.premium-btn .crown-bg1 {
|
||||
top: -10px;
|
||||
left: 5%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
animation-duration: 3s;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Background Crown 2 */
|
||||
.premium-btn .crown-bg2 {
|
||||
bottom: -15px;
|
||||
right: 15%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
animation-duration: 4s;
|
||||
opacity: 0.4;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.premium-btn .btn-text {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes rotateCrownY {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.bg-pricing-modal {
|
||||
background-color: #F3F4F6; /* Light mode background */
|
||||
}
|
||||
|
||||
html.dark .bg-pricing-modal {
|
||||
background-color: #101828; /* Dark mode */
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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> <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">
|
||||
|
||||
Reference in New Issue
Block a user