---
layout: default
title: PHPFlasher Blog
description: Tips, tutorials, and updates about PHPFlasher notification system
---

<div class="relative mb-16">
    <!-- Hero Section with Gradient Background -->
    <div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-700 rounded-2xl"></div>
    <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:20px_20px]"></div>

    <div class="relative px-6 py-16 md:py-24 text-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight">PHPFlasher Blog</h1>
        <p class="text-lg md:text-xl text-indigo-100 max-w-3xl mx-auto mb-10">
            Discover tutorials, best practices, and creative solutions for implementing elegant notification systems in your PHP projects.
        </p>

        <div class="flex flex-wrap justify-center gap-4 mb-8">
            <a href="#latest-articles" class="px-6 py-3 bg-white text-indigo-700 font-medium rounded-full shadow-lg hover:shadow-xl transition-all flex items-center">
                <i class="fa-solid fa-arrow-down mr-2"></i> Latest Articles
            </a>
            <a href="/blog/categories/" class="px-6 py-3 bg-indigo-500 text-white font-medium rounded-full shadow-lg hover:shadow-xl transition-all hover:bg-indigo-600 flex items-center">
                <i class="fa-solid fa-tags mr-2"></i> Browse Categories
            </a>
        </div>

        <!-- Stats -->
        <div class="flex flex-wrap justify-center gap-x-12 gap-y-6">
            <div class="text-center">
                <div class="text-3xl font-bold text-white mb-1">{{ site.posts.size }}</div>
                <div class="text-indigo-200 text-sm uppercase tracking-wider">Articles</div>
            </div>

            {% assign all_tags = "" | split: "" %}
            {% for post in site.posts %}
              {% for tag in post.tags %}
                {% assign all_tags = all_tags | push: tag %}
              {% endfor %}
            {% endfor %}
            {% assign unique_tags = all_tags | uniq %}

            <div class="text-center">
                <div class="text-3xl font-bold text-white mb-1">{{ unique_tags.size }}</div>
                <div class="text-indigo-200 text-sm uppercase tracking-wider">Categories</div>
            </div>

            <div class="text-center">
                <div class="text-3xl font-bold text-white mb-1">v2.1.6</div>
                <div class="text-indigo-200 text-sm uppercase tracking-wider">Current Version</div>
            </div>
        </div>
    </div>

    <!-- Wave Decoration -->
    <div class="absolute -bottom-1 left-0 right-0 h-8 text-white overflow-hidden">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" class="h-full w-full">
            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="currentColor"></path>
            <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" fill="currentColor"></path>
            <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="currentColor"></path>
        </svg>
    </div>
</div>

<!-- Featured Articles -->
{% assign featured_posts = site.posts | where: "featured", true %}
{% if featured_posts.size > 0 %}
<div class="mb-16">
    <div class="flex items-center justify-between mb-8">
        <h2 class="text-2xl font-bold text-slate-900 flex items-center">
            <i class="fa-duotone fa-stars text-amber-500 mr-3"></i> Featured Articles
        </h2>
        <a href="/blog/featured/" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 flex items-center">
            View All <i class="fa-solid fa-arrow-right ml-2"></i>
        </a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {% for post in featured_posts limit:3 %}
        <div class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-slate-200">
            <a href="{{ post.url }}" class="block aspect-w-16 aspect-h-9 bg-slate-100 overflow-hidden">
                {% if post.image %}
                <img src="{{ post.image }}" alt="{{ post.title }}" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-300">
                {% else %}
                <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-indigo-100 to-purple-100">
                    <i class="fa-duotone fa-stars text-indigo-300 text-4xl"></i>
                </div>
                {% endif %}
            </a>
            <div class="p-6">
                <div class="flex flex-wrap gap-2 mb-3">
                    {% for tag in post.tags limit:3 %}
                    <span class="bg-indigo-50 text-indigo-700 text-xs px-2.5 py-0.5 rounded-full">{{ tag }}</span>
                    {% endfor %}
                </div>
                <a href="{{ post.url }}" class="block">
                    <h3 class="text-xl font-semibold text-slate-900 mb-3 group-hover:text-indigo-600 transition-colors">{{ post.title }}</h3>
                    <p class="text-slate-600 mb-4 line-clamp-2">{{ post.excerpt | strip_html | truncatewords: 25 }}</p>
                </a>
                <div class="flex justify-between items-center">
                    <time class="text-sm text-slate-500" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time>
                    <div class="flex items-center">
                        {% if post.author %}
                        <span class="text-sm text-slate-500 mr-4">By {{ post.author }}</span>
                        {% endif %}
                        <a href="{{ post.url }}" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">
                            Read <i class="fa-solid fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Latest Articles -->
