Initial commit

templates/partials/why/values.html

@@ -0,0 +1,45 @@
+<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-white 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-white 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-white 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>
+