{% include 'partial/home/search.html.twig' %}

<!-- Hero Start -->
<div class="container-fluid pt-5 bg-dark-cyber hero-header mb-5">
    <div class="container pt-5">
        <div class="row g-5 pt-5">
            <div class="col-lg-6 align-self-center text-center text-lg-start mb-lg-5">
                <div class="btn btn-sm border rounded-pill text-white px-3 mb-3 animated slideInRight">CyberSécurité-Blog</div>
                <h1 class="display-4 text-white mb-4 animated slideInRight shine-text" >Protégez vos données, Anticipez les menaces</h1>
                <p class="text-white mb-4 animated slideInRight ">
                    Perfitcom partage les dernières actualités, conseils, et analyses pour aider les entreprises à renforcer leur cybersécurité.
                </p>
                <a href="{{ path('home.category.list') }}" class="btn bg-cyber-red text-white py-sm-3 px-sm-5 rounded-pill me-3 animated slideInRight">Lire nos articles</a>
                <a href="{{ path('home.contact.create')}}" class="btn btn-outline-light py-sm-3 px-sm-5 rounded-pill animated slideInRight">Nous contacter</a>
            </div>
            <div class="col-lg-6 align-self-center text-center text-lg-start mb-lg-5">
                        <div class="video ">
                        <button type="button" class="btn btn-play" data-bs-toggle="modal" 
                            data-src="https://www.youtube.com/embed/ArGYvw3T8dM" data-bs-target="#videoModal">
                            <span></span>
                        </button>
                    </div>
            </div>
        </div>
    </div>
</div>
<!-- Hero End -->

<!-- Modal Video -->
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content rounded-0">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Présentation de Perfitcom</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 16:9 aspect ratio -->
                <div class="ratio ratio-16x9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=ArGYvw3T8dM" id="video" allowfullscreen allowscriptaccess="always"
                        allow="autoplay"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Hero End -->



<!-- Service Start -->
<div class="container-fluid  pb-5">
    <div class="container py-3">
        <div class="row g-5 align-items-center">
            <div class="col-lg-5 wow fadeIn" data-wow-delay="0.1s">
                <div class="btn btn-sm border rounded-pill text-dark px-3 mb-3">Menaces</div>
                <h1 class="mb-4">Les menaces auxquelles font face les entreprises</h1>
                <p class="mb-4">Face à l’augmentation constante des attaques informatiques, il est essentiel pour les entreprises de comprendre les menaces majeures qui pèsent sur leurs systèmes. Voici les cybermenaces les plus redoutables en 2024 et les risques associés.</p>
                <a class="btn bg-cyber-red text-light rounded-pill px-4" href="">En savoir plus</a>
            </div>
            <div class="col-lg-7">
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="row g-4">
                            <div class="col-12 wow fadeIn" data-wow-delay="0.1s">
                                <div class="service-item d-flex flex-column justify-content-center text-center rounded">
                                    <h5 class="mb-3">Ransomware</h5>
                                    <p>Les ransomwares chiffrent les données critiques d’une entreprise et exigent une rançon pour les restituer. Ils représentent l’une des menaces les plus destructrices en 2024.</p>
                                    <a class="btn px-3 mt-auto mx-auto" href="">Lire plus</a>
                                </div>
                            </div>
                            <div class="col-12 wow fadeIn" data-wow-delay="0.5s">
                                <div class="service-item d-flex flex-column justify-content-center text-center rounded">
                                    <h5 class="mb-3">Phishing ciblé (Spear Phishing)</h5>
                                    <p>Ce type d’attaque trompe les employés par des emails personnalisés afin d’accéder aux données sensibles ou aux systèmes internes.</p>
                                    <a class="btn px-3 mt-auto mx-auto" href="">Lire plus</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 pt-md-4">
                        <div class="row g-4">
                            <div class="col-12 wow fadeIn" data-wow-delay="0.3s">
                                <div class="service-item d-flex flex-column justify-content-center text-center rounded">
                                    <h5 class="mb-3">Attaques sur la chaîne d'approvisionnement</h5>
                                    <p>Les cybercriminels ciblent les fournisseurs pour infiltrer indirectement une organisation, rendant la détection plus difficile.</p>
                                    <a class="btn px-3 mt-auto mx-auto" href="">Lire plus</a>
                                </div>
                            </div>
                            <div class="col-12 wow fadeIn" data-wow-delay="0.7s">
                                <div class="service-item d-flex flex-column justify-content-center text-center rounded">
                                    <h5 class="mb-3">Vulnérabilités zero-day</h5>
                                    <p>Ces failles non encore connues des éditeurs sont exploitées par les attaquants avant qu’un correctif ne soit disponible.</p>
                                    <a class="btn px-3 mt-auto mx-auto" href="">Lire plus</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Service End -->


