ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit video

Browse Source
This commit is contained in:
sasha-astiadi
2024-12-12 19:30:50 +01:00
parent aa4b821162
commit ce5c242a6b
2 changed files with 47 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
templates/partials/action/video.html
View File

@@ -1,16 +1,28 @@
<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>
<div class="lg:max-w-7xl max-w-2xl p-8 mx-auto text-center">
<!-- Main Heading -->
<h2 class="fade-in text-pretty lg:text-6xl text-4xl leading-tight font-normal tracking-tight text-white">
Join the Web4 Revolution
</h2>
<!-- Subtext -->
<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>
<br>
<!-- 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>
<iframe width="800" height="450" src="https://www.youtube.com/embed/64mbEewI0Ag?si=I0m_ShxlTUk3mok-" 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>
<!-- Call to Action Button -->
<div class="mt-12 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>
@@ -32,11 +44,38 @@
}
}
/* Ensure video is centered */
/* Responsive iframe for YouTube video */
.responsive-iframe {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
position: relative;
border: none;
}
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Ensure content aligns properly */
.flex.justify-center {
display: flex;
justify-content: center;
}
/* Style for the button */
.blinking-effect {
animation: blink 1.5s step-start infinite;
}
@keyframes blink {
50% {
opacity: 0.5;
}
}
</style>
<script>

2
templates/partials/action/web4tools.html
View File

@@ -1,6 +1,6 @@
<div class="overflow-hidden bg-transparent py-16 lg:py-24">
<div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<div class="mx-auto max-w-2xl px-6 lg:max-w-6xl lg:px-8">
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Discover ThreeFold's Web4 Products for a Smarter, Secure Future</h2>
<p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>