mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
update docs home page
This commit is contained in:
Younes ENNAJI
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"dist/main.css": "/dist/main.bd9e708d.css",
|
||||
"dist/main.css": "/dist/main.2e8d1953.css",
|
||||
"dist/main.js": "/dist/main.8b056786.js",
|
||||
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||
"dist/455.095e6545.js": "/dist/455.095e6545.js",
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
{% include header.html %}
|
||||
|
||||
|
||||
<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-8">
|
||||
<div class="container mx-auto px-4 lg:px-6 py-8">
|
||||
<div class="flex flex-col lg:flex-row gap-8">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="lg:w-64 shrink-0">
|
||||
|
||||
@@ -1,757 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="scroll-smooth">
|
||||
<head>
|
||||
{% include head.html %}
|
||||
|
||||
<link rel="stylesheet" href="/static/css/home.css">
|
||||
</head>
|
||||
<body class="min-h-screen bg-slate-50 text-slate-800 font-sans leading-relaxed" data-controller="anchor clipboard navigation tryit">
|
||||
{% include size-helper.html %}
|
||||
{% include banner.html %}
|
||||
{% include header.html %}
|
||||
|
||||
<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-4">
|
||||
<!-- Hero Section with Animated Bell in SVG -->
|
||||
<section class="relative overflow-hidden bg-gradient-to-b from-indigo-50 to-white pt-16 pb-12 rounded-3xl mb-16 shadow-sm">
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<div class="absolute left-0 top-0 w-1/3 h-1/3 bg-gradient-to-br from-purple-100 to-transparent opacity-60 blur-3xl"></div>
|
||||
<div class="absolute right-0 bottom-0 w-1/3 h-1/3 bg-gradient-to-tl from-indigo-100 to-transparent opacity-60 blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 container mx-auto px-4">
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center mb-8 animate-fade-in">
|
||||
<div class="relative inline-block">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="320" height="50" viewBox="0 0 5082 781" preserveAspectRatio="xMidYMid meet" class="mx-auto">
|
||||
<g transform="translate(0.000000,781.000000) scale(0.100000,-0.100000)" fill="#FFFFFF" stroke="none">
|
||||
<!-- Bell path with animation class -->
|
||||
<path id="bell-icon" class="animate-bell" fill="#4052B5" d="M45570 7540 c-283 -43 -490 -282 -490 -565 0 -200 118 -404 284 -491 31 -16 55 -32 53 -35 -1 -4 -39 -34 -85 -68 -439 -325 -739 -810 -843 -1365 -27 -142 -37 -465 -19 -617 31 -272 65 -381 300 -954 259 -633 265 -653 265 -955 0 -149 -4 -215 -18 -280 -32 -153 -79 -282 -161 -440 -44 -85 -95 -184 -113 -220 -101 -198 -102 -473 -3 -671 115 -230 303 -375 550 -425 98 -19 249 -15 343 10 31 9 363 142 738 296 374 154 683 280 687 280 4 0 16 -30 26 -66 43 -151 158 -332 273 -432 263 -226 594 -301 920 -206 153 44 272 114 392 228 93 90 150 169 205 287 68 144 90 246 89 409 -1 162 -28 283 -96 422 l-42 88 45 19 c25 10 326 135 670 276 344 141 657 273 695 293 102 53 247 200 302 307 60 117 84 203 90 325 13 240 -73 452 -250 616 -94 88 -205 147 -372 198 -66 21 -151 49 -190 63 -322 119 -616 373 -784 677 -27 50 -136 300 -241 554 -206 500 -223 539 -308 676 -338 546 -876 904 -1521 1013 -145 25 -513 24 -653 0 -137 -24 -128 -29 -105 56 32 125 13 277 -51 402 -102 201 -356 329 -582 295z"/>
|
||||
<path fill="#2D264B" d="M19237 6013 c-4 -3 -7 -1252 -7 -2775 l0 -2768 640 0 640 0 0 2775 0 2775 -633 0 c-349 0 -637 -3 -640 -7z"/>
|
||||
<path fill="#2D264B" d="M30710 3245 l0 -2775 640 0 640 0 0 1188 c0 1271 1 1296 51 1444 43 129 97 218 188 308 131 131 259 188 464 210 75 8 131 8 199 1 345 -39 574 -235 670 -576 l23 -80 3 -1247 3 -1248 640 0 640 0 -4 1348 c-3 1322 -3 1349 -25 1479 -84 520 -288 873 -657 1138 -428 307 -1127 349 -1655 99 -185 -88 -377 -237 -503 -394 l-37 -45 0 963 0 962 -640 0 -640 0 0 -2775z"/>
|
||||
<path fill="#4052B5" d="M300 3100 l0 -2630 635 0 635 0 0 944 0 944 538 5 c576 5 639 9 881 63 482 108 880 386 1100 769 100 174 176 412 201 627 18 149 8 429 -20 578 -79 425 -298 769 -636 996 -234 156 -489 250 -832 306 -135 22 -154 22 -1319 25 l-1183 4 0 -2631z m2239 1571 c223 -58 362 -183 427 -385 22 -66 27 -106 31 -216 6 -166 -10 -251 -68 -368 -71 -145 -189 -239 -369 -293 -72 -22 -92 -23 -532 -27 l-458 -3 0 654 c0 359 3 657 7 661 4 4 204 6 443 3 408 -3 440 -5 519 -26z"/>
|
||||
<path fill="#4052B5" d="M4970 3100 l0 -2630 640 0 640 0 0 1085 0 1085 1000 0 1000 0 0 -1085 0 -1085 640 0 640 0 0 2630 0 2630 -640 0 -640 0 0 -1030 0 -1030 -1000 0 -1000 0 0 1030 0 1030 -640 0 -640 0 0 -2630z"/>
|
||||
<path fill="#4052B5" d="M10460 3100 l0 -2630 635 0 635 0 0 944 0 944 538 5 c576 5 639 9 881 63 343 77 630 232 866 469 132 131 199 224 275 380 127 258 177 510 167 834 -8 275 -54 479 -158 700 -141 299 -362 524 -680 690 -181 95 -394 160 -657 203 -135 22 -154 22 -1319 25 l-1183 4 0 -2631z m2239 1571 c115 -30 199 -72 267 -134 126 -114 183 -252 191 -457 15 -357 -130 -578 -437 -671 -72 -22 -92 -23 -532 -27 l-458 -3 0 654 c0 359 3 657 7 661 4 4 204 6 443 3 408 -3 440 -5 519 -26z"/>
|
||||
<path fill="#2D264B" d="M15130 3100 l0 -2630 640 0 640 0 0 1065 0 1065 805 0 805 0 0 495 0 495 -802 2 -803 3 0 555 0 555 1073 3 1072 2 0 510 0 510 -1715 0 -1715 0 0 -2630z"/>
|
||||
<path fill="#2D264B" d="M22776 4695 c-704 -100 -1262 -603 -1481 -1335 -112 -373 -137 -881 -65 -1300 101 -589 393 -1067 829 -1361 433 -292 1009 -369 1511 -203 273 91 532 273 692 487 l58 79 0 -296 0 -296 640 0 640 0 0 2090 0 2090 -640 0 -640 0 -2 -291 -3 -291 -43 61 c-128 182 -349 356 -578 456 -95 41 -223 79 -341 101 -122 22 -447 28 -577 9z m854 -1126 c156 -39 317 -138 441 -274 176 -192 259 -459 246 -790 -12 -304 -95 -519 -270 -702 -135 -140 -281 -223 -456 -258 -128 -26 -337 -17 -451 20 -236 76 -406 216 -520 428 -80 147 -118 301 -127 512 -19 439 134 771 446 963 93 57 239 109 344 122 97 12 254 2 347 -21z"/>
|
||||
<path fill="#2D264B" d="M27855 4699 c-696 -66 -1217 -427 -1369 -950 -36 -124 -50 -261 -42 -408 14 -287 94 -485 266 -661 242 -247 448 -339 1170 -520 456 -115 702 -208 774 -292 122 -142 63 -361 -120 -452 -85 -42 -175 -59 -319 -59 -100 1 -148 6 -208 22 -221 59 -386 215 -428 404 l-12 57 -629 0 -628 0 0 -36 c0 -57 37 -225 71 -321 72 -203 168 -353 334 -518 292 -293 685 -471 1185 -537 124 -16 538 -16 655 0 313 44 578 131 790 262 280 172 467 418 546 717 26 99 36 322 20 446 -41 309 -186 542 -467 753 -171 127 -521 256 -1079 395 -486 122 -635 188 -702 311 -26 48 -25 198 2 253 66 134 232 201 475 192 192 -7 316 -55 430 -167 71 -69 120 -161 144 -272 l6 -28 591 0 591 0 -7 53 c-22 167 -85 377 -155 517 -100 198 -285 414 -467 543 -225 160 -528 263 -867 296 -126 13 -419 12 -551 0z"/>
|
||||
<path fill="#2D264B" d="M37390 4704 c-340 -40 -571 -103 -813 -225 -298 -150 -537 -361 -724 -639 -204 -305 -321 -686 -342 -1122 -28 -570 90 -1048 357 -1443 192 -285 415 -480 727 -635 228 -113 428 -173 705 -211 144 -20 518 -17 660 4 478 74 859 262 1161 574 164 169 302 371 382 559 38 89 97 259 97 281 0 11 -121 13 -679 13 l-680 0 -38 -72 c-77 -146 -231 -265 -399 -308 -322 -83 -667 18 -843 247 -92 119 -157 290 -177 462 l-7 61 1451 0 1450 0 9 78 c13 120 10 515 -5 627 -69 522 -310 986 -667 1284 -286 238 -615 382 -1020 447 -95 15 -521 28 -605 18z m423 -1040 c221 -46 420 -194 508 -378 39 -81 69 -202 69 -277 l0 -39 -800 0 c-770 0 -800 1 -800 18 0 47 45 186 89 277 115 236 326 380 610 415 82 11 234 3 324 -16z"/>
|
||||
<path fill="#2D264B" d="M42860 4693 c-173 -12 -381 -68 -536 -144 -215 -105 -440 -292 -590 -492 l-74 -98 0 346 0 345 -640 0 -640 0 0 -2090 0 -2090 640 0 640 0 0 1029 c0 884 2 1047 16 1153 9 67 20 128 25 134 5 6 10 20 12 32 2 12 6 25 10 28 4 4 7 15 7 24 0 9 18 52 40 96 101 198 323 325 640 364 46 5 191 10 322 10 l238 0 0 680 0 680 -32 -2 c-18 -1 -53 -3 -78 -5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-slate-800 mb-4 tracking-tight">
|
||||
Beautiful Flash Notifications <span class="text-indigo-600">Made Simple</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-lg text-slate-600 max-w-2xl mx-auto mb-8">
|
||||
Add elegant notifications to your Laravel or Symfony applications with just <span class="bg-indigo-50 text-indigo-700 px-2 py-1 rounded">one line of code</span>. Perfect for developers of all skill levels.
|
||||
</p>
|
||||
|
||||
<!--
|
||||
<div class="flex flex-wrap gap-3 justify-center mb-8">
|
||||
<a href="#quick-start" class="px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg flex items-center">
|
||||
<i class="fa-solid fa-rocket mr-2"></i> Get Started
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="px-5 py-3 bg-white hover:bg-slate-50 text-slate-700 font-medium rounded-lg border border-slate-200 transition-colors duration-200 flex items-center">
|
||||
<i class="fa-brands fa-github mr-2"></i> View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-3">
|
||||
<a href="https://www.linkedin.com/in/younes--ennaji/" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/badge/author-@yoeunes-blue.svg" alt="Author Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/badge/source-php--flasher/php--flasher-blue.svg" alt="Source Code Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher/releases" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/github/tag/php-flasher/flasher.svg" alt="GitHub Release Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/flasher/blob/master/LICENSE" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="License Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://packagist.org/packages/php-flasher/flasher" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/packagist/dt/php-flasher/flasher.svg" alt="Packagist Downloads Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/github/stars/php-flasher/php-flasher.svg" alt="GitHub Stars Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://packagist.org/packages/php-flasher/flasher" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/packagist/php-v/php-flasher/flasher.svg" alt="Supported PHP Version Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include flasher-studio.html %}
|
||||
|
||||
<!-- Quick Start Section (Moved before Features) -->
|
||||
<section id="quick-start" class="container mx-auto px-4 mb-16">
|
||||
<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">Get Started</div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Quick Installation</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">Get up and running in less than a minute</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-8">
|
||||
<div class="bg-slate-800 p-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="flex space-x-1 mr-4">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<span class="text-slate-400 text-sm">Terminal</span>
|
||||
</div>
|
||||
<div class="text-slate-400 text-sm">Installation</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-slate-900">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="relative">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center mr-2 text-xs">
|
||||
<i class="fa-brands fa-laravel"></i>
|
||||
</div>
|
||||
<span class="text-slate-300 text-sm">Laravel Installation</span>
|
||||
</div>
|
||||
<pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">composer require php-flasher/flasher-laravel</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="w-5 h-5 bg-black text-white rounded-full flex items-center justify-center mr-2 text-xs">
|
||||
<i class="fa-brands fa-symfony"></i>
|
||||
</div>
|
||||
<span class="text-slate-300 text-sm">Symfony Installation</span>
|
||||
</div>
|
||||
<pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">composer require php-flasher/flasher-symfony</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Laravel Quick Start -->
|
||||
<a href="/laravel/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden hover:border-red-200">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-red-50 text-red-500 rounded-lg flex items-center justify-center mr-3 group-hover:bg-red-100 transition-colors">
|
||||
<i class="fa-brands fa-laravel text-lg"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800">Laravel Guide</h3>
|
||||
</div>
|
||||
<p class="text-slate-600 mb-4">Perfect integration with Laravel's notification system. Get started in minutes.</p>
|
||||
<div class="flex items-center text-red-600 font-medium">
|
||||
Learn more
|
||||
<i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Symfony Quick Start -->
|
||||
<a href="/symfony/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden hover:border-slate-300">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-slate-50 text-black rounded-lg flex items-center justify-center mr-3 group-hover:bg-slate-100 transition-colors">
|
||||
<i class="fa-brands fa-symfony text-lg"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800">Symfony Guide</h3>
|
||||
</div>
|
||||
<p class="text-slate-600 mb-4">Complete Symfony integration with bundle configuration and services.</p>
|
||||
<div class="flex items-center text-slate-700 font-medium">
|
||||
Learn more
|
||||
<i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
|
||||
<!-- Livewire Quick Start -->
|
||||
<a href="/livewire/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden hover:border-purple-200">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-purple-50 text-purple-600 rounded-lg flex items-center justify-center mr-3 group-hover:bg-purple-100 transition-colors">
|
||||
<i class="fa-solid fa-bolt text-lg"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800">Livewire Guide</h3>
|
||||
</div>
|
||||
<p class="text-slate-600 mb-4">Real-time notifications in your Laravel Livewire components.</p>
|
||||
<div class="flex items-center text-purple-600 font-medium">
|
||||
Learn more
|
||||
<i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Inertia Quick Start -->
|
||||
<a href="/inertia/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden hover:border-blue-200">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center mr-3 group-hover:bg-blue-100 transition-colors">
|
||||
<i class="fa-solid fa-arrows-rotate text-lg"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800">Inertia Guide</h3>
|
||||
</div>
|
||||
<p class="text-slate-600 mb-4">Modern SPA notifications with Inertia.js integration.</p>
|
||||
<div class="flex items-center text-blue-600 font-medium">
|
||||
Learn more
|
||||
<i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features 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">Features</div>
|
||||
<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 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-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-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.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.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.5"></i>
|
||||
<span>Intuitive, consistent API across libraries</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
|
||||
<span>Customize notifications with ease</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<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-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.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.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.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.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-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-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.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.5"></i>
|
||||
<span>Seamless Symfony support with bundle</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<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-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-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-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.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.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.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.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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 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>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Code Example Section -->
|
||||
<section class="container mx-auto px-4 mb-16">
|
||||
<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">Code Examples</div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Simple Implementation</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">Just a few lines of code to get started</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-8 max-w-4xl mx-auto">
|
||||
<!-- PHP Example -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">Controller.php</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php"><?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
class ProfileController
|
||||
{
|
||||
public function update()
|
||||
{
|
||||
// Update user profile logic
|
||||
|
||||
// Show success notification
|
||||
flash()->success('Profile updated successfully!');
|
||||
|
||||
// Or add a title
|
||||
flash()->success('Your changes have been saved.', 'Profile Updated');
|
||||
|
||||
// Or add a title and options
|
||||
flash()
|
||||
->option('timeout', 5000)
|
||||
->option('position', 'top-right')
|
||||
->success('Changes saved with custom settings');
|
||||
|
||||
// Change notification options
|
||||
flash()->options([
|
||||
'timeout' => 5000,
|
||||
'position' => 'top-right'
|
||||
])->success('Changes saved with custom settings');
|
||||
|
||||
return back();
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Example -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">app.js</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-javascript">// Form submission example
|
||||
document.getElementById('contact-form').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const response = await submitForm(this);
|
||||
|
||||
if (response.success) {
|
||||
// Show success notification
|
||||
flasher.success('Your message has been sent!', 'Thank You');
|
||||
} else {
|
||||
// Show error notification
|
||||
flasher.error('Please check your form inputs', 'Error');
|
||||
}
|
||||
} catch (error) {
|
||||
// Show error notification with details
|
||||
flasher.error('Server error, please try again later.', 'Error');
|
||||
console.error(error);
|
||||
}
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 -->
|
||||
<section class="bg-gradient-to-b from-slate-50 to-white py-16 mb-20">
|
||||
<div class="container mx-auto px-4">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- GitHub -->
|
||||
<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-5 group-hover:bg-slate-100 transition-colors">
|
||||
<i class="fa-brands fa-github text-slate-800 text-3xl"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-xl text-slate-800 mb-3">Star on GitHub</h3>
|
||||
<p class="text-slate-600 mb-6">Contribute to the project, report issues, or suggest new features.</p>
|
||||
<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.5"></i> Star Project
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Discussions -->
|
||||
<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-5 group-hover:bg-indigo-100 transition-colors">
|
||||
<i class="fa-solid fa-comments text-indigo-600 text-3xl"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-xl text-slate-800 mb-3">Join Discussions</h3>
|
||||
<p class="text-slate-600 mb-6">Ask questions, share ideas, and connect with other developers.</p>
|
||||
<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.5"></i> Participate
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Documentation -->
|
||||
<a href="/laravel" 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-5 group-hover:bg-amber-100 transition-colors">
|
||||
<i class="fa-solid fa-book-open text-amber-600 text-3xl"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-xl text-slate-800 mb-3">Read Documentation</h3>
|
||||
<p class="text-slate-600 mb-6">Explore comprehensive guides, examples, and API reference.</p>
|
||||
<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.5"></i> Get Started
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call To Action -->
|
||||
<section class="container mx-auto px-4 mb-16">
|
||||
<div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl overflow-hidden shadow-lg">
|
||||
<div class="max-w-4xl mx-auto px-6 py-16 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Ready to Enhance Your PHP Applications?</h2>
|
||||
<p class="text-indigo-100 text-lg mb-8 max-w-2xl mx-auto">
|
||||
Add beautiful notifications to your Laravel or Symfony applications in minutes with PHPFlasher.
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="#quick-start" class="px-6 py-3 bg-white hover:bg-slate-100 text-indigo-600 font-medium rounded-lg transition-colors duration-200 shadow-md flex items-center">
|
||||
<i class="fa-solid fa-rocket mr-2"></i> Get Started
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="px-6 py-3 bg-indigo-700 hover:bg-indigo-800 text-white font-medium rounded-lg transition-colors duration-200 shadow-md flex items-center">
|
||||
<i class="fa-brands fa-github mr-2"></i> Star on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Browser Support Section -->
|
||||
<section class="container mx-auto px-4 mb-16">
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-block px-3 py-1 bg-slate-100 text-slate-700 rounded-full text-sm font-medium mb-2">Support</div>
|
||||
<h2 class="text-xl font-bold text-slate-800">Compatible Everywhere</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 py-8">
|
||||
<div class="flex flex-wrap justify-center gap-10 px-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-brands fa-chrome text-green-500 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Chrome</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-brands fa-firefox text-orange-500 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Firefox</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-brands fa-safari text-blue-500 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Safari</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-brands fa-edge text-blue-600 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Edge</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-mobile-screen text-slate-600 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Mobile</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-moon text-indigo-500 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Dark Mode</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% include footer.html %}
|
||||
{% include scripts.html %}
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+1
-1
@@ -2,7 +2,7 @@
|
||||
"entrypoints": {
|
||||
"main": {
|
||||
"css": [
|
||||
"/dist/main.bd9e708d.css"
|
||||
"/dist/main.2e8d1953.css"
|
||||
],
|
||||
"js": [
|
||||
"/dist/main.8b056786.js"
|
||||
|
||||
File diff suppressed because one or more lines are too long
+741
-1
@@ -1,5 +1,745 @@
|
||||
---
|
||||
permalink: /
|
||||
description: PHPFlasher is a powerful PHP notification library that makes it simple to add beautiful flash messages to your Laravel or Symfony applications. Perfect for form submissions, API responses, and user interactions.
|
||||
layout: home
|
||||
---
|
||||
|
||||
<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-4">
|
||||
<!-- Hero Section with Animated Bell in SVG -->
|
||||
<section class="relative overflow-hidden bg-gradient-to-b from-indigo-50 to-white pt-16 pb-12 rounded-3xl mb-16 shadow-sm">
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<div class="absolute left-0 top-0 w-1/3 h-1/3 bg-gradient-to-br from-purple-100 to-transparent opacity-60 blur-3xl"></div>
|
||||
<div class="absolute right-0 bottom-0 w-1/3 h-1/3 bg-gradient-to-tl from-indigo-100 to-transparent opacity-60 blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 container mx-auto px-4">
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center mb-8 animate-fade-in">
|
||||
<div class="relative inline-block">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="320" height="50" viewBox="0 0 5082 781" preserveAspectRatio="xMidYMid meet" class="mx-auto">
|
||||
<g transform="translate(0.000000,781.000000) scale(0.100000,-0.100000)" fill="#FFFFFF" stroke="none">
|
||||
<!-- Bell path with animation class -->
|
||||
<path id="bell-icon" class="animate-bell" fill="#4052B5" d="M45570 7540 c-283 -43 -490 -282 -490 -565 0 -200 118 -404 284 -491 31 -16 55 -32 53 -35 -1 -4 -39 -34 -85 -68 -439 -325 -739 -810 -843 -1365 -27 -142 -37 -465 -19 -617 31 -272 65 -381 300 -954 259 -633 265 -653 265 -955 0 -149 -4 -215 -18 -280 -32 -153 -79 -282 -161 -440 -44 -85 -95 -184 -113 -220 -101 -198 -102 -473 -3 -671 115 -230 303 -375 550 -425 98 -19 249 -15 343 10 31 9 363 142 738 296 374 154 683 280 687 280 4 0 16 -30 26 -66 43 -151 158 -332 273 -432 263 -226 594 -301 920 -206 153 44 272 114 392 228 93 90 150 169 205 287 68 144 90 246 89 409 -1 162 -28 283 -96 422 l-42 88 45 19 c25 10 326 135 670 276 344 141 657 273 695 293 102 53 247 200 302 307 60 117 84 203 90 325 13 240 -73 452 -250 616 -94 88 -205 147 -372 198 -66 21 -151 49 -190 63 -322 119 -616 373 -784 677 -27 50 -136 300 -241 554 -206 500 -223 539 -308 676 -338 546 -876 904 -1521 1013 -145 25 -513 24 -653 0 -137 -24 -128 -29 -105 56 32 125 13 277 -51 402 -102 201 -356 329 -582 295z"/>
|
||||
<path fill="#2D264B" d="M19237 6013 c-4 -3 -7 -1252 -7 -2775 l0 -2768 640 0 640 0 0 2775 0 2775 -633 0 c-349 0 -637 -3 -640 -7z"/>
|
||||
<path fill="#2D264B" d="M30710 3245 l0 -2775 640 0 640 0 0 1188 c0 1271 1 1296 51 1444 43 129 97 218 188 308 131 131 259 188 464 210 75 8 131 8 199 1 345 -39 574 -235 670 -576 l23 -80 3 -1247 3 -1248 640 0 640 0 -4 1348 c-3 1322 -3 1349 -25 1479 -84 520 -288 873 -657 1138 -428 307 -1127 349 -1655 99 -185 -88 -377 -237 -503 -394 l-37 -45 0 963 0 962 -640 0 -640 0 0 -2775z"/>
|
||||
<path fill="#4052B5" d="M300 3100 l0 -2630 635 0 635 0 0 944 0 944 538 5 c576 5 639 9 881 63 482 108 880 386 1100 769 100 174 176 412 201 627 18 149 8 429 -20 578 -79 425 -298 769 -636 996 -234 156 -489 250 -832 306 -135 22 -154 22 -1319 25 l-1183 4 0 -2631z m2239 1571 c223 -58 362 -183 427 -385 22 -66 27 -106 31 -216 6 -166 -10 -251 -68 -368 -71 -145 -189 -239 -369 -293 -72 -22 -92 -23 -532 -27 l-458 -3 0 654 c0 359 3 657 7 661 4 4 204 6 443 3 408 -3 440 -5 519 -26z"/>
|
||||
<path fill="#4052B5" d="M4970 3100 l0 -2630 640 0 640 0 0 1085 0 1085 1000 0 1000 0 0 -1085 0 -1085 640 0 640 0 0 2630 0 2630 -640 0 -640 0 0 -1030 0 -1030 -1000 0 -1000 0 0 1030 0 1030 -640 0 -640 0 0 -2630z"/>
|
||||
<path fill="#4052B5" d="M10460 3100 l0 -2630 635 0 635 0 0 944 0 944 538 5 c576 5 639 9 881 63 343 77 630 232 866 469 132 131 199 224 275 380 127 258 177 510 167 834 -8 275 -54 479 -158 700 -141 299 -362 524 -680 690 -181 95 -394 160 -657 203 -135 22 -154 22 -1319 25 l-1183 4 0 -2631z m2239 1571 c115 -30 199 -72 267 -134 126 -114 183 -252 191 -457 15 -357 -130 -578 -437 -671 -72 -22 -92 -23 -532 -27 l-458 -3 0 654 c0 359 3 657 7 661 4 4 204 6 443 3 408 -3 440 -5 519 -26z"/>
|
||||
<path fill="#2D264B" d="M15130 3100 l0 -2630 640 0 640 0 0 1065 0 1065 805 0 805 0 0 495 0 495 -802 2 -803 3 0 555 0 555 1073 3 1072 2 0 510 0 510 -1715 0 -1715 0 0 -2630z"/>
|
||||
<path fill="#2D264B" d="M22776 4695 c-704 -100 -1262 -603 -1481 -1335 -112 -373 -137 -881 -65 -1300 101 -589 393 -1067 829 -1361 433 -292 1009 -369 1511 -203 273 91 532 273 692 487 l58 79 0 -296 0 -296 640 0 640 0 0 2090 0 2090 -640 0 -640 0 -2 -291 -3 -291 -43 61 c-128 182 -349 356 -578 456 -95 41 -223 79 -341 101 -122 22 -447 28 -577 9z m854 -1126 c156 -39 317 -138 441 -274 176 -192 259 -459 246 -790 -12 -304 -95 -519 -270 -702 -135 -140 -281 -223 -456 -258 -128 -26 -337 -17 -451 20 -236 76 -406 216 -520 428 -80 147 -118 301 -127 512 -19 439 134 771 446 963 93 57 239 109 344 122 97 12 254 2 347 -21z"/>
|
||||
<path fill="#2D264B" d="M27855 4699 c-696 -66 -1217 -427 -1369 -950 -36 -124 -50 -261 -42 -408 14 -287 94 -485 266 -661 242 -247 448 -339 1170 -520 456 -115 702 -208 774 -292 122 -142 63 -361 -120 -452 -85 -42 -175 -59 -319 -59 -100 1 -148 6 -208 22 -221 59 -386 215 -428 404 l-12 57 -629 0 -628 0 0 -36 c0 -57 37 -225 71 -321 72 -203 168 -353 334 -518 292 -293 685 -471 1185 -537 124 -16 538 -16 655 0 313 44 578 131 790 262 280 172 467 418 546 717 26 99 36 322 20 446 -41 309 -186 542 -467 753 -171 127 -521 256 -1079 395 -486 122 -635 188 -702 311 -26 48 -25 198 2 253 66 134 232 201 475 192 192 -7 316 -55 430 -167 71 -69 120 -161 144 -272 l6 -28 591 0 591 0 -7 53 c-22 167 -85 377 -155 517 -100 198 -285 414 -467 543 -225 160 -528 263 -867 296 -126 13 -419 12 -551 0z"/>
|
||||
<path fill="#2D264B" d="M37390 4704 c-340 -40 -571 -103 -813 -225 -298 -150 -537 -361 -724 -639 -204 -305 -321 -686 -342 -1122 -28 -570 90 -1048 357 -1443 192 -285 415 -480 727 -635 228 -113 428 -173 705 -211 144 -20 518 -17 660 4 478 74 859 262 1161 574 164 169 302 371 382 559 38 89 97 259 97 281 0 11 -121 13 -679 13 l-680 0 -38 -72 c-77 -146 -231 -265 -399 -308 -322 -83 -667 18 -843 247 -92 119 -157 290 -177 462 l-7 61 1451 0 1450 0 9 78 c13 120 10 515 -5 627 -69 522 -310 986 -667 1284 -286 238 -615 382 -1020 447 -95 15 -521 28 -605 18z m423 -1040 c221 -46 420 -194 508 -378 39 -81 69 -202 69 -277 l0 -39 -800 0 c-770 0 -800 1 -800 18 0 47 45 186 89 277 115 236 326 380 610 415 82 11 234 3 324 -16z"/>
|
||||
<path fill="#2D264B" d="M42860 4693 c-173 -12 -381 -68 -536 -144 -215 -105 -440 -292 -590 -492 l-74 -98 0 346 0 345 -640 0 -640 0 0 -2090 0 -2090 640 0 640 0 0 1029 c0 884 2 1047 16 1153 9 67 20 128 25 134 5 6 10 20 12 32 2 12 6 25 10 28 4 4 7 15 7 24 0 9 18 52 40 96 101 198 323 325 640 364 46 5 191 10 322 10 l238 0 0 680 0 680 -32 -2 c-18 -1 -53 -3 -78 -5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-slate-800 mb-4 tracking-tight">
|
||||
Beautiful Flash Notifications <span class="text-indigo-600">Made Simple</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-lg text-slate-600 max-w-2xl mx-auto mb-8">
|
||||
Add elegant notifications to your Laravel or Symfony applications with just <span class="bg-indigo-50 text-indigo-700 px-2 py-1 rounded">one line of code</span>. Perfect for developers of all skill levels.
|
||||
</p>
|
||||
|
||||
<!--
|
||||
<div class="flex flex-wrap gap-3 justify-center mb-8">
|
||||
<a href="#quick-start" class="px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg flex items-center">
|
||||
<i class="fa-solid fa-rocket mr-2"></i> Get Started
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="px-5 py-3 bg-white hover:bg-slate-50 text-slate-700 font-medium rounded-lg border border-slate-200 transition-colors duration-200 flex items-center">
|
||||
<i class="fa-brands fa-github mr-2"></i> View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-3">
|
||||
<a href="https://www.linkedin.com/in/younes--ennaji/" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/badge/author-@yoeunes-blue.svg" alt="Author Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/badge/source-php--flasher/php--flasher-blue.svg" alt="Source Code Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher/releases" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/github/tag/php-flasher/flasher.svg" alt="GitHub Release Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/flasher/blob/master/LICENSE" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="License Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://packagist.org/packages/php-flasher/flasher" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/packagist/dt/php-flasher/flasher.svg" alt="Packagist Downloads Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/github/stars/php-flasher/php-flasher.svg" alt="GitHub Stars Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
<a href="https://packagist.org/packages/php-flasher/flasher" class="text-slate-500 hover:text-indigo-700 transition-colors duration-200">
|
||||
<img src="https://img.shields.io/packagist/php-v/php-flasher/flasher.svg" alt="Supported PHP Version Badge" class="transform hover:scale-105 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include flasher-studio.html %}
|
||||
|
||||
<!-- Quick Start Section (Moved before Features) -->
|
||||
<section id="quick-start" class="container mx-auto px-4 mb-16">
|
||||
<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">Get Started</div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Quick Installation</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">Get up and running in less than a minute</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-8">
|
||||
<div class="bg-slate-800 p-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="flex space-x-1 mr-4">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<span class="text-slate-400 text-sm">Terminal</span>
|
||||
</div>
|
||||
<div class="text-slate-400 text-sm">Installation</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-slate-900">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="relative">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center mr-2 text-xs">
|
||||
<i class="fa-brands fa-laravel"></i>
|
||||
</div>
|
||||
<span class="text-slate-300 text-sm">Laravel Installation</span>
|
||||
</div>
|
||||
<pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">composer require php-flasher/flasher-laravel</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="w-5 h-5 bg-black text-white rounded-full flex items-center justify-center mr-2 text-xs">
|
||||
<i class="fa-brands fa-symfony"></i>
|
||||
</div>
|
||||
<span class="text-slate-300 text-sm">Symfony Installation</span>
|
||||
</div>
|
||||
<pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">composer require php-flasher/flasher-symfony</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Laravel Quick Start -->
|
||||
<a href="/laravel/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden hover:border-red-200">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-red-50 text-red-500 rounded-lg flex items-center justify-center mr-3 group-hover:bg-red-100 transition-colors">
|
||||
<i class="fa-brands fa-laravel text-lg"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800">Laravel Guide</h3>
|
||||
</div>
|
||||
<p class="text-slate-600 mb-4">Perfect integration with Laravel's notification system. Get started in minutes.</p>
|
||||
<div class="flex items-center text-red-600 font-medium">
|
||||
Learn more
|
||||
<i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Symfony Quick Start -->
|
||||
<a href="/symfony/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden hover:border-slate-300">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-slate-50 text-black rounded-lg flex items-center justify-center mr-3 group-hover:bg-slate-100 transition-colors">
|
||||
<i class="fa-brands fa-symfony text-lg"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800">Symfony Guide</h3>
|
||||
</div>
|
||||
<p class="text-slate-600 mb-4">Complete Symfony integration with bundle configuration and services.</p>
|
||||
<div class="flex items-center text-slate-700 font-medium">
|
||||
Learn more
|
||||
<i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
|
||||
<!-- Livewire Quick Start -->
|
||||
<a href="/livewire/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden hover:border-purple-200">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-purple-50 text-purple-600 rounded-lg flex items-center justify-center mr-3 group-hover:bg-purple-100 transition-colors">
|
||||
<i class="fa-solid fa-bolt text-lg"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800">Livewire Guide</h3>
|
||||
</div>
|
||||
<p class="text-slate-600 mb-4">Real-time notifications in your Laravel Livewire components.</p>
|
||||
<div class="flex items-center text-purple-600 font-medium">
|
||||
Learn more
|
||||
<i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Inertia Quick Start -->
|
||||
<a href="/inertia/" class="group bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-slate-100 overflow-hidden hover:border-blue-200">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center mr-3 group-hover:bg-blue-100 transition-colors">
|
||||
<i class="fa-solid fa-arrows-rotate text-lg"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-800">Inertia Guide</h3>
|
||||
</div>
|
||||
<p class="text-slate-600 mb-4">Modern SPA notifications with Inertia.js integration.</p>
|
||||
<div class="flex items-center text-blue-600 font-medium">
|
||||
Learn more
|
||||
<i class="fa-solid fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features 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">Features</div>
|
||||
<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 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-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-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.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.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.5"></i>
|
||||
<span>Intuitive, consistent API across libraries</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<i class="fa-solid fa-check text-green-500 mt-1 mr-2.5"></i>
|
||||
<span>Customize notifications with ease</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<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-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.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.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.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.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-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-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.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.5"></i>
|
||||
<span>Seamless Symfony support with bundle</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<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-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-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-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.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.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.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.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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 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>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Code Example Section -->
|
||||
<section class="container mx-auto px-4 mb-16">
|
||||
<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">Code Examples</div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-2">Simple Implementation</h2>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">Just a few lines of code to get started</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-8 max-w-4xl mx-auto">
|
||||
<!-- PHP Example -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">Controller.php</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php"><?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
class ProfileController
|
||||
{
|
||||
public function update()
|
||||
{
|
||||
// Update user profile logic
|
||||
|
||||
// Show success notification
|
||||
flash()->success('Profile updated successfully!');
|
||||
|
||||
// Or add a title
|
||||
flash()->success('Your changes have been saved.', 'Profile Updated');
|
||||
|
||||
// Or add a title and options
|
||||
flash()
|
||||
->option('timeout', 5000)
|
||||
->option('position', 'top-right')
|
||||
->success('Changes saved with custom settings');
|
||||
|
||||
// Change notification options
|
||||
flash()->options([
|
||||
'timeout' => 5000,
|
||||
'position' => 'top-right'
|
||||
])->success('Changes saved with custom settings');
|
||||
|
||||
return back();
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Example -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">app.js</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-javascript">// Form submission example
|
||||
document.getElementById('contact-form').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const response = await submitForm(this);
|
||||
|
||||
if (response.success) {
|
||||
// Show success notification
|
||||
flasher.success('Your message has been sent!', 'Thank You');
|
||||
} else {
|
||||
// Show error notification
|
||||
flasher.error('Please check your form inputs', 'Error');
|
||||
}
|
||||
} catch (error) {
|
||||
// Show error notification with details
|
||||
flasher.error('Server error, please try again later.', 'Error');
|
||||
console.error(error);
|
||||
}
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 -->
|
||||
<section class="bg-gradient-to-b from-slate-50 to-white py-16 mb-20">
|
||||
<div class="container mx-auto px-4">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- GitHub -->
|
||||
<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-5 group-hover:bg-slate-100 transition-colors">
|
||||
<i class="fa-brands fa-github text-slate-800 text-3xl"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-xl text-slate-800 mb-3">Star on GitHub</h3>
|
||||
<p class="text-slate-600 mb-6">Contribute to the project, report issues, or suggest new features.</p>
|
||||
<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.5"></i> Star Project
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Discussions -->
|
||||
<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-5 group-hover:bg-indigo-100 transition-colors">
|
||||
<i class="fa-solid fa-comments text-indigo-600 text-3xl"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-xl text-slate-800 mb-3">Join Discussions</h3>
|
||||
<p class="text-slate-600 mb-6">Ask questions, share ideas, and connect with other developers.</p>
|
||||
<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.5"></i> Participate
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Documentation -->
|
||||
<a href="/laravel" 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-5 group-hover:bg-amber-100 transition-colors">
|
||||
<i class="fa-solid fa-book-open text-amber-600 text-3xl"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-xl text-slate-800 mb-3">Read Documentation</h3>
|
||||
<p class="text-slate-600 mb-6">Explore comprehensive guides, examples, and API reference.</p>
|
||||
<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.5"></i> Get Started
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call To Action -->
|
||||
<section class="container mx-auto px-4 mb-16">
|
||||
<div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl overflow-hidden shadow-lg">
|
||||
<div class="max-w-4xl mx-auto px-6 py-16 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Ready to Enhance Your PHP Applications?</h2>
|
||||
<p class="text-indigo-100 text-lg mb-8 max-w-2xl mx-auto">
|
||||
Add beautiful notifications to your Laravel or Symfony applications in minutes with PHPFlasher.
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="#quick-start" class="px-6 py-3 bg-white hover:bg-slate-100 text-indigo-600 font-medium rounded-lg transition-colors duration-200 shadow-md flex items-center">
|
||||
<i class="fa-solid fa-rocket mr-2"></i> Get Started
|
||||
</a>
|
||||
<a href="https://github.com/php-flasher/php-flasher" class="px-6 py-3 bg-indigo-700 hover:bg-indigo-800 text-white font-medium rounded-lg transition-colors duration-200 shadow-md flex items-center">
|
||||
<i class="fa-brands fa-github mr-2"></i> Star on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Browser Support Section -->
|
||||
<section class="container mx-auto px-4 mb-16">
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-block px-3 py-1 bg-slate-100 text-slate-700 rounded-full text-sm font-medium mb-2">Support</div>
|
||||
<h2 class="text-xl font-bold text-slate-800">Compatible Everywhere</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 py-8">
|
||||
<div class="flex flex-wrap justify-center gap-10 px-4">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-brands fa-chrome text-green-500 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Chrome</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-brands fa-firefox text-orange-500 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Firefox</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-brands fa-safari text-blue-500 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Safari</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-brands fa-edge text-blue-600 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Edge</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-mobile-screen text-slate-600 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Mobile</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center mb-2">
|
||||
<i class="fa-solid fa-moon text-indigo-500 text-2xl"></i>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600">Dark Mode</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user