<div id="latest-articles" class="mb-16 scroll-mt-16">
    <div class="flex items-center justify-between mb-8">
        <h2 class="text-2xl font-bold text-slate-900 flex items-center">
            <i class="fa-duotone fa-newspaper text-indigo-500 mr-3"></i> Latest Articles
        </h2>
        <div class="flex space-x-2">
            {% if site.posts.size > 6 %}
            <a href="/blog/archives/" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 flex items-center">
                View Archives <i class="fa-solid fa-arrow-right ml-2"></i>
            </a>
            {% endif %}
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        {% for post in site.posts limit:6 %}
        <div class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-slate-200 flex flex-col h-full">
            <a href="{{ post.url }}" class="block bg-slate-100 overflow-hidden h-48">
                {% if post.image %}
                <img src="{{ post.image }}" alt="{{ post.title }}" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-300">
                {% else %}
                <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-indigo-50 to-slate-100">
                    <i class="fa-duotone fa-newspaper text-indigo-200 text-4xl"></i>
                </div>
                {% endif %}
            </a>
            <div class="p-6 flex flex-col flex-grow">
                <div class="flex flex-wrap gap-2 mb-3">
                    {% for tag in post.tags limit:3 %}
                    <a href="/blog/tag/{{ tag | slugify }}/" class="bg-indigo-50 text-indigo-700 text-xs px-2.5 py-0.5 rounded-full hover:bg-indigo-100 transition-colors">{{ tag }}</a>
                    {% endfor %}
                </div>
                <a href="{{ post.url }}" class="block mb-4 flex-grow">
                    <h3 class="text-xl font-semibold text-slate-900 mb-3 group-hover:text-indigo-600 transition-colors">{{ post.title }}</h3>
                    <p class="text-slate-600 line-clamp-3">{{ post.excerpt | strip_html | truncatewords: 25 }}</p>
                </a>
                <div class="flex justify-between items-center pt-4 border-t border-slate-100">
                    <time class="text-sm text-slate-500 flex items-center" datetime="{{ post.date | date_to_xmlschema }}">
                        <i class="fa-regular fa-calendar mr-1.5 text-slate-400"></i>
                        {{ post.date | date: "%B %d, %Y" }}
                    </time>
                    <a href="{{ post.url }}" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">
                        Read Article <i class="fa-solid fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% if site.posts.size == 0 %}
    <div class="bg-indigo-50 text-indigo-700 p-10 rounded-xl text-center">
        <i class="fa-duotone fa-pen-to-square text-6xl mb-6 text-indigo-400"></i>
        <h3 class="text-2xl font-semibold mb-3">No posts yet</h3>
        <p class="text-indigo-600 mb-6">Our team is currently working on amazing content for you!</p>
        <a href="/" class="inline-flex items-center px-5 py-2.5 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors">
            <i class="fa-solid fa-home mr-2"></i> Back to Home
        </a>
    </div>
    {% endif %}
</div>

