diff --git a/docs/_data/menu.yml b/docs/_data/menu.yml
index c047649c..a20f89b9 100644
--- a/docs/_data/menu.yml
+++ b/docs/_data/menu.yml
@@ -13,6 +13,7 @@
     <i class="fa-duotone fa-bread-loaf text-indigo-900 mr-1 fa-lg"></i> Toastr: '/library/toastr/'
 
 <i class="fa-duotone fa-palette"></i> Themes <span class="text-xs bg-indigo-500 text-white px-2 py-0.5 rounded-full font-medium ml-1">NEW</span>:
+    <i class="fa-duotone fa-th-large text-indigo-600 mr-1 fa-lg"></i> All Themes: '/themes/'
     <i class="fa-duotone fa-circle-minus text-indigo-900 mr-1 fa-lg"></i> Minimal: '/theme/minimal/'
     <i class="fa-duotone fa-sun text-yellow-600 mr-1 fa-lg"></i> Amber: '/theme/amber/'
     <i class="fa-duotone fa-diamond text-indigo-900 mr-1 fa-lg"></i> Crystal: '/theme/crystal/'
diff --git a/docs/pages/themes/index.html b/docs/pages/themes/index.html
new file mode 100644
index 00000000..f01981de
--- /dev/null
+++ b/docs/pages/themes/index.html
@@ -0,0 +1,441 @@
+---
+permalink: /themes/
+title: Theme Gallery
+description: Explore 26 beautiful notification themes for PHPFlasher. From minimal to material design, iOS to Slack-style - find the perfect look for your application.
+---
+
+<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-8">
+    <!-- Hero Section -->
+    <section class="relative overflow-hidden bg-gradient-to-br from-slate-900 via-indigo-900 to-purple-900 rounded-3xl mb-12 shadow-2xl">
+        <!-- Animated background -->
+        <div class="absolute inset-0 overflow-hidden">
+            <div class="absolute top-0 left-1/4 w-96 h-96 bg-indigo-500/20 rounded-full blur-3xl"></div>
+            <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl"></div>
+
+            <!-- Grid pattern -->
+            <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23ffffff&quot; fill-opacity=&quot;0.4&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
+        </div>
+
+        <div class="relative z-10 px-8 py-16 text-center">
+            <div class="inline-flex items-center px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white/90 text-sm font-medium mb-6">
+                <i class="fas fa-palette mr-2"></i>
+                26 Beautiful Themes
+            </div>
+
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight">
+                Theme <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-purple-300">Gallery</span>
+            </h1>
+
+            <p class="text-xl text-indigo-100 max-w-2xl mx-auto mb-8 leading-relaxed">
+                Choose from professionally designed themes. From minimalist to brand-inspired styles - find the perfect look for your application.
+            </p>
+
+            <div class="flex flex-wrap justify-center gap-4">
+                <a href="#themes" class="inline-flex items-center px-6 py-3 bg-white text-indigo-600 font-semibold rounded-xl hover:bg-indigo-50 transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5">
+                    <i class="fas fa-th-large mr-2"></i>
+                    Browse Themes
+                </a>
+                <a href="/playground/" class="inline-flex items-center px-6 py-3 bg-white/10 backdrop-blur-sm text-white font-semibold rounded-xl border border-white/30 hover:bg-white/20 transition-all duration-300">
+                    <i class="fas fa-flask mr-2"></i>
+                    Try in Playground
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Theme Categories -->
+    <section id="themes" class="scroll-mt-8">
+        <!-- Brand-Inspired Themes -->
+        <div class="mb-12">
+            <div class="flex items-center mb-6">
+                <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
+                    <i class="fas fa-building text-indigo-600"></i>
+                </div>
+                <div>
+                    <h2 class="text-xl font-bold text-slate-800">Brand-Inspired</h2>
+                    <p class="text-sm text-slate-500">Familiar styles from popular platforms</p>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                <!-- Material -->
+                <a href="/theme/material/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
+                        <i class="fab fa-google text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Material</h3>
+                        <p class="text-sm text-slate-500">Google Material Design</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- iOS -->
+                <a href="/theme/ios/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-slate-600 to-slate-800 flex items-center justify-center">
+                        <i class="fab fa-apple text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">iOS</h3>
+                        <p class="text-sm text-slate-500">Apple iOS notifications</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Slack -->
+                <a href="/theme/slack/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-purple-500 to-purple-700 flex items-center justify-center">
+                        <i class="fab fa-slack text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Slack</h3>
+                        <p class="text-sm text-slate-500">Slack messaging style</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Amazon -->
+                <a href="/theme/amazon/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center">
+                        <i class="fab fa-amazon text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Amazon</h3>
+                        <p class="text-sm text-slate-500">Amazon-inspired alerts</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Facebook -->
+                <a href="/theme/facebook/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-blue-500 to-blue-700 flex items-center justify-center">
+                        <i class="fab fa-facebook text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Facebook</h3>
+                        <p class="text-sm text-slate-500">Facebook notification style</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Google -->
+                <a href="/theme/google/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-red-500 via-yellow-500 to-green-500 flex items-center justify-center">
+                        <i class="fab fa-google text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Google</h3>
+                        <p class="text-sm text-slate-500">Google-style notifications</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+            </div>
+        </div>
+
+        <!-- Gemstone Themes -->
+        <div class="mb-12">
+            <div class="flex items-center mb-6">
+                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
+                    <i class="fas fa-gem text-purple-600"></i>
+                </div>
+                <div>
+                    <h2 class="text-xl font-bold text-slate-800">Gemstone Collection</h2>
+                    <p class="text-sm text-slate-500">Elegant color palettes inspired by precious stones</p>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                <!-- Ruby -->
+                <a href="/theme/ruby/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-red-500 to-rose-600 flex items-center justify-center">
+                        <i class="fas fa-gem text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Ruby</h3>
+                        <p class="text-sm text-slate-500">Bold ruby red accents</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Sapphire -->
+                <a href="/theme/sapphire/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
+                        <i class="fas fa-gem text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Sapphire</h3>
+                        <p class="text-sm text-slate-500">Elegant blue elegance</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Emerald -->
+                <a href="/theme/emerald/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-emerald-500 to-green-600 flex items-center justify-center">
+                        <i class="fas fa-gem text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Emerald</h3>
+                        <p class="text-sm text-slate-500">Modern green palette</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Jade -->
+                <a href="/theme/jade/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-teal-500 to-green-600 flex items-center justify-center">
+                        <i class="fas fa-leaf text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Jade</h3>
+                        <p class="text-sm text-slate-500">Soft jade colors</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Amber -->
+                <a href="/theme/amber/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
+                        <i class="fas fa-sun text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Amber</h3>
+                        <p class="text-sm text-slate-500">Warm amber tones</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Onyx -->
+                <a href="/theme/onyx/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-slate-700 to-slate-900 flex items-center justify-center">
+                        <i class="fas fa-moon text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Onyx</h3>
+                        <p class="text-sm text-slate-500">Dark mode sleek</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Crystal -->
+                <a href="/theme/crystal/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center">
+                        <i class="fas fa-snowflake text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Crystal</h3>
+                        <p class="text-sm text-slate-500">Transparent design</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Aurora -->
+                <a href="/theme/aurora/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-green-400 via-blue-500 to-purple-500 flex items-center justify-center">
+                        <i class="fas fa-sparkles text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Aurora</h3>
+                        <p class="text-sm text-slate-500">Gradient effects</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+            </div>
+        </div>
+
+        <!-- Minimal & Classic Themes -->
+        <div class="mb-12">
+            <div class="flex items-center mb-6">
+                <div class="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center mr-3">
+                    <i class="fas fa-minus text-slate-600"></i>
+                </div>
+                <div>
+                    <h2 class="text-xl font-bold text-slate-800">Minimal & Classic</h2>
+                    <p class="text-sm text-slate-500">Clean, simple, and versatile designs</p>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                <!-- Flasher (Default) -->
+                <a href="/theme/flasher/" class="group relative bg-white rounded-2xl border-2 border-indigo-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="absolute top-3 left-3 px-2 py-1 bg-indigo-500 text-white text-xs font-medium rounded-full">Default</div>
+                    <div class="h-24 bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center">
+                        <i class="fas fa-bolt text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Flasher</h3>
+                        <p class="text-sm text-slate-500">Default clean design</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Minimal -->
+                <a href="/theme/minimal/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-slate-400 to-slate-500 flex items-center justify-center">
+                        <i class="fas fa-minus text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Minimal</h3>
+                        <p class="text-sm text-slate-500">Ultra-clean and simple</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+
+                <!-- Neon -->
+                <a href="/theme/neon/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+                    <div class="h-24 bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">
+                        <i class="fas fa-lightbulb text-4xl text-white/80"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-semibold text-slate-800 mb-1">Neon</h3>
+                        <p class="text-sm text-slate-500">Bright attention-grabbing</p>
+                    </div>
+                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i class="fas fa-arrow-right text-white text-sm"></i>
+                    </div>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Try All Themes Section -->
+    <section class="bg-white rounded-2xl border border-slate-200 p-8 mb-12">
+        <div class="text-center mb-8">
+            <h2 class="text-2xl font-bold text-slate-800 mb-2">Try All Themes</h2>
+            <p class="text-slate-600">Click any button to see the theme in action</p>
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-2" id="theme-demo-buttons">
+            <button onclick="demoTheme('flasher')" class="px-4 py-2 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 rounded-lg text-sm font-medium transition-colors">Flasher</button>
+            <button onclick="demoTheme('material')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Material</button>
+            <button onclick="demoTheme('ios')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">iOS</button>
+            <button onclick="demoTheme('slack')" class="px-4 py-2 bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-lg text-sm font-medium transition-colors">Slack</button>
+            <button onclick="demoTheme('amazon')" class="px-4 py-2 bg-orange-100 hover:bg-orange-200 text-orange-700 rounded-lg text-sm font-medium transition-colors">Amazon</button>
+            <button onclick="demoTheme('facebook')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Facebook</button>
+            <button onclick="demoTheme('google')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm font-medium transition-colors">Google</button>
+            <button onclick="demoTheme('minimal')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">Minimal</button>
+            <button onclick="demoTheme('neon')" class="px-4 py-2 bg-pink-100 hover:bg-pink-200 text-pink-700 rounded-lg text-sm font-medium transition-colors">Neon</button>
+            <button onclick="demoTheme('ruby')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm font-medium transition-colors">Ruby</button>
+            <button onclick="demoTheme('sapphire')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Sapphire</button>
+            <button onclick="demoTheme('emerald')" class="px-4 py-2 bg-emerald-100 hover:bg-emerald-200 text-emerald-700 rounded-lg text-sm font-medium transition-colors">Emerald</button>
+            <button onclick="demoTheme('jade')" class="px-4 py-2 bg-teal-100 hover:bg-teal-200 text-teal-700 rounded-lg text-sm font-medium transition-colors">Jade</button>
+            <button onclick="demoTheme('amber')" class="px-4 py-2 bg-amber-100 hover:bg-amber-200 text-amber-700 rounded-lg text-sm font-medium transition-colors">Amber</button>
+            <button onclick="demoTheme('onyx')" class="px-4 py-2 bg-slate-700 hover:bg-slate-800 text-white rounded-lg text-sm font-medium transition-colors">Onyx</button>
+            <button onclick="demoTheme('crystal')" class="px-4 py-2 bg-cyan-100 hover:bg-cyan-200 text-cyan-700 rounded-lg text-sm font-medium transition-colors">Crystal</button>
+            <button onclick="demoTheme('aurora')" class="px-4 py-2 bg-gradient-to-r from-green-100 to-purple-100 hover:from-green-200 hover:to-purple-200 text-purple-700 rounded-lg text-sm font-medium transition-colors">Aurora</button>
+        </div>
+    </section>
+
+    <!-- Usage Section -->
+    <section class="bg-slate-50 rounded-2xl p-8 mb-12">
+        <div class="max-w-3xl mx-auto">
+            <h2 class="text-2xl font-bold text-slate-800 mb-6 text-center">How to Use Themes</h2>
+
+            <div class="space-y-6">
+                <div class="bg-white rounded-xl p-6 shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
+                            <span class="text-indigo-600 font-bold">1</span>
+                        </div>
+                        <h3 class="font-semibold text-slate-800">Set as Default Theme</h3>
+                    </div>
+                    <pre class="bg-slate-800 text-slate-200 p-4 rounded-lg text-sm overflow-x-auto"><code>// config/flasher.php (Laravel)
+return [
+    'default' => 'theme.material',
+];</code></pre>
+                </div>
+
+                <div class="bg-white rounded-xl p-6 shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
+                            <span class="text-indigo-600 font-bold">2</span>
+                        </div>
+                        <h3 class="font-semibold text-slate-800">Use Per-Notification</h3>
+                    </div>
+                    <pre class="bg-slate-800 text-slate-200 p-4 rounded-lg text-sm overflow-x-auto"><code>// PHP
+flash()->use('theme.material')->success('Operation completed!');
+
+// JavaScript
+flasher.use('theme.material').success('Operation completed!');</code></pre>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl p-8 md:p-12 text-center text-white">
+        <h2 class="text-2xl md:text-3xl font-bold mb-4">Can't decide?</h2>
+        <p class="text-indigo-100 mb-8 max-w-2xl mx-auto">
+            Try all themes in our interactive playground and see which one fits your project best.
+        </p>
+        <a href="/playground/" class="inline-flex items-center px-8 py-4 bg-white text-indigo-600 font-semibold rounded-xl hover:bg-indigo-50 transition-colors shadow-lg">
+            <i class="fas fa-flask mr-2"></i>
+            Open Playground
+        </a>
+    </section>
+</div>
+
+<script>
+    function demoTheme(themeName) {
+        if (typeof flasher !== 'undefined') {
+            const types = ['success', 'info', 'warning', 'error'];
+            const messages = {
+                success: 'Operation completed successfully!',
+                info: 'Here is some useful information.',
+                warning: 'Please review before continuing.',
+                error: 'Something went wrong!'
+            };
+
+            const randomType = types[Math.floor(Math.random() * types.length)];
+
+            flasher.use(`theme.${themeName}`).flash({
+                type: randomType,
+                message: messages[randomType],
+                title: themeName.charAt(0).toUpperCase() + themeName.slice(1) + ' Theme'
+            });
+        }
+    }
+
+    // Smooth scroll
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        });
+    });
+</script>