<?php
// Définir le nom de la page pour le SEO
$current_page = 'about';

// Inclure le head avec SEO
include 'includes/head.php'; 
?>
<body id="default_theme" class="about_us">
<!-- loader -->
<div class="bg_load"> <img class="loader_animation" src="images/loaders/loader_1.png" alt="#" /> </div>
<!-- end loader -->

<?php include 'includes/topbar.php'; ?>
<?php include 'includes/navbar.php'; ?>

<!-- inner page banner avec image de fond aléatoire -->
<?php
$bg_images = glob('images/bg/*.{jpg,jpeg,png,gif}', GLOB_BRACE);
$random_bg = !empty($bg_images) ? $bg_images[array_rand($bg_images)] : 'images/bg/inner_page_banner.jpg';
?>
<style>
  #inner_banner.overlay-black {
    position: relative;
    overflow: hidden;
  }
  #inner_banner.overlay-black::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1;
  }
  #inner_banner.overlay-black > .container {
    position: relative;
    z-index: 2;
  }
</style>
<div id="inner_banner" class="section inner_banner_section overlay-black" style="background: url('<?php echo $random_bg; ?>') center center/cover no-repeat;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="title-holder">
            <div class="title-holder-cell text-left">
              <h1 class="page-title">À Propos de Nous</h1>
              <ol class="breadcrumb">
                <li><a href="index.php">Accueil</a></li>
                <li class="active">À Propos</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end inner page banner -->

<!-- Notre Histoire -->
<div class="section padding_layout_1">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="main_heading text_align_center">
            <h2 style="text-transform: none;">Notre Histoire</h2>
            <p class="large">De jeunes entrepreneurs marocains passionnés par l'informatique</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row margin_top_50">
      <div class="col-md-6">
        <div class="full">
          <img class="img-responsive" src="images/it_service/servise-ae-mother_board.jpg" alt="Équipe SERVICES-AE" style="border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);" />
        </div>
      </div>
      <div class="col-md-6">
        <div class="full about_content">
          <h3 style="color: #011f3e; margin-bottom: 20px;">🚀 SERVICES-AE : L'Excellence Informatique Made in Morocco</h3>
          <p style="font-size: 16px; line-height: 1.6; margin-bottom: 15px;">
            Nous sommes des jeunes auto-entrepreneurs marocains unis par une passion commune : 
            l'informatique et l'innovation technologique. Basés à <strong>Marrakech</strong>, nous avons créé SERVICES-AE pour offrir des solutions 
            informatiques de qualité professionnelle à nos compatriotes et aux entreprises locales.
          </p>
          <p style="font-size: 16px; line-height: 1.6; margin-bottom: 15px;">
            Notre aventure a commencé avec une conviction simple : <em>le Maroc mérite des services informatiques d'excellence, 
            dispensés par des talents locaux qui comprennent les besoins spécifiques de notre marché.</em>
          </p>
          <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px;">
            <h4 style="color: #011f3e; margin-bottom: 15px;">💡 Notre Vision</h4>
            <p style="margin: 0; font-style: italic;">
              "Démocratiser l'accès aux technologies informatiques au Maroc en proposant des solutions 
              innovantes, accessibles et adaptées aux réalités locales."
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Nos Valeurs -->
<div class="section padding_layout_1" style="background: #f8f9fa;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="main_heading text_align_center">
            <h2 style="text-transform: none;">Nos Valeurs</h2>
            <p class="large">Les principes qui guident notre action quotidienne</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row margin_top_30">
      <div class="col-md-4">
        <div class="value_card">
          <div class="value_icon">
            <i class="fa fa-heart" style="font-size: 3em; color: #011f3e; margin-bottom: 20px;"></i>
          </div>
          <h4 style="color: #011f3e;">🇲🇦 Fierté Marocaine</h4>
          <p>Nous sommes fiers de représenter l'excellence du savoir-faire marocain dans le domaine technologique. 
          Chaque projet est une opportunité de démontrer que le talent marocain peut rivaliser avec les meilleurs.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="value_card">
          <div class="value_icon">
            <i class="fa fa-users" style="font-size: 3em; color: #011f3e; margin-bottom: 20px;"></i>
          </div>
          <h4 style="color: #011f3e;">🤝 Proximité Client</h4>
          <p>En tant qu'entrepreneurs locaux, nous comprenons intimement les défis de nos clients. 
          Cette proximité culturelle et géographique nous permet d'offrir un service personnalisé et adapté.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="value_card">
          <div class="value_icon">
            <i class="fa fa-rocket" style="font-size: 3em; color: #011f3e; margin-bottom: 20px;"></i>
          </div>
          <h4 style="color: #011f3e;">⚡ Innovation Continue</h4>
          <p>Jeunes et ambitieux, nous restons à l'affût des dernières technologies pour proposer 
          des solutions modernes et performantes qui anticipent les besoins de demain.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Notre Équipe -->
