ourworld_web/www_aibox
20
0
Fork 0
Code Pull Requests Activity

edit text colior

Browse Source
This commit is contained in:
sasha-astiadi 2025-02-18 22:40:40 +08:00
parent 4f59562c2d
commit 40e8971ca1
63 changed files with 411 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
_archive/team.html
View File

@ -2,7 +2,7 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <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="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center"> <div class="text-center">
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">The Team Behind ThreeFold</h2> <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-black lg:text-5xl">The Team Behind ThreeFold</h2>
<p class="mx-auto mt-4 max-w-3xl text-pretty lg:text-2xl text-xl font-medium text-gray-200 fade-in">Founded by Internet Pioneers 1.0</p> <p class="mx-auto mt-4 max-w-3xl text-pretty lg:text-2xl text-xl font-medium text-gray-200 fade-in">Founded by Internet Pioneers 1.0</p>
<p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">We are a dedicated group committed to advancing a new digital era. Some of us have been working on Internet technology since the early days, when it was a decentralized network. We aim to help bring that vision to life once more. Beyond those below, we have more than 50 engineers, developers, and other team members supporting the project.</p> <p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">We are a dedicated group committed to advancing a new digital era. Some of us have been working on Internet technology since the early days, when it was a decentralized network. We aim to help bring that vision to life once more. Beyond those below, we have more than 50 engineers, developers, and other team members supporting the project.</p>
</div> </div>
@ -14,11 +14,11 @@
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80"> <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.png" alt="kristof_de_spiegeleer" class="size-full object-cover"> <img src="/images/kds.png" alt="kristof_de_spiegeleer" class="size-full object-cover">
</div> </div>
<h3 class="mt-4 text-xl font-semibold text-white"> <h3 class="mt-4 text-xl font-semibold text-black">
Kristof de Spiegeleer Kristof de Spiegeleer
</h3> </h3>
<p class="text-md text-gray-300">Co-founder & CEO</p> <p class="text-md text-gray-300">Co-founder & CEO</p>
<p class="mt-1 text-sm font-light text-white"> <p class="mt-1 text-sm font-light text-black">
Serial entrepreneur with 30 years of experience in Internet infrastructure and cloud technology. Passionate about tech for good. +600m $ exits.</p> Serial entrepreneur with 30 years of experience in Internet infrastructure and cloud technology. Passionate about tech for good. +600m $ exits.</p>
</div> </div>
@ -27,11 +27,11 @@
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80"> <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.png" alt="adnan_fatayerji" class="size-full object-cover"> <img src="/images/adnan.png" alt="adnan_fatayerji" class="size-full object-cover">
</div> </div>
<h3 class="mt-4 text-xl font-semibold text-white"> <h3 class="mt-4 text-xl font-semibold text-black">
Adnan Fatayerji Adnan Fatayerji
</h3> </h3>
<p class="text-md text-gray-300">Co-founder</p> <p class="text-md text-gray-300">Co-founder</p>
<p class="mt-1 text-sm font-light text-white"> <p class="mt-1 text-sm font-light text-black">
Tech entrepreneur with multiple exits. Based in Dubai for 20 years. Head of Partnerships and Business Development..</p> Tech entrepreneur with multiple exits. Based in Dubai for 20 years. Head of Partnerships and Business Development..</p>
</div> </div>
@ -40,11 +40,11 @@
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80"> <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.png" alt="jan_de_landtsheer" class="size-full object-cover"> <img src="/images/jan.png" alt="jan_de_landtsheer" class="size-full object-cover">
</div> </div>
<h3 class="mt-4 text-xl font-semibold text-white"> <h3 class="mt-4 text-xl font-semibold text-black">
Jan De Landtsheer Jan De Landtsheer
</h3> </h3>
<p class="text-md text-gray-300">Co-founder & CTO</p> <p class="text-md text-gray-300">Co-founder & CTO</p>
<p class="mt-1 text-sm font-light text-white"> <p class="mt-1 text-sm font-light text-black">
Engineer with 40+ years of experience in deep tech, networking, cloud and storage.</p> Engineer with 40+ years of experience in deep tech, networking, cloud and storage.</p>
</div> </div>
@ -53,11 +53,11 @@
<div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80"> <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.png" alt="florian_fournier" class="size-full object-cover"> <img src="/images/flo.png" alt="florian_fournier" class="size-full object-cover">
</div> </div>
<h3 class="mt-4 text-xl font-semibold text-white"> <h3 class="mt-4 text-xl font-semibold text-black">
Florian Fournier Florian Fournier
</h3> </h3>
<p class="text-md text-gray-300">Co-founder & CMO</p> <p class="text-md text-gray-300">Co-founder & CMO</p>
<p class="mt-1 text-sm font-light text-white"> <p class="mt-1 text-sm font-light text-black">
Ex Apple marketing director, serial entrepreneur living between Africa and Latin America.</p> Ex Apple marketing director, serial entrepreneur living between Africa and Latin America.</p>
</div> </div>
</div> </div>

1
templates/layouts/action.html
View File

@ -1,5 +1,6 @@
{% extends "_default/base.html" %} {% extends "_default/base.html" %}
{% block content %} {% block content %}
{% include "partials/download/download1.html" %}
{% include "partials/action/video.html" %} {% include "partials/action/video.html" %}
{% include "partials/action/web4tools.html" %} {% include "partials/action/web4tools.html" %}
{% include "partials/action/action.html" %} {% include "partials/action/action.html" %}

2
templates/layouts/hero.html
View File

@ -67,7 +67,7 @@
<h1 class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">Data to enrich your online business</h1> <h1 class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">Data to enrich your online business</h1>
<p class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p> <p class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
<div class="mt-10 flex items-center justify-center gap-x-6"> <div class="mt-10 flex items-center justify-center gap-x-6">
<a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a> <a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>

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

@ -1,11 +1,11 @@
<div class="relative isolate overflow-hidden bg-transparent text-white pt-12 pb-24"> <div class="relative isolate overflow-hidden bg-transparent text-black pt-12 pb-24">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="relative grid lg:grid-cols-12 lg:gap-8"> <div class="relative grid lg:grid-cols-12 lg:gap-8">
<!-- Left Content --> <!-- Left Content -->
<div class="lg:col-span-7"> <div class="lg:col-span-7">
<div class="mx-auto max-w-2xl lg:mx-0"> <div class="mx-auto max-w-2xl lg:mx-0">
<h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">When 3 Becomes 4</h1> <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-black lg:text-5xl">When 3 Becomes 4</h1>
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-white"> <p class="fade-in mt-6 text-lg lg:text-xl font-light text-black">
The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all. <br><br> The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all. <br><br>
Web4 represents the natural evolution of the internet, enabling humans and machines to collaborate in creating a new form of intelligence that respects both the planet and the people.<br><br> Web4 represents the natural evolution of the internet, enabling humans and machines to collaborate in creating a new form of intelligence that respects both the planet and the people.<br><br>
For over a decade, ThreeFold has been dedicated to realizing this vision. Now is time for our next chapter.</span> For over a decade, ThreeFold has been dedicated to realizing this vision. Now is time for our next chapter.</span>
@ -16,13 +16,13 @@
<!-- Right Blockquote --> <!-- Right Blockquote -->
<div class="lg:col-span-5"> <div class="lg:col-span-5">
<figure class=" mt-6 pl-8"> <figure class=" mt-6 pl-8">
<blockquote class=" text-2xl text-white fade-in font-semibold "> <blockquote class=" text-2xl text-black fade-in font-semibold ">
<p class="lg:text-2xl text-xl leading-normal text-white font-semibold">We believe actions are more important than words. <br><br> <p class="lg:text-2xl text-xl leading-normal text-black font-semibold">We believe actions are more important than words. <br><br>
This page is in black & white, to let YOU be the <span style="color: red;">color</span> 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> </p>
</blockquote> </blockquote>
<br> <br>
<a href="/signup" target="_blank" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take the Next Step</a> <a href="/signup" target="_blank" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-black hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take the Next Step</a>
</figure> </figure>
</div> </div>
</div> </div>

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

