HOME

<section class="hero-1" style="background-image:url('./img/home.png'); background-size: 112%;" >
    <!-- Container -->
    <div class="container">
      <div class="hero-1-content">
        <div class="hero-image text-center">
          <img src="img/hero/hero-1.png" class="img-fluid" data-aos="fade-up" alt="Hero"> </div>
       
      </div>
    </div>
    <!-- Container -->
  </section>
  <!-- /Hero -->

  <!-- Topic -->
  <section class="feature-area pt-150 pb-50">
    <!-- Container -->
    <div class="container">
      <!-- row -->
      <div class="row">
        <!-- col -->
        <div class="col-lg-12">
          <div class="section-heading text-center wow fadeInUp animated delay-4s">
            <h5 class="section-meta">Temas de Interés</h5>
            <h2 class="section-title">Banco de Sabiduría</h2>
            <div class="section-divider mx-auto mb-50"></div>
          </div>
        </div>
        <!-- col -->
      </div>
      <!-- /row -->
      <!-- row -->
      <div class="row justify-content-center">
        <!-- col -->
        <div class="col-md-6 col-lg-4 wow fadeInUp animated delay-4s">
          <div class="single-feature-area text-center">
            <div class="feature-icon">
              <i class="ri-book-open-line"></i>
            </div>
            <div class="feature-content-text">
              <h4>Base de Conocimiento</h4>
              <p>
                Encuentra todo lo relacionado a <b><span style="color: #003b73;">La Pieza.<span style="color: #E63108;">DO</span></span></b>.
              </p>
              <a href='/article.php'>Leer más <i class="ri-arrow-right-s-line"></i></a>
            </div>
          </div>
        </div>
        <!-- /col -->
        <!-- col -->
        <div class="col-md-6 col-lg-4 wow fadeInUp animated delay-6s">
          <div class="single-feature-area text-center">
            <div class="feature-icon">
              <i class="ri-question-answer-line"></i>
            </div>
            <div class="feature-content-text">
              <h4>FAQ</h4>
              <p>
                Muchas preguntas que se han hecho antes y tienen respuestas aquí.
              </p>
              <a href='/faqs.php'>Leer más <i class="ri-arrow-right-s-line"></i></a>
            </div>
          </div>
        </div>
        <!-- /col -->
        <!-- col -->
        <div class="col-md-6 col-lg-4 wow fadeInUp animated delay-8s">
          <div class="single-feature-area text-center">
            <div class="feature-icon">
              <i class="ri-book-3-line"></i>
            </div>
            <div class="feature-content-text">
              <h4>Documentación</h4>
              <p>
                Lee la documentación y explora nuestra nueva interfaz de usuario.
              </p>
              <a href='/intro.php'>Leer más <i class="ri-arrow-right-s-line"></i></a>
            </div>
          </div>
        </div>
        <!-- /col -->
      </div>
      <!-- row -->
    </div>
    <!-- /Container -->
  </section>
  <!-- Topic -->

  <!-- Faq -->
  <section class="faq pt-50 pb-50">
    <!-- Container -->
    <div class="container">
      <!-- row -->
      <div class="row">
        <!-- col -->
        <div class="col-lg-12">
          <div class="section-heading text-center wow fadeInUp animated delay-4s">
            <h5 class="section-meta">Faq</h5>
            <h2 class="section-title">Preguntas <br> Frecuentes</h2>
            <p class="section-sub">Aqui tenemos todas las respuestas a tus preguntas con respecto al uso de La Pieza.DO. <br>Aquí podrás encontrar respuestas rápidas para que puedas utilizar la aplicación. </p>
            <div class="section-divider mx-auto mb-50"></div>
          </div>
        </div>
        <!-- col -->
      </div>
      <!-- /row -->
      <!-- faq -->
  
    <!--start preguntas Frecuentes-->
   

      <!-- faq -->
      <div class="row">
        <!-- col -->
        <div class="col-lg-12">


        <?php 
        

    
        
        foreach ($response['preguntas_frecuentes'] as $faq) {

            $order = 1;
        $collapse=1;
        foreach ($faq['preguntas'] as $key => $value) {
            # code...
        ?>


          <div id="accordion-<?php echo $value['id']; ?>" class="accordion accordion-faq">
            <!-- Accordion card 1 -->
            <div class="card wow fadeInLeft animated delay-4s">
              <div class="card-header py-4" id="heading-1-1" data-toggle="collapse" role="button"
                data-target="#collapse-<?php echo $order++.'-'.$value['id'];?>" aria-expanded="false" aria-controls="collapse-1-1">
                <h6 class="mb-0"> ¿<?php echo $value['title']; ?>?
                </h6>
              </div>
              <div id="collapse-<?php echo $collapse++.'-'.$value['id'];?>" class="collapse" aria-labelledby="heading-1-1" data-parent="#accordion-1">
                <div class="card-body">
                  <p class="gray-600"><?php echo $value['description']; ?></p>
                </div>
              </div>
            </div>

            <?php }?>
            <!-- Accordion card 2 -->
            
            <!-- Accordion card 3 -->
            
            <!-- Accordion card 1 -->
           
            <!-- Accordion card 2 -->
            
            <!-- Accordion card 3 -->
            
          </div>
        </div>
        <!-- /col -->
        <!-- col -->
        
      </div>
      <!-- /faq -->
   
                    <!--end preguntas Frecuentes-->
<?php }?>
      <!-- /faq -->
    </div>
    <!-- /Container -->
  </section>