Initial commit

templates/partials/action/hero.html

@@ -0,0 +1,83 @@
+<div class="flex bg-transparent">
+  <div class="max-w-2xl p-8 mx-auto text-center">
+      <p class="mx-auto mt-6 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
+          We believe actions are more important than words. <br>
+          This page is in black & white, 
+          to let YOU be the color of the future of the internet.
+      </p>
+
+      <h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
+          Web4
+      </h2>
+
+      <p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
+          Web4 opens the door for Machines & Humans to create together
+          a new form of Intelligence with respect for the Planet & People.
+      </p>
+
+      <h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
+          Augmented Collective Intelligence
+      </h2>
+
+      <p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
+          ThreeFold has been working on Web4 for more than 10 years,
+          ready to go public <span class="font-semibold">12.12.2024</span>
+      </p>
+
+      <h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
+          An Internet created by Everyone for Everyone
+      </h2>
+
+      <p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
+          The Internet is a Trillion USD business.
+          We want to make sure this Internet is built and owned by all of us.
+      </p>
+
+      <p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
+          Register for our online launch event 12-12-2024.
+      </p>
+
+      <h2 class="mt-12 text-balance font-semibold tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
+          When 3 Becomes 4
+      </h2>
+      <div class="mt-12 flex items-center justify-center gap-x-6">  
+          <a href="" class="fade-in fade-in-delay rounded-2xl bg-white px-8 py-2.5 text-base font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">
+              12.12.24
+          </a>
+      </div>
+  </div>
+</div>
+
+<style>
+
+  /* Fade-in animation */
+  .fade-in {
+            opacity: 0;
+            animation: fadeIn 1s ease-out forwards;
+        }
+
+        /* Fade-in keyframe */
+        @keyframes fadeIn {
+            0% {
+                opacity: 0;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+
+</style>
+
+<script>
+  // JavaScript to add 'visible' class after loading
+  window.addEventListener('DOMContentLoaded', () => {
+      const fadeInElements = document.querySelectorAll('.fade-in');
+      
+      fadeInElements.forEach((element, index) => {
+          // Adding a delay for each fade-in effect (increasing delay with index)
+          setTimeout(() => {
+              element.classList.add('visible');
+          }, index * 1000); // 1000ms delay between each element
+      });
+  });
+</script>