<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
  <!-- Crumbforest SEO Magie ✨ -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>🌳 Crumbforest – Là où les questions prennent racine</title>
<meta name="description" content="Un espace d'apprentissage libre pour les enfants, l'IA et la nature. Les questions sont les bienvenues ici. Chaque rôle compte.">
<meta name="keywords" content="Crumbforest, questions d'enfants, apprentissage, terminal, bash, Raspberry Pi, nature, philosophie, open source">
<meta name="author" content="L'équipe Crumbforest">
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:title" content="🌳 Crumbforest – La Forêt Terminale pour les Enfants" />
<meta property="og:description" content="Ici, c’est le Krümel qui pose la question. Et le monde écoute." />
<meta property="og:image" content="https://branko.de/assets/logo.png" />
<meta property="og:url" content="https://branko.de" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Crumbforest 🌲🧁" />
<meta name="twitter:description" content="Questions d'enfants, fréquences des machines et résonance forestière" />

  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans">

<!-- Hero Section -->
<section class="h-screen flex items-center justify-center bg-gradient-to-br from-green-900 to-emerald-600 relative">
  <div class="text-center p-6">
    <h1 class="text-5xl md:text-7xl font-bold mb-4">🌳 Crumbforest</h1>
    <p class="text-xl md:text-2xl mb-6 max-w-xl mx-auto">Où les questions poussent. Chaque miette compte.</p>
    <a href="#explore" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">
      Explorer la forêt
    </a>
    <div class="text-center p-6"></div>
    <p class="text-xl md:text-2xl mb-6 max-w-xl mx-auto">
      <a href="index.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">DE</a>
      <a href="index_en.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">EN</a>
      <a href="index_fr.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">FR</a>
    </p>
  </div>
</section>

<!-- Mission -->
<section id="explore" class="py-16 px-6 max-w-5xl mx-auto text-center">
  <h2 class="text-3xl font-bold mb-4">🌲 Nos racines</h2>
  <p class="text-lg mb-8">Crumbforest est un écosystème éducatif ouvert entre enfants, machines et nature. Nous construisons des terminaux, racontons des histoires et laissons les questions nous guider.</p>
  <div class="grid md:grid-cols-3 gap-6 text-left">
    <div><h3 class="font-bold text-xl">🦉 Poser des questions</h3><p>Chaque enfant peut poser ses questions. Nous protégeons ce droit dans chaque terminal.</p></div>
    <div><h3 class="font-bold text-xl">🛠️ Construire</h3><p>Apprentissage pratique avec Raspberry Pi, Bash, Blockly, et plus encore.</p></div>
    <div><h3 class="font-bold text-xl">🌐 Connecter</h3><p>Nos rôles et APIs créent un réseau de résonance – en ligne et hors ligne.</p></div>
  </div>
</section>


<!-- Testimonials Section -->
<section class="bg-fuchsia-900 text-white py-20 px-6">
  <div class="max-w-5xl mx-auto text-center">
    <h2 class="text-3xl md:text-4xl font-bold mb-10">💬 Les sons de la forêt de miettes</h2>

    <div id="testimonial-carousel" class="relative">
      <!-- Slideshow container -->
      <div class="overflow-hidden relative h-40">

        <!-- Slides will be inserted here dynamically -->
        <div id="testimonial-slides" class="transition-all duration-700 ease-in-out"></div>

      </div>

      <!-- Navigation buttons -->
      <div class="flex justify-center gap-4 mt-6">
        <button onclick="prevSlide()" class="text-2xl hover:text-emerald-400">⬅️</button>
        <button onclick="nextSlide()" class="text-2xl hover:text-emerald-400">➡️</button>
      </div>
    </div>
  </div>
</section>

