ourworld_web/www_mycelium
21
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
ourworld_web
2025-02-12 06:59:33 +00:00
commit 648680d0ae
406 changed files with 15597 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
templates/partials/home/banner.html Normal file
View File

@@ -0,0 +1,9 @@
<div class="bg-transparent py-24 mb-12 flex justify-center items-center">
<div class="mx-auto max-w-7xl px-4 lg:px-6">
<img
class="object-contain w-full lg:w-[100%] max-w-[100%]"
src="images/gif2.gif"
alt="TF">
</div>
</div>

115
templates/partials/home/bento.html Normal file
View File

@@ -0,0 +1,115 @@
<div class=" py-24 sm:py-32">
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<span class="text-base/7 font-light text-white tracking-wide">CONCEPT</span>
<p class="mt-2 max-w-lg text-4xl font-medium tracking-tight text-pretty text-white sm:text-5xl">Value Propositions</p>
<div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-3">
<!-- row1 2col -->
<div class="relative lg:col-span-3">
<div class="absolute inset-px rounded-lg bg-black1 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
<img class="h-80 object-cover object-left" src="/images/freezone2.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-white tracking-wide">NEXT-GEN BUSINESS</h3>
<p class="mt-1 lg:text-2xl text-xl font-normal tracking-normal text-white">Digital Freezone</p>
<!-- row1 2col -->
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">A future-focused ecosystem with streamlined business processes, decentralized systems, and global connectivity.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
</div>
<!-- row1- 2 column -->
<div class="relative lg:col-span-3">
<div class="absolute inset-px rounded-lg bg-black1 lg:rounded-tr-[2rem]"></div>
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
<img class="h-80 object-cover object-left lg:object-right" src="images/dc2.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-white tracking-wide">SUSTAINABLE CLOUD & AI INFRASTRUCTURE</h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">DataCenter City</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Zanzibar’s largest, most sustainable data center, equipped with Threefold Nodes and co-owned AI integrated with city services.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-tr-[2rem]"></div>
</div>
<!-- row2 - 3col -->
<div class="relative lg:col-span-2">
<div class="absolute inset-px bg-white/5 "></div>
<div class="relative flex h-full flex-col overflow-hidden ">
<img class="h-80 object-cover object-left" src="images/bot2.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-white tracking-wide">SECURE AI & DIGITAL IDENTITY</h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Digital Hero</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Private, secure communication and transactions with efficient AI assisted collaboration and full control of your own data and digital identity.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-bl-[2rem]"></div>
</div>
<!-- row2 - 3col -->
<div class="relative lg:col-span-2">
<div class="absolute inset-px bg-white/5"></div>
<div class="relative flex h-full flex-col overflow-hidden ">
<img class="h-80 object-cover" src="/images/startup1.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-white tracking-wide">STARTUP GROWTH & INNOVATION HUB</h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Venture Creator</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Empowers startups with strategic guidance, funding support, global networking, talent acquisition, and operational resources.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5"></div>
</div>
<!-- row2 - 3col -->
<div class="relative lg:col-span-2">
<div class="absolute inset-px bg-white/5 "></div>
<div class="relative flex h-full flex-col overflow-hidden ">
<img class="h-80 object-cover" src="/images/eco3.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-white tracking-wide">SUSTAINABLE FUTURE</h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Regenerative Living</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Tech-driven sustainable living powered by clean energy, organic food, and a resilient, collaborative community with global impact.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
</div>
<!-- row2 - 3col -->
<div class="relative lg:col-span-2">
<div class="absolute inset-px rounded-lg bg-white/5 lg:rounded-bl-[2rem]"></div>
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
<img class="h-80 object-cover object-left" src="/images/zone2.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-white tracking-wide">DECENTRALIZED ECONOMY</h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Digital Assets</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Tokenized assets drive fair trade, sustainable economies, and stability with resilient digital currencies.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-bl-[2rem]"></div>
</div>
<!-- row2 - 3col -->
<div class="relative lg:col-span-2">
<div class="absolute inset-px rounded-lg bg-white/5"></div>
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
<img class="h-80 object-cover" src="/images/zone1.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-white tracking-wide">LEGAL AUTONOMY </h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Autonomous Zone</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Enjoy legal independence, data ownership, and secure connections in a future-focused global ecosystem.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5"></div>
</div>
<!-- row2 - 3col -->
<div class="relative lg:col-span-2">
<div class="absolute inset-px rounded-lg bg-white/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
<img class="h-80 object-cover" src="/images/home1.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-white tracking-wide">AI-POWERED INFRASTRUCTURE</h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Augmented Intelligence</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Homes power Zanzibar’s data center, with co-owned AI integrated into services and generating citizen income.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
</div>
</div>
</div>
</div>

