php-flasher/demo/symfony/templates/home/index.html.twig

{% extends 'base.html.twig' %}

{% block title %}PHPFlasher Features{% endblock %}

{% block page_title %}PHPFlasher Features{% endblock %}
{% block page_subtitle %}Explore the powerful features of PHPFlasher{% endblock %}

{% block content %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
        <div class="bg-indigo-600 h-2"></div>
        <div class="p-6">
            <div class="flex items-center space-x-3 mb-3">
                <div class="bg-indigo-100 p-2 rounded-md">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-800">Notification Types</h3>
            </div>
            <p class="text-gray-600">Display success, error, warning, and info notifications to communicate different messages to your users.</p>
            <div class="mt-4">
                <a href="{{ path('app_types') }}" class="text-indigo-600 hover:text-indigo-800 font-medium">See Notification Types →</a>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
        <div class="bg-emerald-600 h-2"></div>
        <div class="p-6">
            <div class="flex items-center space-x-3 mb-3">
                <div class="bg-emerald-100 p-2 rounded-md">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4" />
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-800">Notification Positions</h3>
            </div>
            <p class="text-gray-600">Place notifications in different positions around the screen to best suit your UI design.</p>
            <div class="mt-4">
                <a href="{{ path('app_positions') }}" class="text-emerald-600 hover:text-emerald-800 font-medium">Explore Positions →</a>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
        <div class="bg-amber-500 h-2"></div>
        <div class="p-6">
            <div class="flex items-center space-x-3 mb-3">
                <div class="bg-amber-100 p-2 rounded-md">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-800">Configuration Options</h3>
            </div>
            <p class="text-gray-600">Customize timeouts, animations, progressbars, and more with PHPFlasher's flexible configuration.</p>
            <div class="mt-4">
                <a href="{{ path('app_options') }}" class="text-amber-600 hover:text-amber-800 font-medium">View Options →</a>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="p-6">
            <h3 class="text-xl font-bold mb-4 text-gray-800">Plugins & Extensions</h3>
            <p class="text-gray-600 mb-4">PHPFlasher can be extended with plugins to add more functionality.</p>
            <div class="flex justify-end">
                <a href="{{ path('app_plugins') }}" class="btn btn-primary">Explore Plugins</a>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="p-6">
            <h3 class="text-xl font-bold mb-4 text-gray-800">Notification Presets</h3>
            <p class="text-gray-600 mb-4">Create reusable notification configurations for consistent messaging.</p>
            <div class="flex justify-end">
                <a href="{{ path('app_presets') }}" class="btn btn-primary">View Presets</a>
            </div>
        </div>
    </div>
</div>

<div class="bg-indigo-50 rounded-lg p-8 mb-12">
    <div class="text-center">
        <h2 class="text-2xl font-bold text-indigo-800 mb-4">Try Out the Interactive Playground</h2>
        <p class="text-indigo-600 mb-6 max-w-2xl mx-auto">Want to experiment with different notification settings? Use our interactive playground to test PHPFlasher's features in real-time.</p>
        <div class="flex justify-center">
            <a href="{{ path('app_playground') }}" class="btn btn-primary">Go to Playground</a>
        </div>
    </div>
</div>
{% endblock %}