@ -2,22 +2,22 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <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"> <div class="mx-auto max-w-2xl lg:max-w-7xl items-center text-center">
<p class="fade-in mx-auto text-pretty lg:text-2xl leading-tight text-xl font-normal text-gray-200">Announcements</p> <p class="fade-in mx-auto text-pretty lg:text-2xl leading-tight text-xl font-normal text-gray-200">Announcements</p>
<p class="fade-in mx-auto text-pretty lg:text-5xl leading-tight text-4xl font-normal text-white">Coming Soon on 12.12.24</p> <p class="fade-in mx-auto text-pretty lg:text-5xl leading-tight text-4xl font-normal text-black">Coming Soon on 12.12.24</p>
<p class="max-w-4xl mt-4 fade-in mx-auto text-pretty lg:text-xl mb-12 leading-tight text-lg font-light text-gray-200"></p> <p class="max-w-4xl mt-4 fade-in mx-auto text-pretty lg:text-xl mb-12 leading-tight text-lg font-light text-gray-200"></p>
</div> </div>
<div class="-mx-6 grid grid-cols-2 gap-2 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-2"> <div class="-mx-6 grid grid-cols-2 gap-2 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-2">
<div class="grid-item bg-white/5 p-2 lg:p-12"> <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>Web4</h2> <h2 class="text-black lg:text-3xl text-xl text-center font-semibold">A Roadmap to <br>Web4</h2>
</div> </div>
<div class="grid-item bg-white/5 p-2 lg:p-12"> <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">Web4 <br>Phone</h2> <h2 class="text-black lg:text-3xl text-xl text-center font-semibold">Web4 <br>Phone</h2>
</div> </div>
<div class="grid-item bg-white/5 p-2 lg:p-12"> <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">Web4 <br>Router</h2> <h2 class="text-black lg:text-3xl text-xl text-center font-semibold">Web4 <br>Router</h2>
</div> </div>
<div class="grid-item bg-white/5 p-2 lg:p-12"> <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">Web4 <br>Node</h2> <h2 class="text-black lg:text-3xl text-xl text-center font-semibold">Web4 <br>Node</h2>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,13 +1,13 @@
<div class="bg-transparent"> <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"> <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 lg:text-left lg:items-start items-center text-center font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in"> <h2 class="lg:text-balance leading-tight lg:text-left lg:items-start items-center text-center font-normal tracking-tight text-black lg:text-5xl text-3xl fade-in">
Stay tuned for 12.12.24<br/> Stay tuned for 12.12.24<br/>
</h2> </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"> <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"> <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">
Telegram Telegram
</a> </a>
<a href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white 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"> <a href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" class="fade-in rounded-2xl bg-black 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">
Newsletter Newsletter
</a> </a>
</div> </div>

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

@ -6,7 +6,7 @@
to let YOU be the color of the future of the internet. to let YOU be the color of the future of the internet.
</p> </p>
<h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay"> <h2 class="mt-12 text-balance font-normal tracking-tight text-black lg:text-4xl text-3xl fade-in fade-in-delay">
Web4 Web4
</h2> </h2>
@ -15,7 +15,7 @@
a new form of Intelligence with respect for the Planet & People. a new form of Intelligence with respect for the Planet & People.
</p> </p>
<h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay"> <h2 class="mt-12 text-balance font-normal tracking-tight text-black lg:text-4xl text-3xl fade-in fade-in-delay">
Augmented Collective Intelligence Augmented Collective Intelligence
</h2> </h2>
@ -24,7 +24,7 @@
ready to go public <span class="font-semibold">12.12.2024</span> ready to go public <span class="font-semibold">12.12.2024</span>
</p> </p>
<h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay"> <h2 class="mt-12 text-balance font-normal tracking-tight text-black lg:text-4xl text-3xl fade-in fade-in-delay">
An Internet created by Everyone for Everyone An Internet created by Everyone for Everyone
</h2> </h2>
@ -37,7 +37,7 @@
Register for our online launch event 12-12-2024. Register for our online launch event 12-12-2024.
</p> </p>
<h2 class="mt-12 text-balance font-semibold tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay"> <h2 class="mt-12 text-balance font-semibold tracking-tight text-black lg:text-4xl text-3xl fade-in fade-in-delay">
When 3 Becomes 4 When 3 Becomes 4
</h2> </h2>
<div class="mt-12 flex items-center justify-center gap-x-6"> <div class="mt-12 flex items-center justify-center gap-x-6">

18
templates/partials/action/tools.html
View File

@ -1,7 +1,7 @@
<div class="bg-transparent py-24 sm:py-32"> <div class="bg-transparent py-24 sm:py-32">
<div class="mx-auto max-w-7xl grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start px-6"> <div class="mx-auto max-w-7xl grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start px-6">
<div class="mx-auto w-full max-w-3xl lg:mx-0"> <div class="mx-auto w-full max-w-3xl lg:mx-0">
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">Unlock the Web4 Revolution with ThreeFold</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-black">Unlock the Web4 Revolution with ThreeFold</h2>
<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 routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p> <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 routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
<div class="mt-8 flex gap-x-6"> <div class="mt-8 flex gap-x-6">
</div> </div>
@ -9,30 +9,30 @@
<div class="mx-auto grid w-full max-w-xl grid-cols-2 gap-2 items-center gap-y-12 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:pl-8"> <div class="mx-auto grid w-full max-w-xl grid-cols-2 gap-2 items-center gap-y-12 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:pl-8">
<div class="grid-item bg-white/5 p-2 lg:p-12"> <div class="grid-item bg-white/5 p-2 lg:p-12">
<div class="p-10"> <div class="p-10">
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Phone</p> <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">Web4 Phone</p>
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The world’s first truly decentralized smartphone on a mission to define Web4 mobile connectivity.</p> <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The world’s first truly decentralized smartphone on a mission to define Web4 mobile connectivity.</p>
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="mt-6 text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
<div class="grid-item bg-white/5 p-2 lg:p-12"> <div class="grid-item bg-white/5 p-2 lg:p-12">
<div class="p-10"> <div class="p-10">
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Router</p> <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">Web4 Router</p>
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Be your own Internet and unlock the full potential of Web4 from the convenience of your home.</p> <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Be your own Internet and unlock the full potential of Web4 from the convenience of your home.</p>
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="mt-6 text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
<div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4"> <div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
<div class="p-10"> <div class="p-10">
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Nodes</p> <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">Web4 Nodes</p>
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Power the Internet by hosting your own Web4 Node—contributing to a secure, scalable, and autonomous Web4 ecosystem.</p> <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Power the Internet by hosting your own Web4 Node—contributing to a secure, scalable, and autonomous Web4 ecosystem.</p>
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="mt-6 text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
<div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4"> <div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
<div class="p-10"> <div class="p-10">
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">TF Genie</p> <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">TF Genie</p>
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Your AI-powered Web4 assistant, designed to enhance productivity and simplify daily tasks with seamless integration.</p> <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Your AI-powered Web4 assistant, designed to enhance productivity and simplify daily tasks with seamless integration.</p>
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="mt-6 text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,7 +1,7 @@
<div class="flex bg-transparent pt-16 pb-10 justify-center relative isolate overflow-hidden"> <div class="flex bg-transparent pt-16 pb-10 justify-center relative isolate overflow-hidden">
<div class="max-w-7xl mx-auto text-center px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto text-center px-4 sm:px-6 lg:px-8">
<!-- Main Heading --> <!-- Main Heading -->
<h2 class="fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-white"> <h2 class="fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-black">
Join the Web4 Revolution Join the Web4 Revolution
</h2> </h2>

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

@ -1,7 +1,7 @@
<div class="overflow-hidden bg-transparent py-16 lg:py-24"> <div class="overflow-hidden bg-transparent py-16 lg:py-24">
<div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8"> <div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
<div class="mx-auto max-w-2xl px-6 lg:max-w-6xl lg:px-8"> <div class="mx-auto max-w-2xl px-6 lg:max-w-6xl lg:px-8">
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Discover ThreeFold's Web4 Products for a Smarter, Secure Future</h2> <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black">Discover ThreeFold's Web4 Products for a Smarter, Secure Future</h2>
<p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in"> <p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p> From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
</div> </div>
@ -15,24 +15,24 @@
<div class="relative p-4"> <!-- Add padding here for all sides --> <div class="relative p-4"> <!-- Add padding here for all sides -->
<div class="gap-y-4"> <div class="gap-y-4">
<div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div --> <div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Phone</dt> <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">3Phone</dt>
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Secure smartphones come with built-in decentralized apps and seamlessly integrate with the ThreeFold Grid.</dd> <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Secure smartphones come with built-in decentralized apps and seamlessly integrate with the ThreeFold Grid.</dd>
<a href="https://docs.threefold.io/docs/components/3phone/" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="https://docs.threefold.io/docs/components/3phone/" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div --> <div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Bot</dt> <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">3Bot</dt>
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">An AI-powered virtual system administrator helps deploy and manage your digital life.</dd> <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">An AI-powered virtual system administrator helps deploy and manage your digital life.</dd>
<a href="https://docs.threefold.io/docs/components/3bot" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="https://docs.threefold.io/docs/components/3bot" target="_blank" class=" text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div --> <div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Node</dt> <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">3Node</dt>
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The backbone of Web4's cloud infrastructure, providing compute and data resources.</dd> <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The backbone of Web4's cloud infrastructure, providing compute and data resources.</dd>
<a href="https://docs.threefold.io/docs/components/3node" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="https://docs.threefold.io/docs/components/3node" target="_blank" class=" text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div --> <div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Router</dt> <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">3Router</dt>
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption.</dd> <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption.</dd>
<a href="https://docs.threefold.io/docs/components/3router" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="https://docs.threefold.io/docs/components/3router" target="_blank" class=" text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
</div> </div>

2
templates/partials/applicationForm.html
View File

@ -53,7 +53,7 @@
</div> </div>
</div> </div>
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6"> <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button> <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-black bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button>
</div> </div>
</div> </div>
</form> </form>

2
templates/partials/blogSidebar.html
View File

@ -2,7 +2,7 @@
<div class="mx-8 md:mx-4 flex flex-col"> <div class="mx-8 md:mx-4 flex flex-col">
<div class="flex flex-col mb-12"> <div class="flex flex-col mb-12">
<h4 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4"> FILTER POSTS BY</h4> <h4 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4"> FILTER POSTS BY</h4>
<a id="all" class="mb-2 text-white font-normal" href="/blog">All</a> <a id="all" class="mb-2 text-black font-normal" href="/blog">All</a>
{% set taxonomy = get_taxonomy(kind="categories") %} {% set taxonomy = get_taxonomy(kind="categories") %}
{% set categories = taxonomy.items %} {% set categories = taxonomy.items %}
{% for category in categories %} {% for category in categories %}

