ourworld_web/www_aibox
21
0
Fork 0
Code Pull Requests Activity

cleanup

Browse Source
This commit is contained in:
despiegk
2025-02-23 13:11:59 +00:00
parent 5502d8a675
commit 75c5930590
125 changed files with 71 additions and 7046 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,7 +20,7 @@
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="font-semibold text-lg text-black mb-2">Run AI Models with Full Control </div>
<div class="text-gray-900 font-light">
Creation of Core Technology
<br>Execute AI models directly on your dedicated GPU
<br>Decide which models are allowed to run on your AI BOX

1
templates/partials/hero/hero-title.html
View File

@@ -1 +0,0 @@
<h2 id="typing-text2" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{% if text %}{{ text }}{% else %}Pre-order Your AIBox{% endif %}</h2>

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

@@ -1,22 +0,0 @@
<div class="text-black fade-in">
<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="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">
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 class="text-center">
<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>
<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>
<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="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
</div>

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

@@ -1,73 +0,0 @@
<div class="fade-in relative isolate overflow-hidden">
<div class="mx-auto max-w-7xl lg:col-span-2 px-6 py-18 lg:flex lg:gap-x-2 lg:px-8 lg:py-24">
<div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
<h1 class="mt-10 font-medium tracking-tight text-pretty text-black leading-tight lg:text-[7.37rem] text-[3.5rem]">
Your
<span id="slides" class="slides"></span>
</h1>
<div id="learn-more" class="mt-10 flex items-center gap-x-6 hidden">
<a href="#" class="text-xl font-semibold text-black hover:text-gray-200">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
<div class="mx-auto flex max-w-5xl lg:mt-12 mt-0 lg:mr-0 lg:ml-5 lg:max-w-none lg:flex-none">
<div class="max-w-3xl flex-none lg:max-w-5xl">
<img src="/images/aibox6.jpg" alt="App screenshot" width="2432" height="1442" class="lg:w-[66rem] w-[25rem]">
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const phrases = [
"Personal AI Powerhouse.",
"Smart Digital Companion.",
"Always-On Genius.",
"Supercharged Peer.",
"Ultimate AI Sidekick.",
"Personal AIBox." // Final phrase
];
let index = 0;
const slideElement = document.getElementById("slides");
const learnMoreElement = document.getElementById("learn-more");
function typeText(text, i, callback) {
if (i < text.length) {
slideElement.textContent += text.charAt(i);
setTimeout(() => typeText(text, i + 1, callback), 100);
} else {
setTimeout(callback, 500);
}
}
function deleteText(callback) {
let text = slideElement.textContent;
if (text.length > 0) {
slideElement.textContent = text.substring(0, text.length - 1);
setTimeout(() => deleteText(callback), 50);
} else {
setTimeout(callback, 500);
}
}
function cyclePhrases() {
if (index < phrases.length - 1) {
typeText(phrases[index], 0, () => {
deleteText(() => {
index++;
cyclePhrases();
});
});
} else {
typeText(phrases[index], 0, () => {
learnMoreElement.classList.remove("hidden"); // Show "Learn more"
});
}
}
cyclePhrases(); // Start the loop
});
</script>

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

@@ -1,23 +0,0 @@
<div class="">
<div class="relative isolate overflow-hidden pt-14">
<img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="" class="absolute inset-0 -z-10 size-full object-cover opacity-30">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<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="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-black"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
</div>
</div>
<div class="text-center">
<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-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>
<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="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>

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

@@ -1,19 +0,0 @@
<div class="">
<div class="relative isolate pt-14">
<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-2xl text-center">
<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-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>
<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="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</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">
</div>
</div>
</div>
</div>

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

@@ -1,29 +0,0 @@
<div class=" fade-in">
<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-2xl lg:mx-0 lg:flex-auto">
<p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h1 class="mt-10 text-4xl font-semibold tracking-tight text-black lg:text-6xl">
This is Hero5.html
</h1>
<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">
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.
</p>
<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="text-sm font-semibold text-black hover:text-gray-200">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
<div class="mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="https://images.unsplash.com/photo-1622615875737-0d959726e947?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Mobile App Screenshot">
</div>
</div>
</div>
</div>

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

