leviathonbeast/php-flasher
1
0
Fork 0
mirror of https://github.com/php-flasher/php-flasher.git synced 2026-03-31 15:07:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #262 from php-flasher/2.x-dev

Browse Source 
update the docs
This commit is contained in:
Younes ENNAJI
2025-03-17 03:38:39 +00:00
committed by GitHub
parent 6dbef1d819 cd2c28ff11
commit a80c04bb19
5 changed files with 257 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_data/manifest.json
+1 -1
View File
@@ -1,5 +1,5 @@
{ {
"dist/main.css": "/dist/main.94e560dc.css", "dist/main.css": "/dist/main.86a43fec.css",
"dist/main.js": "/dist/main.3be5bc06.js", "dist/main.js": "/dist/main.3be5bc06.js",
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css", "dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
"dist/455.095e6545.js": "/dist/455.095e6545.js", "dist/455.095e6545.js": "/dist/455.095e6545.js",
docs/_includes/flasher-studio.html
+1 -1
View File
@@ -1,5 +1,5 @@
<!-- PHPFlasher Interactive Studio - Enhanced Edition --> <!-- PHPFlasher Interactive Studio - Enhanced Edition -->
<section data-controller="flasher-studio" class="min-h-screen relative overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100 py-8"> <section data-controller="flasher-studio" class="relative overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100 py-8">
<!-- Dynamic background elements --> <!-- Dynamic background elements -->
<div class="absolute inset-0 z-0"> <div class="absolute inset-0 z-0">
<div class="absolute top-0 right-0 w-1/3 h-1/3 bg-gradient-to-br from-blue-500/10 to-indigo-500/10 rounded-full blur-3xl animate-float-slow"></div> <div class="absolute top-0 right-0 w-1/3 h-1/3 bg-gradient-to-br from-blue-500/10 to-indigo-500/10 rounded-full blur-3xl animate-float-slow"></div>
docs/_layouts/home.html
+253 -107
View File
@@ -209,110 +209,166 @@
</section> </section>
<!-- Features Section --> <!-- Features Section -->
<section class="container mx-auto px-4 mb-16"> <section class="container mx-auto px-4 mb-20">
<div class="text-center mb-12"> <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">Features</div> <div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-2">Features</div>
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Why Choose PHPFlasher?</h2> <h2 class="text-3xl sm:text-4xl font-bold text-slate-800 mb-3">Why Choose PHPFlasher?</h2>
<p class="text-slate-600 max-w-2xl mx-auto">Everything you need to add beautiful notifications to your PHP applications</p> <p class="text-slate-600 max-w-2xl mx-auto">Everything you need to add beautiful notifications to your PHP applications</p>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Feature 1 --> <!-- Feature 1 -->
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 border border-slate-100 p-6 flex flex-col h-full"> <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col h-full transform hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 rounded-lg flex items-center justify-center mb-4"> <div class="w-14 h-14 bg-indigo-50 rounded-xl flex items-center justify-center mb-5">
<i class="fa-solid fa-wand-magic-sparkles text-indigo-600 text-xl"></i> <i class="fa-solid fa-wand-magic-sparkles text-indigo-600 text-2xl"></i>
</div> </div>
<h3 class="text-lg font-semibold text-slate-800 mb-2" id="easy-to-use">Easy to Use</h3> <h3 class="text-xl font-semibold text-slate-800 mb-3" id="easy-to-use">Easy to Use</h3>
<ul class="space-y-2 text-slate-600 flex-grow"> <ul class="space-y-3 text-slate-600 flex-grow">
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i> <i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Simple one-line code to show notifications</span> <span>Simple one-line code to show notifications</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i> <i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Works right out of the box</span> <span>Works right out of the box - zero configuration</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i> <i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>No complex configuration needed</span> <span>Auto-detects frontend framework</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Intuitive, consistent API across libraries</span>
</li> </li>
</ul> </ul>
</div> </div>
<!-- Feature 2 --> <!-- Feature 2 -->
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 border border-slate-100 p-6 flex flex-col h-full"> <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col h-full transform hover:-translate-y-1">
<div class="w-12 h-12 bg-purple-50 rounded-lg flex items-center justify-center mb-4"> <div class="w-14 h-14 bg-purple-50 rounded-xl flex items-center justify-center mb-5">
<i class="fa-solid fa-sliders text-purple-600 text-xl"></i> <i class="fa-solid fa-sliders text-purple-600 text-2xl"></i>
</div> </div>
<h3 class="text-lg font-semibold text-slate-800 mb-2" id="flexible">Flexible & Powerful</h3> <h3 class="text-xl font-semibold text-slate-800 mb-3" id="flexible">Flexible & Powerful</h3>
<ul class="space-y-2 text-slate-600 flex-grow"> <ul class="space-y-3 text-slate-600 flex-grow">
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i> <i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span><a href="/library/toastr/" class="text-indigo-600 hover:underline">Toastr.js</a> - Classic toast notifications</span> <span>Multiple notification libraries in one package</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i> <i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span><a href="/library/sweetalert/" class="text-indigo-600 hover:underline">SweetAlert 2</a> - Beautiful alert dialogs</span> <span>Session and direct rendering options</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i> <i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span><a href="/library/noty/" class="text-indigo-600 hover:underline">Noty</a> - Highly customizable notifications</span> <span>Customizable positions, animations, and styles</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i> <i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span><a href="/library/notyf/" class="text-indigo-600 hover:underline">Notyf</a> - Minimalist toast notifications</span> <span>Flash messages across redirects</span>
</li> </li>
</ul> </ul>
</div> </div>
<!-- Feature 3 --> <!-- Feature 3 -->
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 border border-slate-100 p-6 flex flex-col h-full"> <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col h-full transform hover:-translate-y-1">
<div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center mb-4"> <div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center mb-5">
<i class="fa-solid fa-code text-blue-600 text-xl"></i> <i class="fa-solid fa-code text-blue-600 text-2xl"></i>
</div> </div>
<h3 class="text-lg font-semibold text-slate-800 mb-2" id="integration">Framework Integration</h3> <h3 class="text-xl font-semibold text-slate-800 mb-3" id="integration">Framework Integration</h3>
<ul class="space-y-2 text-slate-600 flex-grow"> <ul class="space-y-3 text-slate-600 flex-grow">
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-brands fa-laravel text-red-500 mt-1 mr-2"></i> <i class="fa-brands fa-laravel text-red-500 mt-1 mr-2.5"></i>
<span>Native Laravel integration</span> <span>Native Laravel integration with facades</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-brands fa-symfony text-black mt-1 mr-2"></i> <i class="fa-brands fa-symfony text-black mt-1 mr-2.5"></i>
<span>Seamless Symfony support</span> <span>Seamless Symfony support with bundle</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-plug text-slate-600 mt-1 mr-2"></i> <i class="fa-solid fa-bolt text-purple-500 mt-1 mr-2.5"></i>
<span>Works with Livewire and Inertia</span> <span>Livewire real-time notifications</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-wrench text-slate-600 mt-1 mr-2"></i> <i class="fa-solid fa-arrows-rotate text-blue-500 mt-1 mr-2.5"></i>
<span>Framework-agnostic core</span> <span>Inertia.js SPA support</span>
</li> </li>
</ul> </ul>
</div> </div>
<!-- Feature 4 --> <!-- Feature 4 -->
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 border border-slate-100 p-6 flex flex-col h-full"> <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col h-full transform hover:-translate-y-1">
<div class="w-12 h-12 bg-emerald-50 rounded-lg flex items-center justify-center mb-4"> <div class="w-14 h-14 bg-emerald-50 rounded-xl flex items-center justify-center mb-5">
<i class="fa-solid fa-user-gear text-emerald-600 text-xl"></i> <i class="fa-solid fa-user-gear text-emerald-600 text-2xl"></i>
</div> </div>
<h3 class="text-lg font-semibold text-slate-800 mb-2" id="developer-friendly">Developer Experience</h3> <h3 class="text-xl font-semibold text-slate-800 mb-3" id="developer-friendly">Developer Experience</h3>
<ul class="space-y-2 text-slate-600 flex-grow"> <ul class="space-y-3 text-slate-600 flex-grow">
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i> <i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Full IDE support with autocompletion</span> <span>Full IDE support with autocompletion</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i> <i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Clear documentation with examples</span> <span>Extensive documentation with examples</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i> <i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>TypeScript support</span> <span>TypeScript support for JavaScript usage</span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i> <i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Easy to customize and extend</span> <span>Well-tested, production-ready code</span>
</li>
</ul>
</div>
<!-- Feature 5 -->
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col h-full transform hover:-translate-y-1">
<div class="w-14 h-14 bg-amber-50 rounded-xl flex items-center justify-center mb-5">
<i class="fa-solid fa-rocket text-amber-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-slate-800 mb-3" id="performance">Performance Optimized</h3>
<ul class="space-y-3 text-slate-600 flex-grow">
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Lightweight core with lazy-loading</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Only loads required JavaScript libraries</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Optimized asset loading strategies</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Minimal framework overhead</span>
</li>
</ul>
</div>
<!-- Feature 6 -->
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col h-full transform hover:-translate-y-1">
<div class="w-14 h-14 bg-pink-50 rounded-xl flex items-center justify-center mb-5">
<i class="fa-solid fa-palette text-pink-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-slate-800 mb-3" id="customizable">Highly Customizable</h3>
<ul class="space-y-3 text-slate-600 flex-grow">
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Easily style notifications to match your brand</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Configure default settings globally</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Override options per notification</span>
</li>
<li class="flex items-start">
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
<span>Create custom themes and templates</span>
</li> </li>
</ul> </ul>
</div> </div>
@@ -320,78 +376,88 @@
</section> </section>
<!-- Library Showcase Section --> <!-- Library Showcase Section -->
<section class="container mx-auto px-4 mb-16"> <section class="container mx-auto px-4 mb-20">
<div class="text-center mb-12"> <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> <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-2xl md:text-3xl font-bold text-slate-800 mb-2">Choose Your Preferred Library</h2> <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> <p class="text-slate-600 max-w-2xl mx-auto">PHPFlasher integrates with popular JavaScript notification libraries</p>
</div> </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-6 max-w-5xl mx-auto">
<!-- Toastr --> <!-- Toastr -->
<a href="/library/toastr/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full"> <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-32 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center"> <div class="h-36 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center relative overflow-hidden">
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg"> <div class="absolute inset-0 bg-blue-600 opacity-0 group-hover:opacity-10 transition-opacity"></div>
<i class="fa-solid fa-toast text-blue-500 text-2xl"></i> <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> </div>
<div class="p-5 flex-grow"> <div class="p-6 flex-grow">
<h3 class="font-semibold text-slate-800 mb-2">Toastr.js</h3> <h3 class="font-semibold text-lg text-slate-800 mb-2">Toastr.js</h3>
<p class="text-slate-600 text-sm mb-3">Simple toast notifications for web applications. Clean, elegant and customizable.</p> <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 group-hover:underline"> <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> Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
</div> </div>
</div> </div>
</a> </a>
<!-- SweetAlert2 --> <!-- SweetAlert2 -->
<a href="/library/sweetalert/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full"> <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-32 bg-gradient-to-r from-pink-400 to-red-500 flex items-center justify-center"> <div class="h-36 bg-gradient-to-br from-pink-400 to-red-500 flex items-center justify-center relative overflow-hidden">
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg"> <div class="absolute inset-0 bg-red-500 opacity-0 group-hover:opacity-10 transition-opacity"></div>
<i class="fa-solid fa-message-exclamation text-pink-500 text-2xl"></i> <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> </div>
<div class="p-5 flex-grow"> <div class="p-6 flex-grow">
<h3 class="font-semibold text-slate-800 mb-2">SweetAlert2</h3> <h3 class="font-semibold text-lg text-slate-800 mb-2">SweetAlert2</h3>
<p class="text-slate-600 text-sm mb-3">Beautiful, responsive, customizable alert dialogs with interactive elements.</p> <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 group-hover:underline"> <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> Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
</div> </div>
</div> </div>
</a> </a>
<!-- Noty --> <!-- Noty -->
<a href="/library/noty/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full"> <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-32 bg-gradient-to-r from-purple-400 to-indigo-500 flex items-center justify-center"> <div class="h-36 bg-gradient-to-br from-purple-400 to-indigo-600 flex items-center justify-center relative overflow-hidden">
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg"> <div class="absolute inset-0 bg-indigo-600 opacity-0 group-hover:opacity-10 transition-opacity"></div>
<i class="fa-solid fa-bell text-purple-500 text-2xl"></i> <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> </div>
<div class="p-5 flex-grow"> <div class="p-6 flex-grow">
<h3 class="font-semibold text-slate-800 mb-2">Noty</h3> <h3 class="font-semibold text-lg text-slate-800 mb-2">Noty</h3>
<p class="text-slate-600 text-sm mb-3">Highly customizable notification library with multiple positions and animations.</p> <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 group-hover:underline"> <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> Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
</div> </div>
</div> </div>
</a> </a>
<!-- Notyf --> <!-- Notyf -->
<a href="/library/notyf/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden flex flex-col h-full"> <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-32 bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center"> <div class="h-36 bg-gradient-to-br from-green-400 to-teal-500 flex items-center justify-center relative overflow-hidden">
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg"> <div class="absolute inset-0 bg-teal-500 opacity-0 group-hover:opacity-10 transition-opacity"></div>
<i class="fa-solid fa-message-dots text-green-500 text-2xl"></i> <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> </div>
<div class="p-5 flex-grow"> <div class="p-6 flex-grow">
<h3 class="font-semibold text-slate-800 mb-2">Notyf</h3> <h3 class="font-semibold text-lg text-slate-800 mb-2">Notyf</h3>
<p class="text-slate-600 text-sm mb-3">Minimalist toast notifications with a clean design and smooth animations.</p> <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 group-hover:underline"> <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> Learn more <i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="text-center mt-10">
<a href="/libraries/" 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>
</div>
</section> </section>
<!-- Code Example Section --> <!-- Code Example Section -->
@@ -476,49 +542,129 @@ document.getElementById('contact-form').addEventListener('submit', async functio
</div> </div>
</section> </section>
<!-- Testimonials 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">Testimonials</div>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-800 mb-3">Loved by Developers</h2>
<p class="text-slate-600 max-w-2xl mx-auto">See what others are saying about PHPFlasher</p>
</div>
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-white rounded-xl shadow-md p-6 border border-slate-100">
<div class="flex items-center mb-4">
<div class="text-amber-400 flex">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
<blockquote class="text-slate-700 mb-6">
"Honestly wasn't expecting much, but wow! Saved me hours of headaches with our notification system. Just dropped it in and it worked first try. No more fighting with JS libraries!"
</blockquote>
<div class="flex items-center">
<img src="https://github.com/salmayno.png" alt="Salma Mourad" class="w-10 h-10 rounded-full mr-3 object-cover">
<div>
<div class="font-medium text-slate-800">Salma Mourad</div>
<div class="text-slate-500 text-sm">@salmayno · Freelancer</div>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-white rounded-xl shadow-md p-6 border border-slate-100">
<div class="flex items-center mb-4">
<div class="text-amber-400 flex">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</div>
<blockquote class="text-slate-700 mb-6">
"We were using Toastr directly but it was a mess maintaining it. Switched to PHPFlasher last sprint and it just works. The Livewire integration is a huge time saver too. Only nitpick is I wish the docs had more examples."
</blockquote>
<div class="flex items-center">
<img src="https://github.com/yae96.png" alt="Youness AIT EL HADJ" class="w-10 h-10 rounded-full mr-3 object-cover">
<div>
<div class="font-medium text-slate-800">Youness AIT EL HADJ</div>
<div class="text-slate-500 text-sm">@yae96 · Lead Dev</div>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-white rounded-xl shadow-md p-6 border border-slate-100">
<div class="flex items-center mb-4">
<div class="text-amber-400 flex">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
<blockquote class="text-slate-700 mb-6">
"Been using PHPFlasher in our Symfony app for 6+ months. Had an issue with modal stacking, reached out on GitHub and got a fix in like 2 days! That kind of support is rare for open source. Huge thanks to @younes!"
</blockquote>
<div class="flex items-center">
<img src="https://github.com/youssefsaoubou.png" alt="Youssef Saoubou" class="w-10 h-10 rounded-full mr-3 object-cover">
<div>
<div class="font-medium text-slate-800">Youssef Saoubou</div>
<div class="text-slate-500 text-sm">@youssefsaoubou · Backend Dev</div>
</div>
</div>
</div>
</div>
</section>
<!-- Community Section --> <!-- Community Section -->
<section class="bg-gradient-to-b from-slate-50 to-white py-16 mb-16"> <section class="bg-gradient-to-b from-slate-50 to-white py-16 mb-20">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="text-center mb-12"> <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">Community</div> <div class="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium mb-2">Community</div>
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Join Our Growing Community</h2> <h2 class="text-3xl sm:text-4xl font-bold text-slate-800 mb-3">Join Our Growing Community</h2>
<p class="text-slate-600 max-w-2xl mx-auto">Help us make PHPFlasher even better</p> <p class="text-slate-600 max-w-2xl mx-auto">Help us make PHPFlasher even better</p>
</div> </div>
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- GitHub --> <!-- GitHub -->
<a href="https://github.com/php-flasher/php-flasher" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col items-center text-center"> <a href="https://github.com/php-flasher/php-flasher" class="group bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-slate-100 p-8 flex flex-col items-center text-center transform hover:-translate-y-1">
<div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-slate-100 transition-colors"> <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-5 group-hover:bg-slate-100 transition-colors">
<i class="fa-brands fa-github text-slate-800 text-3xl"></i> <i class="fa-brands fa-github text-slate-800 text-3xl"></i>
</div> </div>
<h3 class="font-semibold text-slate-800 mb-2">Star on GitHub</h3> <h3 class="font-semibold text-xl text-slate-800 mb-3">Star on GitHub</h3>
<p class="text-slate-600 text-sm">Contribute to the project, report issues, or suggest new features.</p> <p class="text-slate-600 mb-6">Contribute to the project, report issues, or suggest new features.</p>
<div class="mt-4 px-4 py-2 bg-slate-100 rounded-full text-slate-700 text-sm font-medium group-hover:bg-slate-200 transition-colors"> <div class="mt-auto px-6 py-2.5 bg-slate-100 rounded-full text-slate-700 text-sm font-medium group-hover:bg-slate-200 transition-colors">
<i class="fa-regular fa-star mr-1"></i> Star <i class="fa-regular fa-star mr-1.5"></i> Star Project
</div> </div>
</a> </a>
<!-- Discussions --> <!-- Discussions -->
<a href="https://github.com/php-flasher/php-flasher/discussions" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col items-center text-center"> <a href="https://github.com/php-flasher/php-flasher/discussions" class="group bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-slate-100 p-8 flex flex-col items-center text-center transform hover:-translate-y-1">
<div class="w-16 h-16 bg-indigo-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-indigo-100 transition-colors"> <div class="w-16 h-16 bg-indigo-50 rounded-full flex items-center justify-center mb-5 group-hover:bg-indigo-100 transition-colors">
<i class="fa-solid fa-comments text-indigo-600 text-3xl"></i> <i class="fa-solid fa-comments text-indigo-600 text-3xl"></i>
</div> </div>
<h3 class="font-semibold text-slate-800 mb-2">Join Discussions</h3> <h3 class="font-semibold text-xl text-slate-800 mb-3">Join Discussions</h3>
<p class="text-slate-600 text-sm">Ask questions, share ideas, and connect with other users.</p> <p class="text-slate-600 mb-6">Ask questions, share ideas, and connect with other developers.</p>
<div class="mt-4 px-4 py-2 bg-indigo-100 rounded-full text-indigo-700 text-sm font-medium group-hover:bg-indigo-200 transition-colors"> <div class="mt-auto px-6 py-2.5 bg-indigo-100 rounded-full text-indigo-700 text-sm font-medium group-hover:bg-indigo-200 transition-colors">
<i class="fa-regular fa-message mr-1"></i> Participate <i class="fa-regular fa-message mr-1.5"></i> Participate
</div> </div>
</a> </a>
<!-- Documentation --> <!-- Documentation -->
<a href="/docs/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 p-6 flex flex-col items-center text-center"> <a href="/docs/" class="group bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-slate-100 p-8 flex flex-col items-center text-center transform hover:-translate-y-1">
<div class="w-16 h-16 bg-amber-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-amber-100 transition-colors"> <div class="w-16 h-16 bg-amber-50 rounded-full flex items-center justify-center mb-5 group-hover:bg-amber-100 transition-colors">
<i class="fa-solid fa-book-open text-amber-600 text-3xl"></i> <i class="fa-solid fa-book-open text-amber-600 text-3xl"></i>
</div> </div>
<h3 class="font-semibold text-slate-800 mb-2">Read Documentation</h3> <h3 class="font-semibold text-xl text-slate-800 mb-3">Read Documentation</h3>
<p class="text-slate-600 text-sm">Explore comprehensive guides, examples, and API reference.</p> <p class="text-slate-600 mb-6">Explore comprehensive guides, examples, and API reference.</p>
<div class="mt-4 px-4 py-2 bg-amber-100 rounded-full text-amber-700 text-sm font-medium group-hover:bg-amber-200 transition-colors"> <div class="mt-auto px-6 py-2.5 bg-amber-100 rounded-full text-amber-700 text-sm font-medium group-hover:bg-amber-200 transition-colors">
<i class="fa-solid fa-arrow-right mr-1"></i> Get Started <i class="fa-solid fa-arrow-right mr-1.5"></i> Get Started
</div> </div>
</a> </a>
</div> </div>
docs/dist/entrypoints.json
Vendored
+1 -1
View File
@@ -2,7 +2,7 @@
"entrypoints": { "entrypoints": {
"main": { "main": {
"css": [ "css": [
"/dist/main.94e560dc.css" "/dist/main.86a43fec.css"
], ],
"js": [ "js": [
"/dist/main.3be5bc06.js" "/dist/main.3be5bc06.js"
docs/dist/main.94e560dc.css → docs/dist/main.86a43fec.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long