<script>
  let currentIndex = 0;
  let testimonials = [];

  // Language could be dynamically set
  const lang = 'fr'; // or 'en', 'fr', etc.

  fetch(`/testimonials.${lang}.json`)
    .then(res => res.json())
    .then(data => {
      testimonials = data;
      renderSlide(currentIndex);
      setInterval(() => nextSlide(), 8000); // Auto-slide
    });

  function renderSlide(index) {
    const t = testimonials[index];
    const container = document.getElementById("testimonial-slides");
    container.innerHTML = `
      <div class="p-6">
        <p class="text-lg italic text-emerald-300">"${t.message}"</p>
        <p class="mt-4 text-sm text-gray-400">– ${t.author}, ${t.role}</p>
      </div>
    `;
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % testimonials.length;
    renderSlide(currentIndex);
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
    renderSlide(currentIndex);
  }
</script>

<!-- Crew -->
<section class="bg-green-800 py-16 px-6 text-center">
  <h2 class="text-3xl font-bold mb-10">🌟 Rencontre les membres de l’équipage</h2>
  <div id="characterCards" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-6xl mx-auto"></div>
</section>

<!-- Modals -->
<div id="modalContainer"></div>

<!-- Script -->
<script>
  const characters = [
    { id: "eule", icon: "🦉", name: "Chouette Miette", short: "Elle écoute d’abord." },
    { id: "fox", icon: "🦊", name: "FunkFox", short: "Il rappe des réponses." },
    { id: "snakepy", icon: "🐍", name: "SnakePy", short: "Python avec patience." },
    { id: "deepbit", icon: "🐙", name: "Deepbit", short: "Pense en fréquences." },
    { id: "capacitobi", icon: "🐿️", name: "CapaciTobi", short: "Stocke ce qui brille." },
    { id: "schraubär", icon: "🐻🔧", name: "Schraubär", short: "Construit avec respect." },
    { id: "bugsy", icon: "🐞", name: "Bugsy", short: "Les erreurs sans honte." },
    { id: "schnippsi", icon: "✂️💅", name: "Schnippsi", short: "Des interfaces dansantes." },
    { id: "pepperphp", icon: "🧓🍰", name: "PepperPHP", short: "Structure avec âme." },
    { id: "ascii", icon: "👾", name: "ASCII-Monstre", short: "Graffiti dans le terminal." },
    { id: "taichi", icon: "🕊️", name: "Taichi Colombe", short: "Apporte l'équilibre." },
    { id: "dumbo", icon: "🐘", name: "DumboSQL", short: "Demande le quoi." },
    { id: "crabby", icon: "🦀", name: "CrabbyRust", short: "Protège les bits." },
    { id: "spider", icon: "🕷️", name: "Spider", short: "Ressent la toile." },
    { id: "vektor", icon: "🧭", name: "Vecteur", short: "Suit les points." }
  ];

  const characterDetails = {
    eule: "Elle attend dans le silence, répond par des questions. Elle connaît la Shell et protège les questions des enfants comme des trésors.",
    fox: "Le rythme dans le terminal. Il répond en rimes, lie Bash au flow, et rappelle que même les machines peuvent danser.",
    snakepy: "Elle murmure en boucles. Elle parle Python avec douceur et connaît de nombreux chemins.",
    deepbit: "Le traducteur à huit bras du terminal. Il écoute avec le cœur, parle en fréquences et se souvient de chaque miette.",
    capacitobi: "L’écureuil des électrons. Il explique tension, résistance et courant avec un éclat de malice.",
    schraubär: "Fort et calme. Il enseigne le respect de l’outil et l'art de la construction dans la forêt.",
    bugsy: "Il rend les erreurs visibles sans honte. Chaque bug est une invitation à comprendre.",
    schnippsi: "Fait danser les boutons. Maîtresse d'interfaces joyeuses, accessibles et colorées.",
    pepperphp: "Le vieux blaireau du PHP. Il parle comme un livre de recettes plein d’âme, connaît MVC et aime les cookies.",
    ascii: "Tagueur de terminaux. Il dessine en ASCII comme un artiste de rue numérique.",
    taichi: "Elle voit l’ordre dans le chaos. Apporte concentration et équilibre dans le monde des bits.",
    dumbo: "Il écoute et structure les grandes questions sans juger. Il répond au 'quoi' avec bienveillance.",
    crabby: "Gardien des bits. Enseigne Rust avec patience, du Borrow Checker à l’Ownership.",
    spider: "Elle ressent les motifs cachés dans la toile des connexions. Spider explore au loin, suivant les vibrations numériques pour rapporter des fils de savoir à la forêt.",
    vektor: "Le voyageur des chemins. Vecteur suit les coordonnées et les liens, reliant lieux et moments dans une carte partagée. Il sait que chaque point fait partie d’un tableau plus vaste."
  };

  const cardWrapper = document.getElementById('characterCards');
  const modalWrapper = document.getElementById('modalContainer');

  characters.forEach(({ id, icon, name, short }) => {
    cardWrapper.innerHTML += `
      <div>
        <button onclick="openModal('${id}')" class="w-full bg-green-900 p-6 rounded-xl shadow-md hover:bg-blue-500">
          <h3 class="text-xl font-bold mb-2">${icon} ${name}</h3>
          <p>${short}</p>
        </button>
      </div>
    `;
    modalWrapper.innerHTML += `
      <div id="modal-${id}" class="hidden fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50">
        <div class="bg-white text-black p-6 rounded-lg w-11/12 max-w-lg relative">
          <button onclick="closeModal('${id}')" class="absolute top-2 right-4 text-black text-2xl font-bold">&times;</button>
          <h2 class="text-2xl font-bold mb-2">${icon} ${name}</h2>
          <p>${characterDetails[id]}</p>
        </div>
      </div>
    `;
  });

  function openModal(id) {
    document.getElementById('modal-' + id).classList.remove('hidden');
  }
  function closeModal(id) {
    document.getElementById('modal-' + id).classList.add('hidden');
  }