@@ -1,28 +0,0 @@
<div class="relative fade-in">
<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="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
<p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<h1 class="mt-10 text-4xl font-semibold tracking-tight text-black lg:text-6xl">
This is Hero6.html
</h1>
<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">
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.
</p>
<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="text-sm font-semibold text-black hover:text-gray-200">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
<div class="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0">
<img class="aspect-3/2 w-full bg-gray-50 object-cover lg:absolute lg:inset-0 lg:aspect-auto h-full" src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2102&q=80" alt="">
</div>
</div>
</div>

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

@@ -1,38 +0,0 @@
<div class="fade-in">
<div class="relative">
<div class="mx-auto max-w-7xl">
<div class="relative z-10 pt-14 lg:w-full lg:max-w-2xl">
<div class="relative px-6 py-32 sm:py-40 lg:px-8 lg:py-56 lg:pr-0">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
<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">
Anim aute id magna aliqua ad ad non deserunt sunt.
<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>
</a>
</div>
</div>
<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-black">This is hero7.html</h1>
<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">
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">
<a href="#" class="rounded-md 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-gray-50 hover:text-gray-300">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="aspect-3/2 object-cover lg:aspect-auto lg:size-full" src="https://images.unsplash.com/photo-1483389127117-b6a2102724ae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80" alt="">
</div>
</div>
</div>

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

@@ -1,54 +0,0 @@
<div class="relative">
<main>
<div class="relative isolate">
<div class="overflow-hidden">
<div class="mx-auto max-w-7xl px-6 lg:pb-24 pt-12 lg:px-8 lg:pt-12">
<div class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
<div class="relative lg:hidden pb-4">
<img src="/images/people_1.jpg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl lg:order-first sm:pt-12">
<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-black">This is Hero8.html</h1>
<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>
<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="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
<div class="mt-14 flex justify-end gap-8 lg:mt-0 lg:pl-0">
<div class="ml-auto w-44 flex-none space-y-8 lg:pt-36 hidden lg:block">
<div class="relative hidden lg:block">
<img src="/images/people_1.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
</div>
<div class="mr-auto w-44 flex-none space-y-8 lg:pt-24 hidden lg:block">
<div class="relative hidden lg:block">
<img src="/images/people_2.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="relative hidden lg:block">
<img src="/images/people_3.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
</div>
<div class="w-44 flex-none space-y-8 lg:pt-12 hidden lg:block">
<div class="relative hidden lg:block">
<img src="/images/people_4.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="relative hidden lg:block">
<img src="/images/people_5.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>

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

@@ -1,22 +0,0 @@
<div class="fade-in">
<div class="relative isolate overflow-hidden bg-gradient-to-b from-indigo-100/20 pt-14">
<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="text-content">
<p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
<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-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>
<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="#" class="text-sm/6 font-semibold text-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
<div class="flex justify-center items-center">
<img src="https://images.unsplash.com/photo-1567532900872-f4e906cbf06a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&q=80" alt="" class="w-full max-w-lg rounded-2xl object-cover">
</div>
</div>
</div>
</div>
</div>

27
templates/partials/hero/myhero.html
View File

@@ -1,27 +0,0 @@
<div class="relative fade-in lg:pt-20 lg: bpb-16">
<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 lg:pb-16 lg:col-span-7 lg:px-0 lg:pt-24 xl:col-span-6">
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
<h1 class="text-4xl font-semibold tracking-tight text-black lg:text-6xl">
MYCELIUM
</h1>
<h2 class="fade-in text-balance lg:text-4xl text-3xl font-normal tracking-tight text-black">Unleashing the Power of Decentralized Networks
</h2>
<p class="mt-8 text-pretty lg:text-xl text-lg font-light text-black lgl:text-xl">
Discover the future of secure, efficient, and scalable networking with Mycelium, a key component of the ThreeFold Grid. <br>Join the Movement.
</p>
<div class="mt-10 flex items-center gap-x-6">
<a href="/action" class="rounded-2xl bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-stone-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
Get AIBox
</a>
<a href="/why" class="text-sm font-semibold text-black hover:text-black">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
<div class="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0 ">
<img class="lg:mt-10 aspect-1/1 w-full object-cover lg:absolute lg:inset-0 lg:aspect-auto" src="/images/mycel_1.png" alt="">
</div>
</div>
</div>