86
templates/partials/download/download1.html Normal file
View File

File diff suppressed because one or more lines are too long

10
templates/partials/feature/feature1.html
View File

@ -3,24 +3,24 @@
<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="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:pt-4 lg:pr-8"> <div class="lg:pt-4 lg:pr-8">
<div class="lg:max-w-lg"> <div class="lg:max-w-lg">
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is Feature1.html</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is Feature1.html</h2>
<p class="mt-6 mt-8 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="mt-6 mt-8 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-300 lg:max-w-none"> <dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-300 lg:max-w-none">
<div class="relative pl-9"> <div class="relative pl-9">
<dt class="inline font-semibold text-white"> <dt class="inline font-semibold text-black">
✓ Push to deploy. ✓ Push to deploy.
</dt> </dt>
<dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd> <dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
</div> </div>
<div class="relative pl-9"> <div class="relative pl-9">
<dt class="inline font-semibold text-white"> <dt class="inline font-semibold text-black">
✓ SSL certificates. ✓ SSL certificates.
</dt> </dt>
<dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd> <dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div> </div>
<div class="relative pl-9"> <div class="relative pl-9">
<dt class="inline font-semibold text-white"> <dt class="inline font-semibold text-black">
✓ Database backups. ✓ Database backups.
</dt> </dt>
<dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd> <dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd>

16
templates/partials/feature/feature2.html
View File

@ -1,8 +1,8 @@
<div class="py-24 sm:py-32"> <div class="py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center"> <div class="mx-auto max-w-2xl text-center">
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is Feature2.html</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is Feature2.html</h2>
<p class="mt-6 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="mt-6 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
</div> </div>
</div> </div>
@ -17,42 +17,42 @@
<div class="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8"> <div class="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
<dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-gray-300 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16"> <dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-gray-300 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
<div class="relative pl-9"> <div class="relative pl-9">
<dt class="inline font-semibold text-white"> <dt class="inline font-semibold text-black">
✓ Push to deploy. ✓ Push to deploy.
</dt> </dt>
<dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd> <dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
</div> </div>
<div class="relative pl-9"> <div class="relative pl-9">
<dt class="inline font-semibold text-white"> <dt class="inline font-semibold text-black">
✓ SSL certificates. ✓ SSL certificates.
</dt> </dt>
<dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd> <dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div> </div>
<div class="relative pl-9"> <div class="relative pl-9">
<dt class="inline font-semibold text-white"> <dt class="inline font-semibold text-black">
✓ Simple queues. ✓ Simple queues.
</dt> </dt>
<dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd> <dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd>
</div> </div>
<div class="relative pl-9"> <div class="relative pl-9">
<dt class="inline font-semibold text-white"> <dt class="inline font-semibold text-black">
✓ Advanced security. ✓ Advanced security.
</dt> </dt>
<dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd> <dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
</div> </div>
<div class="relative pl-9"> <div class="relative pl-9">
<dt class="inline font-semibold text-white"> <dt class="inline font-semibold text-black">
✓ Powerful API. ✓ Powerful API.
</dt> </dt>
<dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd> <dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
</div> </div>
<div class="relative pl-9"> <div class="relative pl-9">
<dt class="inline font-semibold text-white"> <dt class="inline font-semibold text-black">
✓ Database backups. ✓ Database backups.
</dt> </dt>

16
templates/partials/feature/feature3.html
View File

@ -1,45 +1,45 @@
<div class=" py-24 sm:py-32"> <div class=" py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center"> <div class="mx-auto max-w-2xl text-center">
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is Feature3.html</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is Feature3.html</h2>
<p class="mt-6 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="mt-6 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
</div> </div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none"> <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"> <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="flex flex-col"> <div class="flex flex-col">
<dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-white"> <dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-black">
✓ Push to deploy ✓ Push to deploy
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col text-base/7 font-light"> <dd class="mt-4 flex flex-auto flex-col text-base/7 font-light">
<p class="flex-auto text-gray-200">Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu.</p> <p class="flex-auto text-gray-200">Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu.</p>
<p class="mt-6"> <p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-white"> <dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-black">
✓ SSL certificates ✓ SSL certificates
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col text-base/7 font-light"> <dd class="mt-4 flex flex-auto flex-col text-base/7 font-light">
<p class="flex-auto text-gray-200">Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.</p> <p class="flex-auto text-gray-200">Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.</p>
<p class="mt-6"> <p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-white"> <dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-black">
✓ Simple queues ✓ Simple queues
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col text-base/7 font-light"> <dd class="mt-4 flex flex-auto flex-col text-base/7 font-light">
<p class="flex-auto text-gray-200">Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod.</p> <p class="flex-auto text-gray-200">Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod.</p>
<p class="mt-6"> <p class="mt-6">
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>

4
templates/partials/feature/feature4.html
View File

@ -1,8 +1,8 @@
<div class="bg-transparent"> <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="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 lg:pb-10 pb-4"> <div class="max-w-3xl px-0 lg:px-16 lg:pb-10 pb-4">
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white sm:text-5xl">This is Feature4.html <h2 class="fade-in text-balance lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black sm:text-5xl">This is Feature4.html
</h2> </h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<p class="mx-auto mt-4 mb-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="mx-auto mt-4 mb-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>

40
templates/partials/feature/feature5.html
View File

@ -1,8 +1,8 @@
<div class="bg-transparent pt-12 pb-6"> <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-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"> <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">This is feature5.html</h2> <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black">This is feature5.html</h2>
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in"> <p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
</p> </p>
@ -14,106 +14,106 @@
<div class="mx-auto max-w-2xl lg:max-w-none"> <div class="mx-auto max-w-2xl 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"> <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-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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
FEATURE FEATURE
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<p class="mt-6"> <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> <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-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
FEATURE FEATURE
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<p class="mt-6"> <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> <a href="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
FEATURE FEATURE
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<p class="mt-6"> <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> <a href="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<!-- 2ND ROW--> <!-- 2ND ROW-->
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
FEATURE FEATURE
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <dd class="mt-2 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<p class="mt-6"> <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> <a href="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
FEATURE FEATURE
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <dd class="mt-2 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<p class="mt-6"> <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> <a href="https://manual.grid.tf/documentation/developers/tfchain/tfchain.html?highlight=nodes#nodes" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
FEATURE FEATURE
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <dd class="mt-2 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<p class="mt-6"> <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> <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-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<!-- 3RD ROW--> <!-- 3RD ROW-->
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
FEATURE FEATURE
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <dd class="mt-2 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<p class="mt-6"> <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> <a href="https://manual.grid.tf/documentation/dashboard/dashboard.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
FEATURE FEATURE
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <dd class="mt-2 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<p class="mt-6"> <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> <a href="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
FEATURE FEATURE
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <dd class="mt-2 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="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"> <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> <a href="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>

4
templates/partials/feature/feature6.html
View File

@ -3,8 +3,8 @@
<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="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:ml-auto lg:pt-4 lg:pl-4"> <div class="lg:ml-auto lg:pt-4 lg:pl-4">
<div class="lg:max-w-lg"> <div class="lg:max-w-lg">
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is Feature6.html</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is Feature6.html</h2>
<p class="mt-6 text-lg/8 text-gray-200 font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p> <p class="mt-6 text-lg/8 text-gray-200 font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-200 lg:max-w-none"> <dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-200 lg:max-w-none">
<div class="relative pl-9"> <div class="relative pl-9">

8
templates/partials/hero/hero1.html
View File

@ -1,19 +1,19 @@
<div class="text-white fade-in"> <div class="text-black fade-in">
<div class="relative isolate px-6 pt-14 lg:px-8"> <div class="relative isolate px-6 pt-14 lg:px-8">
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56"> <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div class="hidden sm:mb-8 sm:flex sm:justify-center"> <div class="hidden sm:mb-8 sm:flex sm:justify-center">
<div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500"> <div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500">
Announcing our next round of funding. <a href="#" class="font-semibold text-gray-200 hover:text-white"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a> Announcing our next round of funding. <a href="#" class="font-semibold text-gray-200 hover:text-black"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
</div> </div>
</div> </div>
<div class="text-center"> <div class="text-center">
<p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-black">This is Hero1.html</h1> <h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-black">This is Hero1.html</h1>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
<p class="mt-8 lg:text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p> <p class="mt-8 lg:text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
<div class="mt-10 flex items-center justify-center gap-x-6"> <div class="mt-10 flex items-center justify-center gap-x-6">
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a> <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
</div> </div>

10
templates/partials/hero/hero2.html
View File

@ -1,13 +1,13 @@
<div class="relative isolate overflow-hidden"> <div class="relative isolate overflow-hidden">
<div class="mx-auto max-w-7xl lg:col-span-2 px-6 pt-10 pb-24 sm:pb-32 lg:flex lg:gap-x-20 lg:px-8 lg:py-40"> <div class="mx-auto max-w-7xl lg:col-span-2 px-6 pt-10 pb-24 sm:pb-32 lg:flex lg:gap-x-20 lg:px-8 lg:py-40">
<div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8"> <div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h1 class="mt-10 font-semibold tracking-tight text-pretty text-white lg:text-6xl text-4xl">This is Hero2.html</h1> <h1 class="mt-10 font-semibold tracking-tight text-pretty text-black lg:text-6xl text-4xl">This is Hero2.html</h1>
<h2 class="fade-in text-pretty lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2> <h2 class="fade-in text-pretty lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
<p class="mt-8 text-lg font-light text-gray-50 lg:text-xl">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p> <p class="mt-8 text-lg font-light text-gray-50 lg:text-xl">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
<div class="mt-10 flex items-center gap-x-6"> <div class="mt-10 flex items-center gap-x-6">
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a> <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
<div class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:mt-0 lg:mr-0 lg:ml-10 lg:max-w-none lg:flex-none xl:ml-32"> <div class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:mt-0 lg:mr-0 lg:ml-10 lg:max-w-none lg:flex-none xl:ml-32">