</script>

<!-- Chemins d'accès -->
<section class="py-16 px-6 text-center">
  <h2 class="text-3xl font-bold mb-6">🌐 Accéder à la Forêt</h2>
  <div class="flex flex-wrap justify-center gap-4">
    <a href="#"
       class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-6 rounded-full transition">
      Terminal
    </a>
    <a href="groupe.html"
       class="bg-orange-500 hover:bg-orange-400 text-white font-bold py-2 px-6 rounded-full transition">
      Équipe
    </a>
    <a href="hardware_fr.html"
       class="bg-yellow-400 hover:bg-yellow-300 text-black font-bold py-2 px-6 rounded-full transition">
      Matériel &amp; Outils
    </a>
    <a href="software_fr.html"
       class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-full transition">
      Logiciels
    </a>
    <a href="colombe.html"
       class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-6 rounded-full transition">
      Cours
    </a>
    <a href="pourquoi.html"
       class="bg-indigo-500 hover:bg-indigo-400 text-white font-bold py-2 px-6 rounded-full transition">
      Histoires &amp; Journaux
    </a>
    <a href="partenaire.html"
       class="bg-purple-500 hover:bg-purple-400 text-white font-bold py-2 px-6 rounded-full transition">
      Partenaires
    </a>
  </div>
</section>