14
templates/partials/home/cta.html Normal file
View File

@@ -0,0 +1,14 @@
<div class="bg-transparent pt-12 pb-12">
<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 max-w-xl leading-tight text-left items-start font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
Build the <br>Internet of Tomorrow,<br> Today.
</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="/signup" target="_blank" class="blinking-effect 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">
Take the Next Step
</a>
<a href="/action" class="fade-in text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>

191
templates/partials/home/faq.html Normal file
View File

@@ -0,0 +1,191 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
},
};
</script>
<main class="relative flex flex-col justify-center overflow-hidden">
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-20">
<h1 class="text-3xl font-normal tracking-tight text-white">Frequently Asked Questions</h1>
<!-- Accordion component -->
<div class="divide-y divide-white/50 my-10">
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-01"
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-01"
>
<span style="color: #fff;">What is CyberCity?</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-01"
role="region"
aria-labelledby="faqs-title-01"
class="grid text-sm text-slate-200 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">
CyberCity is a next-generation smart city in Fumba, Zanzibar, designed to integrate cutting-edge technology, sustainability, and economic innovation. It features a Digital Freezone, regenerative living, AI-driven services, and a decentralized economic model, and many more.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-02"
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-02"
>
<span style="color: #fff;">Why was Fumba, Zanzibar chosen as the project site?</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-02"
role="region"
aria-labelledby="faqs-title-02"
class="grid text-sm text-gray-200 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">
Fumba is part of the 2042 Fumba Free Economic Zone Master Plan, strategically selected for its rapid development potential, economic incentives, and unique blend of cultural heritage and natural beauty. It offers a stable environment for global investment and innovation.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-04"
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-04"
>
<span style="color: #fff;">What is the Digital Freezone, and how does it benefit businesses?</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-04"
role="region"
aria-labelledby="faqs-title-04"
class="grid text-sm text-gray-200 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">
The Digital Freezone is a business-friendly ecosystem within Cybercity that features streamlined regulations, financial transparency, and global connectivity. It provides a light-touch regulatory environment, making it ideal for startups, digital entrepreneurs, and international businesses.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-05"
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-05"
>
<span style="color: #fff;">How does the project support sustainability and regenerative living?</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-05"
role="region"
aria-labelledby="faqs-title-05"
class="grid text-sm text-gray-200 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">
CyberCity is designed with eco-friendly urban planning, featuring car-free green spaces, smart energy solutions like Vehicle-to-Grid (V2G) integration, organic food production, and co-owned AI that optimizes resources while generating income for citizens.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-06"
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-06"
>
<span style="color: #fff;">How can I participate in the CyberCity movement?</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-06"
role="region"
aria-labelledby="faqs-title-06"
class="grid text-sm text-gray-200 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">
You can invest, register a business, become a digital citizen, or move to CyberCity as an entrepreneur or resident. The city offers opportunities for innovators, investors, and forward-thinking individuals to be part of a revolutionary ecosystem.
</div>
</div>
</div>
</div>
</div>
<!-- End: Accordion component -->
</div>
</main>

143
templates/partials/home/farmers.html Normal file
View File