8
templates/partials/hero/hero3.html
View File

@ -5,16 +5,16 @@
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56"> <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div class="hidden sm:mb-8 sm:flex sm:justify-center"> <div class="hidden sm:mb-8 sm:flex sm:justify-center">
<div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500"> <div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500">
Announcing our next round of funding. <a href="#" class="font-semibold text-gray-200 hover:text-white"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a> Announcing our next round of funding. <a href="#" class="font-semibold text-gray-200 hover:text-black"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
</div> </div>
</div> </div>
<div class="text-center"> <div class="text-center">
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-white">This is Hero3.html</h1> <h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-black">This is Hero3.html</h1>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
<p class="mt-8 lg:text-xl text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p> <p class="mt-8 lg:text-xl text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
<div class="mt-10 flex items-center justify-center gap-x-6"> <div class="mt-10 flex items-center justify-center gap-x-6">
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a> <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
</div> </div>

6
templates/partials/hero/hero4.html
View File

@ -3,12 +3,12 @@
<div class="py-24 sm:py-32 lg:pb-40"> <div class="py-24 sm:py-32 lg:pb-40">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center"> <div class="mx-auto max-w-2xl text-center">
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-white">This is Hero4.html</h1> <h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-black">This is Hero4.html</h1>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
<p class="mt-8 lg:text-xl text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p> <p class="mt-8 lg:text-xl text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
<div class="mt-10 flex items-center justify-center gap-x-6"> <div class="mt-10 flex items-center justify-center gap-x-6">
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a> <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
<img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" width="2432" height="1442" class="mt-16 rounded-md bg-white/5 ring-1 shadow-2xl ring-white/10 sm:mt-24"> <img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" width="2432" height="1442" class="mt-16 rounded-md bg-white/5 ring-1 shadow-2xl ring-white/10 sm:mt-24">

8
templates/partials/hero/hero5.html
View File

@ -2,11 +2,11 @@
<div class="relative isolate pt-14"> <div class="relative isolate pt-14">
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-15 lg:px-8 lg:py-40"> <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-15 lg:px-8 lg:py-40">
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto"> <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h1 class="mt-10 text-4xl font-semibold tracking-tight text-white lg:text-6xl"> <h1 class="mt-10 text-4xl font-semibold tracking-tight text-black lg:text-6xl">
This is Hero5.html This is Hero5.html
</h1> </h1>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
<p class="mt-8 text-lg font-light text-gray-50 sm:text-xl"> <p class="mt-8 text-lg font-light text-gray-50 sm:text-xl">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt. Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
@ -15,7 +15,7 @@
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200"> <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
Get started Get started
</a> </a>
<a href="#" class="text-sm font-semibold text-white hover:text-gray-200"> <a href="#" class="text-sm font-semibold text-black hover:text-gray-200">
Learn more <span aria-hidden="true">→</span> Learn more <span aria-hidden="true">→</span>
</a> </a>
</div> </div>

8
templates/partials/hero/hero6.html
View File

@ -2,11 +2,11 @@
<div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8"> <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
<div class="px-6 pt-10 pb-24 sm:pb-32 lg:col-span-7 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-6"> <div class="px-6 pt-10 pb-24 sm:pb-32 lg:col-span-7 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-6">
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto"> <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h1 class="mt-10 text-4xl font-semibold tracking-tight text-white lg:text-6xl"> <h1 class="mt-10 text-4xl font-semibold tracking-tight text-black lg:text-6xl">
This is Hero6.html This is Hero6.html
</h1> </h1>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
<p class="mt-8 text-lg font-light text-gray-50 lgl:text-xl"> <p class="mt-8 text-lg font-light text-gray-50 lgl:text-xl">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt. Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
@ -15,7 +15,7 @@
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200"> <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
Get started Get started
</a> </a>
<a href="#" class="text-sm font-semibold text-white hover:text-gray-200"> <a href="#" class="text-sm font-semibold text-black hover:text-gray-200">
Learn more <span aria-hidden="true">→</span> Learn more <span aria-hidden="true">→</span>
</a> </a>
</div> </div>

8
templates/partials/hero/hero7.html
View File

@ -7,14 +7,14 @@
<div class="hidden sm:mb-10 sm:flex"> <div class="hidden sm:mb-10 sm:flex">
<div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-50 ring-1 ring-gray-700 hover:ring-gray-600"> <div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-50 ring-1 ring-gray-700 hover:ring-gray-600">
Anim aute id magna aliqua ad ad non deserunt sunt. Anim aute id magna aliqua ad ad non deserunt sunt.
<a href="#" class="font-semibold whitespace-nowrap text-white"> <a href="#" class="font-semibold whitespace-nowrap text-black">
<span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span> <span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span>
</a> </a>
</div> </div>
</div> </div>
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER IF NEEDED</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER IF NEEDED</p>
<h1 class="text-4xl lg:text-6xl font-semibold tracking-tight text-white">This is hero7.html</h1> <h1 class="text-4xl lg:text-6xl font-semibold tracking-tight text-black">This is hero7.html</h1>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
<p class="mt-8 text-lg sm:text-xl font-light text-gray-50"> <p class="mt-8 text-lg sm:text-xl font-light text-gray-50">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
Elit sunt amet fugiat veniam occaecat fugiat aliqua. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

8
templates/partials/hero/hero8.html
View File

@ -9,13 +9,13 @@
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div> <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div> </div>
<div class="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl lg:order-first sm:pt-12"> <div class="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl lg:order-first sm:pt-12">
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h1 class="fade-in text-4xl lg:text-6xl font-semibold tracking-tight text-white">This is Hero8.html</h1> <h1 class="fade-in text-4xl lg:text-6xl font-semibold tracking-tight text-black">This is Hero8.html</h1>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p> <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
<div class="mt-10 flex items-center gap-x-6"> <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> <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>
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
<div class="mt-14 flex justify-end gap-8 lg:mt-0 lg:pl-0"> <div class="mt-14 flex justify-end gap-8 lg:mt-0 lg:pl-0">

8
templates/partials/hero/hero9.html
View File

@ -3,13 +3,13 @@
<div class="mx-auto max-w-7xl px-6 py-32 lg:py-40 lg:px-8"> <div class="mx-auto max-w-7xl px-6 py-32 lg:py-40 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:items-center lg:gap-x-16 xl:grid-cols-2 xl:gap-x-16"> <div class="mx-auto max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:items-center lg:gap-x-16 xl:grid-cols-2 xl:gap-x-16">
<div class="text-content"> <div class="text-content">
<p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p> <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h1 class="text-4xl font-semibold tracking-tight text-white lg:text-6xl">This is hero9.html</h1> <h1 class="text-4xl font-semibold tracking-tight text-black lg:text-6xl">This is hero9.html</h1>
<h2 class="mt-6 text-4xl font-normal tracking-tight text-white lg:text-5xl">This is smaller title h2</h2> <h2 class="mt-6 text-4xl font-normal tracking-tight text-black lg:text-5xl">This is smaller title h2</h2>
<p class="mt-6 text-lg font-light text-gray-200 lg:text-xl">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</p> <p class="mt-6 text-lg font-light text-gray-200 lg:text-xl">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</p>
<div class="mt-10 flex items-center gap-x-6"> <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> <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>
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">

2
templates/partials/hero/myhero3.html
View File

@ -1,7 +1,7 @@
<div class=" fade-in bg-white"> <div class=" fade-in bg-white">
<div class="lg:py-12 relative isolate"> <div class="lg:py-12 relative isolate">
<div class=" mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 pb-24"> <div class=" mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 pb-24">
<p class="text-base/7 font-light text-white tracking-wide">HOW IT WORKS</p> <p class="text-base/7 font-light text-black tracking-wide">HOW IT WORKS</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">Unraveling Mycelium's Secrets </h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">Unraveling Mycelium's Secrets </h2>
<p class="text-left mt-4 text-pretty lg:text-lg text-md font-light text-black fade-in max-w-3xl"> <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light text-black fade-in max-w-3xl">
Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks. Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.

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

@ -13,8 +13,8 @@
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
<p class="mt-8 lg:text-xl text-lg font-light text-black sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p> <p class="mt-8 lg:text-xl text-lg font-light text-black sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
<div class="mt-10 flex items-center justify-center gap-x-6"> <div class="mt-10 flex items-center justify-center gap-x-6">
<a href="#" class="rounded-2xl bg-black px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a> <a href="#" class="rounded-2xl bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
</div> </div>

2
templates/partials/hero/myhero7.html
View File