<!-- Feature Start -->
<div class="container-fluid bg-dark-cyber-secondary feature pt-5">
    <div class="container pt-5">
        <div class="row g-5">
            <div class="col-lg-6 align-self-center mb-md-5 pb-md-5 wow fadeIn" data-wow-delay="0.3s">
                <div class="btn btn-sm border rounded-pill text-white px-3 mb-3">Sécurité Informatique</div>
                <h1 class="text-white mb-4">Renforcez vos défenses face aux cybermenaces</h1>
                <p class="text-light mb-4">
                    Alors que les attaques se multiplient, il est essentiel de mettre en place une stratégie de cybersécurité robuste. Cela inclut la protection des systèmes, la formation des équipes et l’adoption de bonnes pratiques.

                    La sécurité informatique vise à garantir la confidentialité, l’intégrité et la disponibilité des données. Elle repose sur des outils techniques, des politiques internes, et une vigilance humaine constante
                </p>
                <div class="d-flex align-items-center text-white mb-3">
                    <div class="btn-sm-square bg-white text-primary rounded-circle me-3">
                        <i class="fa fa-check"></i>
                    </div>
                    <span>Surveillance proactive des systèmes</span>
                </div>
                <div class="d-flex align-items-center text-white mb-3">
                    <div class="btn-sm-square bg-white text-primary rounded-circle me-3">
                        <i class="fa fa-check"></i>
                    </div>
                    <span>Sauvegardes régulières et sécurisées</span>
                </div>
                <div class="d-flex align-items-center text-white mb-3">
                    <div class="btn-sm-square bg-white text-primary rounded-circle me-3">
                        <i class="fa fa-check"></i>
                    </div>
                    <span>Mise en place de politiques de sécurité efficaces</span>
                </div>
                <div class="d-flex align-items-center text-white mb-3">
                    <div class="btn-sm-square bg-white text-primary rounded-circle me-3">
                        <i class="fa fa-check"></i>
                    </div>
                    <span>Politiques d’accès strictes</span>
                </div>
                <div class="row g-4 pt-3">
                    <div class="col-sm-6">
                        <div class="d-flex rounded p-3" style="background: rgba(256, 256, 256, 0.1);">
                            <i class="fa fa-check text-cyber-red fa-3x text-white"></i>
                            <div class="ms-3">
                                <div class="d-flex align-items-baseline">
                                    <h2 class="text-cyber-red mb-0 me-1" data-toggle="counter-up">92</h2>
                                    <span class="text-cyber-red fs-3">%</span>
                                </div>
                                <p class="text-white mb-0">Des intrusions évitables par une formation</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="d-flex rounded p-3" style="background: rgba(256, 256, 256, 0.1);">
                            <i class="fa fa-check text-cyber-red fa-3x text-white"></i>
                            <div class="ms-3">
                                <div class="d-flex align-items-baseline">
                                    <h2 class="text-cyber-red mb-0 me-1" data-toggle="counter-up">68</h2>
                                    <span class="text-cyber-red fs-3">%</span>
                                </div>
                                <p class="text-white mb-0">Des attaques bloquées par la détection proactive</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        <div class="col-lg-6 align-self-end text-center text-md-end wow fadeIn" data-wow-delay="0.5s">
                <div class="image-3d-bounce-wrapper">
                    <img class="image-3d-bounce" src={{asset("assets/img/410552027_0e553ff6-cc73-4002-a80c-8a64b0f055bb.png")}} alt="">
                </div>
            </div>
            


        </div>
    </div>
</div>
<!-- Feature End -->

<!-- Cybersecurity News Start -->
<div class="container-fluid bg-light pb-5">
    <div class="container py-5">
        <div class="mx-auto text-center wow fadeIn" data-wow-delay="0.1s" style="max-width: 500px;">
            <div class="btn btn-sm border rounded-pill text-danger px-3 mb-3">Actualités</div>
            <h1 class="mb-4">Les dernières actualités en cybersécurité</h1>
        </div>
        <div class="row g-4">
            {% for cyberNew in cyberNews %}
                <div class="col-lg-4 wow fadeIn" data-wow-delay="0.3s">
                    <div class="case-item position-relative overflow-hidden rounded mb-2">
                        <img class="img-fluid fixed-image" src="{{ vich_uploader_asset(cyberNew, 'imageFile') }}" alt="">
                        <a class="case-overlay text-decoration-none" href="{{ path('home.cyber_new.show', { slug: cyberNew.slug }) }}">
                            <small>{{ cyberNew.category.title | default('') }}</small>
                            <h5 class="lh-base text-white mb-3">{{ cyberNew.title }}</h5>
                            <span class="btn btn-square bg-cyber-red text-light"><i class="fa fa-arrow-right"></i></span>
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>

        <div class="text-center mt-4">
            <a href="{{ path('home.cyber_new.list') }}" class="btn bg-cyber-red text-white rounded-pill px-4">Voir toutes les actualités</a>
        </div>
    </div>
</div>
<!-- Cybersecurity News End -->

<!-- Blog Articles Start -->
<div class="container-fluid bg-light pb-5">
    <div class="container py-3">
        <div class="mx-auto text-center wow fadeIn" data-wow-delay="0.1s" style="max-width: 500px;">
            <div class="btn btn-sm border rounded-pill text-danger px-3 mb-3">Articles</div>
            <h1 class="mb-4">Les derniers articles du blog</h1>
        </div>
        <div class="row g-4">
            {% for blogArticle in blogArticles %}
                <div class="col-lg-4 wow fadeIn" data-swow-delay="0.3s">
                    <div class="case-item position-relative overflow-hidden rounded mb-2">
                        <img class="img-fluid fixed-image" src="{{ vich_uploader_asset(blogArticle, 'imageFile') }}" alt="">
                        <a class="case-overlay text-decoration-none" href="{{ path('home.blog_article.show', { slug: blogArticle.slug }) }}">
                            <small>{{ blogArticle.category.title | default('') }}</small>
                            <h5 class="lh-base text-white mb-3">{{ blogArticle.title }}</h5>
                            <span class="btn btn-square bg-cyber-red text-light"><i class="fa fa-arrow-right"></i></span>
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>

        <div class="text-center mt-4">
            <a href="{{ path('home.category.list') }}" class="btn bg-cyber-red text-white rounded-pill px-4">Voir tous les articles</a>
        </div>
    </div>
</div>
<!-- Blog Articles End -->










<!-- Back to Top -->
<a href="#" class="btn btn-lg text-light bg-cyber-red btn-lg-square back-to-top pt-2"><i class="bi bi-arrow-up"></i></a>