{% extends 'domain/frontend/layouts/base.html.twig' %}

{% block title %}Projets{% endblock %}
{% block main_title %}Projets{% endblock %}
{% block sub_title %}Projets{% endblock %}
{% block style %}{% endblock %}
{% block body %}
    <!-- Page Title Section -->
    <section class="page-hero">
        <h1>Galerie de Nos Stations</h1>
        <p>Découvrez nos stations-service modernes réparties en Côte d'Ivoire</p>
    </section>

    <!-- Gallery Section -->
    <section class="gallery">
        <div class="gallery-container row">
            <h2 class="section-title">Nos Stations-Service</h2>

            {% for project in projects %}
                <div class="col-md-4 mb-3">
                    <div class="card shadow h-100 transition border-0">
                        <img src="{{ asset(project.image) }}" alt="Gallery Image 1" class="card-img-top" style="height: 250px; object-fit: cover;">
                        <div class="card-body">
                            <h3 class="h5 text-center text-dark mb-0">{{ project.description }}</h3>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </section>
{% endblock %}