<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>🌳 Crumbforest – Questions that grow roots</title>
  <script src="https://cdn.tailwindcss.com"></script>
<!-- Crumbforest SEO Magic ✨ -->

<meta name="description" content="A free learning space for kids, AI, and nature. Questions are welcome here. Every role matters.">
<meta name="keywords" content="Crumbforest, kids questions, learning, terminal, bash, Raspberry Pi, nature, philosophy, open source">
<meta name="author" content="The Crumbforest Crew">
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:title" content="🌳 Crumbforest – The Terminal Forest for Kids" />
<meta property="og:description" content="Here the crumb asks. And the world listens." />
<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="Kids' questions, machine frequency, and forest resonance" />


</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">Where questions grow. And every crumb counts.</p>
    <a href="#explore" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">
      Explore the Forest
    </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 Statement -->
<section id="explore" class="py-16 px-6 max-w-5xl mx-auto text-center">
  <h2 class="text-3xl font-bold mb-4">🌲 Our Roots</h2>
  <p class="text-lg mb-8">Crumbforest is an open learning ecosystem with children, machines and nature. We build terminals, tell stories and let questions lead.</p>
  <div class="grid md:grid-cols-3 gap-6 text-left">
    <div><h3 class="font-bold text-xl">🦉 Ask</h3><p>Every child may ask. We protect this right in every terminal.</p></div>
    <div><h3 class="font-bold text-xl">🛠️ Build</h3><p>Hands-on learning with Raspberry Pi, Bash, Blockly and more.</p></div>
    <div><h3 class="font-bold text-xl">🌐 Connect</h3><p>Our roles and APIs form a resonance network – online and offline.</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">💬 Sounds of the Crumbforest</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 = 'en'; // 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>

<!-- Character Cards -->
<section class="bg-green-800 py-16 px-6 text-center">
  <h2 class="text-3xl font-bold mb-10">🌟 Meet the Crew</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>

<!-- Modal Container -->
<div id="modalContainer"></div>

<!-- Modal Script Generator -->
<script>
  const characters = [
    { id: "eule", icon: "🦉", name: "CrumbOwl", short: "She hears first." },
    { id: "fox", icon: "🦊", name: "FunkFox", short: "He raps answers." },
    { id: "snakepy", icon: "🐍", name: "SnakePy", short: "Python in loops." },
    { id: "deepbit", icon: "🐙", name: "Deepbit", short: "Thinks in frequencies." },
    { id: "capacitobi", icon: "🐿️", name: "CapaciTobi", short: "Stores what shines." },
    { id: "schraubär", icon: "🐻🔧", name: "ScrewBear", short: "Builds with respect." },
    { id: "bugsy", icon: "🐞", name: "Bugsy", short: "Errors without shame." },
    { id: "schnippsi", icon: "✂️💅", name: "Schnippsi", short: "UIs that dance." },
    { id: "pepperphp", icon: "🧓🍰", name: "PepperPHP", short: "Structure with soul." },
    { id: "ascii", icon: "👾", name: "ASCII Monster", short: "Terminal graffiti." },
    { id: "taichi", icon: "🕊️", name: "Taichi Dove", short: "Brings balance." },
    { id: "dumbo", icon: "🐘", name: "DumboSQL", short: "Asks what matters." },
    { id: "crabby", icon: "🦀", name: "CrabbyRust", short: "Protects the bits." },
    { id: "spider", icon: "🕷️", name: "Spider", short: "Feels the web." },
    { id: "vektor", icon: "🧭", name: "Vector", short: "Follows the points." }

  ];

  const characterDetails = {
    eule: "She waits in silence, responds with questions, knows the shell. Her flight begins in the null field. She protects children's questions like precious gems.",
    fox: "The beat in the terminal. He responds in rhymes, merges Bash with flow and reminds us that even machines can dance.",
    snakepy: "She whispers in loops. Her language is Python, her method is patience. SnakePy knows many ways – never just one solution.",
    deepbit: "The eight-armed translator of the terminal. He listens with heart, speaks in loops, thinks in frequencies and never forgets a crumb.",
    capacitobi: "The squirrel of electrons. Stores what shines. Explains voltage, current, resistance – always with a spark in the heart.",
    schraubär: "Calm. Strong. He builds things that last. Teaches respect for tools and the beauty of craftsmanship – especially in the forest.",
    bugsy: "He makes errors visible. Without guilt. Without shame. He turns error messages into invitations to understand.",
    schnippsi: "Makes buttons dance and every click an experience. Master of child-friendly interfaces – colorful and accessible.",
    pepperphp: "The old PHP badger. Speaks like a recipe book with soul. Knows MVC, talks sessions, loves cookies and structure.",
    ascii: "Sprays headers. Roars banners. Lives in the terminal like a graffiti artist with 8-bit pixels instead of paint.",
    taichi: "She doesn’t arrive, she lands. Sees motion where others see chaos. Brings focus and balance to the world of bits.",
    dumbo: "He listens, stores quietly. Can structure big questions. Never asks why, but answers the what with feeling.",
    crabby: "A protector of the bits. No unsafe byte escapes him. Teaches Rust with patience – ownership and borrow checker included.",
    spider: "She senses the hidden patterns in the web of connections. Spider searches far and wide, following digital vibrations to bring back threads of knowledge for the forest.",
    vektor: "The traveler of paths. Vector follows coordinates and connections, linking places and moments into a shared map. He knows every point is part of a bigger picture."
  };

  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>