@ -6,7 +6,7 @@
<p class="mt-6 text-lg lg:text-xl text-pretty font-light text-gray-300">Join the Mycelium network and be a part of the decentralized movement.</p> <p class="mt-6 text-lg lg:text-xl text-pretty font-light text-gray-300">Join the Mycelium network and be a part of the decentralized movement.</p>
<div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start"> <div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
<a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Download Now</a> <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Download Now</a>
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-100">Read Manual <span aria-hidden="true">→</span></a> <a href="#" class="text-sm/6 font-semibold text-black hover:text-gray-100">Read Manual <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
<div class="relative mt-16 h-80 lg:mt-8"> <div class="relative mt-16 h-80 lg:mt-8">

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

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

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

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

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

@ -16,7 +16,7 @@
<main class="relative flex flex-col justify-center overflow-hidden"> <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"> <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> <h1 class="text-3xl font-normal tracking-tight text-black">Frequently Asked Questions</h1>
<!-- Accordion component --> <!-- Accordion component -->
<div class="divide-y divide-white/50 my-10"> <div class="divide-y divide-white/50 my-10">

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

@ -1,8 +1,8 @@
<div class="bg-transparent py-24 pb-6"> <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-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"> <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> <span class="text-base/7 font-light text-black 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"> <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black">
Unique Value Proposition</h2> 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"> <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. 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.
@ -15,7 +15,7 @@
<!-- concept --> <!-- 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="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 --> <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"> <dt class="relative z-10 flex items-center gap-x-3 text-2xl font-semibold tracking-tight text-black rounded-2xl">
Digital Freezone Digital Freezone
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
@ -27,7 +27,7 @@
<!-- concept --> <!-- 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="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 --> <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"> <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-black">
Datacenter City Datacenter City
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
@ -37,7 +37,7 @@
<!-- concept --> <!-- 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="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 --> <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"> <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-black">
Digital Hero Digital Hero
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
@ -49,7 +49,7 @@
<!-- concept --> <!-- 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="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 --> <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"> <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-black">
Venture Creator Venture Creator
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
@ -61,7 +61,7 @@
<!-- concept --> <!-- 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="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 --> <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"> <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-black">
Regenerative Living Regenerative Living
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
@ -73,7 +73,7 @@
<!-- concept --> <!-- 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="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 --> <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"> <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-black">
Sovereign Zone Sovereign Zone
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
@ -85,7 +85,7 @@
<!-- concept --> <!-- 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="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 --> <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"> <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-black">
Augmented Intelligence Augmented Intelligence
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
@ -97,7 +97,7 @@
<!-- concept --> <!-- 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="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 --> <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"> <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-black">
Digital Assets Digital Assets
</dt> </dt>
<dd class="relative z-10 mt-4 flex flex-auto flex-col"> <dd class="relative z-10 mt-4 flex flex-auto flex-col">

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

@ -1,11 +1,11 @@
<div class="bg-transparent pt-12 pb-24 "> <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="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"> <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 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-black">ThreeFold is the Infrastructure Layer of Web4
</h2> </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-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> <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> <a href="/what" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-black hover:text-gray-400">Discover How It Works <span aria-hidden="true">→</span></a>
</div> </div>
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing --> <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"> <dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-4">

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

@ -2,7 +2,7 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <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="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center"> <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> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black ">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> <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> </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"> <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">
@ -10,7 +10,7 @@
<div class="fade-in flex flex-col justify-center items-center bg-white/5 p-6"> <div class="fade-in flex flex-col justify-center items-center bg-white/5 p-6">
<div class="tooltip"> <div class="tooltip">
<img src="images/icons/planet.svg" alt="cores" class="w-20 h-auto mx-auto py-2" /> <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> <dt class="order-first text-2xl font-semibold tracking-tight text-black">Planet First</dt>
<dd class="text-sm/6 font-light text-gray-300">Utmost respect to mother earth in every action.</dd> <dd class="text-sm/6 font-light text-gray-300">Utmost respect to mother earth in every action.</dd>
</div> </div>
</div> </div>
@ -18,7 +18,7 @@
<div class="fade-in flex flex-col bg-white/5 p-6"> <div class="fade-in flex flex-col bg-white/5 p-6">
<div class="tooltip"> <div class="tooltip">
<img src="images/icons/people.svg" alt="cores" class="w-20 h-auto mx-auto py-2" /> <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> <dt class="order-first text-2xl font-semibold tracking-tight text-black">People First</dt>
<dd class="text-sm/6 font-light text-gray-300">Bring equality of opportunities for everyone</dd> <dd class="text-sm/6 font-light text-gray-300">Bring equality of opportunities for everyone</dd>
</div> </div>
</div> </div>
@ -26,7 +26,7 @@
<div class="fade-in flex flex-col bg-white/5 p-6"> <div class="fade-in flex flex-col bg-white/5 p-6">
<div class="tooltip"> <div class="tooltip">
<img src="images/icons/open.svg" alt="cores" class="w-20 h-auto mx-auto py-2" /> <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> <dd class="order-first text-2xl font-semibold tracking-tight text-black">Open Source</dd>
<dt class="text-sm/6 font-light text-gray-300">Value open source methods for many aspects in life.</dt> <dt class="text-sm/6 font-light text-gray-300">Value open source methods for many aspects in life.</dt>
</div> </div>
</div> </div>
@ -34,7 +34,7 @@
<div class="fade-in flex flex-col bg-white/5 p-6"> <div class="fade-in flex flex-col bg-white/5 p-6">
<div class="tooltip"> <div class="tooltip">
<img src="images/icons/simple.svg" alt="cores" class="w-20 h-auto mx-auto py-2" /> <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> <dd class="order-first text-2xl font-semibold tracking-tight text-black">Simplicity</dd>
<dt class="text-sm/6 font-light text-gray-300">Erase complexity of things that kills progress.</dt> <dt class="text-sm/6 font-light text-gray-300">Erase complexity of things that kills progress.</dt>
</div> </div>
</div> </div>
@ -43,7 +43,7 @@
<div class="tooltip"> <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> <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" /> <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> <dt class="order-first text-2xl font-semibold tracking-tight text-black">Authenticity</dt>
<dd class="text-sm/6 font-light text-gray-300">Commited to restore authenticity of people and information.</dd> <dd class="text-sm/6 font-light text-gray-300">Commited to restore authenticity of people and information.</dd>
</div> </div>
</div> </div>

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

@ -10,7 +10,7 @@
<div class="text-center"> <div class="text-center">
<img src="/images/logo_s.svg" alt="Cybercity Logo" class="w-30 h-auto mx-auto" /> <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> <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 class="mt-2 text-lg sm:text-xl leading-7 sm:leading-8 font-light text-black 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> </p>
</div> </div>
</div> </div>

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

@ -1,15 +1,15 @@
<div class="relative isolate overflow-hidden bg-transparent"> <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="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"> <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> <h2 class="text-balance font-normal tracking-tight text-black 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-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> <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> <br>
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2> <h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-6xl fade-in">Web4</h2>
<br> <br>
<div class="mt-10 flex items-center justify-center gap-x-6"> <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="/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> <a href="https://docs.threefold.io/" target="_blank" class="fade-in text-base font-semibold text-black hover:text-green ">Read TF Docs<span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
</div> </div>

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

@ -10,14 +10,14 @@
</div> </div>
<div class="px-6 lg:px-0 lg:pl-4 lg:pt-4"> <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"> <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="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-black">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> <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"> <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> <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>
<div class="mt-10 flex items-center gap-x-6"> <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="/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> <a href="/action" class="fade-in text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
</div> </div>

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

@ -9,8 +9,8 @@
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div> <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div> </div>
<div class="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl lg:order-first sm:pt-12"> <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> <h2 class="text-base/7 font-light text-black 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> <h1 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">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">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> <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"> <div class="mt-10 flex items-center gap-x-6">

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

@ -4,11 +4,11 @@
<!-- Text Section --> <!-- Text Section -->
<div class="relative col-span-1 px-6 sm:px-8 xl:pr-16"> <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"> <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="text-base/7 font-light text-black tracking-wide">PROJECT SITE</span>
<br> <br>
<span class="block text-white">Discover Fumba</span> <span class="block text-black">Discover Fumba</span>
</h2> </h2>
<p class="text-left my-6 text-white max-w-4xl text-pretty lg:text-xl text-lg font-light fade-in"> <p class="text-left my-6 text-black 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> 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. 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> </p>

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

@ -4,10 +4,10 @@
<div class="lg:pr-8 lg:pt-4"> <div class="lg:pr-8 lg:pt-4">
<div class="lg:max-w-lg"> <div class="lg:max-w-lg">
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-gray-50"> <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="text-base/7 font-light text-black tracking-wide">PROJECT SITE</span>
<span class="block xl:inline text-white">Discover Fumba</span> <span class="block xl:inline text-black">Discover Fumba</span>
</h2> </h2>
<p class="text-left my-6 text-white max-w-4xl text-pretty lg:text-xl text-lg font-light fade-in"> <p class="text-left my-6 text-black 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. 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> </p>
</div> </div>

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

@ -2,9 +2,9 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <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="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center"> <div class="text-center">
<h2 class="fade-in text-balance text-6xl font-bold tracking-tight text-white sm:text-6l">WEB4</h2> <h2 class="fade-in text-balance text-6xl font-bold tracking-tight text-black sm:text-6l">WEB4</h2>
<br> <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> <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-black 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">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-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> <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>
@ -17,12 +17,12 @@
</g> </g>
</g> </g>
</svg> </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> <a href="/action" class="fade-in text-balance text-2xl font-semibold tracking-tight text-black lg:text-3xl blinking-effect">12.12.2024</a>
</div> </div>
--> -->
<div class="mt-16 fade-in flex items-center justify-center gap-x-6"> <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="/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> <a href="/action" class="text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>

