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

Merge branch 'development_sasha' of https://github.com/threefoldfoundation/www_threefold_io into development_sasha

Browse Source
This commit is contained in:
sasha-astiadi
2024-11-22 12:51:57 +01:00
parent e864d67dd3 ca1caff1c0
commit 50d84392d6
474 changed files with 974 additions and 810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
templates/layouts/what.html Normal file
View File

@@ -0,0 +1,8 @@
{% extends "_default/base.html" %}
{% block content %}
{% include "partials/what/hero.html" %}
{% include "partials/what/what.html" %}
{% include "partials/what/portfolio.html" %}
{% include "partials/home/cta.html" %}
{% endblock content %}

3
templates/layouts/why.html
View File

@@ -7,7 +7,6 @@
{% include "partials/why/matters.html" %}
{% include "partials/why/values.html" %}
{% include "partials/why/team.html" %}
{% include "partials/why/impact.html" %}
{% include "partials/home/cta.html" %}
{% endblock content %}

11
templates/partials/action/action.html
View File

@@ -16,10 +16,10 @@
<!-- Right Blockquote -->
<div class="lg:col-span-5">
<figure class=" mt-6 pl-8">
<blockquote class=" text-2xl text-white fade-in font-semibold">
<figure class=" mt-6 pl-8">
<blockquote class=" text-2xl text-white fade-in font-semibold ">
<p class="text-2xl 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 color of the future of the internet.
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>
@@ -70,6 +70,11 @@
}
}
blockquote {
border-left-width: 2px;
padding-left: 1rem;
}
.blockquote::before {
content: open-quote;
font-size: 4rem;

28
templates/partials/action/announcements.html
View File

@@ -1,26 +1,26 @@
<div class="bg-transparent fade-in pb-24 flex items-center justify-center min-h-screen">
<div class="bg-transparent fade-in pb-24 flex items-center justify-center">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-7xl items-center text-center">
<p class="fade-in mx-auto mb-12 text-pretty lg:text-4xl text-3xl font-medium text-gray-200">All Things Web 4</p>
<p class="fade-in mx-auto mb-12 text-pretty lg:text-4xl text-3xl font-medium text-gray-200">Announcements: What's Coming Soon</p>
</div>
<div class="-mx-6 grid grid-cols-2 gap-2 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-3">
<div class="grid-item bg-white/5 p-6 sm:p-10">
<h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Infrastructure</h2>
<div class="grid-item bg-white/5 p-2 lg:p-12">
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">A Roadmap to <br>Web 4</h2>
</div>
<div class="grid-item bg-white/5 p-6 sm:p-10">
<h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Phone & Routers</h2>
<div class="grid-item bg-white/5 p-2 lg:p-12">
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web 4 <br>Phone</h2>
</div>
<div class="grid-item bg-white/5 p-6 sm:p-10">
<h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Human + Machine Agents</h2>
<div class="grid-item bg-white/5 p-2 lg:p-12">
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web 4 <br>Router</h2>
</div>
<div class="grid-item bg-white/5 p-6 sm:p-10">
<h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Sovereign Digital Economic Zone</h2>
<div class="grid-item bg-white/5 p-2 lg:p-12">
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web 4 <br>Node</h2>
</div>
<div class="grid-item bg-white/5 p-6 sm:p-10">
<h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Dev Tools</h2>
<div class="grid-item bg-white/5 p-2 lg:p-12">
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web 4 <br>Developement Platform</h2>
</div>
<div class="grid-item bg-white/5 p-6 sm:p-10">
<h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Digital Currency</h2>
<div class="grid-item bg-white/5 p-2 lg:p-12">
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web 4 <br>Digital Currency</h2>
</div>
</div>
</div>

8
templates/partials/action/banner.html
View File

@@ -1,12 +1,12 @@
<div class="pt-16 bg-transparent h-screen flex flex-col justify-start items-center">
<div>
<div class="h-screen flex flex-col justify-center items-center ">
<div class="">
<img
class="object-contain w-[100%] max-w-[100%]"
class="mx-auto"
src="/images/mycel2.gif"
alt="TF">
</div>
<div class="text-center">
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">Save the Date</h2>
<p class="fade-in mx-auto mt-4 max-w-3xl text-pretty lg:text-4xl text-3xl font-medium text-gray-200 fade-in">12.12.24</p>
</div>
</div>
</div>

3
templates/partials/action/cta.html
View File

@@ -1,8 +1,7 @@
<div class="bg-transparent">
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
<h2 class="lg:text-balance leading-tight text-left items-start font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
Become the Color<br/>
of the Future of Internet <br/>on 12.12.2024.
Stay tuned for 12.12.24<br/>
</h2>
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
<a href="https://t.me/threefoldnews" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">

8
templates/partials/footer.html
View File

@@ -23,10 +23,10 @@
</div>
<div class="mt-6 mx-auto border-t border-gray-700 pt-8">
<p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
© <span id="year"></span> ThreeFold, All rights reserved.
<a target="_blank" href="https://library.threefold.me/info/legal/#/legal__terms_conditions_websites" class="leading-6 text-gray-500 hover:text-gray-300">Terms &amp; Conditions |</a>
<a target="_blank" href="https://library.threefold.me/info/legal/#/legal__privacypolicy" class="leading-6 text-gray-500 hover:text-gray-300">Privacy Policy |</a>
<a href="/tfLabs" class="leading-6 text-gray-500 hover:text-gray-300">ThreeFold Labs IT</a>
© <span id="year"></span> ThreeFold - All rights reserved.
<a target="_blank" href="https://docs.threefold.io/docs/legal/terms_and_conditions" class="leading-6 text-gray-500 hover:text-gray-300">Terms &amp; Conditions |</a>
<a target="_blank" href="https://docs.threefold.io/docs/legal/privacy_policy" class="leading-6 text-gray-500 hover:text-gray-300">Privacy Policy</a>
</p>
</div>
</div>

16
templates/partials/header.html
View File

@@ -2,9 +2,9 @@
{% set header_items = section.content | safe | split(pat="<li>") %}
<header id="header-container">
<div class="z-20 bg-black2 absolute w-full">
<div class="z-20 absolute w-full">
<div class="relative z-50">
<div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-2 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
<div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
<div>
<a href="{{get_url(path='/')}}" class="flex">
<img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
@@ -113,12 +113,12 @@
</div>
</div>
</div>
{% for header_item in header_items %}
{% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %}
{% set header_menu = header_arr[1] %}
{% set menu_id = header_label ~ "-menu" | slugify %}
{% for header_item in header_items %}
{% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %}
{% set header_menu = header_arr[1] %}
{% set menu_id = header_label ~ "-menu" | slugify %}
<nav>
<div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">

52
templates/partials/home/faq.html
View File

@@ -47,7 +47,7 @@
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
No, ThreeFold is a complementary Internet and works alongside the current Internet. It allows you to continue accessing and interacting with the current Internet while offering additional capabilities.
No, ThreeFold is a complementary Internet and works alongside the current Internet. It allows you to continue accessing and interacting with the current Internet.
</p>
</div>
</div>
@@ -79,8 +79,7 @@
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
The Internet has become fragile and overly centralized. Issues like authenticity, privacy, security, and sustainability necessitate a fundamental new approach to rebuild its foundation.
</p>
The Internet used to be a peer to peer network, but has become fragile and too centralized. There are so many problems with the current Internet, such as authenticity, privacy, security, and sustainability that we believe a fundamental new approach is needed.
</div>
</div>
</div>
@@ -95,7 +94,7 @@
:aria-expanded="expanded"
aria-controls="faqs-text-03"
>
<span>This seems too big to be true. Is this real?</span>
<span>This sounds too big, are you guys are faking it?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@@ -111,8 +110,7 @@
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
For over 30 years, we’ve worked toward this vision. ThreeFold is the culmination of our journey, offering a fully operational product and a growing community of users, farmers, and partners. This is real and we are here to stay.
</p>
We have been working on this for over 30 years and ThreeFold is the result of that work. We have a working product and a growing community of farmers, users, and partners. We are real and we are here to stay.
</div>
</div>
</div>
@@ -207,8 +205,7 @@
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
Web4 is our evolution towards a decentralized, user-controlled, and secure Internet that respects privacy and minimizes environmental impact.
</p>
Web 4 represents the natural evolution of the Internet, where humans and artificial intelligence collaborate to develop a new paradigm aimed at advancing planetary well-being while making sure everyone has equal chances. This Internet can be sovereign & decentralized, while being totally secure and private. This phase of the Internet can scale indefinitely, is green, self-healing, cost effective and ultra-reliable.
</div>
</div>
</div>
@@ -223,7 +220,7 @@
:aria-expanded="expanded"
aria-controls="faqs-text-07"
>
<span>Is this another blockchain?</span>
<span>How secure and private is my data?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@@ -239,11 +236,44 @@
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
No, we are NOT blockchain. We are using our own technology: Zero State technology combined with Quantum Safe Internetworking.
ThreeFold is designed to be secure and private by default. We use end-to-end encryption to protect your data and ensure that only you have access to your data.
</p>
</div>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-07"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-07"
>
<span>Who should use the ThreeFold Grid ?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-07"
role="region"
aria-labelledby="faqs-title-07"
class="grid text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
Individuals, businesses, and organizations who want to be sovereign and have full control over their data and applications. Security is a very big problem today, Technology as used by ThreeFold has the potential to resolve this if used properly. We are building a channel of solution providers and integrators who want to build on top of ThreeFold.
</p>
</div>
</div>
</div>
</div>
<!-- End: Accordion component -->

14
templates/partials/home/farmers.html
View File

@@ -2,15 +2,15 @@
<div class="mx-auto max-w-7xl 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">
<h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-white">Powering the Grid Together</h2>
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
Regardless of technical expertise, anyone can now provide data, network, and cloud resources to where they’re needed most while earning rewards for their contributions. We call this process "farming”.
</p>
</div>
<section class="pb-32 bg-transparent">
<div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
<div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
<div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
1. HOST A NODE
</dt>
@@ -20,7 +20,7 @@
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
2. OFFER CAPACITY
</dt>
@@ -31,7 +31,7 @@
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
3. EARN REWARDS
</dt>
@@ -45,7 +45,7 @@
</div>
</div>
<div class="mt-12 flex items-center justify-center gap-x-6">
<a href="https://docs.threefold.io/docs/category/nodes" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
<a href="https://manual.grid.tf/documentation/farmers/farmers.html" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
</div>
</div>
</dl>

4
templates/partials/home/features.html
View File

@@ -1,11 +1,11 @@
<div class="bg-transparent">
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
<div class="max-w-3xl px-16 pb-12">
<div class="max-w-3xl lg:px-16 px-0 pb-12">
<h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">ThreeFold is the Infrastructure Layer of Web 4
</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</p>
<p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core components: <b>Data, Cloud, and Network</b>.</p>
<a href="#" class="fade-in lg:text-xl text-base tracking-normal font-medium pt-6 text-white hover:text-gray-400 blinking-effect">Discover How It Works <span aria-hidden="true">→</span></a>
<a href="/what" target="_blank" class=" fade-in text-sm/6 font-semibold text-white hover:text-gray-400">Discover How It Works <span aria-hidden="true">→</span></a>
</div>
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
<dl class="grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">

12
templates/partials/home/grid_stats.html
View File

@@ -1,28 +1,28 @@
<div class="bg-transparent relative isolate overflow-hidden py-12 mb-12">
<img src="images/map_white.png" alt="" class="fade-in absolute inset-0 -z-10 size-full object-cover">
<img src="images/map_white.png" alt="" class="fade-in absolute inset-0 -z-10 size-full object-cover md:block hidden">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center">
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">A Global Community</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Version 3.14 is live on Mainnet.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Version 3.15 is live on Mainnet.</p>
</div>
<dl class="mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
<div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-light text-gray-300">CAPACITY</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">19,10 PB</dd>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">24.73 PB</dd>
</div>
<div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-light text-gray-300">CORES</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">46,934</dd>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">56,114</dd>
</div>
<div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-semibold text-gray-300">NODES</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">1596</dd>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">2053</dd>
</div>
<div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-semibold text-gray-300">COUNTRIES</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">40+</dd>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">52</dd>
</div>
</dl>
</div>

4
templates/partials/home/hero.html
View File

@@ -5,8 +5,8 @@
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Imagine a system built to scale to a planetary level, seamlessly compatible with AI, Cloud, Web2, Web3, and Edge IT workloads. A system that is resilient to unforeseen events, provides 100% uptime, and enables any machine and human to communicate over the shortest, most direct path possible.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold.</span></p>
<div class="mt-12 flex items-center justify-center gap-x-6">
<a href="https://docs.threefold.io" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">Get Started</a>
<a href="/solutions" target="_blank" class=" fade-in text-sm/6 font-semibold text-white hover:text-gray-400">What We've Built <span aria-hidden="true">→</span></a>
<a href="https://docs.threefold.io/" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">Get Started</a>
<a href="/what" target="_blank" class=" fade-in text-sm/6 font-semibold text-white hover:text-gray-400">What We've Built <span aria-hidden="true">→</span></a>
</div>
</div>
</div>

6
templates/partials/home/web4.html
View File

@@ -9,15 +9,15 @@
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-bold text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
<br>
<br>
<div class="inline-flex items-center gap-2 fade-in blinking-effect">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0,0,256,256" style="cursor: pointer;">
<div class=" border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="cursor: pointer;">
<g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<g transform="translate(210.55757,-34.78313) rotate(65) scale(5.12,5.12)">
<path d="M14.78125,5c-0.03125,0.00781 -0.0625,0.01953 -0.09375,0.03125c-0.04297,0.01953 -0.08594,0.03906 -0.125,0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0.00781 -0.04297,0.01953 -0.0625,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.03125,0.01953 -0.0625,0.03906 -0.09375,0.0625c-0.02344,0.01953 -0.04297,0.03906 -0.0625,0.0625c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.03516,0.03906 -0.06641,0.08203 -0.09375,0.125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01953 0,0.04297 0,0.0625c-0.01172,0.03906 -0.02344,0.08203 -0.03125,0.125c0,0.03125 0,0.0625 0,0.09375c0,0.01172 0,0.01953 0,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.00391,0.05078 -0.00391,0.10547 0,0.15625v32.84375c0.00391,0.39844 0.24219,0.75781 0.60938,0.91406c0.36328,0.15625 0.78906,0.07813 1.07813,-0.19531l7.25,-6.8125l5.84375,13.5c0.10938,0.24609 0.3125,0.44141 0.56641,0.53516c0.25391,0.09375 0.53516,0.08203 0.77734,-0.03516l4.375,-2c0.49609,-0.22656 0.71875,-0.8125 0.5,-1.3125l-6.09375,-13.3125l10.1875,-0.875c0.40234,-0.02734 0.75,-0.29297 0.88281,-0.67578c0.12891,-0.38281 0.01563,-0.80859 -0.28906,-1.07422l-23.84375,-22.21875c-0.04687,-0.05859 -0.09766,-0.10937 -0.15625,-0.15625c-0.03906,-0.04687 -0.07812,-0.08594 -0.125,-0.125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.02344 -0.03906,-0.04297 -0.0625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.05078,-0.02344 -0.10156,-0.04687 -0.15625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.01172 -0.04297,-0.02344 -0.0625,-0.03125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM16,8.28125l20.6875,19.3125l-9.375,0.8125c-0.32031,0.03125 -0.60547,0.21484 -0.76562,0.49609c-0.16406,0.27734 -0.17969,0.61719 -0.04687,0.91016l6.28125,13.6875l-2.5625,1.15625l-6,-13.84375c-0.12891,-0.29687 -0.39062,-0.51562 -0.70703,-0.58203c-0.31641,-0.07031 -0.64844,0.01953 -0.88672,0.23828l-6.625,6.21875z"></path>
</g>
</g>
</svg>
<a href="action.html" class="fade-in text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</a>
<a href="/action" class="fade-in text-balance text-2xl font-semibold tracking-tight text-white lg:text-3xl blinking-effect">12.12.2024</a>
</div>
</div>

4
templates/partials/solutions/what.html
View File

@@ -1,11 +1,11 @@
<div class="bg-transparent">
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
<div class="max-w-3xl px-16 pb-12">
<div class="max-w-3xl px-0 lg:px-16 pb-12">
<h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It
</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions.</p>
<p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">On 12-12-24, we will unveil exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
<a href="/action" class="fade-in lg:text-4xl text-base tracking-normal font-medium pt-6 text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>12.12.24</a>
<a href="/action" class="border border-white px-6 py-2 rounded-xl fade-in text-2xl lg:text-3xl tracking-normal font-medium mt-6 text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>12.12.24</a>
</div>
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
<dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">

40
templates/partials/what/hero.html Normal file
View File

@@ -0,0 +1,40 @@
<div class="relative isolate overflow-hidden bg-transparent">
<div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in">A Secure & Sovereign Infrastructure Layer for Web 4</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Our unique technology enables a system which can scale to a planetary level, can store data which can never be corrupted nor lost, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, and provide 100% uptime. .</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-medium text-gray-200 fade-in">ThreeFold can be used by any Web2, Web3, AI, or Edge IT workload.
</p>
<div class="mt-12 flex items-center justify-center gap-x-6">
<a href="https://docs.threefold.io" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">Dive Deeper - Read our docs</a>
f
</div>
</div>
</div>
<style>
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
</style>

310
templates/partials/what/portfolio copy.html Normal file
View File

@@ -0,0 +1,310 @@
<div class="bg-transparent py-24">
<div class="mx-auto max-w-7xl 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">
<h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
At Threefold, we've created solutions that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.
</p>
</div>
</div>
</div>
<section id="testimonies" class="py-20 bg-slate-900">
<div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
<div class="transition duration-500 ease-in-out transform scale-100 translate-x-0 translate-y-0 opacity-100">
<div class="mb-12 space-y-5 md:mb-16 md:text-center">
<div
class="inline-block px-3 py-1 text-sm font-semibold text-indigo-100 rounded-lg md:text-center text-cn bg-[#202c47] bg-opacity-60 hover:cursor-pointer hover:bg-opacity-40">
Words from Others
</div>
<h1 class="mb-5 text-3xl font-semibold text-white md:text-center md:text-5xl">
It's not just us.
</h1>
<p class="text-xl text-gray-100 md:text-center md:text-2xl">
Here's what others have to say about us.
</p>
</div>
</div>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
<ul class="space-y-8">
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="https://twitter.com/kanyewest" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
<div>
<h3 class="text-lg font-semibold text-white">Kanye West</h3>
<p class="text-gray-500 text-md">Rapper &amp; Entrepreneur</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Find God.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
<div>
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
<p class="text-gray-500 text-md">CEO of Apple</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
aliquam malesuada bibendum.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="https://twitter.com/kanyewest" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
<div>
<h3 class="text-lg font-semibold text-white">Kanye West</h3>
<p class="text-gray-500 text-md">Rapper &amp; Entrepreneur</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Find God.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
<div>
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
<p class="text-gray-500 text-md">CEO of Apple</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
aliquam malesuada bibendum.</p>
</div>
</a>
</div>
</li>
</ul>
<ul class="hidden space-y-8 sm:block">
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="https://twitter.com/paraga" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
<div>
<h3 class="text-lg font-semibold text-white">Parag Agrawal</h3>
<p class="text-gray-500 text-md">CEO of Twitter</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Enim neque volutpat ac tincidunt vitae
semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
<div>
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
<p class="text-gray-500 text-md">CEO of Apple</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
aliquam malesuada bibendum.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="https://twitter.com/paraga" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
<div>
<h3 class="text-lg font-semibold text-white">Parag Agrawal</h3>
<p class="text-gray-500 text-md">CEO of Twitter</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Enim neque volutpat ac tincidunt vitae
semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
<div>
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
<p class="text-gray-500 text-md">CEO of Apple</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
aliquam malesuada bibendum.</p>
</div>
</a>
</div>
</li>
</ul>
<ul class="hidden space-y-8 lg:block">
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="https://twitter.com/satyanadella" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
<div>
<h3 class="text-lg font-semibold text-white">Satya Nadella</h3>
<p class="text-gray-500 text-md">CEO of Microsoft</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Tortor dignissim convallis aenean et
tortor at. At ultrices mi tempus imperdiet nulla malesuada. Id cursus metus aliquam
eleifend mi. Quis ipsum suspendisse ultrices gravida dictum fusce ut.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="https://twitter.com/dan_schulman" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
<div>
<h3 class="text-lg font-semibold text-white">Dan Schulman</h3>
<p class="text-gray-500 text-md">CEO of PayPal</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Quam pellentesque nec nam aliquam sem
et tortor consequat id. Enim sit amet venenatis urna cursus.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="https://twitter.com/satyanadella" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
<div>
<h3 class="text-lg font-semibold text-white">Satya Nadella</h3>
<p class="text-gray-500 text-md">CEO of Microsoft</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Tortor dignissim convallis aenean et
tortor at. At ultrices mi tempus imperdiet nulla malesuada. Id cursus metus aliquam
eleifend mi. Quis ipsum suspendisse ultrices gravida dictum fusce ut.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="https://twitter.com/dan_schulman" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
<div>
<h3 class="text-lg font-semibold text-white">Dan Schulman</h3>
<p class="text-gray-500 text-md">CEO of PayPal</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Quam pellentesque nec nam aliquam sem
et tortor consequat id. Enim sit amet venenatis urna cursus.</p>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
</section>

150
templates/partials/what/portfolio.html Normal file
View File

@@ -0,0 +1,150 @@
<div class="bg-transparent pt-12 pb-6">
<div class="mx-auto max-w-7xl 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">
<h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
At ThreeFold, we've created products that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.
</p>
</div>
</div>
</div>
<section class="pb-32 bg-transparent">
<div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
<div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
ZERO-OS V3
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A stateless and lightweight operating system that allows for an improved efficiency of up to 10x for certain workloads.</p>
<p class="mt-6">
<a href="https://manual.grid.tf/knowledge_base/technology/concepts/zos.html?highlight=zero-os#overview-of-zero-os" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
MYCELIUM NETWORK
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Decentralized communication layer of TF Grid that connects and coordinates nodes on the ThreeFold Grid, enabling secure and efficient peer-to-peer interactions.</p>
<p class="mt-6">
<a href="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
QUANTUM SAFE STORAGE
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">QSS is a decentralized, globally distributed data storage system. It is unbreakable, self-healing, append-only, and immutable.</p>
<p class="mt-6">
<a href="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<!-- 2ND ROW-->
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
TF CHAIN
</dt>
<dd class="mt-2 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">An application-specific blockchain customized for the operation of a single application – provisioning decentralized compute, storage, and network capacity.</p>
<p class="mt-6">
<a href="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
3NODES
</dt>
<dd class="mt-2 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Decentralized, user-owned hardware devices that provides computing, storage, and networking resources to power the TF Grid.</p>
<p class="mt-6">
<a href="https://manual.grid.tf/documentation/developers/tfchain/tfchain.html?highlight=nodes#nodes" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
GATEWAY NODES
</dt>
<dd class="mt-2 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Specialized nodes that provide secure access points to the ThreeFold Grid, enabling decentralized networking, private data communication, and seamless interaction between users and applications.</p>
<p class="mt-6">
<a href="https://manual.grid.tf/documentation/dashboard/deploy/node_finder.html?highlight=gateway%20nodes#gateway-nodes" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<!-- 3RD ROW-->
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
TF DASHBOARD
</dt>
<dd class="mt-2 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A user-friendly interface for monitoring, managing, and deploying resources on the ThreeFold Grid.</p>
<p class="mt-6">
<a href="https://manual.grid.tf/documentation/dashboard/dashboard.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
TF DAO
</dt>
<dd class="mt-2 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A community-driven governance model that allows token holders to participate in decision-making processes related to the development and direction of the ThreeFold ecosystem.</p>
<p class="mt-6">
<a href="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
TF CONNECT APP
</dt>
<dd class="mt-2 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">A mobile app that serves as a gateway to the ThreeFold ecosystem and its various ThreeFold products and services.</p>
<p class="mt-6">
<a href="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
</dl>
</div>
</div>
</section>
<style>
/* Fade-in animation for the grid items */
.fade-in-box {
opacity: 0;
animation: fadeIn 0.6s ease-in-out forwards;
}
/* Fading in each grid item with a slight delay */
.fade-in-box:nth-child(1) { animation-delay: 0s; }
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
.fade-in-box:nth-child(6) { animation-delay: 1s; }
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
.fade-in-box:nth-child(11) { animation-delay: 2s; }
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>

82
templates/partials/what/what.html Normal file
View File

@@ -0,0 +1,82 @@
<div class="bg-transparent">
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
<div class="max-w-3xl px-0 lg:px-16 pb-12">
<h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It
</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions.</p>
<p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">On 12-12-24, we will unveil exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
<a href="/action" class="border border-white px-6 py-2 fade-in lg:text-3xl text-2xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>12.12.24</a>
</div>
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
<dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">
<div class="">
<dt class="font-medium text-gray-200">Communicate securely</dt>
<dd class="mt-1 font-light text-gray-400 text-sm mb-4">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</dd>
</div>
<div class="">
<dt class="font-medium text-gray-200">Store effortlessly</dt>
<dd class="mt-1 ont-light text-gray-400 text-sm mb-4">Securely share and store information with ease, scaling seamlessly from personal use to billions of users. </dd>
</div>
<div class="">
<dt class="font-medium text-gray-200">Restore authenticity</dt>
<dd class="font-light text-gray-400 text-sm mb-4">Determine which information can be trusted, bringing clarity and confidence back to the digital space. </dd>
</div>
<div class="">
<dt class="font-medium text-gray-200">Unlock limitless insights</dt>
<dd class="font-light text-gray-400 text-sm mb-4">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant. </dd>
</div>
<div class="">
<dt class="font-medium text-gray-200">Streamline your interactions</dt>
<dd class="font-light text-gray-400 text-sm mb-4">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions. </dd>
</div>
<div class="">
<dt class="font-medium text-gray-200">Take control of your digital presence</dt>
<dd class="font-light text-gray-400 text-sm mb-4">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.</dd>
</div>
</dl>
</div>
</div>
</div>
<style>
/* Define the slow blinking animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
/* Apply the blinking animation to the link */
.blinking-effect {
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}
</style>

72
templates/partials/what/whatyoucando.html Normal file
View File

@@ -0,0 +1,72 @@
<div class="bg-transparent pt-12 pb-24">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-3xl items-center justify-center">
<p class="fade-in text-balance text-center items-center text-4xl font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It</p>
<p class="mx-auto mt-6 max-w-3xl text-center items-center text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions. <br><br>On 12-12-24, we will unveil exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
<!--1-->
<div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
Communicate securely
</dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
<p class="px-4 flex-auto text-center text-base text-white">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</p>
</dd>
</div>
<!--2-->
<div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
Share and store effortlessly
</dt>
<dd class="mt-2 flex flex-auto items-center text-center flex-col font-light text-base text-white">
<p class="px-4 flex-auto text-base text-white">Securely share and store information with ease, scaling seamlessly from personal use to billions of users.
</p>
</dd>
</div>
<!--3-->
<div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
Restore authenticity
</dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
<p class="px-4 flex-auto items-center text-center text-base text-white">Determine which information can be trusted, bringing clarity and confidence back to the digital space.
</p>
</dd>
</div>
<!--3-->
<div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
Unlock limitless insights
</dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
<p class="px-4 flex-auto items-center text-center text-base text-white">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant.
</p>
</dd>
</div>
<!--3-->
<div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
Streamline your interactions
</dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
<p class="px-4 flex-auto items-center text-center text-base text-white">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions.
</p>
</dd>
</div>
<!--3-->
<div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white">
Take control of your digital presence
</dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
<p class="px-4 flex-auto items-center text-center text-base text-white">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.
</p>
</dd>
</div>
</dl>
</div>
</div>
</div>

4
templates/partials/why/hero.html
View File

@@ -1,12 +1,12 @@
<div class="relative isolate overflow-hidden bg-transparent">
<div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in">Internet needs an Upgrade</h2>
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in">The Internet needs an Upgrade</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">The Internet brings the world together, yet much of it is now concentrated in the hands of a few powerful corporations. This wasn't its original purpose. The Internet was envisioned as a decentralized, open space—a tool for freedom, collaboration, and equal access for all.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-medium text-gray-200 fade-in">ThreeFold has invented a new Data, Network and Cloud system<br>
as an Engine for an Upgraded Internet.</p>
<div class="mt-12 flex items-center justify-center gap-x-6">
<a href="https://docs.threefold.io/docs/litepaper" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">Litepaper</a>
</div>
</div>

8
templates/partials/why/impact.html
View File

@@ -8,9 +8,9 @@
<div class="mt-12 space-y-16">
<div class="bg-transparent py-10">
<div class="mx-auto max-w-7xl px-6 lg:grid lg:items-center lg:grid-cols-12 lg:gap-x-8">
<div class="mx-auto max-w-7xl lg:grid lg:items-center lg:grid-cols-12 lg:gap-x-8">
<!-- Text Section -->
<div class="lg:col-span-5 align-middle pr-4">
<div class="lg:col-span-5 align-middle pr-4 mb-4">
<h3 class="text-2xl font-medium text-white">OurWorld FreeZone</h3>
<p class="mt-2 text-base font-light text-gray-200 mx-auto pr-4">
ThreeFold is working with the Zanzibar Communication Corporation (ZICTIA), on behalf of the Zanzibar government, to create the world’s first 100% Digital Free Zone – accessible and affordable for all. <br><br>The announcement was made August 2023, and progress has been ongoing behind the scenes since then.
@@ -20,7 +20,7 @@
<!-- Image Section -->
<div class="lg:col-span-7">
<img
src="/images/freezone.gif"
src="/images/freezone.png"
alt=""
class=" w-full rounded-lg bg-gray-100 object-fit">
</div>
@@ -35,7 +35,7 @@
In January 2024, ThreeFold announced in collaboration with The ICT Commission of Tanzania and Holochain a collaboration to deploy sovereign Internet in Tanzania, along with the introduction of coding academies and innovation hubs. <br><br> The Dunia Yetu cooperative is being set up and efforts will ramp up in 2025.</p>
</div>
<div class="flex-auto lg:col-span-7 lg:col-start-1 lg:row-start-1">
<img src="/images/tanzania.gif" alt="" class="w-full rounded-lg bg-gray-100 object-fill">
<img src="/images/tanzania.png" alt="" class="w-full rounded-lg bg-gray-100 object-fill">
</div>
</div>
</div>

15
templates/partials/why/matters.html
View File

@@ -22,16 +22,16 @@
<p class="text-2xl text-white font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security to bring this vision to life.</p>
</blockquote>
<br>
<div class="inline-flex blinking-effect items-center gap-2 fade-in ">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0,0,256,256" style="cursor: pointer;">
<div class=" border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="cursor: pointer;">
<g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<g transform="translate(210.55757,-34.78313) rotate(65) scale(5.12,5.12)">
<path d="M14.78125,5c-0.03125,0.00781 -0.0625,0.01953 -0.09375,0.03125c-0.04297,0.01953 -0.08594,0.03906 -0.125,0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0.00781 -0.04297,0.01953 -0.0625,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.03125,0.01953 -0.0625,0.03906 -0.09375,0.0625c-0.02344,0.01953 -0.04297,0.03906 -0.0625,0.0625c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.03516,0.03906 -0.06641,0.08203 -0.09375,0.125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01953 0,0.04297 0,0.0625c-0.01172,0.03906 -0.02344,0.08203 -0.03125,0.125c0,0.03125 0,0.0625 0,0.09375c0,0.01172 0,0.01953 0,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.00391,0.05078 -0.00391,0.10547 0,0.15625v32.84375c0.00391,0.39844 0.24219,0.75781 0.60938,0.91406c0.36328,0.15625 0.78906,0.07813 1.07813,-0.19531l7.25,-6.8125l5.84375,13.5c0.10938,0.24609 0.3125,0.44141 0.56641,0.53516c0.25391,0.09375 0.53516,0.08203 0.77734,-0.03516l4.375,-2c0.49609,-0.22656 0.71875,-0.8125 0.5,-1.3125l-6.09375,-13.3125l10.1875,-0.875c0.40234,-0.02734 0.75,-0.29297 0.88281,-0.67578c0.12891,-0.38281 0.01563,-0.80859 -0.28906,-1.07422l-23.84375,-22.21875c-0.04687,-0.05859 -0.09766,-0.10937 -0.15625,-0.15625c-0.03906,-0.04687 -0.07812,-0.08594 -0.125,-0.125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.02344 -0.03906,-0.04297 -0.0625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.05078,-0.02344 -0.10156,-0.04687 -0.15625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.01172 -0.04297,-0.02344 -0.0625,-0.03125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM16,8.28125l20.6875,19.3125l-9.375,0.8125c-0.32031,0.03125 -0.60547,0.21484 -0.76562,0.49609c-0.16406,0.27734 -0.17969,0.61719 -0.04687,0.91016l6.28125,13.6875l-2.5625,1.15625l-6,-13.84375c-0.12891,-0.29687 -0.39062,-0.51562 -0.70703,-0.58203c-0.31641,-0.07031 -0.64844,0.01953 -0.88672,0.23828l-6.625,6.21875z"></path>
<path d="M14.78125,5c-0.03125,0.00781 -0.0625,0.01953 -0.09375,0.03125c-0.04297,0.01953 -0.08594,0.03906 -0.125,0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0.00781 -0.04297,0.01953 -0.0625,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.03125,0.01953 -0.0625,0.03906 -0.09375,0.0625c-0.02344,0.01953 -0.04297,0.03906 -0.0625,0.0625c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.03516,0.03906 -0.06641,0.08203 -0.09375,0.125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01953 0,0.04297 0,0.0625c-0.01172,0.03906 -0.02344,0.08203 -0.03125,0.125c0,0.03125 0,0.0625 0,0.09375c0,0.01172 0,0.01953 0,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.00391,0.05078 -0.00391,0.10547 0,0.15625v32.84375c0.00391,0.39844 0.24219,0.75781 0.60938,0.91406c0.36328,0.15625 0.78906,0.07813 1.07813,-0.19531l7.25,-6.8125l5.84375,13.5c0.10938,0.24609 0.3125,0.44141 0.56641,0.53516c0.25391,0.09375 0.53516,0.08203 0.77734,-0.03516l4.375,-2c0.49609,-0.22656 0.71875,-0.8125 0.5,-1.3125l-6.09375,-13.3125l10.1875,-0.875c0.40234,-0.02734 0.75,-0.29297 0.88281,-0.67578c0.12891,-0.38281 0.01563,-0.80859 -0.28906,-1.07422l-23.84375,-22.21875c-0.04687,-0.05859 -0.09766,-0.10937 -0.15625,-0.15625c-0.03906,-0.04687 -0.07812,-0.08594 -0.125,-0.125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.02344 -0.03906,-0.04297 -0.0625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.05078,-0.02344 -0.10156,-0.04687 -0.15625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.01172 -0.04297,-0.02344 -0.0625,-0.03125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM16,8.28125l20.6875,19.3125l-9.375,0.8125c-0.32031,0.03125 -0.60547,0.21484 -0.76562,0.49609c-0.16406,0.27734 -0.17969,0.61719 -0.04687,0.91016l6.28125,13.6875l-2.5625,1.15625l-6,-13.84375c-0.12891,-0.29687 -0.39062,-0.51562 -0.70703,-0.58203c-0.31641,-0.07031 -0.64844,0.01953 -0.88672,0.23828l-6.625,6.21875z"></path>
</g>
</g>
</svg>
<a href="action.html" class="text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl">12.12.2024</a>
</div>
<a href="/action" class="fade-in text-balance text-2xl font-semibold tracking-tight text-white lg:text-3xl blinking-effect">12.12.2024</a>
</div>
</figure>
</div>
</div>
@@ -78,6 +78,11 @@
color: #ffffff;
}
blockquote {
border-left-width: 2px;
padding-left: 1rem;
}
.inline-flex {
display: flex;
align-items: center;

2
templates/partials/why/reason.html
View File

@@ -4,7 +4,7 @@
<!-- 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 sm:text-5xl">The Reason Behind It All</h1>
<h1 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl">The Reason Behind It All</h1>
<p class="fade-in mt-6 text-lg font-light text-white">
The Internet started as a peer-to-peer network, but over time it has become fragile and overly centralized. This shift has led to serious issues: misinformation is rampant, privacy and security are compromised, and half the world remains poorly connected.
<br><br>

16
templates/partials/why/team.html
View File

@@ -10,9 +10,9 @@
<div class="mt-12 grid grid-cols-1 gap-x-4 lg:gap-y-10 lg:gap-x-8 lg:grid-cols-4 gap-y-0">
<!-- Team Member -->
<div class="group relative fade-in">
<div class="group relative fade-in mb-8">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="/images/kds.gif" alt="kristof_de_spiegeleer" class="size-full object-cover">
<img src="/images/kds.png" alt="kristof_de_spiegeleer" class="size-full object-cover">
</div>
<h3 class="mt-4 text-xl font-semibold text-white">
Kristof de Spiegeleer
@@ -23,9 +23,9 @@
</div>
<!-- Team Member -->
<div class="group relative fade-in">
<div class="group relative fade-in mb-8">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="/images/adnan.gif" alt="adnan_fatayerji" class="size-full object-cover">
<img src="/images/adnan.png" alt="adnan_fatayerji" class="size-full object-cover">
</div>
<h3 class="mt-4 text-xl font-semibold text-white">
Adnan Fatayerji
@@ -36,9 +36,9 @@
</div>
<!-- Team Member -->
<div class="group relative fade-in">
<div class="group relative fade-in mb-8">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="/images/jan.gif" alt="jan_de_landtsheer" class="size-full object-cover">
<img src="/images/jan.png" alt="jan_de_landtsheer" class="size-full object-cover">
</div>
<h3 class="mt-4 text-xl font-semibold text-white">
Jan De Landtsheer
@@ -49,9 +49,9 @@
</div>
<!-- Team Member -->
<div class="group relative fade-in">
<div class="group relative fade-in mb-8">
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
<img src="/images/flo.gif" alt="florian_fournier" class="size-full object-cover">
<img src="/images/flo.png" alt="florian_fournier" class="size-full object-cover">
</div>
<h3 class="mt-4 text-xl font-semibold text-white">
Florian Fournier