{% extends "../frames/__blog.html" %}
{% load static %}

{%block activePageAcceuil%} active{%endblock activePageAcceuil%}
{%block content%} 

    


    <!-- Carousel Start -->
   <!-- Carousel Start -->
        <div class="header-carousel owl-carousel">
            <div class="header-carousel-item bg-success ">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row g-4 align-items-center">
                            <div class="col-lg-7 animated fadeInLeft">
                                <div class="text-sm-center text-md-start">
                                    <h4 class="text-white text-uppercase fw-bold mb-4">Bienvenue sur RISA</h4>
                                    <h1 class="display-4 text-white mb-4">Rassemblement des Intélligences pour la Souverainété de l'Afrique</h1>
                                    <p class="mb-5 fs-5">Nous croyons que l'avenir de l'Afrique se construit avec des voix unis. S'Unir ou Périr: notre devise notre combat. 
                                    </p>
                                  
                                </div>
                            </div>
                            <div class="col-lg-5 animated fadeInRight">
                                <div class="calrousel-img" style="object-fit: cover;">
                                    <img src="{% static 'plugins/LifeSure/img/slide1.png'%}" class="img-fluid w-100" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-carousel-item bg-success ">
                <div class="carousel-caption">
                    <div class="container">
                        <div class="row gy-4 gy-lg-0 gx-0 gx-lg-5 align-items-center">
                            <div class="col-lg-5 animated fadeInLeft">
                                <div class="calrousel-img">
                                    <img src="{% static 'plugins/LifeSure/img/slide2.png'%}" class="img-fluid w-100" alt="">
                                </div>
                            </div>
                            <div class="col-lg-7 animated fadeInRight">
                                <div class="text-sm-center text-md-end">
                                    <h4 class="text-white text-uppercase fw-bold mb-4">Bienvenue sur RISA</h4>
                                    <h2 class="display-4 text-white mb-4">Rassemblement des Intélligences pour la Souverainété de l'Afrique</h2>
                                    <p class="mb-5 fs-5">Unissons nos forces pour bâtir une Afique forte et autonome. Ensemble transformons nos idées en actions. 
                                    </p>
                                 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Carousel End -->
    <!-- Carousel End -->

      <!-- About Start -->
      <div class="container-fluid bg-light about pb-5 py-5">
        <div class="container pb-5">
            <div class="row g-5">
                <div class="col-xl-6 wow fadeInLeft" data-wow-delay="0.2s">
                    <div class="about-item-content bg-white rounded p-5 h-100 ">
                        <h4 class="text-success ">A propos de RISA</h4>
                        <h1 class="display-4 mb-4">Une Afrique Souveraine et Unie</h1>
                        <p class="">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt debitis sint tempora. Corporis consequatur illo blanditiis voluptates aperiam quos aliquam totam aliquid rem explicabo,
                         Lorre. Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium recusandae eligendi modi hic Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium recusandae eligendi modi hic
                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium recusandae eligendi modi hic
                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium recusandae eligendi modi hic
                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium recusandae eligendi modi hic
                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium recusandae eligendi modi hic
                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium recusandae eligendi modi hic
                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae praesentium recusandae eligendi modi hic</p>
                       
                        <!--p class="text-dark"><i class="fa fa-check text-success  me-3"></i>We can save your money.</!--p>
                        <p class="text-dark"><i class="fa fa-check text-success  me-3"></i>Production or trading of good</p>
                        <p-- class="text-dark mb-4"><i class="fa fa-check text-success  me-3"></i>Our life insurance is flexible</p-->
                        <a-- class="btn btn-success mt-4 rounded-pill py-3 px-5" href="#">Plus Information</a-->
                    </div>
                </div>
                <div class="col-xl-6 wow fadeInRight" data-wow-delay="0.2s">
                    <div class="bg-white rounded p-5 h-100">
                        <div class="row g-4 justify-content-center">
                            <div class="col-12">
                                <div class="rounded bg-light ">
                                    <img src="{% static 'images/logo-risa.jpg'%}" class="img-fluid rounded w-100"  alt="">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="counter-item bg-light rounded p-3 h-100">
                                    <div class="counter-counting">
                                        <span class="text-success  fs-2 fw-bold" data-toggle="counter-up">10000</span>
                                        <span class="h1 fw-bold text-success ">+</span>
                                    </div>
                                    <h4 class="mb-0 text-dark">Membres de RISA</h4>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="counter-item bg-light rounded p-3 h-100">
                                    <div class="counter-counting">
                                        <span class="text-success  fs-2 fw-bold" data-toggle="counter-up">25</span>
                                        <span class="h1 fw-bold text-success ">+</span>
                                    </div>
                                    <h4 class="mb-0 text-dark">Pays de la Diaspora</h4>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="counter-item bg-light rounded p-3 h-100 text-center">
                                    <div class="counter-counting ">
                                        <span class="text-success  fs-2 fw-bold" data-toggle="counter-up">2000</span>
                                        <span class="h1 fw-bold text-success ">+</span>
                                    </div>
                                    <h4 class="mb-0 text-dark">Nombre de Visiteurs</h4>
                                </div>
                            </div>
                          
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- About End -->

    <!-- Feature Start -->
    <div class="container-fluid feature bg-light py-2">
        <div class="container py-2">
            <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
                <h4 class="text-success ">Nos objectifs</h4>
                <h1 class="display-4 mb-4">Pour une Afrique Meilleure</h1>
                <!--p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur adipisci facilis cupiditate recusandae aperiam temporibus corporis itaque quis facere, numquam, ad culpa deserunt sint dolorem autem obcaecati, ipsam mollitia hic.
                </p-->
            </div>
            <div class="row g-4">
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="feature-item p-4 pt-0">
                        <div class="feature-icon p-4 mb-4">
                            <i class="fa fa-bullseye fa-3x"></i>
                        </div>
                        <h4 class="mb-4">Objectif 1</h4>
                        <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea hic laborum odit pariatur...
                        </p>
                        <!--a-- class="btn btn-success  rounded-pill py-2 px-4" href="#">Learn More</!--a-->
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="feature-item p-4 pt-0">
                        <div class="feature-icon p-4 mb-4">
                            <i class="fa fa-bullseye fa-3x"></i>
                        </div>
                        <h4 class="mb-4">Objectif 2</h4>
                        <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea hic laborum odit pariatur...
                        </p>
                        <!--a class="btn btn-success  rounded-pill py-2 px-4" href="#">Learn More</!--a-->
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="feature-item p-4 pt-0">
                        <div class="feature-icon p-4 mb-4">
                            <i class="fa fa-bullseye fa-3x"></i>
                        </div>
                        <h4 class="mb-4">Objectif 3</h4>
                        <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea hic laborum odit pariatur...
                        </p>
                        <!--a class="btn btn-success  rounded-pill py-2 px-4" href="#">Learn More</!--a-->
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-xl-3 wow fadeInUp" data-wow-delay="0.8s">
                    <div class="feature-item p-4 pt-0">
                        <div class="feature-icon p-4 mb-4">
                            <i class="fas fa-bullseye fa-3x"></i>
                        </div>
                        <h4 class="mb-4">Objectif 4</h4>
                        <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea hic laborum odit pariatur...
                        </p>
                        <!--a class="btn btn-success  rounded-pill py-2 px-4" href="#">Learn More</!--a-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Feature End -->

  
   

    <!-- Blog Start -->
    <div class="container-fluid blog py-5">
        <div class="container py-5">
            <div class="text-center mx-auto pb-5 wow fadeInUp" data-wow-delay="0.2s" style="max-width: 800px;">
                <h4 class="text-success ">Quelques Actualités</h4>
                <h1 class="display-4 mb-4">Récentes et Mises à jour</h1>
                <!--p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur adipisci facilis cupiditate recusandae aperiam temporibus corporis itaque quis facere, numquam, ad culpa deserunt sint dolorem autem obcaecati, ipsam mollitia hic.
                </!--p-->
            </div>
            <div class="row g-4 justify-content-center">
                <div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="blog-item">
                        <div class="blog-img">
                            <img src="{% static 'plugins/LifeSure/img/actua.jpeg'%}" class="img-fluid rounded-top w-100" alt="">
                            
                        </div>
                        <div class="blog-content p-4">
                            <div class="blog-comment d-flex justify-content-between mb-3">
                                <div class="small"><span class="fa fa-user text-success "></span> Admin</div>
                                <div class="small"><span class="fa fa-calendar text-success "></span> 30 Dec 2025</div>
                                <!--div class="small"><span class="fa fa-comment-alt text-success "></span> 6 Comments</!--div-->
                            </div>
                            <span class="h4 d-inline-block mb-3">Titre de l'actualité</span>
                            <p class="mb-3 text-truncate" >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius libero soluta
                                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius libero soluta impedit eligendi? Quibusdam, laudantium.
                                 impedit eligendi? Quibusdam, laudantium. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius libero soluta impedit eligendi? Quibusdam, laudantium.</p>
                            <a href="{%url 'actualite'%}" class="btn p-0">Lire Plus  <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="blog-item">
                        <div class="blog-img">
                            <img src="{% static 'plugins/LifeSure/img/actua.jpeg'%}" class="img-fluid rounded-top w-100" alt="">
                           
                        </div>
                        <div class="blog-content p-4">
                            <div class="blog-comment d-flex justify-content-between mb-3">
                                <div class="small"><span class="fa fa-user text-success "></span> Admin</div>
                                <div class="small"><span class="fa fa-calendar text-success "></span> 30 Dec 2025</div>
                                <!--div class="small"><span class="fa fa-comment-alt text-success "></span> 6 Comments</!--div-->
                            </div>
                            <span class="h4 d-inline-block mb-3">Titre de l'actualité</span>
                            <p class="mb-3 text-truncate" >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius libero soluta impedit eligendi? Quibusdam, laudantium.
                                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius libero soluta impedit eligendi? Quibusdam, laudantium.
                            </p>
                            <a href="{%url 'actualite'%}" class="btn p-0">Lire Plus  <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-4 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="blog-item">
                        <div class="blog-img">
                            <img src="{% static 'plugins/LifeSure/img/actua.jpeg'%}" class="img-fluid rounded-top w-100" alt="">
                           
                        </div>
                        <div class="blog-content p-4">
                            <div class="blog-comment d-flex justify-content-between mb-3">
                                <div class="small"><span class="fa fa-user text-success "></span> Admin</div>
                                <div class="small"><span class="fa fa-calendar text-success "></span> 30 Dec 2025</div>
                                <!--div class="small"><span class="fa fa-comment-alt text-success "></span> 6 Comments</!--div-->
                            </div>
                            <a href="#" class="h4 d-inline-block mb-3">Titre de l'actualité</a>
                            <p class="mb-3 text-truncate" >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius libero soluta impedit eligendi? Quibusdam, laudantium.</p>
                            <a href="{%url 'actualite'%}" class="btn p-0">Lire Plus  <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                
               
            </div>
        </div>
    </div>
    <!-- Blog End -->

 

  


 


  

{%endblock content%}
{% block scripts %}
{% endblock scripts %}