2
templates/partials/solutions/hero.html
View File

@ -1,7 +1,7 @@
<div class="relative isolate overflow-hidden bg-transparent"> <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="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"> <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 Web4</h2> <h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-3xl fade-in">A Secure & Sovereign Infrastructure Layer for Web4</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-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 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> </p>

28
templates/partials/solutions/portfolio copy.html
View File

@ -2,7 +2,7 @@
<div class="bg-transparent py-24"> <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-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"> <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> <h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-black">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"> <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. 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> </p>
@ -22,7 +22,7 @@
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"> 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 Words from Others
</div> </div>
<h1 class="mb-5 text-3xl font-semibold text-white md:text-center md:text-5xl"> <h1 class="mb-5 text-3xl font-semibold text-black md:text-center md:text-5xl">
It's not just us. It's not just us.
</h1> </h1>
<p class="text-xl text-gray-100 md:text-center md:text-2xl"> <p class="text-xl text-gray-100 md:text-center md:text-2xl">
@ -47,7 +47,7 @@
src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg" 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"> class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
<div> <div>
<h3 class="text-lg font-semibold text-white">Kanye West</h3> <h3 class="text-lg font-semibold text-black">Kanye West</h3>
<p class="text-gray-500 text-md">Rapper &amp; Entrepreneur</p> <p class="text-gray-500 text-md">Rapper &amp; Entrepreneur</p>
</div> </div>
</div> </div>
@ -67,7 +67,7 @@
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg" 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"> class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
<div> <div>
<h3 class="text-lg font-semibold text-white">Tim Cook</h3> <h3 class="text-lg font-semibold text-black">Tim Cook</h3>
<p class="text-gray-500 text-md">CEO of Apple</p> <p class="text-gray-500 text-md">CEO of Apple</p>
</div> </div>
</div> </div>
@ -89,7 +89,7 @@
src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg" 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"> class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
<div> <div>
<h3 class="text-lg font-semibold text-white">Kanye West</h3> <h3 class="text-lg font-semibold text-black">Kanye West</h3>
<p class="text-gray-500 text-md">Rapper &amp; Entrepreneur</p> <p class="text-gray-500 text-md">Rapper &amp; Entrepreneur</p>
</div> </div>
</div> </div>
@ -109,7 +109,7 @@
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg" 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"> class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
<div> <div>
<h3 class="text-lg font-semibold text-white">Tim Cook</h3> <h3 class="text-lg font-semibold text-black">Tim Cook</h3>
<p class="text-gray-500 text-md">CEO of Apple</p> <p class="text-gray-500 text-md">CEO of Apple</p>
</div> </div>
</div> </div>
@ -135,7 +135,7 @@
src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg" 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"> class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
<div> <div>
<h3 class="text-lg font-semibold text-white">Parag Agrawal</h3> <h3 class="text-lg font-semibold text-black">Parag Agrawal</h3>
<p class="text-gray-500 text-md">CEO of Twitter</p> <p class="text-gray-500 text-md">CEO of Twitter</p>
</div> </div>
</div> </div>
@ -157,7 +157,7 @@
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg" 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"> class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
<div> <div>
<h3 class="text-lg font-semibold text-white">Tim Cook</h3> <h3 class="text-lg font-semibold text-black">Tim Cook</h3>
<p class="text-gray-500 text-md">CEO of Apple</p> <p class="text-gray-500 text-md">CEO of Apple</p>
</div> </div>
</div> </div>
@ -179,7 +179,7 @@
src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg" 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"> class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
<div> <div>
<h3 class="text-lg font-semibold text-white">Parag Agrawal</h3> <h3 class="text-lg font-semibold text-black">Parag Agrawal</h3>
<p class="text-gray-500 text-md">CEO of Twitter</p> <p class="text-gray-500 text-md">CEO of Twitter</p>
</div> </div>
</div> </div>
@ -201,7 +201,7 @@
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg" 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"> class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
<div> <div>
<h3 class="text-lg font-semibold text-white">Tim Cook</h3> <h3 class="text-lg font-semibold text-black">Tim Cook</h3>
<p class="text-gray-500 text-md">CEO of Apple</p> <p class="text-gray-500 text-md">CEO of Apple</p>
</div> </div>
</div> </div>
@ -227,7 +227,7 @@
src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg" 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"> class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
<div> <div>
<h3 class="text-lg font-semibold text-white">Satya Nadella</h3> <h3 class="text-lg font-semibold text-black">Satya Nadella</h3>
<p class="text-gray-500 text-md">CEO of Microsoft</p> <p class="text-gray-500 text-md">CEO of Microsoft</p>
</div> </div>
</div> </div>
@ -249,7 +249,7 @@
src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg" 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"> class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
<div> <div>
<h3 class="text-lg font-semibold text-white">Dan Schulman</h3> <h3 class="text-lg font-semibold text-black">Dan Schulman</h3>
<p class="text-gray-500 text-md">CEO of PayPal</p> <p class="text-gray-500 text-md">CEO of PayPal</p>
</div> </div>
</div> </div>
@ -270,7 +270,7 @@
src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg" 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"> class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
<div> <div>
<h3 class="text-lg font-semibold text-white">Satya Nadella</h3> <h3 class="text-lg font-semibold text-black">Satya Nadella</h3>
<p class="text-gray-500 text-md">CEO of Microsoft</p> <p class="text-gray-500 text-md">CEO of Microsoft</p>
</div> </div>
</div> </div>
@ -292,7 +292,7 @@
src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg" 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"> class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
<div> <div>
<h3 class="text-lg font-semibold text-white">Dan Schulman</h3> <h3 class="text-lg font-semibold text-black">Dan Schulman</h3>
<p class="text-gray-500 text-md">CEO of PayPal</p> <p class="text-gray-500 text-md">CEO of PayPal</p>
</div> </div>
</div> </div>

38
templates/partials/solutions/portfolio.html
View File

@ -1,7 +1,7 @@
<div class="bg-transparent pt-12 pb-6"> <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-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"> <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> <h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-black">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"> <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. 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> </p>
@ -13,106 +13,106 @@
<div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none"> <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"> <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"> <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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
ZERO-OS V3 ZERO-OS V3
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <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="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"> <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> <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-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </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 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
MYCELIUM NETWORK MYCELIUM NETWORK
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </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 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
QUANTUM SAFE STORAGE QUANTUM SAFE STORAGE
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<!-- 2ND ROW--> <!-- 2ND ROW-->
<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 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
TF CHAIN TF CHAIN
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </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 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
3NODES 3NODES
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/documentation/developers/tfchain/tfchain.html?highlight=nodes#nodes" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </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 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
GATEWAY NODES GATEWAY NODES
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <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="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"> <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> <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-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<!-- 3RD ROW--> <!-- 3RD ROW-->
<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 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
TF DASHBOARD TF DASHBOARD
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/documentation/dashboard/dashboard.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </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 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
TF DAO TF DAO
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </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 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
TF CONNECT APP TF CONNECT APP
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>

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

@ -1,11 +1,11 @@
<div class="bg-transparent"> <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="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"> <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 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-black sm:text-5xl">What You Can Do With It
</h2> </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-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> <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 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> <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-black hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>12.12.24</a>
</div> </div>
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing --> <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"> <dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">

38
templates/partials/solutions/whatyoucando.html
View File

@ -1,67 +1,67 @@
<div class="bg-transparent pt-12 pb-24"> <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-7xl px-6 lg:px-8">
<div class="mx-auto max-w-3xl items-center justify-center"> <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="fade-in text-balance text-center items-center text-4xl font-normal tracking-tight text-black 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> <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>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none"> <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"> <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
<!--1--> <!--1-->
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white"> <dt class="flex-auto items-center text-center text-base font-semibold text-black">
Communicate securely Communicate securely
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white"> <dd class="mt-2 flex flex-auto flex-col font-light text-base text-black">
<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> <p class="px-4 flex-auto text-center text-base text-black">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</p>
</dd> </dd>
</div> </div>
<!--2--> <!--2-->
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white"> <dt class="flex-auto items-center text-center text-base font-semibold text-black">
Share and store effortlessly Share and store effortlessly
</dt> </dt>
<dd class="mt-2 flex flex-auto items-center text-center flex-col font-light text-base text-white"> <dd class="mt-2 flex flex-auto items-center text-center flex-col font-light text-base text-black">
<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 class="px-4 flex-auto text-base text-black">Securely share and store information with ease, scaling seamlessly from personal use to billions of users.
</p> </p>
</dd> </dd>
</div> </div>
<!--3--> <!--3-->
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white"> <dt class="flex-auto items-center text-center text-base font-semibold text-black">
Restore authenticity Restore authenticity
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white"> <dd class="mt-2 flex flex-auto flex-col font-light text-base text-black">
<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 class="px-4 flex-auto items-center text-center text-base text-black">Determine which information can be trusted, bringing clarity and confidence back to the digital space.
</p> </p>
</dd> </dd>
</div> </div>
<!--3--> <!--3-->
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white"> <dt class="flex-auto items-center text-center text-base font-semibold text-black">
Unlock limitless insights Unlock limitless insights
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white"> <dd class="mt-2 flex flex-auto flex-col font-light text-base text-black">
<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 class="px-4 flex-auto items-center text-center text-base text-black">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant.
</p> </p>
</dd> </dd>
</div> </div>
<!--3--> <!--3-->
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white"> <dt class="flex-auto items-center text-center text-base font-semibold text-black">
Streamline your interactions Streamline your interactions
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white"> <dd class="mt-2 flex flex-auto flex-col font-light text-base text-black">
<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 class="px-4 flex-auto items-center text-center text-base text-black">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions.
</p> </p>
</dd> </dd>
</div> </div>
<!--3--> <!--3-->
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white"> <dt class="flex-auto items-center text-center text-base font-semibold text-black">
Take control of your digital presence Take control of your digital presence
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white"> <dd class="mt-2 flex flex-auto flex-col font-light text-base text-black">
<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 class="px-4 flex-auto items-center text-center text-base text-black">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.
</p> </p>
</dd> </dd>
</div> </div>

