@extends('layouts.app')

@section('title', 'Automatisez, connectez, amplifiez votre business')
@section('meta_description', "E-commerce, SaaS, ERP et conseil IA. Grâce à l’IA, on livre plus vite et beaucoup moins cher, sans compromis sur la qualité.")

@section('content')
    @php
        $darkNav = true;
    @endphp

    <!-- Hero + animations -->
    <section class="position-relative d-flex align-items-center min-vh-100 py-5 bg-dark overflow-hidden">
        <span class="position-absolute top-0 start-0 d-dark-mode-block d-none w-100 h-100 bg-secondary opacity-75"></span>
        <div class="container position-relative mt-5 mb-lg-5 mb-md-4 mb-3 pt-3 pb-xl-3" data-bs-theme="dark">
            <div class="row gy-5">
                <!-- Texte principal -->
                <div class="col-xl-5 col-lg-6">
                    <div class="position-relative zindex-5 text-lg-start text-center">
                        <h1 class="display-2 mb-4 pb-lg-3 pb-md-2">Automatisez, connectez, amplifiez votre business</h1>
                        <p class="mb-4 pb-lg-3 pb-md-2 text-light">
                            On utilise l’IA au cœur de notre production pour livrer vos projets plus vite et à coûts maîtrisés. E-commerce, SaaS, ERP et conseil IA : concret, performance, simplicité.
                        </p>
                        <a href="{{ route('contact') }}" class="btn btn-lg btn-primary">
                            Démarrer mon projet
                        </a>
                    </div>
                </div>

                <!-- Visuel et boîtes animées -->
                <div class="col-lg-6 offset-xl-1">
                    <div class="position-relative ms-xl-0 ms-lg-4">
                        <!-- Image de fond avec animation -->
                        <div class="position-absolute top-50 start-50 translate-middle ratio ratio-1x1"
                            style="width: 125%; max-width: 49.75rem;">
                            <div class="p-md-0 p-5">
                                <img src="assets/img/landing/software-agency-3/hero-bg.png"
                                    alt="Solutions IA et Automatisation" class="hero-animation-spin p-md-0 p-5">
                            </div>
                        </div>

                        <!-- Cartes animées -->
                        <div class="position-relative row row-cols-sm-2 row-cols-1 gx-xl-4 gx-lg-3 gx-md-4 gx-3">
                            <div class="col">
                                <div class="d-sm-grid d-flex gap-xl-4 gap-lg-3 gap-md-4 gap-sm-3 gap-2">
                                    <div class="d-flex align-items-center justify-content-center bg-secondary rounded-3 text-white"
                                        style="min-height: 176px; backdrop-filter: blur(6px);">
                                        <div class="p-xl-4 p-sm-3 p-2 fs-xl fw-semibold text-center">
                                            <span class="hero-animation-fade">
                                                Accélérer mon e-commerce
                                            </span>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-center bg-secondary rounded-3 text-white"
                                        style="min-height: 176px; backdrop-filter: blur(6px);">
                                        <div class="p-xl-4 p-sm-3 p-2 fs-xl fw-semibold text-center">
                                            <span class="hero-animation-fade hero-animation-delay-2">
                                                Lancer un SaaS
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col mt-sm-5 mt-2 pt-sm-5">
                                <div class="d-sm-grid d-flex gap-xl-4 gap-lg-3 gap-md-4 gap-sm-3 gap-2">
                                    <div class="d-flex align-items-center justify-content-center bg-secondary rounded-3 text-white"
                                        style="min-height: 176px; backdrop-filter: blur(6px);">
                                        <div class="p-xl-4 p-sm-3 p-2 fs-xl fw-semibold text-center">
                                            <span class="hero-animation-fade hero-animation-delay-1">
                                                Structurer un ERP
                                            </span>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-center bg-secondary rounded-3 text-white"
                                        style="min-height: 176px; backdrop-filter: blur(6px);">
                                        <div class="p-xl-4 p-sm-3 p-2 fs-xl fw-semibold text-center">
                                            <span class="hero-animation-fade hero-animation-delay-3">
                                                Clarifier ma stratégie IA
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Fin des cartes animées -->
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- About -->
    <section class="container my-5 py-lg-5 py-md-4 py-3">
        <div class="row gy-4 py-xl-3">
            <div class="col-md-6">
                <img src="assets/img/home/ia.png" alt="Illustration Flowpi" class="rounded-3">
            </div>
            <div class="col-lg-5 col-md-6 offset-lg-1 d-flex">
                <div class="align-self-center ps-lg-0 ps-md-4">
                    <h2 class="h1 mb-lg-4 mb-3">Nous rendons l’IA vraiment utile au quotidien.
                    </h2>
                    <p class="mb-4 pb-lg-3 fs-lg">
                        Chez <strong> Flowpi </strong>, on part de vos outils, de vos habitudes de travail et de vos tâches
                        récurrentes pour identifier ce que l’IA peut réellement améliorer.
                    </p>
                    <p class="mb-4 pb-lg-3 fs-lg">
                        On explore avec vous les évolutions pertinentes, pour automatiser ce qui a du sens et améliorer
                        concrètement votre manière de travailler. </p>
                    <p class="mb-4 pb-lg-3 fs-lg">
                        L’IA ouvre de vraies opportunités pour votre métier. <br>
                        Nous sommes là pour les identifier et les mettre en place avec vous.

                        <!-- Logos de récompenses ou partenaires -->
                    <div class="d-flex align-items-center ms-sm-n4 ms-n3 mb-4 pb-lg-3">
                        <div class="ms-sm-4 ms-3">
                            <img src="{{asset('assets/img/home/mistral.png')}}" width="63" alt="Mistral"
                                class="d-dark-mode-none d-block">
                            <img src="{{asset('assets/img/home/mistral.png')}}" width="63" alt="Mistral"
                                class="d-dark-mode-block d-none">
                        </div>
                        <div class="ms-sm-4 ms-3">
                            <img src="{{asset('assets/img/home/ollama.png')}}" width="37" alt="Ollama"
                                class="d-dark-mode-none d-block">
                            <img src="{{asset('assets/img/home/ollama.png')}}" width="37" alt="Ollama"
                                class="d-dark-mode-block d-none">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- Solutions -->
    <section class="container mb-5 pb-lg-5 pb-md-4 pb-3">
        <h2 class="h1 mb-lg-5 mb-4 pb-lg-0 pb-md-2 text-center">Nos solutions, </br> conçues pour vous accompagner
            durablement.</h2>

        <!-- Swiper slider -->
        <div class="swiper mb-xl-3 swiper-initialized swiper-horizontal swiper-android swiper-backface-hidden"
            data-swiper-options="{
              &quot;spaceBetween&quot;: 24,
              &quot;breakpoints&quot;: {
                &quot;0&quot;: { &quot;slidesPerView&quot;: 1 },
                &quot;500&quot;: { &quot;slidesPerView&quot;: 2 },
                &quot;768&quot;: { &quot;slidesPerView&quot;: 3 },
                &quot;1200&quot;: { &quot;slidesPerView&quot;: 4 }
              },
              &quot;pagination&quot;: { &quot;el&quot;: &quot;.swiper-pagination&quot;, &quot;clickable&quot;: true }
            }">
            <div class="swiper-wrapper">

                <!-- Analyse & Conseil IA -->
                <div class="swiper-slide h-auto">
                    <div class="card h-100">
                        <div class="card-body my-md-5 my-4 py-xl-2 py-md-0 py-sm-2 text-center">
                            <img src="assets/img/landing/software-agency-3/icons/01.svg" alt="Analyse IA"
                                class="d-block mb-3 mx-auto">
                            <h3 class="h5 mb-3">Conseil IA pragmatique (audit gratuit)</h3>
                            <p class="mb-0">
                                Audit gratuit, cas d’usage à ROI concret et feuille de route claire. On propose des solutions utiles et on met en place des gains de temps mesurables.
                            </p>
                        </div>
                    </div>
                </div>



                <!-- Assistant IA & rédaction intelligente< -->
                <div class="swiper-slide h-auto">
                    <div class="card h-100">
                        <div class="card-body my-md-5 my-4 py-xl-2 py-md-0 py-sm-2 text-center">
                            <img src="assets/img/landing/software-agency-3/icons/02.svg" alt="Chatbot IA"
                                class="d-block mb-3 mx-auto">
                            <h3 class="h5 mb-3">SaaS rapide et évolutif</h3>
                            <p class="mb-0">
                                MVP orienté produit, abonnements et analytics intégrés. Multi‑tenant si besoin, time‑to‑value court grâce à l’IA et à des itérations fréquentes.
                            </p>
                        </div>
                    </div>
                </div>



                <!-- E-commerce sur mesure avec l’IA -->
                <div class="swiper-slide h-auto">
                    <div class="card h-100">
                        <div class="card-body my-md-5 my-4 py-xl-2 py-md-0 py-sm-2 text-center">
                            <img src="assets/img/landing/software-agency-3/icons/03.svg" alt="Rédaction IA"
                                class="d-block mb-3 mx-auto">
                            <h3 class="h5 mb-3">E‑commerce performant et connecté</h3>
                            <p class="mb-0">
                                Boutiques sur mesure, conversion soignée et intégrations solides (paiements, logistique, CRM/ERP). Livré vite et à coûts maîtrisés grâce à l’IA.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Analyse données IA -->
                <div class="swiper-slide h-auto">
                    <div class="card h-100">
                        <div class="card-body my-md-5 my-4 py-xl-2 py-md-0 py-sm-2 text-center">
                            <img src="assets/img/landing/software-agency-3/icons/04.svg" alt="Analyse IA"
                                class="d-block mb-3 mx-auto">
                            <h3 class="h5 mb-3">ERP modulaire & automatisations</h3>
                            <p class="mb-0">
                                Données unifiées, workflows automatisés et connecteurs API/ETL vers vos outils. Moins de saisies, moins d’erreurs, meilleure visibilité.
                            </p>
                        </div>
                    </div>
                </div>

            </div>
            <!-- Swiper pagination -->
            <div class="swiper-pagination position-static mt-4 pt-lg-3 pt-2"></div>
        </div>
    </section>


    <!-- Projets réalisés -->
    <section class="container mb-5 pb-lg-5 pb-md-4 pb-3">
        <h2 class="h1 mb-lg-5 mb-4 pb-lg-0 pb-md-2 text-center">Ils nous ont fait confiance, on vous montre le résultat.
        </h2>

        <!-- E-commerce connecté -->
        <div class="row gy-4 mb-4 pb-md-3 pb-2 pt-5">
            <div class="col-md-6 rellax" data-rellax-percentage="0.5" data-rellax-speed="0.5"
                data-disable-parallax-down="md">
                <div class="bg-secondary rounded-3">
                    <img src="assets/img/home/Application.svg" alt="E-commerce connecté">
                </div>
            </div>
            <div class="col-xl-4 col-lg-5 col-md-6 col-sm-8 offset-lg-1 d-flex rellax" data-rellax-percentage="0.5"
                data-rellax-speed="-0.5" data-disable-parallax-down="md">
                <div class="align-self-center ps-lg-0 ps-md-4">
                    <h4 class="mb-lg-4 mb-3 fs-base fw-normal text-body">E-commerce</h4>
                    <h3 class="h2 mb-lg-4 mb-3">Création de fiches produits </h3>
                    <p class="mb-lg-4 mb-3">
                        Mise en place d’un système automatisé permettant de générer des milliers de fiches produits
                        optimisées
                        pour le référencement à partir de données fournies par les partenaires.
                    </p>
                    <ul class="mb-lg-4 mb-3 fs-sm text-muted list-inline">
                        <li class="list-inline-item me-1"> 10 000 produits importés / </li>
                        <li class="list-inline-item me-1"> Temps de création réduit de 30 min à 45 sec par produit / </li>
                        <li class="list-inline-item me-1"> SEO optimisé automatiquement</li>
                    </ul>
                    <a href="#" class="btn btn-lg btn-outline-primary">Voir le projet</a>
                </div>
            </div>

        </div>

        <!-- E-commerce boosté par IA -->
        <div class="row gy-4 mb-4 pb-md-3 pb-2">
            <div class="col-md-6 rellax" data-rellax-percentage="0.5" data-rellax-speed="0.5"
                data-disable-parallax-down="md">
                <div class="bg-secondary rounded-3">
                    <img src="assets/img/home/AA.svg" alt="E-commerce IA">
                </div>
            </div>
            <div class="col-xl-4 col-lg-5 col-md-6 col-sm-8 offset-lg-1 d-flex rellax" data-rellax-percentage="0.5"
                data-rellax-speed="-0.5" data-disable-parallax-down="md">
                <div class="align-self-center ps-lg-0 ps-md-4">
                    <h4 class="mb-lg-4 mb-3 fs-base fw-normal text-body">Gestion automatisée des demandes</h4>
                    <h3 class="h2 mb-lg-4 mb-3">Automatisation d’articles SEO</h3>
                    <p class="mb-lg-4 mb-3">
                    Mise en place d’un système automatisé de rédaction d’articles de blog. Connecté à Google Search, 
                    il identifie les thématiques les plus pertinentes pour chaque site et génère du contenu optimisé pour améliorer le référencement naturel.
                    </p>
                    <ul class="mb-lg-4 mb-3 fs-sm text-muted list-inline">
                        <li class="list-inline-item me-1"> Augmentation du référencement naturel  /</li>
                        <li class="list-inline-item me-1"> Gain de temps conséquent /</li>
                        <li class="list-inline-item me-1"> Contenu personnalisé et de qualité </li>
                    </ul>
                    <a href="#" class="btn btn-lg btn-outline-primary">Voir le projet</a>
                </div>
            </div>

        </div>

        <!-- Chatbot sur-mesure -->
        <div class="row gy-4 mb-xl-3">
            <div class="col-md-6 rellax" data-rellax-percentage="0.5" data-rellax-speed="0.5"
                data-disable-parallax-down="md">
                <div class="bg-secondary rounded-3">
                    <img src="assets/img/home/cc.svg" alt="Chatbot personnalisé">
                </div>
            </div>
            <div class="col-xl-4 col-lg-5 col-md-6 col-sm-8 offset-lg-1 d-flex rellax" data-rellax-percentage="0.5"
                data-rellax-speed="-0.5" data-disable-parallax-down="md">
                <div class="align-self-center ps-lg-0 ps-md-4">
                    <h4 class="mb-lg-4 mb-3 fs-base fw-normal text-body">Chatbot</h4>
                    <h3 class="h2 mb-lg-4 mb-3">Assistant IA connecté à vos documents internes</h3>
                    <p class="mb-lg-4 mb-3">
                        Développement d’un chatbot sur mesure capable de répondre avec précision aux questions des clients,
                        en s’appuyant sur votre documentation interne. Les données restent sécurisées et traitées via des
                        solutions open source.
                    </p>
                    <ul class="mb-lg-4 mb-3 fs-sm text-muted list-inline">
                        <li class="list-inline-item me-1">Connexion à vos documents internes /</li>
                        <li class="list-inline-item me-1">Données sécurisées et hébergées en local /</li>
                        <li class="list-inline-item me-1">Solutions IA open source</li>
                    </ul>
                    <a href="#" class="btn btn-lg btn-outline-primary">Voir le projet</a>
                </div>
            </div>

        </div>
    </section>


    <!-- Nos avantages -->
    <section class="container mb-lg-5 mb-4 pb-3">
        <h2 class="h1 mb-lg-5 mb-4 pb-lg-0 pb-md-2 text-center">On ne travaille pas comme les autres, et c’est volontaire.
        </h2>

        <!-- Swiper slider -->
        <div class="swiper mb-xl-3 text-sm-start text-center swiper-initialized swiper-horizontal swiper-android swiper-backface-hidden"
            data-swiper-options="{
              &quot;spaceBetween&quot;: 24,
              &quot;autoplay&quot;: true,
              &quot;breakpoints&quot;: {
                &quot;0&quot;: {
                  &quot;slidesPerView&quot;: 1
                },
                &quot;500&quot;: {
                  &quot;slidesPerView&quot;: 2
                },
                &quot;768&quot;: {
                  &quot;slidesPerView&quot;: 3
                },
                &quot;1200&quot;: {
                  &quot;slidesPerView&quot;: 4
                }
              },
              &quot;pagination&quot;: {
                &quot;el&quot;: &quot;.swiper-pagination&quot;,
                &quot;clickable&quot;: true
              }
            }">
            <div class="swiper-wrapper" id="swiper-wrapper-0c85b4c7f2242ba1" aria-live="off"
                style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">

                <!-- Swiper item -->
                <div class="swiper-slide" role="group" aria-label="1 / 4" style="width: 248px; margin-right: 24px;">
                    <div class="mx-sm-0 mx-auto" style="max-width: 19.125rem;">
                        <h4 class="h5 mb-3">Productivité IA</h4>
                        <p class="mb-0">Délais raccourcis, budget optimisé.</p>
                    </div>
                </div>

                <!-- Swiper item -->
                <div class="swiper-slide" role="group" aria-label="2 / 4" style="width: 248px; margin-right: 24px;">
                    <div class="mx-sm-0 mx-auto" style="max-width: 19.125rem;">
                        <h4 class="h5 mb-3">Exigence technique</h4>
                        <p class="mb-0">Sécurité, performance, code durable.</p>
                    </div>
                </div>

                <!-- Swiper item -->
                <div class="swiper-slide" role="group" aria-label="3 / 4" style="width: 248px; margin-right: 24px;">
                    <div class="mx-sm-0 mx-auto" style="max-width: 19.125rem;">
                        <h4 class="h5 mb-3">Clarté & proximité</h4>
                        <p class="mb-0">Échanges simples, chantiers transparents.</p>
                    </div>
                </div>

                <!-- Swiper item -->
                <div class="swiper-slide" role="group" aria-label="4 / 4" style="width: 248px; margin-right: 24px;">
                    <div class="mx-sm-0 mx-auto" style="max-width: 19.125rem;">
                        <h4 class="h5 mb-3">Intégrations solides</h4>
                        <p class="mb-0">Vos outils connectés sans friction.</p>
                    </div>
                </div>


            </div>

            <!-- Swiper pagination -->
            <div
                class="swiper-pagination position-static mt-4 pt-lg-3 pt-2 swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
                <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span>
                <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
                    aria-label="Go to slide 2" aria-current="true"></span>
            </div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>
    </section>




    <!-- Brands (carousel on screens < 1100px) -->
    <section class="container mb-5 pb-lg-5 pb-md-4 pb-3">
        <div class="swiper mx-n2 swiper-initialized swiper-horizontal swiper-android swiper-backface-hidden"
            data-swiper-options="{
              &quot;spaceBetween&quot;: 8,
              &quot;pagination&quot;: {
                &quot;el&quot;: &quot;.swiper-pagination&quot;,
                &quot;clickable&quot;: true
              },
              &quot;breakpoints&quot;: {
                &quot;0&quot;: {
                  &quot;slidesPerView&quot;: 2
                },
                &quot;768&quot;: {
                  &quot;slidesPerView&quot;: 3
                },
                &quot;1200&quot;: {
                  &quot;slidesPerView&quot;: 4
                }
              }
            }">
            <div class="swiper-wrapper" id="swiper-wrapper-cd6c948fe544d35f" aria-live="polite"
                style="transform: translate3d(0px, 0px, 0px);">

                <!-- Item -->
                <div class="swiper-slide py-3 swiper-slide-active" role="group" aria-label="1 / 4"
                    style="width: 264px; margin-right: 8px;">
                    <a href="#" class="card card-body card-hover px-2 mx-2">
                        <img src="{{asset('assets/img/home/logoreaut.svg')}}" class="d-block mx-auto my-2" width="154" alt="Brand">
                    </a>
                </div>

                <!-- Item -->
                <div class="swiper-slide py-3 swiper-slide-next" role="group" aria-label="2 / 4"
                    style="width: 264px; margin-right: 8px;">
                    <a href="#" class="card card-body card-hover px-2 mx-2">
                        <img src="{{asset('assets/img/home/justine.svg')}}" class="d-block mx-auto my-2" width="154" alt="Brand">
                    </a>
                </div>

                <!-- Item -->
                <div class="swiper-slide py-3" role="group" aria-label="3 / 4" style="width: 264px; margin-right: 8px;">
                    <a href="#" class="card card-body card-hover px-2 mx-2">
                        <img src="{{asset('assets/img/home/mapep.svg')}}" class="d-block mx-auto my-2" width="154" alt="Brand">
                    </a>
                </div>

                <!-- Item -->
                <div class="swiper-slide py-3" role="group" aria-label="4 / 4" style="width: 264px; margin-right: 8px;">
                    <a href="#" class="card card-body card-hover px-2 mx-2">
                        <img src="{{asset('assets/img/home/falcon.svg')}}" class="d-block mx-auto my-2" width="154" alt="Brand">
                    </a>
                </div>
            </div>

            <!-- Pagination (bullets) -->
            <div
                class="swiper-pagination position-relative pt-2 mt-4 swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
                <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
                    aria-label="Go to slide 1" aria-current="true"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 2"></span>
            </div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>
    </section>


    <!-- Blog -->
    <section class="container mb-5 pb-lg-5 pb-md-4 pb-3">

        <!-- Swiper slider -->
        <div class="swiper mb-xl-3 text-sm-start text-center swiper-initialized swiper-horizontal swiper-android swiper-backface-hidden"
            data-swiper-options="{
              &quot;spaceBetween&quot;: 24,
              &quot;autoplay&quot;: true,
              &quot;breakpoints&quot;: {
                &quot;0&quot;: {
                  &quot;slidesPerView&quot;: 1
                },
                &quot;500&quot;: {
                  &quot;slidesPerView&quot;: 2
                },
                &quot;768&quot;: {
                  &quot;slidesPerView&quot;: 3
                }
              },
              &quot;pagination&quot;: {
                &quot;el&quot;: &quot;.swiper-pagination&quot;,
                &quot;clickable&quot;: true
              }
            }">
            <div class="swiper-wrapper" id="swiper-wrapper-69b7fddac1fa4ffe" aria-live="off"
                style="transform: translate3d(0px, 0px, 0px);">
                <!-- Swiper item -->
                @foreach ($latestPosts as $index => $post)
                    <div class="swiper-slide h-auto" role="group" aria-label="{{ $index + 1 }} / {{ count($latestPosts) }}"
                        style="width: 248px; margin-right: 24px;">
                        <article class="card h-100 border-0 bg-transparent">
                            <div class="position-relative" style="width: 100%; height: 200px; overflow: hidden;">
                                <a href="{{ route('post.show', $post['slug']) }}"
                                    class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
                                <img src="{{ $post['image'] ?? asset('assets/img/default.jpg') }}" class="rounded-3 w-100 h-100"
                                    style="object-fit: cover;" alt="{{ $post['title'] }}">
                            </div>

                            <div class="card-body pb-0 px-0">
                                <div class="d-flex align-items-center justify-content-between mb-3">
                                    <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">
                                        {{ $post['category']['name'] ?? 'Uncategorized' }}
                                    </a>
                                    <span class="fs-sm text-muted">{{ $post['created_at'] }}</span>
                                </div>
                                <h3 class="h5 mb-0 fw-semibold">
                                    <a href="{{ route('post.show', $post['slug']) }}">{{ $post['title'] }}</a>
                                </h3>
                            </div>
                        </article>
                    </div>
                @endforeach



            </div>

            <!-- Swiper pagination -->
            <div
                class="swiper-pagination position-static mt-4 pt-lg-3 pt-2 swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal swiper-pagination-lock">
                <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
                    aria-label="Go to slide 1" aria-current="true"></span>
            </div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>
    </section>
    </main>
@endsection