ourworld_web/www_mycelium
20
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

add content
Some checks are pending
www2.threefold_io / Deploy (push) Waiting to run
Details
www2.threefold_io / Wait for Website Update (push) Blocked by required conditions
Details
www2.threefold_io / Check for Broken Links (push) Blocked by required conditions
Details

Browse Source
This commit is contained in:
sasha-astiadi 2025-02-16 19:13:51 +08:00
parent d8c8c1ec3a
commit b3faaa3cb6
25 changed files with 453 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/images/decent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
static/images/effic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
static/images/future.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 348 KiB

2
static/images/icons/decent.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

2
static/images/icons/effic.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.7 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

2
static/images/icons/resil.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
static/images/mycel2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

BIN
static/images/mycel_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
static/images/new_logo_tft.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
static/images/resil.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

8
templates/_default/base.html
View File

@ -3,7 +3,7 @@
{% include "partials/head.html" %} {% include "partials/head.html" %}
{% include "partials/header.html" %} {% include "partials/header.html" %}
<body class="bg-dark-gradient"> <body class="bg-white">
<!-- Google Tag Manager (noscript) --> <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0" <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0"
@ -55,9 +55,3 @@
</html> </html>
<style>
.bg-dark-gradient {
background: rgb(15,15,15);
background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(24, 24, 24) 50%, rgba(15,15,15,1) 100%);
}
</style>

13
templates/index.html
View File

@ -2,15 +2,10 @@
{% block content %} {% block content %}
{% include "partials/hero/myhero.html" %} {% include "partials/hero/myhero.html" %}
{% include "partials/hero/myhero1.html" %}
{% include "partials/hero/myhero2.html" %} {% include "partials/hero/myhero2.html" %}
{% include "partials/hero/myhero3.html" %} {% include "partials/hero/myhero3.html" %}
{% include "partials/hero/hero1.html" %} {% include "partials/hero/myhero5.html" %}
{% include "partials/hero/hero2.html" %} {% include "partials/hero/myhero6.html" %}
{% include "partials/hero/hero3.html" %} {% include "partials/hero/myhero7.html" %}
{% include "partials/hero/hero4.html" %}
{% include "partials/hero/hero5.html" %}
{% include "partials/hero/hero6.html" %}
{% include "partials/hero/hero7.html" %}
{% include "partials/hero/hero8.html" %}
{% include "partials/hero/hero9.html" %}
{% endblock content %} {% endblock content %}

10
templates/layouts/why.html
View File

@ -1,6 +1,14 @@
{% extends "_default/base.html" %} {% extends "_default/base.html" %}
{% block content %} {% block content %}
{% include "partials/hero/hero1.html" %}
{% include "partials/hero/hero2.html" %}
{% include "partials/hero/hero3.html" %}
{% include "partials/hero/hero4.html" %}
{% include "partials/hero/hero5.html" %}
{% include "partials/hero/hero6.html" %}
{% include "partials/hero/hero7.html" %}
{% include "partials/hero/hero8.html" %}
{% include "partials/hero/hero9.html" %}
{% include "partials/why/hero.html" %} {% include "partials/why/hero.html" %}
{% include "partials/why/reason.html" %} {% include "partials/why/reason.html" %}
{% include "partials/why/timeline.html" %} {% include "partials/why/timeline.html" %}

28
templates/partials/header.html
View File

