You've already forked php-flasher
mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-04-05 12:32:55 +01:00
Wip
This commit is contained in:
Younes ENNAJI
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"dist/main.css": "/dist/main.94e560dc.css",
|
||||
"dist/main.css": "/dist/main.56555baa.css",
|
||||
"dist/main.js": "/dist/main.3be5bc06.js",
|
||||
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||
"dist/455.095e6545.js": "/dist/455.095e6545.js",
|
||||
|
||||
+107
-51
@@ -209,110 +209,166 @@
|
||||
</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="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>
|
||||
</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 -->
|
||||
<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="w-12 h-12 bg-indigo-50 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-indigo-600 text-xl"></i>
|
||||
<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-indigo-50 rounded-xl flex items-center justify-center mb-5">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-indigo-600 text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800 mb-2" id="easy-to-use">Easy to Use</h3>
|
||||
<ul class="space-y-2 text-slate-600 flex-grow">
|
||||
<h3 class="text-xl font-semibold text-slate-800 mb-3" id="easy-to-use">Easy to Use</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"></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>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span>Works right out of the box</span>
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
|
||||
<span>Works right out of the box - zero configuration</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span>No complex configuration needed</span>
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 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="w-12 h-12 bg-purple-50 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fa-solid fa-sliders text-purple-600 text-xl"></i>
|
||||
<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-purple-50 rounded-xl flex items-center justify-center mb-5">
|
||||
<i class="fa-solid fa-sliders text-purple-600 text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800 mb-2" id="flexible">Flexible & Powerful</h3>
|
||||
<ul class="space-y-2 text-slate-600 flex-grow">
|
||||
<h3 class="text-xl font-semibold text-slate-800 mb-3" id="flexible">Flexible & Powerful</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"></i>
|
||||
<span><a href="/library/toastr/" class="text-indigo-600 hover:underline">Toastr.js</a> - Classic toast notifications</span>
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
|
||||
<span>Multiple notification libraries in one package</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span><a href="/library/sweetalert/" class="text-indigo-600 hover:underline">SweetAlert 2</a> - Beautiful alert dialogs</span>
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
|
||||
<span>Session and direct rendering options</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span><a href="/library/noty/" class="text-indigo-600 hover:underline">Noty</a> - Highly customizable notifications</span>
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
|
||||
<span>Customizable positions, animations, and styles</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span><a href="/library/notyf/" class="text-indigo-600 hover:underline">Notyf</a> - Minimalist toast notifications</span>
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
|
||||
<span>Flash messages across redirects</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 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="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fa-solid fa-code text-blue-600 text-xl"></i>
|
||||
<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-blue-50 rounded-xl flex items-center justify-center mb-5">
|
||||
<i class="fa-solid fa-code text-blue-600 text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800 mb-2" id="integration">Framework Integration</h3>
|
||||
<ul class="space-y-2 text-slate-600 flex-grow">
|
||||
<h3 class="text-xl font-semibold text-slate-800 mb-3" id="integration">Framework Integration</h3>
|
||||
<ul class="space-y-3 text-slate-600 flex-grow">
|
||||
<li class="flex items-start">
|
||||
<i class="fa-brands fa-laravel text-red-500 mt-1 mr-2"></i>
|
||||
<span>Native Laravel integration</span>
|
||||
<i class="fa-brands fa-laravel text-red-500 mt-1 mr-2.5"></i>
|
||||
<span>Native Laravel integration with facades</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-brands fa-symfony text-black mt-1 mr-2"></i>
|
||||
<span>Seamless Symfony support</span>
|
||||
<i class="fa-brands fa-symfony text-black mt-1 mr-2.5"></i>
|
||||
<span>Seamless Symfony support with bundle</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-plug text-slate-600 mt-1 mr-2"></i>
|
||||
<span>Works with Livewire and Inertia</span>
|
||||
<i class="fa-solid fa-bolt text-purple-500 mt-1 mr-2.5"></i>
|
||||
<span>Livewire real-time notifications</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-wrench text-slate-600 mt-1 mr-2"></i>
|
||||
<span>Framework-agnostic core</span>
|
||||
<i class="fa-solid fa-arrows-rotate text-blue-500 mt-1 mr-2.5"></i>
|
||||
<span>Inertia.js SPA support</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 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="w-12 h-12 bg-emerald-50 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fa-solid fa-user-gear text-emerald-600 text-xl"></i>
|
||||
<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-emerald-50 rounded-xl flex items-center justify-center mb-5">
|
||||
<i class="fa-solid fa-user-gear text-emerald-600 text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800 mb-2" id="developer-friendly">Developer Experience</h3>
|
||||
<ul class="space-y-2 text-slate-600 flex-grow">
|
||||
<h3 class="text-xl font-semibold text-slate-800 mb-3" id="developer-friendly">Developer Experience</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"></i>
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
|
||||
<span>Full IDE support with autocompletion</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span>Clear documentation with examples</span>
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
|
||||
<span>Extensive documentation with examples</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span>TypeScript support</span>
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
|
||||
<span>TypeScript support for JavaScript usage</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
|
||||
<span>Easy to customize and extend</span>
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Vendored
+1
-1
@@ -2,7 +2,7 @@
|
||||
"entrypoints": {
|
||||
"main": {
|
||||
"css": [
|
||||
"/dist/main.94e560dc.css"
|
||||
"/dist/main.56555baa.css"
|
||||
],
|
||||
"js": [
|
||||
"/dist/main.3be5bc06.js"
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user