Compare commits
3 Commits
developmen
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 1b2c9e43b3 | |||
| 88d761c539 | |||
| 5ce0f8633c |
BIN
content/.DS_Store
vendored
BIN
content/.DS_Store
vendored
Binary file not shown.
@ -4,7 +4,7 @@ description: ""
|
||||
insert_anchor_links: "left"
|
||||
template: "partials/footer.html"
|
||||
extra:
|
||||
logoPath: "images/tf_logo.svg"
|
||||
logoPath: "images/odfz.svg"
|
||||
socialLinks: { Github: "https://github.com/ourworldfreezone", Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews" }
|
||||
---
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ description: ""
|
||||
insert_anchor_links: "left"
|
||||
template: "partials/header.html"
|
||||
extra:
|
||||
logoPath: "./images/tf_logo.svg"
|
||||
logoPath: "./images/odfz.svg"
|
||||
imgPath: ""
|
||||
---
|
||||
- [Home]("/")
|
||||
|
||||
@ -8,7 +8,6 @@ weight: 1
|
||||
---
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
This page is made by combining different 'block' (partial html pages) together.
|
||||
To edit the page content, please go to specific 'block' that you would like to edit.
|
||||
|
||||
@ -404,7 +404,3 @@ header #menu button a{
|
||||
px-0
|
||||
}
|
||||
|
||||
.bg-gradient-bl {
|
||||
background: rgb(0,166,255);
|
||||
background: linear-gradient(125deg, rgba(0,166,255,1) 0%, rgba(8,173,179,1) 100%);
|
||||
}
|
||||
@ -481,8 +481,3 @@ footer {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-gradient-bl {
|
||||
background: rgb(0,166,255);
|
||||
background: linear-gradient(125deg, rgba(0,166,255,1) 0%, rgba(8,173,179,1) 100%);
|
||||
}
|
||||
@ -3452,8 +3452,6 @@ details[open] > summary::after {
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bg-white\/10 {
|
||||
background-color: rgb(255 255 255 / 0.1);
|
||||
}
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
<svg width="537" height="386" viewBox="0 0 537 386" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.998" fill-rule="evenodd" clip-rule="evenodd" d="M65.6565 0.891113C208.868 83.5741 352.077 166.256 495.29 248.94C515.544 264.44 520.837 286.554 511.172 315.286C497.835 338.851 484.365 362.338 470.758 385.749C313.932 295.205 157.109 204.663 0.283689 114.12C22.0745 76.3773 43.8657 38.634 65.6565 0.891113Z" fill="#090909"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 446 B |
@ -1,3 +0,0 @@
|
||||
<svg width="401" height="309" viewBox="0 0 401 309" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.999" fill-rule="evenodd" clip-rule="evenodd" d="M400.933 193.604C378.771 231.99 356.609 270.375 334.447 308.76C223.135 244.494 111.823 180.228 0.510309 115.962C22.6722 77.5764 44.8339 39.1913 66.9958 0.805664C178.308 65.0718 289.62 129.338 400.933 193.604Z" fill="#090909"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 399 B |
@ -1,3 +0,0 @@
|
||||
<svg width="537" height="386" viewBox="0 0 537 386" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.999" fill-rule="evenodd" clip-rule="evenodd" d="M65.8405 0.54834C222.665 91.0912 379.489 181.633 536.315 272.177C522.777 295.626 509.238 319.074 495.7 342.523C474.659 366.198 452.124 372.246 428.099 360.67C285.555 278.373 143.011 196.075 0.467649 113.777C22.2585 76.0345 44.0496 38.2912 65.8405 0.54834Z" fill="#090909"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 446 B |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 277 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 497 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1014 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
@ -9,28 +9,10 @@ module.exports = {
|
||||
{
|
||||
pattern: /(pt|pb)-(0)/,
|
||||
variants: ['!', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'],
|
||||
},
|
||||
{
|
||||
pattern: /bg-teal-(50|100|200|300|400|500|600|700|800|900)/, // Added teal color safelist
|
||||
}
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
teal: {
|
||||
50: '#E0F2F1',
|
||||
100: '#B2DFDB',
|
||||
200: '#80CBC4',
|
||||
300: '#4DB6AC',
|
||||
400: '#26A69A',
|
||||
500: '#009688',
|
||||
600: '#00897B',
|
||||
700: '#00796B',
|
||||
800: '#00695C',
|
||||
900: '#004D40',
|
||||
}
|
||||
}
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
@ -4,10 +4,23 @@
|
||||
<!-- home page template, has a banner and rows of page summaries -->
|
||||
|
||||
{% include "partials/hero.html" %}
|
||||
{% include "partials/logos2.html" %}
|
||||
{% include "shortcodes/grid_stats.html" %}
|
||||
{% include "partials/features.html" %}
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
{% set page = get_page(path="home/index.md") %}
|
||||
{{page.content | safe}}
|
||||
</div>
|
||||
|
||||
{% include "partials/about1.html" %}
|
||||
|
||||
{% include "partials/about.html" %}
|
||||
|
||||
{% include "partials/feature.html" %}
|
||||
|
||||
{% include "partials/benefits.html" %}
|
||||
|
||||
{% include "partials/blogs.html" %}
|
||||
{% include "partials/presale.html" %}
|
||||
{% include "partials/faq.html" %}
|
||||
{% endblock content %}
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
</div>
|
||||
|
||||
{% include "partials/ventures/hero.html" %}
|
||||
{% include "partials/ventures/logos2.html" %}
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="relative isolate overflow-hidden bg-transparent lg:py-24 py-16">
|
||||
<div class="mx-auto max-w-7xl px-6 bg-transparent">
|
||||
<div class="relative isolate overflow-hidden bg-white lg:py-24 py-16">
|
||||
<div class="mx-auto max-w-7xl px-6 bg-white">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
||||
<h2 class="text-base font-semibold leading-8 text-blue-600">FEATURES</h2>
|
||||
<p class="mt-2 text-2xl font-bold tracking-tight text-black sm:text-4xl">🌍 Why Choose a Digital FreeZone</p>
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
<div class="bg-transparent pb-24">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="max-w-7xl lg:max-w-2xl text-left">
|
||||
<h2 class="text-xl font-normal tracking-wide text-indigo-600">THREEFOLD DIFFERENCE</h2>
|
||||
<p class="mt-4 text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-balance sm:text-5xl">A ground-up Approach</p>
|
||||
<p class="mt-6 mb-4 text-lg max-w-2xl font-light text-gray-700">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware). ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core bottlenecks: data, cloud, and network.</p>
|
||||
<a href="#" class="text-sm font-semibold text-indigo-700">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-x-8 sm:mt-16">
|
||||
<!-- Card 1 -->
|
||||
<div class="relative p-4 bg-white shadow-lg rounded-lg transform opacity-0 scale-95 transition-all duration-700 ease-out fade-in">
|
||||
<img class="h-70 w-full object-cover object-center rounded-t-lg" src="images/security.png" alt="">
|
||||
<div class="p-6">
|
||||
<h3 class="text-sm font-light text-indigo-600">SECURITY</h3>
|
||||
<p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Unbreakable Data</p>
|
||||
<p class="mt-2 text-sm font-light text-gray-600">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="relative p-4 bg-white shadow-lg rounded-lg transform opacity-0 scale-95 transition-all duration-700 ease-out fade-in">
|
||||
<img class="h-70 w-full object-cover object-center rounded-t-lg" src="images/efficiency.png" alt="">
|
||||
<div class="p-6">
|
||||
<h3 class="text-sm font-light text-indigo-600">EFFICIENCY</h3>
|
||||
<p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Autonomous Cloud</p>
|
||||
<p class="mt-2 text-sm font-light text-gray-600">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="relative p-4 bg-white shadow-lg rounded-lg transform opacity-0 scale-95 transition-all duration-700 ease-out fade-in">
|
||||
<img class="h-70 w-full object-cover object-center rounded-t-lg" src="images/map.png" alt="">
|
||||
<div class="p-6">
|
||||
<h3 class="text-sm font-light text-indigo-600">PRIVACY</h3>
|
||||
<p class="mt-2 text-lg font-medium tracking-tight text-gray-950">P2P Network</p>
|
||||
<p class="mt-2 text-sm font-light text-gray-600">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 1s forwards;
|
||||
}
|
||||
|
||||
.fade-in:nth-child(1) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.fade-in:nth-child(2) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.fade-in:nth-child(3) {
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
|
||||
/* Hover animation */
|
||||
.relative:hover {
|
||||
transform: scale(1.0);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="max-w-screen-2xl mx-auto lg:py-4 py-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col xl:flex-row xl:gap-4 items-center">
|
||||
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 mb-4 xl:col-span-1 text-center xl:text-left">
|
||||
<img class="lg:w-60 h-auto w-20 mx-auto" src="./images/tf_logo.svg" alt="logo" />
|
||||
<img class="lg:w-60 h-auto w-20 mx-auto" src="./images/odfz.svg" alt="logo" />
|
||||
</div>
|
||||
<p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 mb-4">
|
||||
© 2024 OurWorld Holdings, All rights reserved.
|
||||
|
||||
@ -10,12 +10,12 @@
|
||||
{% else %}
|
||||
<header id="header-container">
|
||||
{% set header_class = config.extra.header_class | default(value='') %}
|
||||
<div class="{{'z-10 bg-transparent fixed w-screen ' ~ header_class}}">
|
||||
<div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
|
||||
<div class="relative z-50 shadow">
|
||||
<div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
|
||||
<div>
|
||||
<a href="/" class="flex">
|
||||
<img class="w-60 h-auto sm:w-15" src="{{logo_path}}" alt="tf Logo" />
|
||||
<img class="w-56 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 lg:hidden">
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
<div class="relative bg-white py-24">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<div class="relative z-10 lg:w-full lg:max-w-2xl">
|
||||
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
|
||||
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
||||
<div class="relative isolate overflow-hidden h-screen bg-white">
|
||||
<div class="flex flex-col justify-center items-center mx-auto max-w-2xl py-32 lg:py-48 text-center h-full">
|
||||
<div class="text-center">
|
||||
<img src="./images/logo.svg"
|
||||
alt="Hero Image"
|
||||
width="210"
|
||||
height="210"
|
||||
class="mx-auto rounded-md">
|
||||
|
||||
<p class="text-base font-semibold leading-7 text-blue-600">WELCOME TO</p>
|
||||
<div class="max-w-4xl">
|
||||
<h1 class="mt-4 text-3xl lg:text-5xl font-bold leading-8 tracking-tight text-black mb-4">OurWorld Digital Freezone</h1>
|
||||
</div>
|
||||
<div class="relative px-6 lg:px-8 lg:pr-0">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl animate-fade-up">
|
||||
<h1 class="text-pretty lg:text-6xl text-4xl font-semibold tracking-tight text-gray-900 animate-fade-up">Self-Healing Data, Network, and Cloud Platform</h1>
|
||||
<p class="mt-8 text-pretty text-lg font-light text-gray-700 sm:text-xl/8 animate-fade-up">Imagine a system which can scale to a planetary level, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, provides 100% uptime, and allows any machine and human to communicate over the shortest, most direct path.</p>
|
||||
<div class="mt-10 flex items-center gap-x-6 animate-fade-up">
|
||||
<a href="#" class="rounded-xl bg-black px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">Host</a>
|
||||
<a href="#" class="rounded-xl bg-blue-700 px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Deploy</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||
<p class="mt-6 text-lg sm:text-xl leading-7 sm:leading-8 text-gray-600 font-light mx-4 sm:mx-0">ODFZ OurWorld Digital FreeZone is a collaboration between the Government of Zanzibar and OurWorld Venture Creator. We are the world's first 100% digital free zone, accessible and affordable for all. Removing complexity from doing business.</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="/about" class="rounded-xl bg-blue-700 px-4 py-2.5 font-semibold text-white shadow-sm hover:bg-blue-800 hover:text-blue-200 transition-colors duration-300">
|
||||
Get Started
|
||||
</a>
|
||||
|
||||
<a href="/about" class="rounded-xl border border-gray-800 px-4 py-2.5 font-medium text-gray-900 bg-transparent shadow-sm hover:bg-blue-700 hover:text-blue-700 transition-all duration-300">
|
||||
Learn More →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 animate-fade-in">
|
||||
<img class="aspect-[3/2] lg:mt-0 mt-12 lg:p-10 p-0 w-auto lg:absolute lg:inset-0 lg:aspect-auto" src="/images/tf3.gif" alt="">
|
||||
<div class="absolute inset-x-0 -bottom-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-bottom-80" aria-hidden="true">
|
||||
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
@ -31,53 +31,26 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Background gradient */
|
||||
.bg-gradient-bl {
|
||||
background: linear-gradient(125deg, rgba(0, 166, 255, 1) 0%, rgba(8, 173, 179, 1) 100%);
|
||||
.relative.isolate.overflow-hidden.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Fade-up animation for text */
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fade-in animation for the image (GIF) */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply fade-up animation to text */
|
||||
.animate-fade-up {
|
||||
animation: fadeUp 1.5s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Apply fade-in animation to the GIF */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 2s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Responsive styles for smaller screens */
|
||||
/* Custom styles for smaller font, margin adjustments, and line spacing for mobile */
|
||||
@media (max-width: 640px) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
font-size: 2rem; /* Smaller font for mobile */
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25rem; /* Smaller font for mobile */
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
line-height: 1.5;
|
||||
font-size: 1rem; /* Smaller font for mobile */
|
||||
margin-left: 1rem; /* Margin left for mobile */
|
||||
margin-right: 1rem; /* Margin right for mobile */
|
||||
line-height: 1.5; /* Smaller line spacing */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="bg-white my-24 fixed w-screen">
|
||||
<div class="bg-white py-4 lg:py-10 fixed w-screen">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6 items-center">
|
||||
<img class="max-h-12 w-full object-contain" src="images/brand1.png" alt="Brand 1">
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
<div class="bg-transparent lg:py-24 py-10 overflow-hidden">
|
||||
<div class="flex space-x-8 animate-scroll">
|
||||
<!-- First set of logos -->
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/ict.png" alt="Reform">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/znz.png" alt="Tuple">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/social.png" alt="SavvyCal">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/holo.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/freezone.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/vverse.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/veverse.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/zictia.png" alt="Statamic">
|
||||
|
||||
<!-- Duplicate set of logos to create the endless effect -->
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/ict.png" alt="Reform">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/znz.png" alt="Tuple">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/social.png" alt="SavvyCal">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/holo.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/freezone.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/vverse.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/veverse.png" alt="Statamic">
|
||||
<img class="max-h-12 w-auto object-contain" src="images/logos/zictia.png" alt="Statamic">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Keyframe animation for slow horizontal scrolling */
|
||||
@keyframes scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
/* Apply the animation */
|
||||
.animate-scroll {
|
||||
display: flex;
|
||||
animation: scroll 25s linear infinite;
|
||||
gap: 2rem;
|
||||
width: max-content;
|
||||
}
|
||||
</style>
|
||||
@ -1,156 +1,78 @@
|
||||
|
||||
<section class="px-2 py-24 bg-transparent lg:py-54">
|
||||
<div class="mx-auto max-w-3xl sm:text-center">
|
||||
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
|
||||
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
||||
</div>
|
||||
<h2 class="text-xl text-center font-normal tracking-wide text-indigo-600">LIVE AND OPERATIONAL</h2>
|
||||
<p class="mt-4 text-center text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-balance sm:text-5xl">Proven by a Global Community</p>
|
||||
<p class="mt-6 text-lg text-center font-light text-gray-700">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017. Version 3.14 is live on Mainnet</p>
|
||||
</div>
|
||||
<div class="relative mx-auto mt-10">
|
||||
<div class="text-center rounded lg:px-6 mx-auto">
|
||||
<div class="items block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
|
||||
<!-- capacity -->
|
||||
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
|
||||
<span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid. 1 petabyte equals roughly 1 million gigabytes.</span>
|
||||
<img class="mx-auto p-4 fade-image" src="images/V3-081.png" width="130" alt="">
|
||||
<div id="capacity" class="leading-none font-extrabold text-xl">19.10 PB</div>
|
||||
<span class="block text-md mt-1 font-normal capitalize">Capacity</span>
|
||||
</div>
|
||||
<!-- cores -->
|
||||
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
|
||||
<span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
|
||||
<img class="mx-auto p-4 fade-image" src="images/V3-112.png" width="130" alt="">
|
||||
<div id="cores" class="leading-none font-extrabold text-xl">46,934</div>
|
||||
<span class="block text-md mt-2 font-normal capitalize">Cores</span>
|
||||
</div>
|
||||
<!-- Nodes -->
|
||||
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
|
||||
<span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
|
||||
<img class="mx-auto p-4 fade-image" src="images/V3-091.png" width="130" alt="">
|
||||
<div id="nodes" class="leading-none font-extrabold text-xl">1596</div>
|
||||
<span class="block text-md mt-2 font-normal capitalize">Nodes</span>
|
||||
</div>
|
||||
<!-- countries -->
|
||||
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
|
||||
<span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
|
||||
<img class="mx-auto p-4 fade-image" src="images/V3-102.png" width="130" alt="">
|
||||
<div id="countries" class="leading-none font-extrabold text-xl">41</div>
|
||||
<span class="block text-md mt-2 font-normal capitalize">Countries</span>
|
||||
</div>
|
||||
<!-- farms -->
|
||||
<div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
|
||||
<span class="tooltiptext">The total number of farms on the grid. A farm is one or more nodes operated by the same entity / entities.</span>
|
||||
<img class="mx-auto p-4 fade-image" src="images/v3-131.png" width="130" alt="">
|
||||
<div id="farms" class="leading-none font-extrabold text-xl">900+</div>
|
||||
<span class="block text-md mt-2 font-normal capitalize">Farms</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 flex items-center justify-center gap-x-6 mb-24">
|
||||
<a href="#" class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Explore Grid Capacity</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 -bottom-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-bottom-80" aria-hidden="true">
|
||||
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% set styles = "background-image: url('/images/ston_bg.png');" %}
|
||||
{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
|
||||
{% if data %}
|
||||
{% set capacity = data.totalHru + data.totalSru / (1024 * 1024 * 1024 * 1024) %}
|
||||
{% set nodes = data.nodes %}
|
||||
{% set countries = data.countries %}
|
||||
{% endif %}
|
||||
<style>
|
||||
dd {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
line-height: 100px;
|
||||
.bg-map {
|
||||
background-color: #EAE8E3;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #70dfc9;
|
||||
}
|
||||
|
||||
.bg-pink {
|
||||
background-color: #ea1ff7;
|
||||
}
|
||||
|
||||
.blue_b{
|
||||
|
||||
background-color:#2E83FF !important;
|
||||
color: #fff !important;
|
||||
|
||||
}
|
||||
.blue_b a{
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.blue_b:hover {
|
||||
background-color:#5596f5 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Tooltip container */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
font-size: 14px;
|
||||
visibility: hidden;
|
||||
width: 250px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-weight: 200;
|
||||
|
||||
/* Position the tooltip text - see examples below! */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -50px;
|
||||
right: -60px;
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.tooltip .tooltiptext {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -50px;
|
||||
right: 0px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0%, 100% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fade-image {
|
||||
animation: fade 3s infinite;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bg-map pb-24">
|
||||
<div class="relative max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 ">
|
||||
<div class=" overflow-hidden">
|
||||
<div class="px-2 py-16">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/images/node_icon.png" width="65" alt="">
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1 pt-3">
|
||||
<dl>
|
||||
<dd class="flex items-baseline mb-5 ">
|
||||
<div class="text-6xl advance leading-8 font-extrabold text-gray-900">
|
||||
{{ nodes }}
|
||||
</div>
|
||||
</dd>
|
||||
<dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
|
||||
freeflow nodes <br />deployed
|
||||
</dt>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" overflow-hidden bg-no-repeat bg-center bg-contain text-center" style="{{styles}}">
|
||||
<div class="px-2 py-16">
|
||||
<div class="flex items-start">
|
||||
<div class="ml-5 w-0 flex-1 pt-3">
|
||||
<dl>
|
||||
<dd class="flex items-baseline mb-5 ">
|
||||
<div class="text-6xl advance leading-8 mx-auto font-extrabold text-gray-900">
|
||||
{{ countries }}
|
||||
</div>
|
||||
</dd>
|
||||
<dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
|
||||
countries <br />involved
|
||||
</dt>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" overflow-hidden">
|
||||
<div class="px-2 py-16">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/images/capacity_icon.png" width="65" alt="">
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1 pt-3">
|
||||
<dl>
|
||||
<dd class="flex items-baseline mb-5 ">
|
||||
<div class="text-6xl advance leading-8 font-extrabold text-gray-900">
|
||||
{{ capacity | round() }}TB
|
||||
</div>
|
||||
</dd>
|
||||
<dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
|
||||
capacity <br />generated
|
||||
</dt>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,82 +0,0 @@
|
||||
{% set styles = "background-image: url('V3.png');" %}
|
||||
{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
|
||||
{% if data %}
|
||||
{% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
|
||||
{% set nodes = data.nodes %}
|
||||
{% set countries = data.countries %}
|
||||
{% set cores = data.totalCru %}
|
||||
{% endif %}
|
||||
|
||||
{% if data %}
|
||||
<section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
|
||||
<div class="relative lg:max-w-6xl mx-auto">
|
||||
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
|
||||
{{body | markdown | safe }}
|
||||
|
||||
<div class="my-10 grid lg:grid-cols-4 lg:gap-8">
|
||||
|
||||
|
||||
<!-- capacity -->
|
||||
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
|
||||
<img class="mx-auto p-4" src="V3-08.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ capacity | round(precision=2) }}PB
|
||||
<span class="block text-lg mt-4 font-normal capitalize">capacity</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Nodes -->
|
||||
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
|
||||
<img class="mx-auto p-4" src="V3-09.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ nodes }}
|
||||
<span class="block text-lg mt-4 font-normal capitalize">nodes</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- countries -->
|
||||
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
|
||||
<img class="mx-auto p-4" src="V3-10.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ countries }}
|
||||
<span class="block text-lg mt-4 font-normal capitalize">countries</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- cores -->
|
||||
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
|
||||
<img class="mx-auto p-4" src="V3-11.png" width="150" alt="">
|
||||
<div class="leading-none font-extrabold text-3xl">
|
||||
{{ cores | num_format }}
|
||||
<span class="block text-lg mt-4 font-normal capitalize">cores</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<button><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/">Explore Grid Capacity</a></button>
|
||||
<button><a href="/host">Become a Host</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
<style>
|
||||
dd {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #70dfc9;
|
||||
}
|
||||
|
||||
.bg-pink {
|
||||
background-color: #ea1ff7;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user