<div class="bg-transparent pb-24 pt-24">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
        <div class="mx-auto flex max-w-xs flex-col gap-y-4">
          <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-black sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
            Open Source.
          </dd>
        </div>
        <div class="mx-auto flex max-w-xs flex-col gap-y-4">
          <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-black sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
            Authenticity.
          </dd>
        </div>
        <div class="mx-auto flex max-w-xs flex-col gap-y-4">
          <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-black sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
            Simplicity.
          </dd>
        </div>
      </dl>
    </div>
  </div>
  
  <script>
    // JavaScript to handle Intersection Observer
    document.addEventListener("DOMContentLoaded", () => {
      const elementsToObserve = document.querySelectorAll("[data-observer]");
      const observerOptions = {
        root: null, // Observes relative to the viewport
        threshold: 0.1, // Trigger when 10% of the element is visible
      };
  
      const observerCallback = (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("opacity-100"); // Make element fully visible
            observer.unobserve(entry.target); // Stop observing once it's visible
          }
        });
      };
  
      const observer = new IntersectionObserver(observerCallback, observerOptions);
      elementsToObserve.forEach((el) => observer.observe(el));
    });
  </script>
  