mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
docs: remove hero sections from playground and themes pages
This commit is contained in:
Younes ENNAJI
@@ -4,59 +4,9 @@ title: Interactive Playground
|
|||||||
description: Try PHPFlasher notifications live in your browser. Experiment with different types, themes, positions, and options - no installation required.
|
description: Try PHPFlasher notifications live in your browser. Experiment with different types, themes, positions, and options - no installation required.
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-8">
|
<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-4">
|
||||||
<!-- Hero Section -->
|
|
||||||
<section class="relative overflow-hidden bg-gradient-to-br from-indigo-600 via-purple-600 to-indigo-800 rounded-3xl mb-12 shadow-2xl">
|
|
||||||
<!-- Animated background elements -->
|
|
||||||
<div class="absolute inset-0 overflow-hidden">
|
|
||||||
<div class="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
|
|
||||||
<div class="absolute bottom-0 right-0 w-96 h-96 bg-purple-400/20 rounded-full blur-3xl translate-x-1/3 translate-y-1/3"></div>
|
|
||||||
<div class="absolute top-1/2 left-1/2 w-64 h-64 bg-indigo-400/10 rounded-full blur-2xl -translate-x-1/2 -translate-y-1/2 animate-pulse"></div>
|
|
||||||
|
|
||||||
<!-- Floating notification icons -->
|
|
||||||
<div class="absolute top-[20%] left-[10%] opacity-20 animate-bounce" style="animation-delay: 0s; animation-duration: 3s;">
|
|
||||||
<i class="fas fa-check-circle text-4xl text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="absolute top-[30%] right-[15%] opacity-20 animate-bounce" style="animation-delay: 0.5s; animation-duration: 2.5s;">
|
|
||||||
<i class="fas fa-bell text-3xl text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="absolute bottom-[25%] left-[20%] opacity-20 animate-bounce" style="animation-delay: 1s; animation-duration: 3.5s;">
|
|
||||||
<i class="fas fa-info-circle text-3xl text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div class="absolute bottom-[30%] right-[10%] opacity-20 animate-bounce" style="animation-delay: 1.5s; animation-duration: 2.8s;">
|
|
||||||
<i class="fas fa-exclamation-triangle text-3xl text-white"></i>
|
|
||||||
</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/20 backdrop-blur-sm rounded-full text-white/90 text-sm font-medium mb-6">
|
|
||||||
<i class="fas fa-flask mr-2"></i>
|
|
||||||
Interactive Playground
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight">
|
|
||||||
Try PHPFlasher <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-orange-300">Live</span>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="text-xl text-indigo-100 max-w-2xl mx-auto mb-8 leading-relaxed">
|
|
||||||
Experiment with notifications in real-time. Choose types, themes, positions, and see the generated code instantly.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap justify-center gap-4">
|
|
||||||
<a href="#studio" 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-play mr-2"></i>
|
|
||||||
Start Experimenting
|
|
||||||
</a>
|
|
||||||
<a href="/themes/" 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-palette mr-2"></i>
|
|
||||||
Browse Themes
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Quick Stats -->
|
<!-- Quick Stats -->
|
||||||
<section class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
|
<section class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||||
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 text-center hover:shadow-md transition-shadow">
|
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 text-center hover:shadow-md transition-shadow">
|
||||||
<div class="text-3xl font-bold text-indigo-600 mb-1">4</div>
|
<div class="text-3xl font-bold text-indigo-600 mb-1">4</div>
|
||||||
<div class="text-slate-600 text-sm">Notification Types</div>
|
<div class="text-slate-600 text-sm">Notification Types</div>
|
||||||
|
|||||||
@@ -4,47 +4,9 @@ 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.
|
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">
|
<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-4">
|
||||||
<!-- 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="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%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 -->
|
<!-- Theme Categories -->
|
||||||
<section id="themes" class="scroll-mt-8">
|
<section id="themes">
|
||||||
<!-- Brand-Inspired Themes -->
|
<!-- Brand-Inspired Themes -->
|
||||||
<div class="mb-12">
|
<div class="mb-12">
|
||||||
<div class="flex items-center mb-6">
|
<div class="flex items-center mb-6">
|
||||||
|
|||||||
Reference in New Issue
Block a user