<div class="section padding_layout_1">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="main_heading text_align_center">
            <h2 style="text-transform: none;">Rencontrez Notre Équipe</h2>
            <p class="large">Les visages derrière SERVICES-AE</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row margin_top_50">
      <!-- Youssef -->
      <div class="col-md-6">
        <div class="team_member text_align_center">
          <div class="member_photo" style="margin-bottom: 20px;">
            <img src="images/it_service/services-ae-it1.jpg" alt="Youssef - Co-fondateur SERVICES-AE" 
                 style="width: 200px; height: 200px; border-radius: 50%; object-fit: cover; margin: 0 auto; box-shadow: 0 5px 15px rgba(0,0,0,0.1);" />
          </div>
          <h3 style="color: #011f3e;">Youssef</h3>
          <h4 style="color: #666; margin-bottom: 15px;">Co-fondateur & Développeur Senior</h4>
          <p style="font-size: 15px; line-height: 1.6; margin-bottom: 20px;">
             Développeur créatif et méthodique, Youssef transforme les idées en solutions concrètes. 
             Expert en développement web et applications, il assure la qualité et l'innovation de nos projets digitaux.
          <div class="contact_info_member">
            <p><i class="fa fa-phone"></i> <strong>+212 665 446 585</strong></p>
            <a href="https://wa.me/212665446585" target="_blank" class="btn btn-success" style="margin-top:8px;">
              <i class="fa fa-whatsapp"></i> WhatsApp Youssef
            </a>
          </div>
        </div>
      </div>
      
      <!-- Rachid -->
      <div class="col-md-6">
        <div class="team_member text_align_center">
          <div class="member_photo" style="margin-bottom: 20px;">
            <img src="images/it_service/rachid_avatar.webp" alt="Rachid - Co-fondateur SERVICES-AE" 
                 style="width: 200px; height: 200px; border-radius: 50%; object-fit: cover; margin: 0 auto; box-shadow: 0 5px 15px rgba(0,0,0,0.1);" />
          </div>
          <h3 style="color: #011f3e;">Rachid</h3>
          <h4 style="color: #666; margin-bottom: 15px;">Co-fondateur & Service Technique</h4>
          <p style="font-size: 15px; line-height: 1.6; margin-bottom: 20px;">
            Passionné de technologies depuis son plus jeune âge, Rachid apporte son expertise technique 
            et sa vision innovante à SERVICES-AE. Spécialisé dans les infrastructures réseau et la sécurité informatique.
          </p>
          </p>
          <div class="contact_info_member">
            <p><i class="fa fa-phone"></i> <strong>+212 663 690 212</strong></p>
            <a href="https://wa.me/212663690212" target="_blank" class="btn btn-success" style="margin-top:8px;">
              <i class="fa fa-whatsapp"></i> WhatsApp Rachid
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Pourquoi Nous Choisir -->
<div class="section padding_layout_1">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="main_heading text_align_center">
            <h2 style="text-transform: none;">Pourquoi Choisir SERVICES-AE ?</h2>
            <p class="large">Les avantages de travailler avec des entrepreneurs locaux</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row margin_top_30">
      <div class="col-md-6">
        <div class="advantage_item" style="margin-bottom: 30px;">
          <div style="display: flex; align-items: flex-start;">
            <div style="margin-right: 20px;">
              <i class="fa fa-map-marker" style="font-size: 2em; color: #011f3e;"></i>
            </div>
            <div>
              <h4 style="color: #011f3e; margin-bottom: 10px;">🏠 Proximité Géographique</h4>
              <p>Basés à Marrakech, nous intervenons rapidement dans toute la région. 
              Pas de frais de déplacement exorbitants, juste un service de qualité à votre porte.</p>
            </div>
          </div>
        </div>
        
        <div class="advantage_item" style="margin-bottom: 30px;">
          <div style="display: flex; align-items: flex-start;">
            <div style="margin-right: 20px;">
              <i class="fa fa-handshake-o" style="font-size: 2em; color: #011f3e;"></i>
            </div>
            <div>
              <h4 style="color: #011f3e; margin-bottom: 10px;">🤝 Relation de Confiance</h4>
              <p>En tant qu'entrepreneurs locaux, notre réputation est notre capital le plus précieux. 
              Nous bâtissons des relations durables basées sur la confiance mutuelle.</p>
            </div>
          </div>
        </div>
        
        <div class="advantage_item">
          <div style="display: flex; align-items: flex-start;">
            <div style="margin-right: 20px;">
              <i class="fa fa-graduation-cap" style="font-size: 2em; color: #011f3e;"></i>
            </div>
            <div>
              <h4 style="color: #011f3e; margin-bottom: 10px;">📚 Formation Continue</h4>
              <p>Nous investissons constamment dans notre formation pour rester à jour avec les dernières technologies 
              et offrir des solutions innovantes à nos clients.</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="col-md-6">
        <div class="advantage_item" style="margin-bottom: 30px;">
          <div style="display: flex; align-items: flex-start;">
            <div style="margin-right: 20px;">
              <i class="fa fa-money" style="font-size: 2em; color: #011f3e;"></i>
            </div>
            <div>
              <h4 style="color: #011f3e; margin-bottom: 10px;">💰 Tarifs Compétitifs</h4>
              <p>Nos coûts de structure réduits nous permettent de proposer des tarifs attractifs 
              sans compromis sur la qualité de nos prestations.</p>
            </div>
          </div>
        </div>
        
        <div class="advantage_item" style="margin-bottom: 30px;">
          <div style="display: flex; align-items: flex-start;">
            <div style="margin-right: 20px;">
              <i class="fa fa-clock-o" style="font-size: 2em; color: #011f3e;"></i>
            </div>
            <div>
              <h4 style="color: #011f3e; margin-bottom: 10px;">⚡ Réactivité</h4>
              <p>Fini les délais d'attente interminables ! Notre taille humaine nous permet 
              une réactivité exceptionnelle pour tous vos besoins urgents.</p>
            </div>
          </div>
        </div>
        
        <div class="advantage_item">
          <div style="display: flex; align-items: flex-start;">
            <div style="margin-right: 20px;">
              <i class="fa fa-cogs" style="font-size: 2em; color: #011f3e;"></i>
            </div>
            <div>
              <h4 style="color: #011f3e; margin-bottom: 10px;">🔧 Solutions Sur Mesure</h4>
              <p>Chaque client est unique. Nous développons des solutions personnalisées 
              qui répondent précisément à vos besoins et contraintes spécifiques.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php include 'includes/footer.php'; ?>