@@ -0,0 +1,143 @@
<div class="bg-transparent py-24 pb-6">
<div class="mx-auto max-w-8xl px-6 lg:max-w-8xl lg:px-8">
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<span class="text-base/7 font-light text-white tracking-wide">CONCEPT</span>
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">
Unique Value Proposition</h2>
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
CyberCity Zanzibar is a city that combines sustainable living, streamlined business processes, cutting-edge datacenters, venture creation, and secure digital tools that empower citizens, businesses, and investors.
</p>
</div>
<section class="pb-32 bg-transparent">
<div class="max-w-6xl mx-2 md:mx-10 lg:mx-10 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-4 gap-y-4 lg:max-w-none lg:grid-cols-4">
<!-- concept -->
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/digital.jpg');">
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
<dt class="relative z-10 flex items-center gap-x-3 text-2xl font-semibold tracking-tight text-white rounded-2xl">
Digital Freezone
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">.</p>
<p class="mt-6">
</p>
</dd>
</div>
<!-- concept -->
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/datacenter.jpg');">
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
Datacenter City
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
</dd>
</div>
<!-- concept -->
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/twin.jpg');">
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
Digital Hero
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
<p class="mt-6">
</p>
</dd>
</div>
<!-- concept -->
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/startup.jpg');">
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
Venture Creator
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
<p class="mt-6">
</p>
</dd>
</div>
<!-- concept -->
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/eco.jpg');">
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
Regenerative Living
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
<p class="mt-6">
</p>
</dd>
</div>
<!-- concept -->
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/assets.jpg');">
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
Sovereign Zone
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
<p class="mt-6">
</p>
</dd>
</div>
<!-- concept -->
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/ai.jpg');">
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
Augmented Intelligence
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
<p class="mt-6">
</p>
</dd>
</div>
<!-- concept -->
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/assets.jpg');">
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
Digital Assets
</dt>
<dd class="relative z-10 mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">
</p>
<p class="mt-6"></p>
</dd>
</div>
</div>
</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>

79
templates/partials/home/features.html Normal file
View File

@@ -0,0 +1,79 @@
<div class="bg-transparent pt-12 pb-24 ">
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
<div class="max-w-3xl lg:px-16 px-0 lg:pb-12 pb-6">
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">ThreeFold is the Infrastructure Layer of Web4
</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg 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-lg 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="/what" class="blinking-effect fade-in lg:text-xl text-lg 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 lg:gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-4">
<div class="pt-0">
<dt class="font-semibold text-base text-gray-200">Unbreakable Data</dt>
</div>
<div class="pt-0">
<dd class="font-light text-gray-300 text-sm mb-4">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. </dd>
<dd class="font-light text-gray-300 text-sm mb-4">Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</dd>
</div>
<div class="lg:pt-4 pt-0">
<dt class="font-semibold text-base text-gray-200">Autonomous Cloud</dt>
</div>
<div class="">
<dd class="font-light text-gray-300 text-sm mb-4">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. </dd>
<dd class="font-light text-gray-300 text-sm mb-4">Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
</div>
<div class="lg:pt-4 pt-0">
<dt class="font-semibold text-base text-gray-200">Unbreakable Network</dt>
</div>
<div class="">
<dd class="font-light text-gray-300 text-sm mb-4">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. </dd>
<dd class="font-light text-gray-300 text-sm mb-4">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</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>

139
templates/partials/home/grid_stats.html Normal file
View File