23
templates/partials/hero/myhero1.html
View File

@@ -1,23 +0,0 @@
<div class=" fade-in bg-semi-white">
<div class="lg:py-24 relative isolate">
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8">
<div class="mx-auto max-w-lg lg:mx-0 lg:flex-auto">
<p class="text-base/7 font-light text-black tracking-wide">ABOUT</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">Discover Mycelium</h2>
<p class="text-left mt-4 text-pretty lg:text-lg text-md font-light text-black fade-in max-w-3xl">
At the forefront of digital evolution lies Mycelium, a visionary project at the heart of the ThreeFold Grid. Mycelium is more than just a new technology; it's a transformative force reshaping the way we connect in the digital age. <br><br>We're on a mission to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
</p>
<div class="mt-6 flex">
<a href="/action" class=" rounded-2xl bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
</div>
</div>
<div class="lg:order-first mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/mycel2.png"
alt="Mobile App Screenshot">
</div>
</div>
</div>
</div>

86
templates/partials/hero/myhero2.html
View File

File diff suppressed because one or more lines are too long

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

@@ -1,41 +0,0 @@
<div class=" fade-in bg-white">
<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">
<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>
<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.
</p>
</div>
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8">
<div class="mx-auto max-w-lg lg:mx-0 lg:flex-auto">
<dl class="space-y-8 text-base/7 lg:max-w-none">
<div class="relative pl-9">
<dt class="font-semibold lg:text-lg text-base text-black ">
Decentralized Nodes
</dt>
<dd class="mt-2 text-black font-light">Mycelium operates through a network of decentralized nodes, similar to how nature's mycelium forms a decentralized network of threads. Each node acts as a connection point in the overall digital ecosystem.</dd>
</div>
<div class="relative pl-9">
<dt class="font-semibold lg:text-lg text-base text-black ">
Efficient Data Routing
</dt>
<dd class="mt-2 text-black font-light">Mycelium optimizes data routing by choosing the most efficient path for communication. Data travels along the shortest path in terms of latency, ensuring that information reaches its destination swiftly.</dd>
</div>
<div class="relative pl-9">
<dt class=" font-semibold lg:text-lg text-base text-black ">
End-to-End Encryption
</dt>
<dd class="mt-2 text-black font-light">Each node in the system is identified by a unique key pair. Data between nodes is encrypted using secret keys derived from these pairs. This ensures that data remains confidential, enhancing the privacy of the network.</dd>
</div>
</dl>
</div>
<div class="lg:order-first mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/feature6a.png"
alt="Mobile App Screenshot">
</div>
</div>
</div>
</div>

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

@@ -1,24 +0,0 @@
<div class="bg-white">
<div class="relative isolate overflow-hidden pt-14">
<img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="" class="absolute inset-0 -z-10 size-full object-cover opacity-30">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<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="relative rounded-full px-3 py-1 text-sm/6 text-black ring-1 ring-gray-700 hover:ring-gray-500">
Announcing our next round of funding. <a href="#" class="font-semibold text-black hover:text-black"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
</div>
</div>
<div class="text-center">
<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-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>
<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-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-black hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
</div>
</div>

61
templates/partials/hero/myhero5.html
View File

@@ -1,61 +0,0 @@
<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-4xl text-center">
<p class="text-base/7 font-light text-black tracking-wide">WHAT'S NEW</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black"> Coming Soon: The Future of Mycelium</h2>
<p class="mt-6 text-lg font-light lg:text-xl">Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what’s coming next by staying connected with our latest updates.</p>
</div>
</div>
<div class="relative overflow-hidden pt-10">
<div class="mx-auto max-w-7xl px-6 lg:px-8 flex items-center justify-center">
<img src="/images/future.png" alt="App screenshot" width="900">
</div>
</div>
<div class="mx-auto mt-10 max-w-7xl px-6 lg:px-8">
<dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-black 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">
<dt class="inline font-semibold text-black">
✓ QSFS Storage Functionality
</dt>
<dd class="font-light">Mycelium’s QSFS storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-black">
✓ Entry and Exit Points for AI Workloads
</dt>
<dd class="font-light">Seamlessly connect AI applications to Mycelium, providing optimized nd secured data pipelines for training, inference, and real-time processing.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-black">
✓ Data Storage and Retrieval Mechanisms
</dt>
<dd class="font-light">Users can choose between storing data locally for quick access or utilizing the distributed grid for enhanced scalability and resilience.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-black">
✓ Ability to Store Data on Behalf of Other Users
</dt>
<dd class="font-light">Mycelium enables users to securely store and manage data for others, facilitating shared access while maintaining ownership and permissions.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-black">
✓ Frontend/Backend Integration
</dt>
<dd class="font-light"> Mycelium provides seamless integration with existing applications, enabling developers to leverage decentralized storage across both frontend and backend architectures.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-black">
✓ CDN (Content Delivery Network)
</dt>
<dd class="font-light">Mycelium accelerates data distribution by acting as a decentralized CDN, ensuring fast, secure, and efficient content delivery across global nodes with minimal latency.</dd>
</div>
</dl>
</div>
</div>