<!-- Categories Overview -->
{% if unique_tags.size > 0 %}
<div class="mb-16">
    <div class="flex items-center justify-between mb-8">
        <h2 class="text-2xl font-bold text-slate-900 flex items-center">
            <i class="fa-duotone fa-tags text-green-500 mr-3"></i> Browse by Category
        </h2>
        <a href="/blog/categories/" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 flex items-center">
            View All Categories <i class="fa-solid fa-arrow-right ml-2"></i>
        </a>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {% for tag in unique_tags limit:8 %}
        {% assign tag_posts = site.posts | where_exp: "post", "post.tags contains tag" %}
        <a href="/blog/tag/{{ tag | slugify }}/" class="bg-white border border-slate-200 rounded-xl p-4 hover:shadow-md transition-all group flex items-center">
            <div class="w-12 h-12 rounded-lg bg-slate-50 flex items-center justify-center mr-4 group-hover:bg-indigo-50 transition-colors">
                <i class="fa-duotone fa-tag text-indigo-400 text-xl group-hover:text-indigo-500 transition-colors"></i>
            </div>
            <div>
                <h3 class="font-medium text-slate-800 mb-1 group-hover:text-indigo-600 transition-colors">{{ tag | capitalize }}</h3>
                <p class="text-xs text-slate-500">{{ tag_posts.size }} article{% if tag_posts.size != 1 %}s{% endif %}</p>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Newsletter Section -->
<div class="mb-16 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-2xl p-8 lg:p-12 relative overflow-hidden">
    <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-100 rounded-full -mr-32 -mt-32 opacity-50"></div>
    <div class="absolute bottom-0 left-0 w-64 h-64 bg-purple-100 rounded-full -ml-32 -mb-32 opacity-50"></div>

    <div class="relative">
        <div class="flex flex-col lg:flex-row items-center">
            <div class="lg:w-2/3 mb-8 lg:mb-0 lg:pr-12">
                <h2 class="text-2xl lg:text-3xl font-bold text-slate-900 mb-4">
                    <i class="fa-duotone fa-envelope-open-text text-indigo-500 mr-3"></i> Stay Updated
                </h2>
                <p class="text-slate-600 mb-6">Subscribe to our newsletter to receive the latest updates, tutorials, and tips about PHPFlasher directly in your inbox.</p>

                <form action="#" method="post" class="flex flex-col sm:flex-row gap-4">
                    <input type="email" placeholder="Enter your email" class="flex-grow px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
                    <button type="submit" class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors whitespace-nowrap">
                        <i class="fa-solid fa-paper-plane mr-2"></i> Subscribe
                    </button>
                </form>

                <p class="text-sm text-slate-500 mt-4">
                    <i class="fa-regular fa-shield-check text-green-500 mr-1"></i>
                    We respect your privacy. Unsubscribe at any time.
                </p>
            </div>

            <div class="lg:w-1/3 flex justify-center">
                <div class="w-40 h-40 lg:w-56 lg:h-56 rounded-full bg-white shadow-lg flex items-center justify-center p-4 border-4 border-indigo-50">
                    <i class="fa-duotone fa-bell-on text-8xl text-indigo-400"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Need Help Section -->
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-8 mb-16">
    <div class="flex flex-col md:flex-row items-center">
        <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-6 md:mb-0 md:mr-8">
            <i class="fa-duotone fa-lightbulb-on text-3xl text-indigo-500"></i>
        </div>
        <div class="flex-grow text-center md:text-left">
            <h3 class="text-xl font-semibold text-slate-900 mb-2">New to PHPFlasher?</h3>
            <p class="text-slate-600 mb-4">Explore our comprehensive documentation to get started with PHPFlasher in your projects.</p>
            <div class="flex flex-wrap justify-center md:justify-start gap-3">
                <a href="/symfony/" class="px-4 py-2 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors flex items-center">
                    <i class="fa-solid fa-book mr-2"></i> Documentation
                </a>
                <a href="https://github.com/php-flasher/php-flasher" class="px-4 py-2 bg-gray-800 text-white font-medium rounded-lg hover:bg-gray-900 transition-colors flex items-center">
                    <i class="fa-brands fa-github mr-2"></i> GitHub
                </a>
                <a href="https://twitter.com/yoeunes" class="px-4 py-2 bg-sky-500 text-white font-medium rounded-lg hover:bg-sky-600 transition-colors flex items-center">
                    <i class="fa-brands fa-twitter mr-2"></i> Twitter
                </a>
            </div>
        </div>
    </div>
</div>