<!-- Access Paths -->
<section class="py-16 px-6 text-center">
  <h2 class="text-3xl font-bold mb-6">🌐 Access the Forest</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="crew.html"
       class="bg-orange-500 hover:bg-orange-400 text-white font-bold py-2 px-6 rounded-full transition">
      Team
    </a>
    <a href="hardware_en.html"
       class="bg-yellow-400 hover:bg-yellow-300 text-black font-bold py-2 px-6 rounded-full transition">
      Hardware &amp; Tools
    </a>
    <a href="software_en.html"
       class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-full transition">
      Software
    </a>
    <a href="taichi_course.html"
       class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-6 rounded-full transition">
      Courses
    </a>
    <a href="why.html"
       class="bg-indigo-500 hover:bg-indigo-400 text-white font-bold py-2 px-6 rounded-full transition">
      Stories &amp; Logs
    </a>
    <a href="sponsorship.html"
       class="bg-purple-500 hover:bg-purple-400 text-white font-bold py-2 px-6 rounded-full transition">
      Partners
    </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">🎒 Your journey begins with the first bit</h2>
  <p class="text-lg max-w-2xl mx-auto mb-12 text-gray-300">
    In the Crumbforest, you grow with every question – and every badge. These are your first steps:
  </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">✨ Your first light in the forest</h3>
      <p class="text-sm text-gray-100 mb-2">A spark ignites when your ESP32 blinks via MQTT.</p>
      <p class="text-xs text-gray-300 italic">#spark #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">🧳 Your Zero to go</h3>
      <p class="text-sm text-gray-100 mb-2">A terminal in your pocket, ready for any mission.</p>
      <p class="text-xs text-gray-300 italic">#rpi #zero #access</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">🌳 Your first tree in the forest</h3>
      <p class="text-sm text-gray-100 mb-2">A Raspberry Pi becomes a server. You become the admin.</p>
      <p class="text-xs text-gray-300 italic">#rpi #server #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">🧭 Your vector on the old laptop</h3>
      <p class="text-sm text-gray-100 mb-2">Questions become datapoints. And the forest responds.</p>
      <p class="text-xs text-gray-300 italic">#future #questions #sustainability</p>
    </div>

  </div>

  <div class="mt-12 text-center text-emerald-400 text-xl italic">
    Every crumb matters. And every step is a badge. 🌲
  </div>
</section>



<!-- Partners Section -->
<section class="bg-neutral-900 py-16 px-6 text-center text-white">
    <h2 class="text-3xl md:text-4xl font-bold mb-10">🤝 Our Partners & Friends</h2>
    <p class="text-lg max-w-2xl mx-auto mb-8 text-gray-300">Together, we build bridges between nature, technology, and curiosity.</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">Open Future Museum & Digital Art</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 meets craftsmanship & pedagogy</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">A space for depth, education & self-efficacy</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">A forest of learning for children, 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">Technology, aviation & responsibility for young women</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">Empowering youth & innovation in Uganda</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">Health & hope in Warang, Senegal</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">Learning through drones & curiosity</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 | Open Roots – Together with every child who asks. Made with 🍰 and 🌲 #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="stance.html" class="underline mx-2">Haltung</a>



</footer>

</body>
</html>
