mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Redesign "Choose Your Preferred Library" section with modern compact cards
- Simplify card design with centered layout - Remove long descriptions in favor of concise taglines - Use gradient icon badges with rounded squares - Improve CTA button with gradient styling - Reduce vertical space while maintaining visual appeal
This commit is contained in:
Younes ENNAJI
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"dist/main.css": "/dist/main.1c109467.css",
|
||||
"dist/main.css": "/dist/main.4cc91a34.css",
|
||||
"dist/main.js": "/dist/main.3b34e6a6.js",
|
||||
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||
"dist/455.095e6545.js": "/dist/455.095e6545.js",
|
||||
|
||||
Vendored
+1
-1
@@ -2,7 +2,7 @@
|
||||
"entrypoints": {
|
||||
"main": {
|
||||
"css": [
|
||||
"/dist/main.1c109467.css"
|
||||
"/dist/main.4cc91a34.css"
|
||||
],
|
||||
"js": [
|
||||
"/dist/main.3b34e6a6.js"
|
||||
|
||||
File diff suppressed because one or more lines are too long
+27
-59
@@ -314,85 +314,53 @@ description: PHPFlasher is a powerful PHP notification library that makes it sim
|
||||
|
||||
<!-- Library Showcase Section -->
|
||||
<section class="container mx-auto px-4 mb-20">
|
||||
<div class="text-center mb-12">
|
||||
<div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-2">Libraries</div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-slate-800 mb-3">Choose Your Preferred Library</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">PHPFlasher integrates with popular JavaScript notification libraries</p>
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-3">Libraries</div>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-slate-800 mb-4">Choose Your Preferred Library</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto text-lg">Seamlessly integrate with the notification library you already love</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 max-w-5xl mx-auto">
|
||||
<!-- Toastr -->
|
||||
<a href="/library/toastr/" class="group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full transform hover:-translate-y-1">
|
||||
<div class="h-36 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-blue-600 opacity-0 group-hover:opacity-10 transition-opacity"></div>
|
||||
<div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<i class="fa-solid fa-message text-blue-500 text-3xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 flex-grow">
|
||||
<h3 class="font-semibold text-lg text-slate-800 mb-2">Toastr.js</h3>
|
||||
<p class="text-slate-600 text-sm mb-4">Simple toast notifications for web applications. Clean, elegant and customizable.</p>
|
||||
<div class="flex items-center text-blue-600 font-medium text-sm mt-auto group-hover:underline">
|
||||
Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
<a href="/library/toastr/" class="group relative bg-white rounded-2xl p-6 border border-slate-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300 flex flex-col items-center text-center transform hover:-translate-y-1">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<i class="fa-solid fa-message text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="font-bold text-lg text-slate-800 mb-2">Toastr.js</h3>
|
||||
<p class="text-slate-500 text-sm">Simple, elegant toast notifications</p>
|
||||
</a>
|
||||
|
||||
<!-- SweetAlert2 -->
|
||||
<a href="/library/sweetalert/" class="group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full transform hover:-translate-y-1">
|
||||
<div class="h-36 bg-gradient-to-br from-pink-400 to-red-500 flex items-center justify-center relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-red-500 opacity-0 group-hover:opacity-10 transition-opacity"></div>
|
||||
<div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<i class="fa-solid fa-circle-exclamation text-pink-500 text-3xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 flex-grow">
|
||||
<h3 class="font-semibold text-lg text-slate-800 mb-2">SweetAlert2</h3>
|
||||
<p class="text-slate-600 text-sm mb-4">Beautiful, responsive, customizable alert dialogs with interactive elements.</p>
|
||||
<div class="flex items-center text-pink-600 font-medium text-sm mt-auto group-hover:underline">
|
||||
Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
<a href="/library/sweetalert/" class="group relative bg-white rounded-2xl p-6 border border-slate-100 hover:border-pink-200 hover:shadow-xl transition-all duration-300 flex flex-col items-center text-center transform hover:-translate-y-1">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-pink-400 to-red-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<i class="fa-solid fa-star text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="font-bold text-lg text-slate-800 mb-2">SweetAlert2</h3>
|
||||
<p class="text-slate-500 text-sm">Beautiful, responsive alerts</p>
|
||||
</a>
|
||||
|
||||
<!-- Noty -->
|
||||
<a href="/library/noty/" class="group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full transform hover:-translate-y-1">
|
||||
<div class="h-36 bg-gradient-to-br from-purple-400 to-indigo-600 flex items-center justify-center relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-indigo-600 opacity-0 group-hover:opacity-10 transition-opacity"></div>
|
||||
<div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<i class="fa-solid fa-bell text-purple-500 text-3xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 flex-grow">
|
||||
<h3 class="font-semibold text-lg text-slate-800 mb-2">Noty</h3>
|
||||
<p class="text-slate-600 text-sm mb-4">Highly customizable notification library with multiple positions and animations.</p>
|
||||
<div class="flex items-center text-purple-600 font-medium text-sm mt-auto group-hover:underline">
|
||||
Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
<a href="/library/noty/" class="group relative bg-white rounded-2xl p-6 border border-slate-100 hover:border-purple-200 hover:shadow-xl transition-all duration-300 flex flex-col items-center text-center transform hover:-translate-y-1">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-indigo-600 rounded-2xl flex items-center justify-center mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<i class="fa-solid fa-bell text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="font-bold text-lg text-slate-800 mb-2">Noty</h3>
|
||||
<p class="text-slate-500 text-sm">Highly customizable notifications</p>
|
||||
</a>
|
||||
|
||||
<!-- Notyf -->
|
||||
<a href="/library/notyf/" class="group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full transform hover:-translate-y-1">
|
||||
<div class="h-36 bg-gradient-to-br from-green-400 to-teal-500 flex items-center justify-center relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-teal-500 opacity-0 group-hover:opacity-10 transition-opacity"></div>
|
||||
<div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<i class="fa-solid fa-comment-dots text-green-500 text-3xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 flex-grow">
|
||||
<h3 class="font-semibold text-lg text-slate-800 mb-2">Notyf</h3>
|
||||
<p class="text-slate-600 text-sm mb-4">Minimalist toast notifications with a clean design and smooth animations.</p>
|
||||
<div class="flex items-center text-green-600 font-medium text-sm mt-auto group-hover:underline">
|
||||
Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
<a href="/library/notyf/" class="group relative bg-white rounded-2xl p-6 border border-slate-100 hover:border-green-200 hover:shadow-xl transition-all duration-300 flex flex-col items-center text-center transform hover:-translate-y-1">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-green-400 to-teal-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<i class="fa-solid fa-check text-white text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="font-bold text-lg text-slate-800 mb-2">Notyf</h3>
|
||||
<p class="text-slate-500 text-sm">Minimalist toast notifications</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-10">
|
||||
<a href="/library/toastr/" class="inline-flex items-center px-6 py-3 bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 rounded-lg font-medium transition-colors duration-200 shadow-sm">
|
||||
<i class="fa-solid fa-th-large mr-2"></i> Compare all libraries
|
||||
<a href="/library/toastr/" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white rounded-xl font-medium transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
|
||||
<i class="fa-solid fa-th-large mr-2"></i> Compare All Libraries
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user