@ -1,23 +1,23 @@
{%- set section = get_page(path="header/index.md") %} {%- set section = get_page(path="header/index.md") %}
{% set header_items = section.content | safe | split(pat="<li>") %} {% set header_items = section.content | safe | split(pat="<li>") %}
<header id="header-container"> <header id="header-container bg-white">
<div class="z-20 fixed top-0 left-0 right-0 bg-black1 lg:bg-transparent lg:absolute w-full"> <div class="z-20 fixed top-0 left-0 right-0 bg-white lg:absolute w-full">
<div class="relative z-50"> <div class="relative z-50">
<div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 "> <div class="bg-white mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
<div> <div>
<a href="{{get_url(path='/')}}" class="flex"> <a href="{{get_url(path='/')}}" class="flex">
<img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" /> <img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
</a> </a>
</div> </div>
<div class="-mr-2 -my-2 lg:hidden"> <div class="-mr-2 -my-2 lg:hidden">
<button id="hamburger-btn" type="button" class="bg-black1 inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out"> <button id="hamburger-btn" type="button" class="bg-white inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
<!-- Heroicon name: menu --> <!-- Heroicon name: menu -->
<svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg> </svg>
</button> </button>
<button id="close-hamburger-btn" type="button" class="bg-black1 hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out"> <button id="close-hamburger-btn" type="button" class="bg-white hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
<!-- Heroicon name: x --> <!-- Heroicon name: x -->
<svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@ -36,7 +36,7 @@
{% set current = get_url(path=link_path[1]) ~ "/" %} {% set current = get_url(path=link_path[1]) ~ "/" %}
{% if header_label is containing("http") %} {% if header_label is containing("http") %}
{% if header_label is not containing("threefold") %} {% if header_label is not containing("threefold") %}
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-white focus:outline-none focus:text-gray-200 transition ease-in-out duration-150"> <a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
{{link_label}} {{link_label}}
</a> </a>
{% endif %} {% endif %}
@ -45,14 +45,14 @@
{{link_label}} {{link_label}}
</a> </a>
{% else %} {% else %}
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-white focus:outline-none focus:text-gray-200 transition ease-in-out duration-150"> <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
{{link_label}} {{link_label}}
</a> </a>
{% endif %} {% endif %}
{% else %} {% else %}
<div class="relative"> <div class="relative">
{% set button_id = header_label ~ "-menu-btn" | slugify %} {% set button_id = header_label ~ "-menu-btn" | slugify %}
<button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3 text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150"> <button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3 text-black group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
<span>{{ header_label }}</span> <span>{{ header_label }}</span>
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div> <div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
</button> </button>
@ -67,7 +67,7 @@
<div class="inline-flex"> <div class="inline-flex">
{# <ul class="list-none inline-flex mt-5 mr-4 mx-auto"> {# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
<li class="ml-4"> <li class="ml-4">
<a href="https://t.me/threefoldnews" target="_blank" class="text-white"> <a href="https://t.me/threefoldnews" target="_blank" class="text-black">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="18" width="18"
@ -87,7 +87,7 @@
<a <a
href="javascript:;" href="javascript:;"
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
class="text-white" class="text-black"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -107,7 +107,7 @@
</a> </a>
</li> </li>
</ul> #} </ul> #}
<a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">Get Mycelium</a> <a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-white/5">Get Mycelium</a>
</div> </div>
</div> </div>
</div> </div>
@ -166,13 +166,13 @@
</a> </a>
{% endif %} {% endif %}
{% else %} {% else %}
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-gray-100 transition ease-in-out duration-150"> <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-black focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
{{link_label}} {{link_label}}
</a> </a>
{% endif %} {% endif %}
{% else %} {% else %}
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %} {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-white transition ease-in-out duration-150"> <button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-black group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-black transition ease-in-out duration-150">
{{ header_label }} {{ header_label }}
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div> <div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
</button> </button>
@ -197,7 +197,7 @@
</div> #} </div> #}
<div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4"> <div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
<a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a> <a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-black shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
</div> </div>
</nav> </nav>
</div> </div>

14
templates/partials/header_custom.html
View File

@ -1,7 +1,7 @@
<header id="header-container" class="bg-inherit"> <header id="header-container" class="bg-inherit">
<div class="z-10 bg-dark1 w-screen"> <div class="z-10 bg-white w-screen">
<div class="relative z-50"> <div class="relative z-50">
<div class="mx-auto bg-dark1 flex z-50 bg-transparent justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20"> <div class="mx-auto bg-white flex z-50 bg-transparent justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
<div> <div>
<a href="/" class="flex"> <a href="/" class="flex">
<img src="images/tf_dark.png" alt="ODFZ Logo" /> <img src="images/tf_dark.png" alt="ODFZ Logo" />
@ -19,7 +19,7 @@
</svg> </svg>
</button> </button>
</div> </div>
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12"> <div class="hidden bg-white lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
<nav class="flex space-x-10"> <nav class="flex space-x-10">
{% for header_item in header_items %} {% for header_item in header_items %}
{% if not loop.first %} {% if not loop.first %}
@ -68,7 +68,7 @@
{% set menu_id = header_label ~ "-menu" | slugify %} {% set menu_id = header_label ~ "-menu" | slugify %}
<nav> <nav>
<div id="{{menu_id}}" class="mt-16 z-30 absolute inset-x-0 transform lg:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden"> <div id="{{menu_id}}" class="mt-16 z-30 absolute inset-x-0 transform lg:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-gray-800 lg:bg-gray-900"> <div class="bg-white">
<div class="mx-8 lg:mx-20 px-6 py-4 text-white"> <div class="mx-8 lg:mx-20 px-6 py-4 text-white">
{{ header_menu | safe }} {{ header_menu | safe }}
</div> </div>
@ -79,8 +79,4 @@
</div> </div>
</header> </header>
<style>
.bg-dark1 {
background: rgba(15,15,15,1);
}
</style>

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

@ -7,8 +7,8 @@
</div> </div>
</div> </div>
<div class="text-center"> <div class="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>
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-white">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-white">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">

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

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

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

@ -0,0 +1,23 @@
<div class=" fade-in bg-black ">
<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-white tracking-wide">ABOUT</p>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">Discover Mycelium</h2>
<p class="text-left mt-4 text-pretty lg:text-lg text-md font-light text-gray-300 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="" 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>
</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>

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

File diff suppressed because one or more lines are too long

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

@ -1,4 +1,4 @@
<div class=" fade-in "> <div class=" fade-in bg-black">
<div class="lg:py-24 relative isolate"> <div class="lg:py-24 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-white tracking-wide">HOW IT WORKS</p>

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

@ -0,0 +1,24 @@
<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-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>
</div>
</div>
</div>
</div>
</div>
</div>

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

@ -0,0 +1,61 @@
<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 Normal file
View File

@ -0,0 +1,256 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
},
};
</script>
<main class="relative flex flex-col justify-center overflow-hidden bg-black">
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-20">
<h1 class="text-3xl font-normal tracking-tight text-white">Frequently Asked Questions</h1>
<!-- Accordion component -->
<div class="divide-y divide-white/50 my-10">
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-01"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-01"
>
<span style="color: #fff;">What is 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-slate-200 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
>
<div class="overflow-hidden">
<p class="pb-3 text-gray-300 text-base font-light">
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: #fff;">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-gray-300 text-base font-light">
The Mycelium app supports Linux, macOS, and Windows. 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.
</p>
</div>
</div>
</div>
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button
id="faqs-title-04"
type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
@click="expanded = !expanded"
:aria-expanded="expanded"
aria-controls="faqs-text-04"
>
<span style="color: #fff;">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-gray-300 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: #fff;">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-gray-300 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: #fff;">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-gray-300 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: #fff;">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-gray-300 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: #fff;">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-gray-300 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>

