@extends('layouts.base')

@php
    $origin = 'welcome'; 
@endphp

@section('page-class', 'welcome-page')

@section('content')

    <!-- Hero Section -->
    <section id="hero " class="hero hero-page-1 section accent-background">

      <div class="container position-relative" data-aos="fade-up" data-aos-delay="100">
        <div class="row gy-5 justify-content-between">
          <div class="col-lg-6 order-2 order-lg-1 d-flex flex-column justify-content-center">
            <h2><span>Bienvenue à  </span><span class="accent">IITECH SARL</span></h2>
            <p style="text-align: justify;">Nous représentons le futur. Les bâtisseurs d'un monde 100% numérique. Avec nous, digitalisez vos entreprises en un rien de temps.</p>
            <div class="d-flex">
              <a href="#about" class="btn-get-started">Qui sommes nous?</a>
              <a href="" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>Regardez Video</span></a>
            </div>
          </div>
          <div class="col-lg-5 order-1 order-lg-2">
            <img src="assets/img/hero-img.svg" class="img-fluid" alt="">
          </div>
        </div>
      </div>

      <div class="icon-boxes position-relative" data-aos="fade-up" data-aos-delay="200">
        <div class="container position-relative">
          <div class="row gy-4 mt-5">

            <div class="col-xl-3 col-md-6">
              <div class="icon-box">
                <div class="icon"><i class="bi bi-cpu"></i></div>
                <h4 class="title"><a href="" class="stretched-link">Solutions Technologiques</a></h4>
              </div>
            </div><!--End Icon Box -->

            <div class="col-xl-3 col-md-6">
              <div class="icon-box">
                <div class="icon"><i class="bi bi-briefcase"></i></div>
                <h4 class="title"><a href="" class="stretched-link">Services Business</a></h4>
              </div>
            </div><!--End Icon Box -->

            <div class="col-xl-3 col-md-6">
              <div class="icon-box">
                <div class="icon"><i class="bi bi-globe"></i></div>
                <h4 class="title"><a href="" class="stretched-link">Coatching et Formations</a></h4>
              </div>
            </div><!--End Icon Box -->

            <div class="col-xl-3 col-md-6">
              <div class="icon-box">
                <div class="icon"><i class="bi bi-mortarboard"></i></div>
                <h4 class="title"><a href="" class="stretched-link">Recherches et Innovations</a></h4>
              </div>
            </div><!--End Icon Box -->

          </div>
        </div>
      </div>

    </section><!-- /Hero Section -->

    <!-- About Section -->
    <section id="about" class="about section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2>A propos<br></h2>
        <p>Nous sommes une équipe dédiée à la recherche et à la création de solutions innovantes. Mettant notre expertise à votre service, nous assurons à vos projets un succès durable et une valeur ajoutée exceptionnelle.</p>
      </div><!-- End Section Title -->

      <div class="container">

        <div class="row gy-4">
          <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
            <h3>IITECH SARL : L’Innovation Numérique au Service du Développement</h3>
          
            <p style="text-align: justify;">
                IITECH SARL est une entreprise innovante basée à Abomey-Calavi, Bénin, spécialisée dans le développement de solutions numériques sur mesure pour les institutions académiques et économiques. Forte de son expertise en développement web et mobile, marketing digital et conception UI/UX, elle accompagne les entreprises dans leur transformation digitale.
            </p>
        
            <p style="text-align: justify;">
                  À travers ses laboratoires de recherche LIR et LATIP, IITECH SARL innove dans l’analyse et le traitement de l’image et de la parole. Parmi ses réalisations phares figurent <strong>AfricaWebStudent</strong>, une solution de gestion académique, et <strong>AfricaWebRadio</strong>, une plateforme de diffusion radio en ligne. Son engagement : proposer des solutions technologiques adaptées aux défis locaux et internationaux.
            </p>
        </div>
        
          <div class="col-lg-6" data-aos="fade-up" data-aos-delay="250">
            <img src="{{asset('assets/img/iitech2.jpeg')}}" class="img-fluid rounded-4 mb-4" alt="">
          </div>
        </div>

      </div>

    </section><!-- /About Section -->

    <section id="call-to-action" class="call-to-action section dark-background">

      <div class="container">
        <img src="{{asset('assets/img/cta.jpeg')}}" alt="">
        <div class="content row justify-content-center" data-aos="zoom-in" data-aos-delay="100">
          <div class="col-xl-10">
            <div class="text-center">
              <a href="" class="glightbox play-btn"></a>
              <h3>Agissez Maintenant</h3>
              <p>Découvrez comment nos solutions peuvent transformer votre entreprise. Rejoignez-nous pour une expérience innovante et des résultats concrets. Ne manquez pas l'opportunité d'améliorer votre avenir dès aujourd'hui.</p>
              <a class="cta-btn" href="#">Passez à l'action</a>
            </div>
          </div>
        </div>
      </div>
      

    </section><!-- /Call To Action Section -->

   



    <div class="container section-title" data-aos="fade-up">
      <h2>Statistiques<br></h2>
      <p>Nos solutions répondent efficacement à vos besoins spécifiques, offrant des résultats concrets et adaptés à vos exigences</p>
    </div>
    <!-- Stats Section -->
    <section id="stats" class="stats section">

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row gy-4 align-items-center">

          <div class="col-lg-5">
            <img src="assets/img/stats-img.svg" alt="" class="img-fluid">
          </div>

          <div class="col-lg-7">

            <div class="row gy-4">

              <div class="col-lg-6">
                <div class="stats-item d-flex">
                  <i class="bi bi-emoji-smile flex-shrink-0"></i>
                  <span style="font-size: 35px; line-height: 1;">+</span>
                  <div>
                    <span data-purecounter-start="0" data-purecounter-end="20000" data-purecounter-duration="1" class="purecounter"></span>
                    <p><strong>Clients satisfaits</strong></p>
                  </div>

                </div>
              </div><!-- End Stats Item -->

              <div class="col-lg-6">
                <div class="stats-item d-flex">
                  <i class="bi bi-journal-richtext flex-shrink-0"></i>
                  <span style="font-size: 35px; line-height: 1;">+</span>
                  <div>
                    <span data-purecounter-start="0" data-purecounter-end="25" data-purecounter-duration="1" class="purecounter"></span>
                    <p><strong>Projets concrétisés</strong></p>
                  </div>
                </div>
              </div><!-- End Stats Item -->

              <div class="col-lg-6">
                <div class="stats-item d-flex">
                  <i class="bi bi-headset flex-shrink-0"></i>
                  <div>
                    <span style="font-size: 35px; font-weight: bold; line-height: 1;">24/7</span>

                    {{-- <span data-purecounter-start="0" data-purecounter-end="1453" data-purecounter-duration="1" class="purecounter"></span> --}}
                    <p><strong>Assistance</strong></p>
                  </div>
                </div>
              </div><!-- End Stats Item -->

              <div class="col-lg-6">
                <div class="stats-item d-flex">
                  <i class="bi bi-people flex-shrink-0"></i>
                  <span style="font-size: 35px; line-height: 1;">+</span>
                  <div>
                    <span data-purecounter-start="0" data-purecounter-end="100" data-purecounter-duration="1" class="purecounter"></span>
                    <p><strong>Talents Engagés</strong></p>
                  </div>
                </div>
              </div><!-- End Stats Item -->

            </div>

          </div>

        </div>

      </div>

    </section><!-- /Stats Section -->

    <!-- Call To Action Section -->
   

    <!-- Services Section -->
    <section id="services" class="services section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2>Nos Services</h2>
        <p>Quels services vous obtiendrez de notre part !</p>
      </div><!-- End Section Title -->
      <!-- section dynamique -->
      <div class="container">
        <div class="row gy-2">
            @foreach($services as $service)
                <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="service-item position-relative">
                        <div class="icon">
                            <i class="bi {{ $service->icon_class }}"></i>
                        </div>
                        <h3>{{ $service->name }}</h3>
                        <p>{{ $service->description }}</p>
                        {{-- <a href="service-details.html" class="readmore stretched-link">En savoir plus <i class="bi bi-arrow-right"></i></a> --}}
                    </div>
                </div>
            @endforeach
        </div>
      </div>  
      <!-- section dynamique -->

    </section><!-- /Services Section -->

  

    <!-- Portfolio Section -->
    <section id="portfolio" class="portfolio section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2>Réalisations</h2>
        <p>Nos réalisations témoignent de notre expertise, offrant des solutions innovantes qui répondent aux attentes et défis de nos clients</p>
      </div><!-- End Section Title -->
      
      <!-- section dynamique -->
      <div class="container">
        <div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">
            <ul class="portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="100">
                <li data-filter="*" class="filter-active">All</li>
                <li data-filter=".filter-communautaire">Communautaire</li>
                <li data-filter=".filter-education">Education</li>
                <li data-filter=".filter-ia">IA</li>
                <li data-filter=".filter-institution">Institution et privé</li>
                <li data-filter=".filter-recherche">Recherche</li>
            </ul>

            <div class="row gy-4 isotope-container" data-aos="fade-up" data-aos-delay="200">
                @foreach($portfolios as $portfolio)
                    <div class="col-lg-4 col-md-6 portfolio-item isotope-item 
                          @foreach(explode(' ', $portfolio->category) as $category)
                            filter-{{ $category }} 
                          @endforeach">
                        <div class="portfolio-content h-100">
                            <a href="{{ asset('assets/img/portfolio/'.$portfolio->image_path) }}" data-gallery="portfolio-gallery-app" class="glightbox">
                                <img src="{{ asset('assets/img/portfolio/'.$portfolio->image_path) }}" class="img-fluid" alt="">
                            </a>
                            <div class="portfolio-info">
                                <h4><a href="{{route('portfolios.detail', $portfolio->id)}}" title="More Details">{{ $portfolio->title }}</a></h4>
                                <p>{{ $portfolio->description }}</p>
                                @if(count(json_decode($portfolio->detail_images)) > 0)
                                  <a href="{{ route('portfolios.detail', ['portfolio' => $portfolio->id, 'origin' => 'welcome']) }}" class="readmore stretched-link custom-visiter"> 
                                    <i class="bi bi-arrow-right"></i>
                                  </a>   
                                @endif                           
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
      </div>
      <!-- section dynamique -->

    </section><!-- /Portfolio Section -->

      <!-- Testimonials Section -->
      <section id="testimonials" class="testimonials section">

        <!-- Section Title -->
        <div class="container section-title" data-aos="fade-up">
          <h2>Temoignages</h2>
          <p>Nos clients partagent leur expérience avec nous, témoignant de la qualité de nos services et de notre engagement à dépasser leurs attentes.</p>
        </div><!-- End Section Title -->
  
        <div class="container" data-aos="fade-up" data-aos-delay="100">
  
          <div class="swiper init-swiper">
            <script type="application/json" class="swiper-config">
              {
                "loop": true,
                "speed": 600,
                "autoplay": {
                  "delay": 5000
                },
                "slidesPerView": "auto",
                "pagination": {
                  "el": ".swiper-pagination",
                  "type": "bullets",
                  "clickable": true
                },
                "breakpoints": {
                  "320": {
                    "slidesPerView": 1,
                    "spaceBetween": 40
                  },
                  "1200": {
                    "slidesPerView": 3,
                    "spaceBetween": 10
                  }
                }
              }
            </script>
            <div class="swiper-wrapper">
              @foreach($testimonials as $testimonial)
                <div class="swiper-slide">
                    <div class="testimonial-item">
                        <img src="{{ asset($testimonial->image) }}" class="testimonial-img" alt="">
                        <h3>{{ $testimonial->name }}</h3>
                        <h4>{{ $testimonial->position }}</h4>
                        <div class="stars">
                            @for ($i = 0; $i < $testimonial->rating; $i++)
                                <i class="bi bi-star-fill"></i>
                            @endfor
                        </div>
                        <p>
                            <i class="bi bi-quote quote-icon-left"></i>
                            <span>{{ $testimonial->quote }}</span>
                            <i class="bi bi-quote quote-icon-right"></i>
                        </p>
                    </div>
                </div><!-- End testimonial item -->
              @endforeach
            </div>
            <div class="swiper-pagination"></div>
          </div>
  
        </div>
  
      </section><!-- /Testimonials Section -->

    <!-- Team Section -->
    {{-- <section id="team" class="team section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2>Notre Equipe</h2>
        <p>Notre équipe est composée de professionnels passionnés et engagés, prêts à relever les défis pour offrir des solutions sur mesure à nos clients.</p>
      </div><!-- End Section Title -->

      <div class="container">

        <div class="row gy-4">

          <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
            <div class="member">
              <img src="assets/img/team/team-1.jpg" class="img-fluid" alt="">
              <h4>Walter White</h4>
              <span>Web Development</span>
              <div class="social">
                <a href=""><i class="bi bi-twitter-x"></i></a>
                <a href=""><i class="bi bi-facebook"></i></a>
                <a href=""><i class="bi bi-instagram"></i></a>
                <a href=""><i class="bi bi-linkedin"></i></a>
              </div>
            </div>
          </div><!-- End Team Member -->

          <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="200">
            <div class="member">
              <img src="assets/img/team/team-2.jpg" class="img-fluid" alt="">
              <h4>Sarah Jhinson</h4>
              <span>Marketing</span>
              <div class="social">
                <a href=""><i class="bi bi-twitter-x"></i></a>
                <a href=""><i class="bi bi-facebook"></i></a>
                <a href=""><i class="bi bi-instagram"></i></a>
                <a href=""><i class="bi bi-linkedin"></i></a>
              </div>
            </div>
          </div><!-- End Team Member -->

          <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="300">
            <div class="member">
              <img src="assets/img/team/team-3.jpg" class="img-fluid" alt="">
              <h4>William Anderson</h4>
              <span>Content</span>
              <div class="social">
                <a href=""><i class="bi bi-twitter-x"></i></a>
                <a href=""><i class="bi bi-facebook"></i></a>
                <a href=""><i class="bi bi-instagram"></i></a>
                <a href=""><i class="bi bi-linkedin"></i></a>
              </div>
            </div>
          </div><!-- End Team Member -->

          <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="400">
            <div class="member">
              <img src="assets/img/team/team-4.jpg" class="img-fluid" alt="">
              <h4>Amanda Jepson</h4>
              <span>Accountant</span>
              <div class="social">
                <a href=""><i class="bi bi-twitter-x"></i></a>
                <a href=""><i class="bi bi-facebook"></i></a>
                <a href=""><i class="bi bi-instagram"></i></a>
                <a href=""><i class="bi bi-linkedin"></i></a>
              </div>
            </div>
          </div><!-- End Team Member -->

        </div>

      </div>

    </section><!-- /Team Section --> --}}

    

    </section><!-- /Recent Posts Section -->

     <!-- Clients Section -->
     <section id="clients" class="clients section">

      <div class="container">

        <div class="swiper init-swiper">
          <script type="application/json" class="swiper-config">
            {
              "loop": true,
              "speed": 6000,
              "autoplay": {
                "delay": 5
              },
              "slidesPerView": "auto",
            
              "breakpoints": {
                "320": {
                  "slidesPerView": 2,
                  "spaceBetween": 40
                },
                "480": {
                  "slidesPerView": 3,
                  "spaceBetween": 60
                },
                "640": {
                  "slidesPerView": 4,
                  "spaceBetween": 80
                },
                "992": {
                  "slidesPerView": 6,
                  "spaceBetween": 120
                }
              }
            }
          </script>
          <div class="swiper-wrapper align-items-center">
            <div class="swiper-slide"><img src="assets/img/clients/client-1.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/client-2.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/client-3.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/client-5.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/client-2.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/client-3.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-1.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-2.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-3.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-4.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-5.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-6.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-7.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-8.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-9.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-10.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-11.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-12.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-13.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-14.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-15.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-16.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-17.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-18.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-19.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-20.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-21.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-22.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-23.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-24.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-25.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-26.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-27.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-28.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-29.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-30.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-31.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-32.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-33.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-34.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-35.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-36.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-37.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-38.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-39.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-40.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-41.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-42.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-43.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-44.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-45.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-46.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-47.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-48.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-49.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-50.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-51.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-52.jpg" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/radios/client-53.jpg" class="img-fluid" alt=""></div>
          </div>
        </div>

      </div>

    </section><!-- /Clients Section -->

    <!-- Contact Section -->
    <section id="contact" class="contact section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2>Contact</h2>
        <p>Nous sommes à votre écoute pour répondre à toutes vos questions et vous accompagner dans vos projets. N'hésitez pas à nous contacter !</p>
      </div><!-- End Section Title -->

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row gx-lg-0 gy-4">

          <div class="col-lg-4">
            <div class="info-container d-flex flex-column align-items-center justify-content-center">
              <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="200">
                <i class="bi bi-geo-alt flex-shrink-0"></i>
                <div>
                  <h3>Address</h3>
                  <p>Abomey-Calavi, OUEDO</p>
                </div>
              </div><!-- End Info Item -->

              <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300">
                <i class="bi bi-telephone flex-shrink-0"></i>
                <div>
                  <h3>Contact</h3>
                  <p>+229 01 613 74 500</p>
                </div>
              </div><!-- End Info Item -->

              <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400">
                <i class="bi bi-envelope flex-shrink-0"></i>
                <div>
                  <h3>Email </h3>
                  <p>latipiitech@gmail.com</p>
                </div>
              </div><!-- End Info Item -->

              <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="500">
                <i class="bi bi-clock flex-shrink-0"></i>
                <div>
                  <h3>Heures d'ouverture:</h3>
                  <p>Lun-Ven: 8h - 18h30</p>
                </div>
              </div><!-- End Info Item -->

            </div>

          </div>

          <div class="col-lg-8">
            <form action="{{ route('send.mail') }}" method="post" class="php-email-form"  data-aos="fade" data-aos-delay="100">
              {{-- <form action="{{ route('send.mail') }}" method="post" class="php-email-form" data-aos="fade" data-aos-delay="100"> --}}
              @csrf
              <div class="row gy-4">
                <div class="col-md-6">
                  <input type="text" name="name" class="form-control" placeholder="Votre Nom" required>
                </div>
            
                <div class="col-md-6">
                  <input type="email" class="form-control" name="email" placeholder="Votre Email" required>
                </div>
            
                <div class="col-md-12">
                  <input type="text" class="form-control" name="subject" placeholder="Sujet" required>
                </div>
            
                <div class="col-md-12">
                  <textarea class="form-control" name="message" rows="8" placeholder="Message" required></textarea>
                </div>
            
                <div class="col-md-12 text-center">
                  <div class="loading">Envoi en cours...</div>
                  <div class="error-message"></div>
                  <div class="sent-message">Votre message a été envoyé. Merci!</div>
            
                  <button type="submit">Envoyer le message</button>
                </div>
              </div>
            
          </form>
          
          @if(session('success'))
              <div class="alert alert-success mt-3">
                  {{ session('success') }}
              </div>
          @endif
          
          </div><!-- End Contact Form -->

        </div>

      </div>

    </section><!-- /Contact Section -->

    @endsection