Initial commit

templates/partials/action/action.html

@@ -0,0 +1,90 @@
+<div class="relative isolate overflow-hidden bg-transparent text-white pt-12 pb-24">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="relative grid lg:grid-cols-12 lg:gap-8">
+            <!-- Left Content -->
+            <div class="lg:col-span-7">
+                <div class="mx-auto max-w-2xl lg:mx-0">
+                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">When 3 Becomes 4</h1>
+                    <p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
+                      The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all. <br><br>
+                    Web4 represents the natural evolution of the internet, enabling humans and machines to collaborate in creating a new form of intelligence that respects both the planet and the people.<br><br>
+                    For over a decade, ThreeFold has been dedicated to realizing this vision. Now is time for our next chapter.</span>
+                    </p>
+                </div>
+            </div>
+
+           <!-- Right Blockquote -->
+           <div class="lg:col-span-5">
+            <figure class=" mt-6 pl-8">
+                <blockquote class=" text-2xl text-white fade-in font-semibold ">
+                    <p class="lg:text-2xl text-xl leading-normal text-white font-semibold">We believe actions are more important than words. <br><br>
+                        This page is in black & white, to let YOU be the <span style="color: red;">color</span> of the future of the internet.
+                    </p>
+                </blockquote>
+                <br> 
+                <a href="/signup" target="_blank" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take the Next Step</a>                               
+            </figure>
+        </div>
+    </div>
+</div>
+</div>
+
+
+
+
+
+<style>
+ /* Apply the blinking animation to the link */
+ .blinking-effect {
+  animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes blink {
+0% {
+  opacity: 1;
+}
+50% {
+  opacity: 0.4;
+}
+100% {
+  opacity: 1;
+}
+}
+
+blockquote {
+  border-left-width: 2px;
+  padding-left: 1rem;
+}
+
+.blockquote::before {
+    content: open-quote;
+    font-size: 4rem;
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    color: #ffffff;
+}
+
+.inline-flex {
+display: flex;
+align-items: center;
+}
+
+.items-center {
+justify-content: center;
+}
+
+.gap-2 {
+gap: 0.5rem; /* Adjust the gap size as needed */
+}
+
+</style>