13
templates/partials/hero/myhero7.html Normal file
View File

@ -0,0 +1,13 @@
<div class="">
<div class="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
<div class="relative isolate overflow-hidden bg-gray-100 px-6 py-24 text-center shadow-2xl sm:rounded-3xl sm:px-16">
<h2 class="text-4xl font-normal tracking-tight text-balance text-black sm:text-5xl">Get Mycelium Today.</h2>
<p class="mx-auto mt-6 max-w-xl font-light text-lg/8 text-pretty text-black">Experience the Future of Decentralized AI & Storage and be part of the decentralized revolution..</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="#" class=" bg-black px-3.5 py-2.5 text-sm rounded-xl font-semibold text-white shadow-xs hover:bg-gray-900 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-black hover:text-gray-950">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>

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

@ -5,7 +5,7 @@
<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">
<div class="absolute inset-px rounded-lg bg-black1 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div> <div class="absolute inset-px rounded-lg bg-white max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]"> <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">
@ -19,7 +19,7 @@
</div> </div>
<!-- row1- 2 column --> <!-- row1- 2 column -->
<div class="relative lg:col-span-3"> <div class="relative lg:col-span-3">
<div class="absolute inset-px rounded-lg bg-black1 lg:rounded-tr-[2rem]"></div> <div class="absolute inset-px rounded-lg bg-white lg:rounded-tr-[2rem]"></div>
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]"> <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">