256
templates/partials/hero/myhero6.html
View File

@@ -1,256 +0,0 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
},
};
</script>
<main class="fade-in relative flex flex-col justify-center overflow-hidden bg-white">
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-12 border-t-2">
<h1 class="text-3xl lg:text-4xl font-normal tracking-tight text-black pt-12">Frequently Asked Questions</h1>
<!-- Accordion component -->
<div class="divide-y divide-white/50 my-10">
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-01"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-01"
>
<span style="color: #000;">What is Mycelium?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-01"
role="region"
aria-labelledby="faqs-title-01"
class="grid text-sm text-black overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-02"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-02"
>
<span style="color: #000;">How do I install the Mycelium app?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-02"
role="region"
aria-labelledby="faqs-title-02"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable. Click <a href="/action" class="font-semibold">here</a> for more info.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-04"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-04"
>
<span style="color: #000;">How can I find and use my Mycelium address?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-04"
role="region"
aria-labelledby="faqs-title-04"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
Upon using the Mycelium app, you're assigned a unique Mycelium address. To copy this address, click the button located to the right of the displayed address in the app interface.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-05"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-05"
>
<span style="color: #000;">Can I deploy workloads on the TFGrid using Mycelium?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-05"
role="region"
aria-labelledby="faqs-title-05"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
Yes, after installing Mycelium, you can deploy workloads on the TFGrid and connect to them using the Mycelium network. Detailed deployment guides are available in the documentation.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-06"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-06"
>
<span style="color: #000;">Is there an API available for Mycelium?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-06"
role="region"
aria-labelledby="faqs-title-06"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
Yes, Mycelium offers an API for administrative operations, peer management, and message subsystem operations. Comprehensive API documentation can be found in the official Mycelium GitHub repository
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-04"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-04"
>
<span style="color: #000;">What should I do if I encounter issues during installation or usage?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-04"
role="region"
aria-labelledby="faqs-title-04"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
If you face any challenges, refer to the troubleshooting section in the Mycelium documentation. Additionally, ensure that all prerequisites are met, such as having wintun.dll in the correct directory for Windows installations.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-04"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-04"
>
<span style="color: #000;">How does Mycelium handle routing within its network?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
</svg>
</button>
</h2>
<div
id="faqs-text-04"
role="region"
aria-labelledby="faqs-title-04"
class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light">
Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End: Accordion component -->
</div>
</main>

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

@@ -1,17 +0,0 @@
<div class="fade-in">
<div class="mx-auto max-w-7xl py-12 sm:px-6 lg:px-8">
<div class="relative isolate overflow-hidden bg-black px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
<div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
<h2 class="text-4xl font-normal tracking-tight text-balance text-white lg:text-5xl">Get AIBox Today</h2>
<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">
<a href="/action" 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="https://manual.threefold.io/documentation/system_administrators/mycelium/mycelium_app.html" class="text-sm/6 font-semibold text-white hover:text-gray-100">Read Manual <span aria-hidden="true">→</span></a>
</div>
</div>
<div class="relative mt-16 h-80 lg:mt-8">
<img class="absolute top-0 left-0 w-[45rem] max-w-none rounded-2xl bg-white/5 ring-1 ring-white/10" src="/images/mycel3.png" alt="App screenshot" width="1824" height="1080">
</div>
</div>
</div>
</div>