@@ -0,0 +1,139 @@
<div class="bg-transparent relative isolate overflow-hidden py-24">
<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 lg:text-5xl text-4xl font-normal tracking-tight text-white ">A Place to Live and Innovate</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Together, we aim to create a future that reflects our values. Here, we provide a safe and inspiring environment for startups to build solutions that can make a real difference. We believe that with technology, collaboration, and good intentions, anything is possible.</p>
</div>
<dl class="items mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-5">
<!-- planet -->
<div class="fade-in flex flex-col justify-center items-center bg-white/5 p-6">
<div class="tooltip">
<img src="images/icons/planet.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
<dt class="order-first text-2xl font-semibold tracking-tight text-white">Planet First</dt>
<dd class="text-sm/6 font-light text-gray-300">Utmost respect to mother earth in every action.</dd>
</div>
</div>
<!-- people -->
<div class="fade-in flex flex-col bg-white/5 p-6">
<div class="tooltip">
<img src="images/icons/people.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
<dt class="order-first text-2xl font-semibold tracking-tight text-white">People First</dt>
<dd class="text-sm/6 font-light text-gray-300">Bring equality of opportunities for everyone</dd>
</div>
</div>
<!-- open -->
<div class="fade-in flex flex-col bg-white/5 p-6">
<div class="tooltip">
<img src="images/icons/open.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
<dd class="order-first text-2xl font-semibold tracking-tight text-white">Open Source</dd>
<dt class="text-sm/6 font-light text-gray-300">Value open source methods for many aspects in life.</dt>
</div>
</div>
<!-- Simple -->
<div class="fade-in flex flex-col bg-white/5 p-6">
<div class="tooltip">
<img src="images/icons/simple.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
<dd class="order-first text-2xl font-semibold tracking-tight text-white">Simplicity</dd>
<dt class="text-sm/6 font-light text-gray-300">Erase complexity of things that kills progress.</dt>
</div>
</div>
<!-- authemtic -->
<div class="fade-in flex flex-col bg-white/5 p-6">
<div class="tooltip">
<span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
<img src="images/icons/authentic.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
<dt class="order-first text-2xl font-semibold tracking-tight text-white">Authenticity</dt>
<dd class="text-sm/6 font-light text-gray-300">Commited to restore authenticity of people and information.</dd>
</div>
</div>
</dl>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Initialize the countUp for each of the numbers
new CountUp('ssd', 0, 1910, 0, 2.5).start();
new CountUp('cores', 0, 46934, 0, 2.5).start();
new CountUp('nodes', 0, 1596, 0, 2.5).start();
new CountUp('countries', 0, 40, 0, 2.5).start();
new CountUp('farms', 0, 900, 0, 2.5).start();
});
</script>
<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 */
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
width: 80%;
}
/* Tooltip text */
.tooltip .tooltiptext {
font-size: 12px;
visibility: hidden;
background-color: rgb(26 26 26 / 90%);
color: #fff;
text-align: center;
padding: 5px 10px;
border-radius: 4px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
bottom: -7px;
top: 0px;
left: 0px;
right: 0px;
/* 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: -7px !important;
right: 0px !important;
top: 0px !important;
left: 0px !important;
}
}
</style>

91
templates/partials/home/hero.html Normal file
View File

@@ -0,0 +1,91 @@
<head>
<link href="./output.css" rel="stylesheet">
</head>
<div class="relative isolate overflow-hidden h-screen my-8">
<video autoplay loop muted class="absolute inset-0 -z-10 h-full w-full object-cover">
<source src="/videos/cybercity_comp.mp4" type="video/mp4">
</video>
<div class="flex flex-col justify-center items-center mx-auto max-w-3xl py-32 sm:py-48 lg:py-56 text-center h-full">
<div class="text-center">
<img src="/images/logo_s.svg" alt="Cybercity Logo" class="w-30 h-auto mx-auto" />
<h2 class="text-xl lg:text-2xl text-gray-200 font-normal">Welcome to a New Regenerative Startup City in the Heart of Zanzibar</h2>
<p class="mt-2 text-lg sm:text-xl leading-7 sm:leading-8 font-light text-white mx-4 sm:mx-0">Spanning 700,000m² in the heart of Fumba, Zanzibar, CyberCity is a place where talent meets opportunity, innovation embraces sustainability, and collaboration fuels progress.
</p>
</div>
</div>
</div>
<style>
html, body {
margin: 0;
height: 100%;
}
.relative.isolate.overflow-hidden.h-screen {
height: 100vh;
}
video {
object-fit: cover;
}
.bg-black {
color: white;
background: #000;
}
.main-button {
color: #fff;
padding: 1rem;
background-color: blue;
}
.bg-hover {
color: white;
background: #020202;
}
/* 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 */
}
/* Custom styles for smaller font, margin adjustments, and line spacing for mobile */
@media (max-width: 640px) {
h1 {
font-size: 2rem; /* Smaller font for mobile */
}
h2 {
font-size: 1.25rem; /* Smaller font for mobile */
}
p {
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>

44
templates/partials/home/hero_old.html Normal file
View File

@@ -0,0 +1,44 @@
<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-5xl fade-in">We are Building <br>a New Internet</h2>
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold's</span></p>
<br>
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2>
<br>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="/what" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">What We've Built</a>
<a href="https://docs.threefold.io/" target="_blank" class="fade-in text-base font-semibold text-white hover:text-green ">Read TF Docs<span aria-hidden="true">→</span></a>
</div>
</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>

27
templates/partials/home/products.html Normal file
View File

@@ -0,0 +1,27 @@
<div class="overflow-hidden bg-transparent py-24 lg:py-16">
<div class="mx-auto max-w-7xl md:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start">
<div class="sm:px-6 lg:px-0">
<div class="relative isolate overflow-hidden bg-transparent px-6 pt-8 sm:mx-auto sm:max-w-2xl sm:rounded-3xl sm:pl-16 sm:pr-0 sm:pt-16 lg:mx-0 lg:max-w-none">
<div class="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
<img src="images/web4.png" alt="Web4 Preview" class="w-full max-w-none fade-in blinking-effect">
</div>
</div>
</div>
<div class="px-6 lg:px-0 lg:pl-4 lg:pt-4">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
<p class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">Unlock Web4 with ThreeFold</p>
<p class="mt-6 mx-automax-w-3xl text-pretty lg:text-2xl text-xl font-normal text-gray-200 fade-in">Revolutionary Tools for the Decentralized Internet.</p>
<div class="mt-6 max-w-xl space-y-8 text-base/7 text-gray-300 lg:max-w-none">
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">From secure phones and AI-driven virtual assistants to encrypted Web4 routers and decentralized nodes, our products redefine digital autonomy and connectivity.</p>
</div>
<div class="mt-10 flex items-center gap-x-6">
<a href="/signup" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Take the Next Step</a>
<a href="/action" class="fade-in text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
</div>
</div>

53
templates/partials/home/residents.html Normal file
View File

@@ -0,0 +1,53 @@
<div class="relative bg-white/5">
<main>
<div class="relative isolate">
<div class="overflow-hidden">
<div class="mx-auto max-w-7xl px-6 lg:pb-24 pt-12 lg:px-8 lg:pt-12">
<div class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
<div class="relative lg:hidden pb-4">
<img src="/images/people_1.jpg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl lg:order-first sm:pt-12">
<h2 class="text-base/7 font-light text-white tracking-wide">PARTICIPATE</h2>
<h1 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">Become a Part of the Movement</h1>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Find out how you can join CyberCity and be part of the future. Whether you're looking to invest, launch your business, become a digital citizen, or move into the heart of innovation, now is your chance to be among the first pioneers shaping this groundbreaking ecosystem.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Be the First to Shape the Future – Join Us Now!</p>
<div class="mt-10 flex items-center gap-x-6">
<a href="/ventures" class="rounded-md main-button px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Learn More</a>
</div>
</div>
<div class="mt-14 flex justify-end gap-8 lg:mt-0 lg:pl-0">
<div class="ml-auto w-44 flex-none space-y-8 lg:pt-36 hidden lg:block">
<div class="relative hidden lg:block">
<img src="/images/people_1.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
</div>
<div class="mr-auto w-44 flex-none space-y-8 lg:pt-24 hidden lg:block">
<div class="relative hidden lg:block">
<img src="/images/people_2.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="relative hidden lg:block">
<img src="/images/people_3.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
</div>
<div class="w-44 flex-none space-y-8 lg:pt-12 hidden lg:block">
<div class="relative hidden lg:block">
<img src="/images/people_4.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="relative hidden lg:block">
<img src="/images/people_5.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>

29
templates/partials/home/site.html Normal file
View File

@@ -0,0 +1,29 @@
<div class="relative mt-24 bg-white/5">
<main class="lg:relative">
<div class="mx-auto w-full lg:grid lg:grid-cols-2 lg:gap-4 lg:items-center text-center lg:text-left">
<!-- Text Section -->
<div class="relative col-span-1 px-6 sm:px-8 xl:pr-16">
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-gray-50">
<span class="text-base/7 font-light text-white tracking-wide">PROJECT SITE</span>
<br>
<span class="block text-white">Discover Fumba</span>
</h2>
<p class="text-left my-6 text-white max-w-4xl text-pretty lg:text-xl text-lg font-light fade-in">
Located in the heart of Zanzibar,Fumba offers a unique opportunity to merge modern development with cultural heritage and natural beauty.<br><br>
As part of the 2042 Fumba Free Economic Zone Master Plan, Fumba is set to become a key driver of economic growth and innovation in the region, making it the perfect location for a Cybercity.
</p>
<div class="mt-10 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<a href="#" class="fade-in flex w-full items-center justify-center rounded-xl border border-transparent px-6 py-2 text-base font-medium text-black bg-white hover:bg-indigo-700">
Learn More
</a>
</div>
</div>
</div>
<!-- Image Section -->
<div class="relative col-span-1">
<img class="h-full w-full object-cover" src="/images/fumba.jpg" alt="Fumba">
</div>
</div>
</main>
</div>

18
templates/partials/home/site2.html Normal file
View File

@@ -0,0 +1,18 @@
<div class="overflow-hidden bg-gray-800 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-4">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
<div class="lg:pr-8 lg:pt-4">
<div class="lg:max-w-lg">
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-gray-50">
<span class="text-base/7 font-light text-white tracking-wide">PROJECT SITE</span>
<span class="block xl:inline text-white">Discover Fumba</span>
</h2>
<p class="text-left my-6 text-white max-w-4xl text-pretty lg:text-xl text-lg font-light fade-in">
Fumba, located in the heart of Zanzibar, offers a unique opportunity to merge modern development with cultural heritage and natural beauty. As part of the 2042 Fumba Free Economic Zone Master Plan, Fumba is set to become a key driver of economic growth and innovation in the region. This transformation positions Fumba as the ideal site for CyberCity, a future-focused development designed to inspire sustainability, collaboration, and prosperity.
</p>
</div>
</div>
<img src="images/znz.jpg" alt="Product screenshot" class="h-full max-w-none rounded-s lg:pr-0 md:-ml-4 lg:-ml-0">
</div>
</div>
</div>

78
templates/partials/home/web4.html Normal file
View File

@@ -0,0 +1,78 @@
<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24">
<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-6xl font-bold tracking-tight text-white sm:text-6l">WEB4</h2>
<br>
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">The Next Evolution of the Internet</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Web4 is the natural progression of the Internet, where humans and artificial intelligence work together to create a new paradigm designed to promote planetary well-being and ensure equal opportunities for all. Users are in 100% control of their data and no centralized services are needed.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Blockchain was the first step to Web3.</p>
<p class="mx-auto mt-2 max-w-3xl text-pretty lg:text-xl text-lg font-medium text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
<!--
<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" class="fade-in text-balance text-2xl font-semibold tracking-tight text-white lg:text-3xl blinking-effect">12.12.2024</a>
</div>
-->
<div class="mt-16 fade-in flex items-center justify-center gap-x-6">
<a href="/signup" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Take the Next Step</a>
<a href="/action" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Initialize the countUp for each of the numbers
new CountUp('capacity', 0, 1910, 0, 2.5).start();
new CountUp('cores', 0, 46934, 0, 2.5).start();
new CountUp('nodes', 0, 1596, 0, 2.5).start();
new CountUp('countries', 0, 40, 0, 2.5).start();
new CountUp('farms', 0, 900, 0, 2.5).start();
});
</script>
<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 */
}
/* Apply the blinking animation to the link */
.blinking-effect {
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}
</style>