added premium subscribe button
This commit is contained in:
Gitea
BIN
public/images/crown.webp
Normal file
BIN
public/images/crown.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
@@ -73,3 +73,92 @@
|
|||||||
.magic-box {
|
.magic-box {
|
||||||
scrollbar-width: none;
|
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') }}
|
{{ __('Refresh') }}
|
||||||
</button>
|
</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>
|
</flux:navlist>
|
||||||
<div id="sidebar-magic" class="items-center border-1 dark:border-zinc-800 border-zinc-200 hidden">
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</flux:modal>
|
</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:header>
|
||||||
|
|
||||||
<flux:main class="dark:bg-gray-900 bg-gray-100">
|
<flux:main class="dark:bg-gray-900 bg-gray-100">
|
||||||
|
|||||||
Reference in New Issue
Block a user