index.html

---
layout: default
hero:
  autoplay_ms: 5000
  slides:
    - image: /images/hero/hero1.png
      title: "Experiential Learning at Scale"
      subtitle: "Find Real-scale experiences for real-world skill development"
      link: /articles/
      cta: "Dive into our Experiential Learning Knowledge Database"

    - image: /images/hero/hero2.png
      title: "High Definition Simulation Environments for learning and research"
      subtitle: "Build complex systems to life with open-source simulation software"
      link: /solutions/
      cta: "Find Open Source Digital Solutions"

    - image: /images/hero/hero3.png
      title: "Cross Experiential Simulations"
      subtitle: "Visualize Experiential Simulations into one Place"
      link: /microverse/
      cta: "Dive into PractiCity Microverse"

    - image: /images/hero/hero4.png
      title: "PractiCity Universal Live Simulation Event-Drivent Schema "
      subtitle: "Discover PULSES, the new interoperability simulation standard (release 1.0 : 26 may 2026)"
      link: /developers/
      cta: "I am a developer, what's up ?"


---

{% if page.hero.slides and page.hero.slides.size > 0 %}
<!-- ===== Hero Banner Carousel ===== -->
<div class="hero-carousel" id="heroCarousel"
     aria-label="Hero banner"
     aria-roledescription="carousel">

  <div class="hero-track" id="heroTrack">
    {% for slide in page.hero.slides %}
    <div class="hero-slide{% if forloop.first %} active{% endif %}"
         role="group"
         aria-roledescription="slide"
         aria-label="{{ forloop.index }} of {{ forloop.length }}"
         style="background-image: url('{{ slide.image | relative_url }}');">
      <div class="hero-overlay"></div>
      <div class="hero-caption">
        {% if slide.title %}<h2 class="hero-title">{{ slide.title }}</h2>{% endif %}
        {% if slide.subtitle %}<p class="hero-subtitle">{{ slide.subtitle }}</p>{% endif %}
        {% if slide.link %}
        <a href="{{ slide.link | relative_url }}" class="hero-cta">
          {{ slide.cta | default: "Learn more" }}
        </a>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- Dot indicators -->
  <div class="hero-dots" role="tablist" aria-label="Slides">
    {% for slide in page.hero.slides %}
    <button class="hero-dot{% if forloop.first %} active{% endif %}"
            role="tab"
            aria-label="Go to slide {{ forloop.index }}"
            onclick="heroGo({{ forloop.index | minus: 1 }})"></button>
    {% endfor %}
  </div>
</div>

<script>
(function () {
  var total   = {{ page.hero.slides.size }};
  var current = 0;
  var timer   = null;
  var ms      = {{ page.hero.autoplay_ms | default: 5000 }};

  function update(next) {
    var slides = document.querySelectorAll('.hero-slide');
    var dots   = document.querySelectorAll('.hero-dot');
    slides[current].classList.remove('active');
    dots[current].classList.remove('active');
    current = (next + total) % total;
    slides[current].classList.add('active');
    dots[current].classList.add('active');
  }

  window.heroMove = function (dir) { resetTimer(); update(current + dir); };
  window.heroGo   = function (idx) { resetTimer(); update(idx); };

  function resetTimer() {
    if (timer) clearInterval(timer);
    if (ms > 0) timer = setInterval(function () { update(current + 1); }, ms);
  }

  var el = document.getElementById('heroCarousel');
  if (el) {
    el.addEventListener('mouseenter', function () { if (timer) clearInterval(timer); });
    el.addEventListener('mouseleave', resetTimer);
  }

  document.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowLeft')  heroMove(-1);
    if (e.key === 'ArrowRight') heroMove(1);
  });

  if (ms > 0 && total > 1) resetTimer();
})();
</script>
{% endif %}

<!-- ===== Homepage content ===== -->
<div class="hp-sections">

  <!-- Latest News -->
  <section class="hp-section">
    <div class="hp-section-header">
      <h2>Latest News</h2>
      <a href="{{ site.baseurl }}/posts/">See all &rarr;</a>
    </div>
    <div class="hp-grid">
      {% assign recent_posts = site.posts | slice: 0, 4 %}
      {% for post in recent_posts %}
      <a class="hp-card" href="{{ post.url | relative_url }}">
        <div class="hp-card-thumb">
          {% if post.screenshot1 %}
          <img src="{{ post.screenshot1 | relative_url }}" alt="{{ post.title }}">
          {% else %}
          <div class="hp-card-placeholder"></div>
          {% endif %}
        </div>
        <p class="hp-card-title">{{ post.title }}</p>
        <div class="hp-card-meta">
          {% if post.date %}<span class="hp-card-date">{{ post.date | date: "%b %-d, %Y" }}</span>{% endif %}
          {% if post.contributor_id %}{% assign _contrib = site.contributors | where: "contributor_id", post.contributor_id | first %}<span class="author-pill">{{ _contrib.title | default: post.contributor_id }}</span>{% endif %}
        </div>
      </a>
      {% endfor %}
    </div>
  </section>

  <!-- Latest Articles -->
  <section class="hp-section">
    <div class="hp-section-header">
      <h2>Latest Articles</h2>
      <a href="{{ site.baseurl }}/articles/">See all &rarr;</a>
    </div>
    <div class="hp-grid">
      {% assign recent_articles = site.articles | slice: 0, 4 %}
      {% for item in recent_articles %}
      <a class="hp-card" href="{{ item.url | relative_url }}">
        <div class="hp-card-thumb">
          {% if item.screenshot1 %}
          <img src="{{ item.screenshot1 | relative_url }}" alt="{{ item.title }}">
          {% else %}
          <div class="hp-card-placeholder"></div>
          {% endif %}
        </div>
        <p class="hp-card-title">{{ item.title }}</p>
        <div class="hp-card-meta">
          {% if item.created_on %}<span class="hp-card-date">{{ item.created_on }}</span>{% endif %}
          {% if item.contributor_id %}{% assign _contrib = site.contributors | where: "contributor_id", item.contributor_id | first %}<span class="author-pill">{{ _contrib.title | default: item.contributor_id }}</span>{% endif %}
        </div>
      </a>
      {% endfor %}
    </div>
  </section>

  <!-- Latest Solutions -->
  <section class="hp-section">
    <div class="hp-section-header">
      <h2>Latest Solutions</h2>
      <a href="{{ site.baseurl }}/solutions/">See all &rarr;</a>
    </div>
    <div class="hp-grid">
      {% assign recent_solutions = site.solutions | slice: 0, 4 %}
      {% for item in recent_solutions %}
      <a class="hp-card" href="{{ item.url | relative_url }}">
        <div class="hp-card-thumb">
          {% if item.screenshot1 %}
          <img src="{{ item.screenshot1 | relative_url }}" alt="{{ item.title }}">
          {% else %}
          <div class="hp-card-placeholder"></div>
          {% endif %}
        </div>
        <p class="hp-card-title">{{ item.title }}</p>
        <div class="hp-card-meta">
          {% if item.last_survey %}<span class="hp-card-date">{{ item.last_survey }}</span>{% endif %}
          {% if item.contributor_id %}{% assign _contrib = site.contributors | where: "contributor_id", item.contributor_id | first %}<span class="author-pill">{{ _contrib.title | default: item.contributor_id }}</span>{% endif %}
        </div>
      </a>
      {% endfor %}
    </div>
  </section>

</div>