From 974d4a686375e4b8bc94aba11f14936cac236091 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 12 Dec 2024 17:52:16 +0100
Subject: [PATCH] website

---
 templates/layouts/action.html        |  2 +-
 templates/partials/action/video.html | 54 ++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 templates/partials/action/video.html

diff --git a/templates/layouts/action.html b/templates/layouts/action.html
index 871292406..cd4a085a2 100644
--- a/templates/layouts/action.html
+++ b/templates/layouts/action.html
@@ -1,6 +1,6 @@
 {% extends "_default/base.html" %}
 {% block content %}
-
+{% include "partials/action/video.html" %}
 {% include "partials/action/web4tools.html" %}
 {% include "partials/action/action.html" %}
 {% include "partials/home/cta.html" %}
diff --git a/templates/partials/action/video.html b/templates/partials/action/video.html
new file mode 100644
index 000000000..5a6942020
--- /dev/null
+++ b/templates/partials/action/video.html
@@ -0,0 +1,54 @@
+<div class="flex bg-transparent pt-16 pb-10 justify-center">
+    <div class="max-w-7xl p-8 mx-auto text-center">
+        <h2 class="fade-in text-pretty lg:text-6xl text-5xl leading-tight font-normal tracking-tight text-white">Join the Web4 Revolution</h2>
+        <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">
+            Join us on our journey to the decentralized internet. Watch the video below to learn more about our mission and products.
+        </p>
+        <!-- Embed YouTube Video -->
+        <div class="mt-8 flex justify-center">
+            <iframe width="800" height="450" src="https://www.youtube.com/embed/vK78zZT85_4?si=f8oP57g-i2zsnpi_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+        </div>
+        <!-- Embed YouTube Video -->
+        <div class="mt-16 fade-in flex items-center justify-center gap-x-6">
+            <a href="/signup" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Pre-register Now</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;
+    }
+  }
+
+  /* Ensure video is centered */
+  .flex.justify-center {
+    display: flex;
+    justify-content: center;
+  }
+</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>