Sindbad~EG File Manager

<?php
/*
  Template Name: Home
*/
?>
<?php get_header(); ?>
<?php $section1 = get_field('hero'); ?>
<main class="home">
  <section class="home_hero-section container">
    <div class="home_hero-section-container">
      <div class="home_hero-subcontainer">
        <h1 class="display-2 mb-40">
          <?php echo $section1['title']; ?>
        </h1>
        <p class="body-3 mb-40">
          <?php echo $section1['content']; ?>
        </p>
        <div class="home_hero-items-container mb-24">

          <?php $items = $section1['items']; ?>
          <?php foreach ($items as $item): ?>
            <div class="home_hero-item">
              <div class="home_hero-item-icon-container">
                <img src="<?php echo $item['icon']; ?>" alt="Jules Belamy" class="home_hero-item-image">
              </div>
              <p class="body-2 font-semibold text-purple500">
                <?php echo $item['text']; ?>
              </p>
            </div>
          <?php endforeach; ?>


        </div>
        <a href="<?php echo $section1['cta']['link']; ?>" class="cta-button">
          <?php echo $section1['cta']['label']; ?>
        </a>
      </div>
      <div class="home_hero-subcontainer">
        <img src="<?php echo $section1['image']; ?>" alt="Jules Belamy" class="home_hero-image">
      </div>
    </div>
  </section>
  <section class="home_s2  pt-60 pb-60">

    <div class="container">

      <?php $section2 = get_field('section_2'); ?>
      <h2 class="home_s2-title text-center mb-48 subheading font-semibold text-purple800">
        <?php echo $section2['title']; ?>
      </h2>

      <article class="wrapper">
        <div class="marquee">
          <div class="marquee__group">
            <?php $marquee1 = $section2['marquee_1']; ?>
            <?php foreach ($marquee1 as $item): ?>
              <div class="marquee_container">
                <img src="<?= $item['image']; ?>" />
              </div>
            <?php endforeach; ?>



          </div>

          <div aria-hidden="true" class="marquee__group">
            <?php foreach ($marquee1 as $item): ?>
              <div class="marquee_container">
                <img src="<?= $item['image']; ?>" />
              </div>
            <?php endforeach; ?>
          </div>
      </article>
      <article class="wrapper">
        <div class="marquee">
          <div class="marquee__group">
            <?php $marquee2 = $section2['marquee_2']; ?>
            <?php foreach ($marquee2 as $item): ?>
              <div class="marquee_container">
                <img src="<?= $item['image']; ?>" />
              </div>
            <?php endforeach; ?>



          </div>

          <div aria-hidden="true" class="marquee__group">
            <?php foreach ($marquee2 as $item): ?>
              <div class="marquee_container">
                <img src="<?= $item['image']; ?>" />
              </div>
            <?php endforeach; ?>
          </div>
      </article>
    </div>
  </section>
  <section class="home_s3">
    <?php $section3 = get_field('section_3'); ?>
    <div class="container">
      <img src="<?php echo get_template_directory_uri() . '/assets/images/home/rock1.png'; ?>" class="home_s3-rock1">
      <div class="home_s3-container">
        <!-- <img src="<?php echo get_template_directory_uri() . '/assets/images/home/rock2.png'; ?>" class="home_s3-rock2"> -->
        <div class="home_s3-subcontainer">

          <h3 class="home_s3-title heading-2 font-bold mb-40">
            <?php echo $section3['title']; ?>
          </h3>
          <p class="body-3 mb-40">
            <?php echo $section3['content']; ?>
          </p>
          <a href="<?php echo $section3['cta']['link']; ?>" class="cta-button">
            <?php echo $section3['cta']['label']; ?>
          </a>
        </div>
        <div class="home_s3-subcontainer">
          <h4 class="heading-5 font-semibold plain-title mb-32">
            <?php echo $section3['title_2']; ?>
          </h4>
          <?php $items = $section3['items']; ?>

          <?php foreach ($items as $item): ?>
            <?php $tags = $item['tags']; ?>
            <div class="home_s3-item mb-32">
              <div class="flex justify-between text-purple500 mb-8">
                <p class="heading-6 font-semibold">
                  <?php echo $item['title']; ?>
                </p>
                <p class="heading-6s font-semibold">
                  <?php echo $item['percentage']; ?>%
                </p>
              </div>

              <div class="flex gap-8 flex-wrap mb-12">
                <?php foreach ($tags as $tag): ?>
                  <div class="home_s3-tag">
                    <p class="footer-font font-semibold text-purple500">
                      <?php echo $tag['label']; ?>
                    </p>
                  </div>
                <?php endforeach; ?>
              </div>
              <div class="home_s3-progress-container">
                <div class="home_s3-progress" style="width: <?php echo $item['percentage']; ?>%"></div>

              </div>

            </div>
          <?php endforeach; ?>

        </div>
      </div>
    </div>
  </section>
  <section class="home_s4">
    <?php $section4 = get_field('section_4'); ?>
    <div class="home_s4-container container">
      <div class="home_s4-wrapper">
        <div class="home_s4-subcontainer">
          <img src="<?php echo $section4['icon']; ?>" class="home_s4-image">
          <div class="">
            <h3 class="heading-2 font-bold mb-24">
              <?php echo $section4['title']; ?>
            </h3>
            <p class="body-3 mb-24">
              <?php echo $section4['content']; ?>
            </p>
            <a href="<?php echo $section4['cta']['link']; ?>" class="cta h_animation ">
              <?php echo $section4['cta']['label']; ?>
            </a>
          </div>
        </div>
        <div class="home_s4-subcontainer">
          <?php $items = $section4['items']; ?>
          <div class="swiper mySwiper">

            <div class="swiper-top-wrapper">
              <div class="swiper-pagination"></div>
              <div class="swipper-btn-wrapper">
                <button class="swipper-btn swiper-previous-button">
                  <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" fill="none">
                    <path stroke="#560BAB" stroke-linecap="round" stroke-linejoin="round" d="M5 1 1 5l4 4" />
                  </svg>
                </button>
                <button class="swipper-btn swiper-next-button">

                  <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" fill="none">
                    <path stroke="#560BAB" stroke-linecap="round" stroke-linejoin="round" d="m1 9 4-4-4-4" />
                  </svg>
                </button>

              </div>
            </div>
            <div class="swiper-wrapper">
              <?php foreach ($items as $item): ?>
                <div class="swiper-slide">
                  <a target="_blank" href="<?php echo $item['link']; ?>" class="home_s4-item">
                    <img src="<?php echo $item['thumbnail']; ?>" class="home_s4-item-image">
                  </a>
                </div>
              <?php endforeach; ?>

            </div>

          </div>

        </div>
      </div>
    </div>
  </section>
  <section class="home_s5">
    <?php $section5 = get_field('section_5'); ?>
    <div class="container">
      <div class="home_s5-container">

        <h3 class="heading-2 font-bold mb-40 text-purple800 text-center mt-60">
          <?php echo $section5['title']; ?>
        </h3>
        <?php $items = $section5['items']; ?>

        <?php
        $secondItems = array_slice($items, 0, 2);
        $fifthItems = array_slice($items, 2, 3);
        $lastItems = array_slice($items, 5, 2);
        ; ?>

        <div class="home_s5-icon-container">
          <img src="<?php echo $section5['icon']; ?>" class="home_s5-icon">
        </div>
        <div class="home_s5-items-container">
          <!-- <img src="<?php echo get_template_directory_uri() . '/assets/images/home/visuel_background_color.png'; ?>"
            class="home_s5-image"> -->
          <div class="home_s5-items-wrapper">
            <?php foreach ($secondItems as $item): ?>
              <div class="home_s5-items">
                <img src="<?php echo $item['image']; ?>" alt="Jules Belamy" class="home_s5-item-image">
              </div>
            <?php endforeach; ?>
          </div>

          <div class="home_s5-items-wrapper">
            <?php foreach ($fifthItems as $item): ?>
              <div class="home_s5-items">
                <img src="<?php echo $item['image']; ?>" alt="Jules Belamy" class="home_s5-item-image">
              </div>
            <?php endforeach; ?>
          </div>
          <div class="home_s5-items-wrapper">
            <?php foreach ($lastItems as $item): ?>
              <div class="home_s5-items">
                <img src="<?php echo $item['image']; ?>" alt="Jules Belamy" class="home_s5-item-image">
              </div>
            <?php endforeach; ?>
          </div>

        </div>

        <a href="<?php echo $section5['cta']['link']; ?>" class="cta-button home_s5-cta">
          <?php echo $section5['cta']['label']; ?>
        </a>
      </div>
    </div>
  </section>
  <section class="home_s6">
    <?php $section6 = get_field('section_6'); ?>
    <div class="container">

      <h3 class="heading-2 font-bold mb-48 text-white">

        <?php echo $section6['title']; ?>
      </h3>
      <div class="home_s6-items-container">

        <?php $items = $section6['items']; ?>

        <div class="home_s6-rocket-container">
          <img src="<?php echo get_template_directory_uri() . '/assets/images/home/rocket1.svg'; ?>" class="">
        </div>
        <div class="home_s6-planet-container">
          <img src="<?php echo get_template_directory_uri() . '/assets/images/home/planet.svg'; ?>" class="">
        </div>
        <?php foreach ($items as $item): ?>
          <div class="home_s6-item">
            <div class="home_s6-item-image-container mb-24">
              <img src="<?php echo $item['image']; ?>" alt="Jules Belamy" class="home_s6-item-image">
            </div>
            <div class="home_s6-item-content"">
          <h4 class=" heading-3 font-bold">
              <?php echo $item['title']; ?>
              </h4>
              <p class="body-3 font-semibold mb-24">
                <?php echo $item['subtitle']; ?>
              </p>
              <p class="body-2 font-regular mb-48">
                <?php echo $item['content']; ?>
              </p>

              <a href="<?php echo $item['cta']['link']; ?>" class="cta home_s6-cta h_animation">
                <?php echo $item['cta']['label']; ?>
              </a>
            </div>
          </div>
        <?php endforeach; ?>

      </div>
    </div>

  </section>
  <section class="home_s7">
    <?php $section7 = get_field('section_7'); ?>
    <div class="home_s7-container container">
      <h3 class="heading-2 font-bold mb-48 text-purple800 text-center">
        <?php echo $section7['title']; ?>
      </h3>

      <?php

      // Fetch 3 last posts 
      $args = array(
        'post_type' => 'post',
        'posts_per_page' => 3,
        'order' => 'DESC',
        'orderby' => 'date'
      );

      $query = new WP_Query($args);

      $posts = $query->posts;
      ?>

      <div class="home_s7-items-container">
        <?php foreach ($posts as $post): ?>
          <?php $category = get_the_category($post->ID)[0]; ?>
          <?php
          $post_id = $post->ID;
          $post_reading_time = do_shortcode('[rt_reading_time post_id="' . $post->ID . '"]');
          ?>
          <article class="home_s7-item">
            <a href="<?= get_the_permalink($post->ID); ?>" class="home_s7-item-container">
              <div class="home_s7-item-image-container">
                <img src="<?= get_the_post_thumbnail_url($post->ID); ?>" alt="Jules Belamy" class="home_s7-item-image">
              </div>
              <div class="home_s7-item-content">

                <div class="flex items-center justify-between">
                  <p class="body-1 text-purple500 mb-8 home_s7-category">
                    <?= $category->name; ?>

                  </p>
                  <div class="flex items-center gap-8 mb-16">
                    <p class="body-1 text-purple800">
                      <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none">
                        <path stroke="#180835" stroke-linecap="round" stroke-linejoin="round"
                          d="M8.669 4v4l2.666 1.334m4-1.334A6.667 6.667 0 1 1 2.002 8a6.667 6.667 0 0 1 13.333 0Z" />
                      </svg>
                      <?= $post_reading_time; ?> min
                    </p>


                  </div>
                </div>

                <div class="home_s7-item-title-container mb-16">
                  <h4 class="home_s7-item-title  text-purple800">
                    <?= $post->post_title; ?>
                  </h4>


                  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="34" fill="none">
                    <path stroke="#180835" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                      d="m12.748 21.92 9.899-9.899m0 0h-9.9m9.9 0v9.9" />
                  </svg>
                </div>
                <p class="body-1 font-regular text-purple800 mb-24">
                  <?= get_the_excerpt($post->ID); ?>
                </p>

                <?php
                if (function_exists('kk_star_ratings')): ?>

                  <div class="home_s7-rating">
                    <?php echo kk_star_ratings($post_id); ?>
                  </div>
                <?php endif; ?>
              </div>
            </a>
          </article>
        <?php endforeach; ?>
      </div>
      <?php wp_reset_postdata(); ?>



    </div>
  </section>
  <section class="home_s8">


    <?php $section8 = get_field('section_8'); ?>

    <div class="container">
      <div class="home_s8-container">

        <div class="home_s8-subcontainer">
          <h3 class="heading-2 font-bold mb-48 text-purple800">
            <?php echo $section8['title']; ?>
          </h3>
          <p class="body-3 font-semibold mb-48">
            <?php echo $section8['content']; ?>
          </p>
          <div class="home_s8-form-container">
            <?php echo do_shortcode('[contact-form-7 id="3853804" title="HOME - Form Contact"]');
            ; ?>
          </div>
        </div>
        <div class="home_s8-subcontainer">
          <div class="home_s8-image-container">
            <img src="<?php echo $section8['image']; ?>" alt="Jules Belamy" class="home_s8-image">

          </div>
        </div>
      </div>
  </section>
</main>
<?php get_footer(); ?>