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

add hero page

Browse Source
This commit is contained in:
sasha-astiadi
2024-11-18 12:34:23 +01:00
parent fed4d13c22
commit 7929f73994
7 changed files with 155 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
templates/partials/why/timeline.html
View File

@@ -23,9 +23,9 @@
</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="flex items-center justify-between space-x-2 mb-1">
<div class="font-medium text-white">Phase I</div>
<div class="font-medium text-gray-200">Phase I</div>
</div>
<div class="font-semibold text-lg text-white mb-2">Creation of Core Technology</div>
<div class="font-semibold text-lg text-gray-200 mb-2">Creation of Core Technology</div>
<div class="text-gray-200 font-light">
10+ years of Development
<br>Built decentralized, autonomous, edge internet technology
@@ -43,9 +43,9 @@
</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="flex items-center justify-between space-x-2 mb-1">
<div class="font-medium text-white">Phase II</div>
<div class="font-medium text-gray-200">Phase II</div>
</div>
<div class="font-semibold text-lg text-white mb-2">Traction & Expansion</div>
<div class="font-semibold text-lg text-gray-200 mb-2">Traction & Expansion</div>
<div class="text-gray-200 font-light">
Open Source Development
<br>60+ Countries
@@ -69,7 +69,7 @@
<div class="font-medium text-white">Current Phase</div>
</div>
<div class="font-semibold text-lg text-white mb-2">ThreeFold Commercialization</div>
<div class="text-gray-200 font-light">
<div class="text-white font-light">
+1 Million Nodes
<br>Open Source Mode & Commercial Mode
<br>Version 3 (TFT) & Version 4 (INCA) 12.12.24

45
templates/partials/why/values.html Normal file
View File

@@ -0,0 +1,45 @@
<div class="bg-transparent pb-24 pt-32">
<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>