2
templates/partials/what/hero.html
View File

@ -1,7 +1,7 @@
<div class="relative isolate overflow-hidden bg-transparent"> <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="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"> <div class="mx-auto max-w-4xl text-center">
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">A Secure & Sovereign Infrastructure Layer for Web4</h2> <h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">A Secure & Sovereign Infrastructure Layer for Web4</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-lg 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-2xl text-lg 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-2xl text-lg font-medium text-gray-200 fade-in">ThreeFold can be used by any Web2, Web3, AI, or Edge IT workload. <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-lg font-medium text-gray-200 fade-in">ThreeFold can be used by any Web2, Web3, AI, or Edge IT workload.
</p> </p>

38
templates/partials/what/portfolio.html
View File

@ -1,7 +1,7 @@
<div class="bg-transparent pt-12 pb-6"> <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-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"> <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-4xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2> <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black">What We’ve Built</h2>
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in"> <p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-lg 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. 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> </p>
@ -13,106 +13,106 @@
<div class="mx-auto max-w-2xl lg:max-w-none"> <div class="mx-auto max-w-2xl 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"> <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-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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
ZERO-OS V3 ZERO-OS V3
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <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="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"> <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> <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-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
MYCELIUM NETWORK MYCELIUM NETWORK
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
QUANTUM SAFE STORAGE QUANTUM SAFE STORAGE
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<!-- 2ND ROW--> <!-- 2ND ROW-->
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
TF CHAIN TF CHAIN
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
3NODES 3NODES
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/documentation/developers/tfchain/tfchain.html?highlight=nodes#nodes" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
GATEWAY NODES GATEWAY NODES
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <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="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"> <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> <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-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<!-- 3RD ROW--> <!-- 3RD ROW-->
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
TF DASHBOARD TF DASHBOARD
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/documentation/dashboard/dashboard.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
TF DAO TF DAO
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 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"> <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-black">
TF CONNECT APP TF CONNECT APP
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col"> <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="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"> <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> <a href="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html" target="_blank" class="text-sm/6 font-semibold text-black hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
</p> </p>
</dd> </dd>
</div> </div>

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

@ -1,11 +1,11 @@
<div class="bg-transparent"> <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="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 lg:pb-10 pb-4"> <div class="max-w-3xl px-0 lg:px-16 lg:pb-10 pb-4">
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It <h2 class="fade-in text-balance lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black sm:text-5xl">What You Can Do With It
</h2> </h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg 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-6 max-w-3xl text-pretty lg:text-xl text-lg 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-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">We are now unveiling an exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p> <p class="mx-auto mt-4 mb-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">We are now unveiling an exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
<a href="/action" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take Actions</a> <a href="/action" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-black hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take Actions</a>
</div> </div>
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing --> <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 lg:gap-y-10 gap-y-6"> <dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-6">

38
templates/partials/what/whatyoucando.html
View File

@ -1,67 +1,67 @@
<div class="bg-transparent pt-12 pb-24"> <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-7xl px-6 lg:px-8">
<div class="mx-auto max-w-3xl items-center justify-center"> <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="fade-in text-balance text-center items-center text-4xl font-normal tracking-tight text-black 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> <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>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none"> <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"> <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
<!--1--> <!--1-->
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white"> <dt class="flex-auto items-center text-center text-base font-semibold text-black">
Communicate securely Communicate securely
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white"> <dd class="mt-2 flex flex-auto flex-col font-light text-base text-black">
<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> <p class="px-4 flex-auto text-center text-base text-black">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</p>
</dd> </dd>
</div> </div>
<!--2--> <!--2-->
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white"> <dt class="flex-auto items-center text-center text-base font-semibold text-black">
Share and store effortlessly Share and store effortlessly
</dt> </dt>
<dd class="mt-2 flex flex-auto items-center text-center flex-col font-light text-base text-white"> <dd class="mt-2 flex flex-auto items-center text-center flex-col font-light text-base text-black">
<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 class="px-4 flex-auto text-base text-black">Securely share and store information with ease, scaling seamlessly from personal use to billions of users.
</p> </p>
</dd> </dd>
</div> </div>
<!--3--> <!--3-->
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white"> <dt class="flex-auto items-center text-center text-base font-semibold text-black">
Restore authenticity Restore authenticity
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white"> <dd class="mt-2 flex flex-auto flex-col font-light text-base text-black">
<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 class="px-4 flex-auto items-center text-center text-base text-black">Determine which information can be trusted, bringing clarity and confidence back to the digital space.
</p> </p>
</dd> </dd>
</div> </div>
<!--3--> <!--3-->
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white"> <dt class="flex-auto items-center text-center text-base font-semibold text-black">
Unlock limitless insights Unlock limitless insights
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white"> <dd class="mt-2 flex flex-auto flex-col font-light text-base text-black">
<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 class="px-4 flex-auto items-center text-center text-base text-black">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant.
</p> </p>
</dd> </dd>
</div> </div>
<!--3--> <!--3-->
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white"> <dt class="flex-auto items-center text-center text-base font-semibold text-black">
Streamline your interactions Streamline your interactions
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white"> <dd class="mt-2 flex flex-auto flex-col font-light text-base text-black">
<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 class="px-4 flex-auto items-center text-center text-base text-black">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions.
</p> </p>
</dd> </dd>
</div> </div>
<!--3--> <!--3-->
<div class="flex flex-col"> <div class="flex flex-col">
<dt class="flex-auto items-center text-center text-base font-semibold text-white"> <dt class="flex-auto items-center text-center text-base font-semibold text-black">
Take control of your digital presence Take control of your digital presence
</dt> </dt>
<dd class="mt-2 flex flex-auto flex-col font-light text-base text-white"> <dd class="mt-2 flex flex-auto flex-col font-light text-base text-black">
<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 class="px-4 flex-auto items-center text-center text-base text-black">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.
</p> </p>
</dd> </dd>
</div> </div>

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

@ -1,7 +1,7 @@
<div class="relative isolate overflow-hidden bg-transparent"> <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="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"> <div class="mx-auto max-w-4xl text-center">
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">The Internet Needs an Upgrade</h2> <h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">The Internet Needs an Upgrade</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg 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 intent. <br>The Internet was envisioned as a decentralized, open space.<br>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-lg 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 intent. <br>The Internet was envisioned as a decentralized, open space.<br>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-lg font-medium text-gray-200 fade-in">ThreeFold has invented a new Data, Network, and Cloud system<br> <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-medium text-gray-200 fade-in">ThreeFold has invented a new Data, Network, and Cloud system<br>
as an engine for an upgraded Web4 Internet.</p> as an engine for an upgraded Web4 Internet.</p>

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

@ -1,7 +1,7 @@
<div class="bg-transparent fade-in"> <div class="bg-transparent fade-in">
<div class="mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8"> <div class="mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8">
<div class="mx-auto max-w-3xl text-center"> <div class="mx-auto max-w-3xl text-center">
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Real-World Impact</h2> <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-black sm:text-5xl">Real-World Impact</h2>
<p class="mx-auto mb-10 mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold’s technological infrastructure will empower many projects and initiatives across sectors. Here are two key projects: <p class="mx-auto mb-10 mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold’s technological infrastructure will empower many projects and initiatives across sectors. Here are two key projects:
</p> </p>
</div> </div>
@ -11,7 +11,7 @@
<div class="mx-auto max-w-7xl 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 --> <!-- Text Section -->
<div class="lg:col-span-5 align-middle pr-4 mb-4"> <div class="lg:col-span-5 align-middle pr-4 mb-4">
<h3 class="text-2xl font-medium text-white">OurWorld FreeZone</h3> <h3 class="text-2xl font-medium text-black">OurWorld FreeZone</h3>
<p class="mt-2 text-base font-light text-gray-200 mx-auto pr-4"> <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. 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.
Updates expected Q4 2024. Updates expected Q4 2024.
@ -29,7 +29,7 @@
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8"> <div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8">
<div class="mt-6 lg:col-span-5 lg:col-start-8 lg:row-start-1 lg:mt-0 pr-4"> <div class="mt-6 lg:col-span-5 lg:col-start-8 lg:row-start-1 lg:mt-0 pr-4">
<h3 class="text-2xl font-medium text-white">Tanzanian Sovereign Internet</h3> <h3 class="text-2xl font-medium text-black">Tanzanian Sovereign Internet</h3>
<p class="mt-2 text-base font-light text-gray-200 pr-4"> <p class="mt-2 text-base font-light text-gray-200 pr-4">
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> 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>

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