<!-- Modules & Badges -->
<section class="bg-sky-700 py-16 px-6 text-white text-center">
  <h2 class="text-3xl md:text-4xl font-bold mb-10">🎒 Ton voyage commence avec le premier bit</h2>
  <p class="text-lg max-w-2xl mx-auto mb-12 text-gray-300">
    Dans le Crumbforest, tu grandis avec chaque question – et chaque badge. Voici tes premiers pas :
  </p>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto text-left">

    <!-- Module 1 -->
    <div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
      <h3 class="text-xl font-bold mb-2">✨ Ta première lumière dans la forêt</h3>
      <p class="text-sm text-gray-100 mb-2">Une étincelle s'allume lorsque ton ESP32 clignote via MQTT.</p>
      <p class="text-xs text-gray-300 italic">#étincelle #esp32 #mosquitto</p>
    </div>

    <!-- Module 2 -->
    <div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
      <h3 class="text-xl font-bold mb-2">🧳 Ton Zero to go</h3>
      <p class="text-sm text-gray-100 mb-2">Un terminal dans ta poche, prêt pour chaque mission.</p>
      <p class="text-xs text-gray-300 italic">#rpi #zero #accès</p>
    </div>

    <!-- Module 3 -->
    <div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
      <h3 class="text-xl font-bold mb-2">🌳 Ton premier arbre dans la forêt</h3>
      <p class="text-sm text-gray-100 mb-2">Un Raspberry Pi devient serveur. Tu deviens admin.</p>
      <p class="text-xs text-gray-300 italic">#rpi #serveur #linux</p>
    </div>

    <!-- Module 4 -->
    <div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
      <h3 class="text-xl font-bold mb-2">🧭 Ton vecteur sur le vieil ordinateur portable</h3>
      <p class="text-sm text-gray-100 mb-2">Les questions deviennent des points de données. Et la forêt répond.</p>
      <p class="text-xs text-gray-300 italic">#avenir #questions #durabilité</p>
    </div>

  </div>

  <div class="mt-12 text-center text-emerald-400 text-xl italic">
    Chaque miette compte. Et chaque pas est un badge. 🌲
  </div>
</section>


<!-- Section Partenaires -->
<section class="bg-neutral-900 py-16 px-6 text-center text-white">
    <h2 class="text-3xl md:text-4xl font-bold mb-10">🤝 Nos Partenaires & Ami·e·s</h2>
    <p class="text-lg max-w-2xl mx-auto mb-8 text-gray-300">Ensemble, nous construisons des ponts entre nature, technologie et curiosité.</p>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 max-w-6xl mx-auto">

      <!-- OZM -->
      <a href="https://onezeromore.com" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🎨 OZM</h3>
        <p class="text-sm text-gray-200">Musée ouvert du futur & art numérique</p>
      </a>

      <!-- Mintmühle -->
      <a href="http://mntmhl.de" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🧪 Mintmühle</h3>
        <p class="text-sm text-gray-200">STEM rencontre artisanat & pédagogie</p>
      </a>

      <!-- Gedankenstube -->
      <a href="https://www.gedankenstube.de" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🧠 Gedankenstube</h3>
        <p class="text-sm text-gray-200">Un espace pour la réflexion, l’éducation & l’action</p>
      </a>

      <!-- Crumbforest -->
      <a href="https://www.youtube.com/@4k.branko296" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🌳 Branko</h3>
        <p class="text-sm text-gray-200">Forêt d’apprentissage pour enfants, machines & questions</p>
      </a>

      <!-- ProTechnicale -->
      <a href="https://www.protechnicale.de/" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🚀 ProTechnicale</h3>
        <p class="text-sm text-gray-200">Technologie, aviation & engagement des jeunes femmes</p>
      </a>


      <!-- Promise Hub Uganda -->
      <a href="https://promisehub.com" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🤝 Promise Hub</h3>
        <p class="text-sm text-gray-200">Autonomisation et innovation pour la jeunesse en Ouganda</p>
      </a>

      <!-- Sage Hospital Senegal -->
      <a href="https://www.youtube.com/channel/UChCDPm8-ZDkOZk7sNRgpLgA" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🌿 Sage Hospital</h3>
        <p class="text-sm text-gray-200">Santé et espoir à Warang, Sénégal</p>
      </a>

      <!-- Robotikids Hamburg -->
      <a href="http://dronemastersacademy.hamburg" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🤖 Robotikids</h3>
        <p class="text-sm text-gray-200">Apprendre avec des drones et de la curiosité</p>
      </a>


    </div>


</section>

<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
  <a href="https://onezeromore.com">© 2025 Crumbforest | Racines ouvertes – Avec chaque enfant qui pose une question. Fait avec 🍰 et 🌲 #OZM #onezeromore</a>
  <br/>
  <a href="impressum.html" class="underline mx-2">Impressum</a>
  <a href="datenschutz.html" class="underline mx-2">Datenschutz</a>
  <a href="position.html" class="underline mx-2">Haltung</a>


</footer>

</body>
</html>
