@extends("Layouts.layout")
@section("title")
A propos - CSP
@endsection
@section("contant")
<div class="no-bottom no-top" id="content">

   <div id="top"></div>

   <section id="subheader" class="bg-dark text-light relative jarallax">
      <img src="assets/images/background/2.webp" class="jarallax-img" alt="">
      <div class="container relative z-2">
         <div class="row gy-4 gx-5 align-items-center">
            <div class="col-lg-12">
               <div class="spacer-double sm-hide"></div>
               <h5 class="wow fadeInUp">Alimentez votre avenir avec une énergie propre</h5>
               <h1 class="mb-3 wow fadeInUp" data-wow-delay=".2s">A propos de nous</h1>
               <div class="border-bottom mb-3"></div>
               <ul class="crumb wow fadeInUp">
                  <li><a href="/">Accueil</a></li>
                  <li class="active">À propos de nous</li>
               </ul>
            </div>
         </div>
      </div>

      <div class="gradient-edge-bottom h-50"></div>
      <div class="sw-overlay"></div>
   </section>

   <section>
      <div class="container">
         <div class="row gy-4 gx-5 align-items-center">
            <div class="col-lg-6">
               <div class="relative">
                  <div
                     class="bg-dark text-light text-center rounded-1 abs w-200px p-4 m-4 bottom-0 z-3 overflow-hidden wow zoomIn">
                     <h2 class="mb-0">325%</h2>
                     <p class="lh-1-5">Augmentation moyenne des panneaux solaires</p>
                  </div>
                  <div class="rounded-1 w-90 overflow-hidden wow zoomIn">
                     <img src="{{ asset('assets/images/misc/s6.webp') }}" class="w-100 wow scaleIn" alt="">
                  </div>
                  <div class="rounded-1 w-50 abs mb-min-50 end-0 bottom-0 z-2 overflow-hidden shadow-soft wow zoomIn"
                     data-wow-delay=".2s">
                     <img src="{{ asset('assets/images/misc/s4.webp') }}" class="w-100 wow scaleIn" data-wow-delay=".2s"
                        alt="">
                  </div>
               </div>
            </div>
            <div class="col-lg-6">
               <div class="subtitle s2 mb-3 wow fadeInUp" data-wow-delay=".0s">À propos de nous</div>
               <h2 class="wow fadeInUp" data-wow-delay=".2s">Solutions solaires pour des économies d'énergie maximales
               </h2>

               <p> COALA SOLAR POWER est une société industrielle tunisienne spécialisée dans la production
                  de panneaux photovoltaïques de haute qualité. Implantée dans la zone
                  industrielle de Sidi Bouzid, elle s'appuie sur l'expertise du groupe COALA,
                  fort de plus de 40 ans d'expérience dans le domaine industriel et énergétique.
                  Grâce à des procédés de fabrication maîtrisés et conformes aux normes
                  internationales, CSP propose des produits performants, fiables et adaptés
                  aux besoins du marché local et international. La société met l'accent sur
                  l'innovation, la qualité et le respect de l'environnement, contribuant ainsi
                  au développement durable et à la promotion de l'énergie solaire en Tunisie.</p>
            </div>

         </div>

      </div>

      <div class="spacer-double"></div>

   </section>

   <!-- <section class="bg-light">
      <div class="container">

         <div class="row g-4">
            <div class="col-lg-3">
               <div class="bg-white relative border-gray rounded-1 overflow-hidden">
                  <img src="assets/images/team/1.webp" class="w-100" alt="">
                  <div class="p-3 text-center">
                     <h4 class="mb-0">Thomas Bennett</h4>
                     <p class="mb-2">Solar Panel Installer</p>
                     <div class="social-icons">
                        <a href="#"><i class="bg-hover-2 text-hover-white fa-brands fa-facebook-f"></i></a>
                        <a href="#"><i class="bg-hover-2 text-hover-white fa-brands fa-x-twitter"></i></a>
                        <a href="#"><i class="bg-hover-2 text-hover-white fa-brands fa-instagram"></i></a>
                     </div>
                  </div>
               </div>
            </div>

            <div class="col-lg-3">
               <div class="bg-white relative border-gray rounded-1 overflow-hidden">
                  <img src="assets/images/team/2.webp" class="w-100" alt="">
                  <div class="p-3 text-center">
                     <h4 class="mb-0">Barbara Charline</h4>
                     <p class="mb-2">Solar Energy Consultant</p>
                     <div class="social-icons">
                        <a href="#"><i class="bg-hover-2 text-hover-white fa-brands fa-facebook-f"></i></a>
                        <a href="#"><i class="bg-hover-2 text-hover-white fa-brands fa-x-twitter"></i></a>
                        <a href="#"><i class="bg-hover-2 text-hover-white fa-brands fa-instagram"></i></a>
                     </div>
                  </div>
               </div>
            </div>

            <div class="col-lg-3">
               <div class="bg-white relative border-gray rounded-1 overflow-hidden">
                  <img src="assets/images/team/3.webp" class="w-100" alt="">
                  <div class="p-3 text-center">
                     <h4 class="mb-0">Joshua Henry</h4>
                     <p class="mb-2">Solar Maintenance Technician</p>
                     <div class="social-icons">
                        <a href="#"><i class="bg-hover-2 text-hover-white fa-brands fa-facebook-f"></i></a>
                        <a href="#"><i class="bg-hover-2 text-hover-white fa-brands fa-x-twitter"></i></a>
                        <a href="#"><i class="bg-hover-2 text-hover-white fa-brands fa-instagram"></i></a>
                     </div>
                  </div>
               </div>
            </div>

            <div class="col-lg-3">
               <div class="bg-white relative border-gray rounded-1 overflow-hidden">
                  <img src="assets/images/team/4.webp" class="w-100" alt="">
                  <div class="p-3 text-center">
                     <h4 class="mb-0">Madison Jane</h4>
                     <p class="mb-2">Solar Project Coordinator</p>
                     <div class="social-icons">
                        <a href="#"><i class="bg-hover-2 text-hover-white fa-brands fa-facebook-f"></i></a>
                        <a href="#"><i class="bg-hover-2 text-hover-white fa-brands fa-x-twitter"></i></a>
                        <a href="#"><i class="bg-hover-2 text-hover-white fa-brands fa-instagram"></i></a>
                     </div>
                  </div>
               </div>
            </div>
         </div>

      </div>
   </section> -->

   <section class="relative jarallax overflow-hidden bg-light">
      <img src="{{ asset('assets/images/background/gradient-2.html') }}" class="jarallax-img" alt="">
      <div class="container">
         <div class="row g-4 gx-5">

            <div class="col-lg-6">
               <h4 class="mb-4 wow fadeInRight">Notre Vision</h4>
               <p class="fs-24 fw-600 lh-1-4 wow fadeInUp">
                  Être un acteur industriel de référence dans la fabrication de panneaux
                  photovoltaïques et devenir un leader régional.Nous aspirons à un avenir où l'énergie solaire constitue
                  la principale
                  source d'énergie, accessible à tous.
               </p>
            </div>

            <div class="col-lg-6">
               <h4 class="mb-4 wow fadeInRight">Notre Mission</h4>
               <ol class="ol-style-1">
                  <li class="wow fadeInUp" data-wow-delay=".2s">
                     <span class="fw-bold text-dark">Innovation Technologique:</span> Nous intégrons des technologies
                     avancées pour garantir des performances optimales.
                  </li>
                  <li class="wow fadeInUp" data-wow-delay=".4s">
                     <span class="fw-bold text-dark">Fabrication locale &amp; qualité:</span> Production maîtrisée avec
                     des standards internationaux (TUV) pour assurer la fiabilité.
                  </li>

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

      <img src="{{ asset('assets/images/misc/flowers-crop-4.html') }}" class="w-20 absolute start-0 bottom-0 sw-anim"
         alt="">
   </section>


   <section class="bg-dark text-light pt-60 pb-40">
      <div class="container">
         <div class="row">
            <div class="col-lg-12">
               <div class="relative">
                  <div class="row g-4 grid-divider sm-hide">
                     <div class="col-lg-4 col-md-6 mb-sm-30">
                        <div class="d-flex justify-content-center">
                           <i class="fs-60 id-color icon_phone"></i>
                           <div class="ms-3">
                              <h4 class="mb-0">Besoin de nos services ?</h4>
                              <p>Call: +216 76 623 524</p>
                           </div>
                        </div>
                     </div>

                     <div class="col-lg-4 col-md-6 mb-sm-30">
                        <div class="d-flex justify-content-center">
                           <i class="fs-60 id-color icon_clock"></i>
                           <div class="ms-3">
                              <h4 class="mb-0">Horaires d'ouverture</h4>
                              <p>Lun. à Ven. 08:00 - 17:00</p>
                           </div>

                        </div>
                     </div>

                     <div class="col-lg-4 col-md-6 mb-sm-30">
                        <div class="d-flex justify-content-center">
                           <i class="fs-60 id-color icon_mail"></i>
                           <div class="ms-3">
                              <h4 class="mb-0">Envoyez-nous un email</h4>
                              <p>csp@csp.com</p>
                           </div>
                        </div>
                     </div>

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

</div>
@endsection