@ -1,11 +1,11 @@
<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32"> <div class="relative isolate overflow-hidden bg-transparent text-black py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="relative grid lg:grid-cols-12 lg:gap-8"> <div class="relative grid lg:grid-cols-12 lg:gap-8">
<!-- Left Content --> <!-- Left Content -->
<div class="lg:col-span-7"> <div class="lg:col-span-7">
<div class="mx-auto max-w-2xl lg:mx-0"> <div class="mx-auto max-w-2xl lg:mx-0">
<h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">Why it Matters</h1> <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-black lg:text-5xl">Why it Matters</h1>
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-white"> <p class="fade-in mt-6 text-lg lg:text-xl font-light text-black">
For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners. For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
<br><br> <br><br>
But we won’t stop here. But we won’t stop here.
@ -18,8 +18,8 @@
<!-- Right Blockquote --> <!-- Right Blockquote -->
<div class="lg:col-span-5"> <div class="lg:col-span-5">
<figure class=" mt-6 pl-8"> <figure class=" mt-6 pl-8">
<blockquote class=" text-2xl text-white fade-in font-semibold"> <blockquote class=" text-2xl text-black fade-in font-semibold">
<p class="lg:text-2xl text-xl leading-normal 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> <p class="lg:text-2xl text-xl leading-normal text-black 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> </blockquote>
<br> <br>
<div class="mt-6 border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect"> <div class="mt-6 border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">
@ -30,7 +30,7 @@
</g> </g>
</g> </g>
</svg> </svg>
<a href="/action" class="fade-in text-balance text-xl font-semibold tracking-tight text-white lg:text-2xl blinking-effect">Take Actions</a> <a href="/action" class="fade-in text-balance text-xl font-semibold tracking-tight text-black lg:text-2xl blinking-effect">Take Actions</a>
</div> </div>
</figure> </figure>
</div> </div>

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

@ -1,7 +1,7 @@
<div class="bg-transparent pb-24 pt-12"> <div class="bg-transparent pb-24 pt-12">
<div class="flex items-center justify-center bg-transparent"> <div class="flex items-center justify-center bg-transparent">
<div class="text-center"> <div class="text-center">
<p class="fade-in mx-auto text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer> <p class="fade-in mx-auto text-3xl font-semibold tracking-tight text-black sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
Planet First. People First. Planet First. People First.
</p> </p>
</div> </div>

6
templates/partials/why/ourwhy.html
View File

@ -2,8 +2,8 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto mt-24 pt-24 max-w-2xl lg:max-w-none"> <div class="mx-auto mt-24 pt-24 max-w-2xl lg:max-w-none">
<div class="fade-in mx-auto max-w-3xl text-center"> <div class="fade-in mx-auto max-w-3xl text-center">
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Why it Matters?</h2> <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-black sm:text-5xl">Why it Matters?</h2>
<p class="mt-6 text-lg font-light text-white"> <p class="mt-6 text-lg font-light text-black">
For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners. For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
<br><br> <br><br>
But we won’t stop here. But we won’t stop here.
@ -15,7 +15,7 @@
secure overlay networking, and autonomous cloud security to bring this vision to life. </span> secure overlay networking, and autonomous cloud security to bring this vision to life. </span>
</p> </p>
<br> <br>
<a href="action.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</a> <a href="action.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight text-black sm:text-4xl blinking-effect">12.12.2024</a>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,11 +1,11 @@
<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32"> <div class="relative isolate overflow-hidden bg-transparent text-black py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="relative grid lg:grid-cols-12 lg:gap-8"> <div class="relative grid lg:grid-cols-12 lg:gap-8">
<!-- Left Content --> <!-- Left Content -->
<div class="lg:col-span-7"> <div class="lg:col-span-7">
<div class="mx-auto max-w-2xl lg:mx-0"> <div class="mx-auto max-w-2xl lg:mx-0">
<h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">The Reason Behind It All</h1> <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-black lg:text-5xl">The Reason Behind It All</h1>
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-white"> <p class="fade-in mt-6 text-lg lg:text-xl font-light text-black">
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. 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> <br><br>
Big tech companies now dominate the Internet, tracking our activities and influencing our decisions, consolidating control in ways that don't serve everyone equally... Big tech companies now dominate the Internet, tracking our activities and influencing our decisions, consolidating control in ways that don't serve everyone equally...
@ -17,12 +17,12 @@
<!-- Right Blockquote --> <!-- Right Blockquote -->
<div class="lg:col-span-5"> <div class="lg:col-span-5">
<figure class=" mt-6 pl-8"> <figure class=" mt-6 pl-8">
<blockquote class=" lg:text-2xl text-xl text-white fade-in font-semibold"> <blockquote class=" lg:text-2xl text-xl text-black fade-in font-semibold">
<p class="lg:text-2xl text-xl leading-normal text-white font-semibold">Therefore we believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone.</p> <p class="lg:text-2xl text-xl leading-normal text-black font-semibold">Therefore we believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone.</p>
</blockquote> </blockquote>
<br> <br>
<div class="mx-4"> <div class="mx-4">
<p class="fade-in mx-auto text-2xl font-semibold tracking-tight text-white lg:text-3xl opacity-0 transition-opacity duration-1000" data-observer> <p class="fade-in mx-auto text-2xl font-semibold tracking-tight text-black lg:text-3xl opacity-0 transition-opacity duration-1000" data-observer>
Planet First. People First. Planet First. People First.
</p> </p>
</div> </div>

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

@ -2,7 +2,7 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <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="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center"> <div class="text-center">
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">Founded by Internet 1.0 Pioneers<br>and All of You</h2> <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-black lg:text-5xl">Founded by Internet 1.0 Pioneers<br>and All of You</h2>
<p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">The founders have been working on Internet technology since the early days,<br>when it was a decentralized, peer-to-peer network.<br>ThreeFold's aim is to help bring that vision to life once more. <br>More than 50 full-time active developers support the project.</p> <p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">The founders have been working on Internet technology since the early days,<br>when it was a decentralized, peer-to-peer network.<br>ThreeFold's aim is to help bring that vision to life once more. <br>More than 50 full-time active developers support the project.</p>
</div> </div>

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

@ -2,7 +2,7 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <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="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center"> <div class="text-center">
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">ThreeFold’s Journey</h2> <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-black lg:text-5xl">ThreeFold’s Journey</h2>
<p class="fade-in mx-auto mt-6 lg:mb-1 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200">The pivotal milestones that have shaped Threefold's growth and innovation, driving us towards a sustainable, decentralized future.</p> <p class="fade-in mx-auto mt-6 lg:mb-1 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200">The pivotal milestones that have shaped Threefold's growth and innovation, driving us towards a sustainable, decentralized future.</p>
</div> </div>
</div> </div>
@ -40,9 +40,9 @@
</div> </div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow"> <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="flex items-center justify-between space-x-2 mb-1"> <div class="flex items-center justify-between space-x-2 mb-1">
<div class="font-medium text-white">Phase II</div> <div class="font-medium text-black">Phase II</div>
</div> </div>
<div class="font-semibold text-lg text-white mb-2">Global Proof Of Concept</div> <div class="font-semibold text-lg text-black mb-2">Global Proof Of Concept</div>
<div class="text-gray-200 font-light"> <div class="text-gray-200 font-light">
Open Source Development Open Source Development
<br>50+ Countries <br>50+ Countries
@ -64,9 +64,9 @@
</div> </div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow"> <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="flex items-center justify-between space-x-2 mb-1"> <div class="flex items-center justify-between space-x-2 mb-1">
<div class="font-medium text-white">2025</div> <div class="font-medium text-black">2025</div>
</div> </div>
<div class="font-semibold text-lg text-white mb-2">ThreeFold Web4</div> <div class="font-semibold text-lg text-black mb-2">ThreeFold Web4</div>
<div class="text-gray-200 font-light"> <div class="text-gray-200 font-light">
Introduce a Web4 Phone & Router Introduce a Web4 Phone & Router
<br>Web4 smart contracts for the Web3 world. <br>Web4 smart contracts for the Web3 world.

6
templates/partials/why/values.html
View File

@ -2,17 +2,17 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:px-8">
<dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3"> <dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
<div class="mx-auto flex max-w-xs flex-col gap-y-4"> <div class="mx-auto flex max-w-xs flex-col gap-y-4">
<dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer> <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-black sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
Open Source. Open Source.
</dd> </dd>
</div> </div>
<div class="mx-auto flex max-w-xs flex-col gap-y-4"> <div class="mx-auto flex max-w-xs flex-col gap-y-4">
<dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer> <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-black sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
Authenticity. Authenticity.
</dd> </dd>
</div> </div>
<div class="mx-auto flex max-w-xs flex-col gap-y-4"> <div class="mx-auto flex max-w-xs flex-col gap-y-4">
<dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer> <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-black sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
Simplicity. Simplicity.
</dd> </dd>
</div> </div>

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

@ -1,4 +1,4 @@
<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32"> <div class="relative isolate overflow-hidden bg-transparent text-black py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="relative grid lg:grid-cols-12 lg:gap-8"> <div class="relative grid lg:grid-cols-12 lg:gap-8">
<!-- Left Content --> <!-- Left Content -->