<!-- Modal -->
<div class="modal fade" id="search_bar" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-8 col-md-8 col-sm-8 offset-lg-2 offset-md-2 offset-sm-2 col-xs-10 col-xs-offset-1">
            <div class="navbar-search">
              <form action="#" method="get" id="search-global-form" class="search-global">
                <input type="text" placeholder="Type to search" autocomplete="off" name="s" id="search" value="" class="search-global__input">
                <button class="search-global__btn"><i class="fa fa-search"></i></button>
                <div class="search-global__note">Begin typing your search above and press return to search.</div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Model search bar -->

<!-- js section -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- menu js -->
<script src="js/menumaker.js"></script>
<!-- wow animation -->
<script src="js/wow.js"></script>
<!-- custom js -->
<script src="js/custom.js"></script>
<!-- zoom effect -->
<script src='js/hizoom.js'></script>
<script>
        $('.hi1').hiZoom({
            width: 300,
            position: 'right'
        });
        $('.hi2').hiZoom({
            width: 400,
            position: 'right'
        });
</script>

<style>
.value_card, .team_member, .advantage_item {
    padding: 20px;
    text-align: center;
}

.value_card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

.value_card:hover {
    transform: translateY(-5px);
}

.team_member {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    padding: 30px 20px;
}

.contact_info_member p {
    margin: 5px 0;
    color: #666;
}

.stat_item {
    margin-bottom: 30px;
}

.advantage_item {
    padding: 0;
}

.margin_top_50 {
    margin-top: 50px;
}

@media (max-width: 768px) {
    .team_member img {
        width: 150px !important;
        height: 150px !important;
    }
    
    .stat_item h3 {
        font-size: 2em !important;
    }
}
</style>
</body>
</html>