sashaastiadi/www_mycelium
1
0
Fork 1
forked from hero/www_hero_project
Code Pull Requests Activity

mycelium

Browse Source
This commit is contained in:
sasha-astiadi 2024-05-21 07:34:29 +02:00
parent 087a92d65d
commit 2ad5458382
47 changed files with 923 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
content/header/_index.md
View File

@ -8,8 +8,7 @@ extra:
imgPath: "" imgPath: ""
--- ---
- [Mycelium]("/mycelium") - [Home]("/home")
- [Hero]("/hero")
- [Nodes]("/nodes")
- [Xperiences]("/xperiences")
- [Contact]("/contact")

303
content/home/index copy.md Normal file
View File

@ -0,0 +1,303 @@
---
title: "Hero"
description: ""
date: 2018-09-14
updated: 2021-02-20
draft: false
weight: 1
---
<!-- section 1 (header) -->
{% row(style="left" margin="hero" padding="top") %}
<br>
<br>
![placeholder](./img/hero2.png#mx-auto)
|||
# Start Owning Your Data <br>and Digital Life
### With **Hero**, We Can Build a Conscious Collective Intelligence Together.
<p>Meet <b>Hero</b>: your unique digital avatar, streamlining your online presence by eliminating the need for duplicate identities across platforms.</p>
<br>
<button><a href ="/hero">Learn More</a></button>
{% end %}
<!-- section 6 in the news -->
{% row(style="center" padding="top") %}
[![logo1](img/brand1.png#sm)](https://ourworld.tf)
|||
[![logo2](img/brand2.png#sm)](https://ourworld.tf)
|||
[![logo3](img/brand3.png#sm)](https://www.sikana.tv/)
|||
[![logo3](img/brand5.png#sm)](https://www.threefold.io)
|||
[![logo4](img/brand4.png#sm)](https://www.vverse.co/)
{% end %}
<!-- section 2 WHAT -->
{% row(style="right" margin="hero" reverse="rightreserve" padding="both") %}
## Everyone Can be a Hero
### Discover how Hero empowers <br>everyone to become digital pioneers.
<p><b>Heroes</b> were designed with technologies <br>that promote universal accessibility,<br> freedom, equality, and personal growth for all.</p>
<br>
<div class="border-t border-gray-200 dark:border-gray-700 ml-auto w-3/4"></div>
<br>
<h6>Decentralized Identity (DID) Technology</b> ✓</h6>
<h6>Blockchain Encrypted Security ✓</h6>
<h6>dApps Interoperability ✓</h6>
<h6>Community Governance Model ✓</h6>
<br>
<div class="border-t border-gray-200 dark:border-gray-700 ml-auto w-3/4"></div>
<br>
##### [__→ Learn More about Hero__](/hero)
|||
![placeholder](./img/img_section.png#mx-auto)
{% end %}
<!-- section 3 (myc) -->
<div class="container mx-auto">
{% row(style="center" margin="withContainer" padding="none") %}
## Hero: The Digital Identity Within the Mycelium Network
### Your Gateway to True Decentralized Internet
![](img/mycelium.png#mx-auto)
{% end %}
{% row(style="center" margin="hero" padding="bottom") %}
<p>Discover how <b>Mycelium Network</b> is revolutionizing internet access with a community-powered connectivity approach. We aim to empower individuals worldwide by enabling them to own and manage internet resources collectively.</p>
<br>
<button> <a href="/mycelium">Learn More</a></button>
{% end %}
<!-- section 5 subscription -->
{% row(style="left" margin="hero" padding="bottom") %}
![](./img/nodes.png#mx-auto)
|||
## Powered by Mycelium Nodes
### The Fundamental Building Blocks of Decentralized Internet
<p><b>Mycelium Network</b> and <b>Heroes</b> exist thanks to a vast network of cloud capacity deployed by ‘<b>Farmers</b>’- who deploy Mycelium Nodes in supporting locations worldwide.</p>
<br>
<div class="border-t border-gray-200 dark:border-gray-700">
</div>
<br>
<h6>✓ Decentralized and globally distributed.</h6>
<h6>✓ Fully Autonomous Operations</h6>
<h6>✓ Peer-to-Peer Technologies</h6>
<br>
<p>Together, we can create a globally distributed AI and internet infrastructure and earn an income.</p>
<br>
<div class="border-t border-gray-200 dark:border-gray-700">
</div>
<br>
##### [__→Learn More about Mycelium Nodes__](/nodes)
{% end %}
<!-- section 4 (header) -->
<div class="container mx-auto">
{% row(style="center" margin="hero" padding="bottom") %}
## Join The Movement
### A New Era of Digital Sovereignty
<p>Embark on a journey towards digital sovereignty with Hero, where you take a full control of your online identity and data, starting with these 3 easy steps:</p>
{% end %}
{% row(style="center" margin="narrow" padding="bottom") %}
<div class="border border-gray-300 rounded-lg mx-4 my-4 pt-5 pb-6 px-6 py-6 shadow-md">
![Image](img/item1.png#3col)
#### __Get A Node & Earn__
<h5>Get a Mycelium Node and add capacity to the <b>Mycelium Network</b>.</h5>
</div>
|||
<div class="border border-gray-300 rounded-lg mx-4 my-4 pt-5 pb-6 px-6 py-6 shadow-md">
![Image](img/item1.png#3col)
#### __Activate Your Hero__
<h5>Reserve and activate your own <b>Hero</b> - your sovereign digital identity.</h5>
</div>
|||
<div class="border border-gray-300 rounded-lg mx-4 my-4 pt-5 pb-6 px-6 py-6 shadow-md">
![Image](img/item3.png#3col)
#### __Acquire INCA Tokens__
<h5>Purchase INCA Tokens- The digital currency of the <b>Mycelium Network</b>.</h5>
</div>
{% end %}
{% row(style="left" margin="hero" padding="both") %}
<br>
## Why Choose Mycelium
<br>
<p> Mycelium Network offers numerous advantages over traditional internet networks.</p>
|||
<div class="border-t border-gray-200 dark:border-gray-700">
</div>
<br>
<h4><b>Always Online</b></h4>
<h5>Stay connected at all times, no matter the situation. Our robust network architecture ensures uninterrupted connectivity even during natural disasters or power outages.</h5>
<br>
<div class="border-t border-gray-200 dark:border-gray-700">
</div>
<br>
<h4><b>Inclusive Access</b></h4>
<h5>Mycelium Routers provide cost-effective network expansion. This allows for greater internet accessibility in underserved and remote areas.</h5>
<br>
<div class="border-t border-gray-200 dark:border-gray-700">
<br>
<h4><b>Internet Freedom</h4>
<h5>Publish, find, buy, and sell anything on our network. Enjoy the freedom to share and access information without restrictions or censorship.</p>
<br>
</h5>
<div class="border-t border-gray-200 dark:border-gray-700">
</div>
{% end %}
<!-- section5 xp -->
{% row(style="left" margin="hero" padding="bottom") %}
![placeholder](./img/experiences.png#mx-auto)
|||
## Hero Xperiences
<p>Dive into a world of fully decentralized and completely secure applications on the <b>Mycelium Network</b>, built to empower and enable our Heroes with innovative digital Xperiences.</p>
<br>
<div class="border-t border-gray-200 dark:border-gray-700">
</div>
<br>
<h6>◉ <b>Chat App</b>: Stay connected with secure, private messaging.</h6>
<h6>◉ <b>Wallet</b>: Manage your assets with our integrated digital wallet.</h6>
<h6>◉ <b>Browser</b>: Browse the internet securely and privately.</h6>
<h6>◉ <b>Cloud</b>: Store and access your files securely from anywhere.</h6>
<br>
<div class="border-t border-gray-200 dark:border-gray-700">
</div>
<br>
##### [__→ Explore Hero Xperiences__](/xperiences)
{% end %}
<div class="border-t border-gray-200 dark:border-gray-700">
</div>

260
content/home/index.md
View File

@ -5,263 +5,5 @@ date: 2018-09-14
updated: 2021-02-20 updated: 2021-02-20
draft: false draft: false
weight: 1 weight: 1
template: "layouts/home.html"
--- ---
<!-- section 1 (header) -->
{% row(style="left" margin="hero" padding="top") %}
<br>
<br>
![placeholder](./img/hero2.png#mx-auto)
|||
# Start Owning Your Data <br>and Digital Life
### With **Hero**, We Can Build a Conscious Collective Intelligence Together.
<p>Meet <b>Hero</b>: your unique digital avatar, streamlining your online presence by eliminating the need for duplicate identities across platforms.</p>
<br>
<button><a href ="/hero">Learn More</a></button>
{% end %}
<!-- section 6 in the news -->
{% row(style="center" padding="top") %}
[![logo1](img/brand1.png#sm)](https://ourworld.tf)
|||
[![logo2](img/brand2.png#sm)](https://ourworld.tf)
|||
[![logo3](img/brand3.png#sm)](https://www.sikana.tv/)
|||
[![logo3](img/brand5.png#sm)](https://www.threefold.io)
|||
[![logo4](img/brand4.png#sm)](https://www.vverse.co/)
{% end %}
<!-- section 2 WHAT -->
{% row(style="right" margin="hero" reverse="rightreserve" padding="both") %}
## Everyone Can be a Hero
### Discover how Hero empowers <br>everyone to become digital pioneers.
<p><b>Heroes</b> were designed with technologies <br>that promote universal accessibility,<br> freedom, equality, and personal growth for all.</p>
<br>
<div class="border-t border-gray-200 dark:border-gray-700 ml-auto w-3/4"></div>
<br>
<h6>Decentralized Identity (DID) Technology</b> ✓</h6>
<h6>Blockchain Encrypted Security ✓</h6>
<h6>dApps Interoperability ✓</h6>
<h6>Community Governance Model ✓</h6>
<br>
<div class="border-t border-gray-200 dark:border-gray-700 ml-auto w-3/4"></div>
<br>
##### [__→ Learn More about Hero__](/hero)
|||
![placeholder](./img/img_section.png#mx-auto)
{% end %}
<!-- section 3 (myc) -->
<div class="container mx-auto">
{% row(style="center" margin="withContainer" padding="none") %}
## Hero: The Digital Identity Within the Mycelium Network
### Your Gateway to True Decentralized Internet
![](img/mycelium.png#mx-auto)
{% end %}
{% row(style="center" margin="hero" padding="bottom") %}
<p>Discover how <b>Mycelium Network</b> is revolutionizing internet access with a community-powered connectivity approach. We aim to empower individuals worldwide by enabling them to own and manage internet resources collectively.</p>
<br>
<button> <a href="/mycelium">Learn More</a></button>
{% end %}
<!-- section 5 subscription -->
{% row(style="left" margin="hero" padding="bottom") %}
![](./img/nodes.png#mx-auto)
|||
## Powered by Mycelium Nodes
### The Fundamental Building Blocks of Decentralized Internet
<p><b>Mycelium Network</b> and <b>Heroes</b> exist thanks to a vast network of cloud capacity deployed by ‘<b>Farmers</b>’- who deploy Mycelium Nodes in supporting locations worldwide.</p>
<br>
<div class="border-t border-gray-200 dark:border-gray-700">
</div>
<br>
<h6>✓ Decentralized and globally distributed.</h6>
<h6>✓ Fully Autonomous Operations</h6>
<h6>✓ Peer-to-Peer Technologies</h6>
<br>
<p>Together, we can create a globally distributed AI and internet infrastructure and earn an income.</p>
<br>
<div class="border-t border-gray-200 dark:border-gray-700">
</div>
<br>
##### [__→Learn More about Mycelium Nodes__](/nodes)
{% end %}
<!-- section 4 (header) -->
<div class="container mx-auto">
{% row(style="center" margin="hero" padding="bottom") %}
## Join The Movement
### A New Era of Digital Sovereignty
<p>Embark on a journey towards digital sovereignty with Hero, where you take a full control of your online identity and data, starting with these 3 easy steps:</p>
{% end %}
{% row(style="center" margin="narrow" padding="bottom") %}
<div class="border border-gray-300 rounded-lg mx-4 my-4 pt-5 pb-6 px-6 py-6 shadow-md">
![Image](img/item1.png#3col)
#### __Get A Node & Earn__
<h5>Get a Mycelium Node and add capacity to the <b>Mycelium Network</b>.</h5>
</div>
|||
<div class="border border-gray-300 rounded-lg mx-4 my-4 pt-5 pb-6 px-6 py-6 shadow-md">
![Image](img/item1.png#3col)
#### __Activate Your Hero__
<h5>Reserve and activate your own <b>Hero</b> - your sovereign digital identity.</h5>
</div>
|||
<div class="border border-gray-300 rounded-lg mx-4 my-4 pt-5 pb-6 px-6 py-6 shadow-md">
![Image](img/item3.png#3col)
#### __Acquire INCA Tokens__
<h5>Purchase INCA Tokens- The digital currency of the <b>Mycelium Network</b>.</h5>
</div>
{% end %}
<!-- section5 xp -->
{% row(style="left" margin="hero" padding="bottom") %}
![placeholder](./img/experiences.png#mx-auto)
|||
## Hero Xperiences
<p>Dive into a world of fully decentralized and completely secure applications on the <b>Mycelium Network</b>, built to empower and enable our Heroes with innovative digital Xperiences.</p>
<br>
<div class="border-t border-gray-200 dark:border-gray-700">
</div>
<br>
<h6>◉ <b>Chat App</b>: Stay connected with secure, private messaging.</h6>
<h6>◉ <b>Wallet</b>: Manage your assets with our integrated digital wallet.</h6>
<h6>◉ <b>Browser</b>: Browse the internet securely and privately.</h6>
<h6>◉ <b>Cloud</b>: Store and access your files securely from anywhere.</h6>
<br>
<div class="border-t border-gray-200 dark:border-gray-700">
</div>
<br>
##### [__→ Explore Hero Xperiences__](/xperiences)
{% end %}
<div class="border-t border-gray-200 dark:border-gray-700">
</div>

BIN
content/mycelium2/img/brand1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
content/mycelium2/img/brand2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
content/mycelium2/img/brand3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
content/mycelium2/img/brand4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
content/mycelium2/img/brand5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
content/mycelium2/img/brand6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

9
content/mycelium2/index.md Normal file
View File

@ -0,0 +1,9 @@
---
title: "Mycelium2"
description: ""
date: 2018-09-14
updated: 2021-02-20
draft: false
weight: 1
template: "layouts/mycelium2.html"
---

41
css/index.css
View File

@ -30,9 +30,18 @@
} }
.bg-purple { .bg-purple {
background-color: #4207ab ; background-color: #40B9C9 ;
} }
.bg-black {
color: #000 ;
}
.bg-transparent {
background-color: rgba(66, 7, 171, 0); /* Fully transparent */
}
/* Image styling in markdown */ /* Image styling in markdown */
img[src*="#mx-auto"] { margin: auto; } img[src*="#mx-auto"] { margin: auto; }
img[src*="#small"] { width: 68px; margin: auto; } img[src*="#small"] { width: 68px; margin: auto; }
@ -50,20 +59,20 @@ img[src*="#3col"] { width: 100px; margin-left: auto; margin-right: auto; }
/* Layer components */ /* Layer components */
@layer components { @layer components {
h1 { @apply text-xl lg:text-4xl xl:text-7xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; font-weight: 900; line-height: 1em; } h1 { @apply text-xl lg:text-4xl xl:text-7xl; font-family: "Reddit Sans", sans-serif; font-weight: 900; line-height: 1em; }
h1 strong { @apply font-extrabold; } h1 strong { @apply font-extrabold; }
h2 { @apply text-xl md:text-2xl lg:text-4xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; line-height: 1; font-weight: 600; } h2 { @apply text-xl md:text-2xl lg:text-4xl; font-weight: 600; font-family: "Reddit Sans", sans-serif; line-height: 1; font-weight: 600; }
h2 strong { @apply font-medium; } h2 strong { @apply font-medium; }
h3 { @apply text-xl lg:text-2xl font-normal my-4; color: #4207ab; font-family: "Reddit Sans", sans-serif; font-weight: 400; } h3 { @apply text-xl lg:text-2xl font-normal my-4; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
h3 strong { @apply font-medium; font-weight: 400; } h3 strong { @apply font-medium; font-weight: 400; }
h4 { @apply text-xl lg:text-xl font-normal my-4; color: #4207ab; font-family: "Reddit Sans", sans-serif; font-weight: 400; } h4 { @apply text-xl lg:text-xl font-normal my-4; color: #fff; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
h5 { @apply text-xl lg:text-xl font-normal; font-family: "Reddit Sans", sans-serif; font-weight: 300; } h5 { @apply text-xl lg:text-lg font-normal; font-family: "Reddit Sans", sans-serif; font-weight: 300; }
h6 { @apply text-lg not-italic font-normal my-1; font-family: "Reddit Sans", sans-serif; font-weight: 300; letter-spacing: 0.02em; } h6 { @apply text-lg not-italic font-normal my-1; color: #fff; font-family: "Reddit Sans", sans-serif; font-weight: 400; letter-spacing: 0.02em; }
p { @apply text-lg lg:text-xl leading-tight tracking-normal font-normal my-0; font-family: "Reddit Sans", sans-serif; font-weight: 300; letter-spacing: 0.03em; } p { @apply text-lg lg:text-xl leading-tight tracking-normal font-normal my-0; color: #fff; font-family: "Reddit Sans", sans-serif; font-weight: 300; letter-spacing: 0.03em; }
blockquote { @apply border-l-4 border-gray-400 mx-2 my-2 p-2; font-family: "Reddit Sans", sans-serif; font-weight: 300; } blockquote { @apply border-l-4 border-gray-400 mx-2 my-2 p-2; font-family: "Reddit Sans", sans-serif; font-weight: 300; }
li { @apply text-sm lg:text-sm font-light my-2; font-family: "Reddit Sans", sans-serif; font-weight: 200; } li { @apply text-sm lg:text-sm font-light my-2; font-family: "Reddit Sans", sans-serif; font-weight: 200; }
li li { @apply text-sm lg:text-sm font-light;font-family: "Reddit Sans", sans-serif; font-weight: 200; } li li { @apply text-sm lg:text-sm font-light;font-family: "Reddit Sans", sans-serif; font-weight: 200; }
button { @apply inline-block text-base lg:text-lg px-8 py-1 my-3 border-2 shadow;font-family: "Reddit Sans", sans-serif; font-weight: 400; } button { @apply inline-block text-base px-3.5 py-2.5 rounded-md; font-family: "Reddit Sans", sans-serif; font-weight: 400; color:#fff; }
article h2 { @apply text-xl lg:text-3xl font-medium; font-family: "Reddit Sans", sans-serif; font-weight: 500; } article h2 { @apply text-xl lg:text-3xl font-medium; font-family: "Reddit Sans", sans-serif; font-weight: 500; }
article { @apply text-base lg:text-lg; font-family: "Reddit Sans", sans-serif; font-weight: 400; } article { @apply text-base lg:text-lg; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
} }
@ -71,24 +80,24 @@ img[src*="#3col"] { width: 100px; margin-left: auto; margin-right: auto; }
/* Link styles */ /* Link styles */
a:hover { color: #4207ab; } a:hover { color: #6208ff; }
button:hover { color: #4207ab; } button:hover { color: #6208ff; }
button { font-weight: 500; } button { font-weight: 500; color: #fff; }
.experience-btn { border: none; margin: 0; padding: 0; color: black; padding: 10px; width: fit-content; } .experience-btn { border: none; margin: 0; padding: 0; color: black; padding: 10px; width: fit-content; }
.experience-btn p { @apply text-lg; } .experience-btn p { @apply text-lg; }
.experience-btn:hover { background: white; } .experience-btn:hover { background: white; }
.experience-btn h4 { white-space: normal; } .experience-btn h4 { white-space: normal; }
header .customize { background-color: transparent; position: absolute; } header .customize { background-color: transparent; position: absolute; }
footer .customize { color: #fff; background-color: #4207ab; display: flex; flex-direction: column; align-items: center; padding-top: 24px; padding-bottom: 24px; } footer .customize { color: #fff; background-color: #6208ff; display: flex; flex-direction: column; align-items: center; padding-top: 24px; padding-bottom: 24px; }
footer .customize img { width: 60px; } footer .customize img { width: 60px; }
header .customize div { box-shadow: none; text-transform: uppercase; font-weight: 700 !important; } header .customize div { box-shadow: none; text-transform: uppercase; font-weight: 700 !important; }
/* Header styles */ /* Header styles */
button { background: transparent; color: black; border-radius: 2px; border: 1px solid black; box-shadow: none; } button { background: transparent; color: #fff; border-radius: 2px; border: 1px solid #fff; box-shadow: none; }
a { border: none; } a { border: none; }
header { font-family: "Reddit Sans"; } header { font-family: "Reddit Sans"; }
.nav_btn { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; } .nav_btn { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
.link2 { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; color: #4207ab !important; font-weight: 600 !important; border: 0px !important; } .link2 { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; color: #6208ff !important; font-weight: 600 !important; border: 0px !important; }
@ -101,7 +110,7 @@ header { font-family: "Reddit Sans"; }
.banner, .header { width: 100%; margin: 0; padding: 120px 0; text-align: center; position: relative; display: block; color: #fff !important; letter-spacing: 0.5px; overflow: hidden; transition: 1.5s; } .banner, .header { width: 100%; margin: 0; padding: 120px 0; text-align: center; position: relative; display: block; color: #fff !important; letter-spacing: 0.5px; overflow: hidden; transition: 1.5s; }
.header { height: auto; background: none; padding: 200px 0; } .header { height: auto; background: none; padding: 200px 0; }
.banner h2, .header h1 { margin: auto; color: #fff; position: relative; transition: 0.3s; z-index: 1; white-space: nowrap; } .banner h2, .header h1 { margin: auto; color: #fff; position: relative; transition: 0.3s; z-index: 1; white-space: nowrap; }
.header h1 { color: #000; transition: none; } .header h1 { color: #fff; transition: none; }
.banner h2 svg { font-size: 40px; margin-left: 15px; position: absolute; top: 55%; transform: translateY(-50%) scale(0.5); opacity: 0; transition: 0.3s; } .banner h2 svg { font-size: 40px; margin-left: 15px; position: absolute; top: 55%; transform: translateY(-50%) scale(0.5); opacity: 0; transition: 0.3s; }
.banner .back, .header .back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-position: center; background-size: cover; filter: grayscale(1) contrast(1.4); opacity: 0.25; transition: 1.5s; } .banner .back, .header .back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-position: center; background-size: cover; filter: grayscale(1) contrast(1.4); opacity: 0.25; transition: 1.5s; }
.header .back { filter: none; opacity: 1; background-position: center; background-size: cover; background-repeat: no-repeat; } .header .back { filter: none; opacity: 1; background-position: center; background-size: cover; background-repeat: no-repeat; }

40
css/layout.css
View File

@ -4,33 +4,33 @@ main {
} }
/* Heading styles: color n size */ /* Heading styles: color n size */
h1, .h1 { font-size: 2.5rem; font-weight: 900; } h1, .h1 { font-size: 3.5rem; font-weight: 900; color: #fff; }
h2, .h2 { font-size: 2rem; font-weight: 700; } h2, .h2 { font-size: 2rem; font-weight: 700; color: #fff; }
h3, .h3 { font-size: 1.5rem;font-weight: 400; color: #4207ab; } h3, .h3 { font-size: 1.5rem;font-weight: 400; color: #6208ff; }
h4, .h4 { font-size: 1.3rem; } h4, .h4 { font-size: 1.3rem; color:#cbd5e0 }
h5, .h5 { font-size: 1.15rem; font-style: normal; color:#3f3f3f } h5, .h5 { font-size: 0.95rem; font-style: normal; color: #cbd5e0 }
h6, .h6 { font-size: 1rem; color:#3f3f3f } h6, .h6 { font-size: 1rem; color: #cbd5e0; }
p, .p { font-size: 1.2rem; color:#232323} p, .p { font-size: 1.2rem; color: #cbd5e0}
/* Navigation styles */ /* Navigation styles */
#xp-heading { margin: 0; } #xp-heading { margin: 0; }
.navWhite, .navWhite:visited { color: #fff; } .navWhite, .navWhite:visited { color: #fff; }
.navWhite:focus, .navWhite:active { color: #cbd5e0; } .navWhite:focus, .navWhite:active { color: #cbd5e0; }
.text-blue-light { color: #4299e1; } .text-blue-light { color: #6208ff; }
.text-blue-dark { color: #3182ce; } .text-blue-dark { color: #3182ce; }
.text-shadow-titles { text-shadow: 4px 4px 2px #000; } .text-shadow-titles { text-shadow: 4px 4px 2px #fff; }
.gradient-titles { background: linear-gradient(to bottom, #4299e1, #000); } .gradient-titles { background: linear-gradient(to bottom, #6208ff, #fff); }
.ctr { text-align: center; } .ctr { text-align: center; }
.legal { font-size: 0.75rem; } .legal { font-size: 0.75rem; }
/* Link styles */ /* Link styles */
a { color: #000; } a { color: #fff; }
a:focus, a:hover { border: none; color: #4299e1; } a:focus, a:hover { border: none; color: #6208ff; }
a:active { color: #2b6cb0; } a:active { color: #2b6cb0; }
nav h4 a { border: 0; color: #000; } nav h4 a { border: 0; color: #fff; }
nav h4 a:hover { border: 0; color: #4299e1; } nav h4 a:hover { border: 0; color: #6208ff; }
nav h4 a:focus, nav h4 a:active { border: 0; color: #000; } nav h4 a:focus, nav h4 a:active { border: 0; color: #fff; }
h5 a { color: #4207ab; } h5 a { color: #6208ff; }
/* Text and paragraph styles */ /* Text and paragraph styles */
pre, code { font-feature-settings: normal; } pre, code { font-feature-settings: normal; }
@ -39,9 +39,9 @@ pre, code { font-feature-settings: normal; }
/* Container and layout styles */ /* Container and layout styles */
.height-hero, .height-post { height: 45vh; max-height: 45vh; overflow: hidden; } .height-hero, .height-post { height: 45vh; max-height: 45vh; overflow: hidden; }
.imgCover { object-fit: cover; object-position: center; height: 100%; width: 100%; } .imgCover { object-fit: cover; object-position: center; height: 100%; width: 100%; }
.background-hero-image-div { position: relative; overflow: hidden; width: 100%; background-color: #000; height: 80vh; max-height: 80vh; } .background-hero-image-div { position: relative; overflow: hidden; width: 100%; background-color: #fff; height: 80vh; max-height: 80vh; }
.background-hero-title-block-fit { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 2rem 2rem; background: linear-gradient(to top, #000, transparent); } .background-hero-title-block-fit { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 2rem 2rem; background: linear-gradient(to top, #fff, transparent); }
.background-hero-title-text { text-shadow: 4px 4px 2px #000; } .background-hero-title-text { text-shadow: 4px 4px 2px #fff; }
/* Table styles */ /* Table styles */
table { border-collapse: collapse; } table { border-collapse: collapse; }
@ -64,7 +64,7 @@ table.noborders td img { display: inline-block; }
.footnotes ol { padding-inline-start: 1.5rem; } .footnotes ol { padding-inline-start: 1.5rem; }
.footnotes ol li { margin-bottom: 0.5rem; font-size: 0.65em; } .footnotes ol li { margin-bottom: 0.5rem; font-size: 0.65em; }
.footnote-backref { font-size: 0.75em; } .footnote-backref { font-size: 0.75em; }
.footnote-definition { border-top: 1px solid #000; padding-top: 1em; margin-top: 1em; } .footnote-definition { border-top: 1px solid #fff; padding-top: 1em; margin-top: 1em; }
.footnote-definition + .footnote-definition { border-top: 0; padding-top: 0; margin-top: 0; } .footnote-definition + .footnote-definition { border-top: 0; padding-top: 0; margin-top: 0; }
.footnote-definition-label { top: -0.4em; font-size: 0.65em; } .footnote-definition-label { top: -0.4em; font-size: 0.65em; }
.footnote-definition-label + p { font-size: 75%; margin-top: -1.75em; margin-left: 1em; line-height: 1.35; } .footnote-definition-label + p { font-size: 75%; margin-top: -1.75em; margin-left: 1em; line-height: 1.35; }

BIN
static/images/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
static/images/mesh.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 303 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 660 KiB

BIN
static/images/mesh2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 592 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 489 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 323 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 131 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
static/videos/hero.mp4 Normal file
View File

Binary file not shown.

4
tailwind.config.js
View File

@ -14,5 +14,7 @@ module.exports = {
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [], plugins: [
require('@tailwindcss/forms'),
],
} }

8
templates/_default/base.html
View File

@ -8,14 +8,14 @@
<div id="content" class="p-4 pt-24 lg:pt-0 sm:p-12 lg:p-0 overflow-hidden"> <div id="content" class="p-4 pt-24 lg:pt-0 sm:p-12 lg:p-0 overflow-hidden">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
{% include "partials/banner.html" %} {% include "partials/cta.html" %}
{% include "partials/footer.html" %} {% include "partials/footer.html" %}
<script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script> <script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
</body> </body>
</html> </html>
<style> <style>
body { body {
--tw-bg-opacity: 1; background: rgb(15,6,47);
background: rgb(255,255,255); background: radial-gradient(circle, rgba(15,6,47,1) 0%, rgba(3,22,53,1) 22%, rgba(0,2,5,1) 89%, rgba(0,0,0,0.9990589985994398) 100%);
background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(208,198,255,0.25) 15%, rgba(255,255,255,0.2) 30%, rgba(208,198,255,0.25) 45%, rgba(255,255,255,0.2) 75%, rgba(255,255,255,0.2) 95%); } }
</style> </style>

30
templates/layouts/home.html Normal file
View File

@ -0,0 +1,30 @@
{% extends "_default/base.html" %}
{% block content %}
{% include "partials/mycelium2.html" %}
{% include "partials/logos.html" %}
{% include "partials/about.html" %}
{% include "partials/mesh2.html" %}
{% include "partials/concepts.html" %}
<div>
{% set page = get_page(path="home/index.md") %}
{{page.content | safe}}
</div>
{% include "partials/benefits.html" %}
{% include "partials/technologies.html" %}
{% include "partials/blogs.html" %}
{% include "partials/stats.html" %}
{% endblock content %}

24
templates/layouts/mycelium2.html Normal file
View File

@ -0,0 +1,24 @@
{% extends "_default/base.html" %}
{% block content %}
<!-- mycelium.md page template, has a banner and rows of page summaries -->
{% include "partials/mycelium2.html" %}
<div>
{% set page = get_page(path="mycelium2/index.md") %}
{{page.content | safe}}
</div>
{% include "partials/logos.html" %}
{% include "partials/about.html" %}
{% include "partials/benefits.html" %}
{% include "partials/howitworks.html" %}
{% include "partials/blogs.html" %}
{% include "partials/cta.html" %}
{% endblock content %}

33
templates/partials/about.html Normal file
View File

@ -0,0 +1,33 @@
<!-- section 2 page templates -->
<div class="relative isolate overflow-hidden lg:py-12">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl lg:mx-0">
<br>
<br>
<h2 class="tracking-tight lg:text-4xl sm:text-base">Welcome to Mycelium Network</h2>
<br>
<p class="mt-2 text-base">MyNet, short for Mycelium Network, is the new decentralized internet. It offers a reliable, always-on network that is secure and tamper-proof.</p>
</div>
<dl class="pb-10 grid grid-cols-1 gap-8 sm:mt-16 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col-reverse">
<dt class="text-base leading-7 text-gray-300"> Experience a network that is resilient, even in the face of disasters.</dt>
<dd class="text-xl font-semibold leading-9 tracking-tight text-white">Reliable Internet</dd>
</div>
<div class="flex flex-col-reverse">
<dt class="text-base leading-7 text-gray-300">Your data is secure with our advanced encryption protocols.</dt>
<dd class="text-xl font-semibold leading-9 tracking-tight text-white">End-to-End Encryption</dd>
</div>
<div class="flex flex-col-reverse">
<dt class="text-base leading-7 text-gray-300">Our mesh network architecture ensures no single point of failure.</dt>
<dd class="text-xl font-semibold leading-9 tracking-tight text-white">Decentralized Network</dd>
</div>
<div class="flex flex-col-reverse">
<dt class="text-base leading-7 text-gray-300">Leverage AI to enhance network performance and connectivity.</dt>
<dd class="text-xl font-semibold leading-9 tracking-tight text-white">AI integration</dd>
</div>
</dl>
</div>
</div>
</div>

54
templates/partials/benefits.html Normal file
View File

@ -0,0 +1,54 @@
<div class="lg:py-12 py-16 lg:px-12 sm:py-16">
<div class="mx-auto max-w-7xl px-6 lg:px-8 py-4 lg:py-12">
<div class="mx-auto max-w-2xl lg:text-center">
<h2 class=" text-center">Why Choose Mycelium Network?</h2>
<p class="mt-4 text-center"> Mycelium Network offers numerous advantages over traditional internet networks.</p>
</div>
<div class="mx-auto mt-2 max-w-2xl mt-6 lg:mt-12 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-10 gap-y- lg:max-w-none lg:grid-cols-3 lg:gap-x-16 lg:gap-y-24 lg:mx-16">
<div class="flex flex-col p-4">
<dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-white">
<svg class="h-5 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 01-1.44-8.765 4.5 4.5 0 018.302-3.046 3.5 3.5 0 014.504 4.272A4 4 0 0115 17H5.5zm3.75-2.75a.75.75 0 001.5 0V9.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0l-3.25 3.5a.75.75 0 101.1 1.02l1.95-2.1v4.59z" clip-rule="evenodd" />
</svg>
Always Online
</dt>
<dd class="mt-1 flex flex-auto flex-col">
<p class="flex-auto text-base">Stay connected at all times, no matter the situation. Our robust network architecture ensures uninterrupted connectivity even during natural disasters or power outages.</p>
<p class="mt-4">
<a href="#" class="text-sm font-semibold leading-6">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="flex flex-col p-4">
<dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-white ">
<svg class="h-5 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
</svg>
Inclusive Access
</dt>
<dd class="mt-1 flex flex-auto flex-col text-base leading-7 ">
<p class="flex-auto text-base">Mycelium Routers provide cost-effective network expansion. This allows for greater internet accessibility in underserved and remote areas.</p>
<p class="mt-4">
<a href="#" class="text-sm font-semibold leading-6 text-indigo-400">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
<div class="flex flex-col p-4">
<dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-white ">
<svg class="h-5 w-5 flex-none text-indigo-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z" clip-rule="evenodd" />
</svg>
Internet Freedom
</dt>
<dd class="mt-1 flex flex-auto flex-col text-base leading-7">
<p class="flex-auto text-base">Publish, find, buy, and sell anything on our network. Enjoy the freedom to share and access information without restrictions or censorship.</p>
<p class="mt-4">
<a href="#" class="text-sm font-semibold leading-6 text-indigo-400">Learn more <span aria-hidden="true">→</span></a>
</p>
</dd>
</div>
</dl>
</div>
</div>
</div>

90
templates/partials/blogs.html Normal file
View File

@ -0,0 +1,90 @@
<div class="lg:py-24 py-12">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-base font-semibold leading-7 text-indigo-600 mb-4">BLOG</h2>
<h2 class="tracking-tight">What's New</h2>
</div>
<div class="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-4">
<article class="flex flex-col items-start justify-between">
<div class="relative w-full">
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="aspect-[16/9] w-full rounded-xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]">
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="max-w-xl">
<div class="mt-8 flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-500">Mar 16, 2020</time>
<a href="#" class="relative z-10 rounded-full bg-gray-10 px-3 py-1.5 font-medium hover:bg-gray-100">Marketing</a>
</div>
<div class="group relative">
<h3 class="mt-3 text-lg font-semibold leading-6 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
<h4 class="font-semibold">Boost your conversion rate</h4>
</a>
</h3>
<p class="mt-5 line-clamp-3 text-sm leading-6">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.</p>
</div>
</article>
<article class="flex flex-col items-start justify-between">
<div class="relative w-full">
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="aspect-[16/9] w-full rounded-xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]">
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="max-w-xl">
<div class="mt-8 flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-500">Mar 16, 2020</time>
<a href="#" class="relative z-10 rounded-full bg-gray-10 px-3 py-1.5 font-medium hover:bg-gray-100">Marketing</a>
</div>
<div class="group relative">
<h3 class="mt-3 text-lg font-semibold leading-6 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
<h4 class="font-semibold">Boost your conversion rate</h4>
</a>
</h3>
<p class="mt-5 line-clamp-3 text-sm leading-6">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.</p>
</div>
</article>
<article class="flex flex-col items-start justify-between">
<div class="relative w-full">
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="aspect-[16/9] w-full rounded-xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]">
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="max-w-xl">
<div class="mt-8 flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-500">Mar 16, 2020</time>
<a href="#" class="relative z-10 rounded-full bg-gray-10 px-3 py-1.5 font-medium hover:bg-gray-100">Marketing</a>
</div>
<div class="group relative">
<h3 class="mt-3 text-lg font-semibold leading-6 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
<h4 class="font-semibold">Boost your conversion rate</h4>
</a>
</h3>
<p class="mt-5 line-clamp-3 text-sm leading-6">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.</p>
</div>
</article>
<article class="flex flex-col items-start justify-between">
<div class="relative w-full">
<img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80" alt="" class="aspect-[16/9] w-full rounded-xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]">
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="max-w-xl">
<div class="mt-8 flex items-center gap-x-4 text-xs">
<time datetime="2020-03-16" class="text-gray-500">Mar 16, 2020</time>
<a href="#" class="relative z-10 rounded-full bg-gray-10 px-3 py-1.5 font-medium hover:bg-gray-100">Marketing</a>
</div>
<div class="group relative">
<h3 class="mt-3 text-lg font-semibold leading-6 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
<h4 class="font-semibold">Boost your conversion rate</h4>
</a>
</h3>
<p class="mt-5 line-clamp-3 text-sm leading-6">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.</p>
</div>
</article>
</div>
</div>
</div>

59
templates/partials/concepts.html Normal file
View File

@ -0,0 +1,59 @@
<div class="relative isolate overflow-hidden bg-gray-900 py-24 py-12">
<img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-y=.8&w=2830&h=1500&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply" alt="" class="absolute inset-0 -z-10 h-full w-full object-cover object-right md:object-center">
<div class="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl">
<div class="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="absolute -top-52 left-1/2 -z-10 -translate-x-1/2 transform-gpu blur-3xl sm:top-[-28rem] sm:ml-16 sm:translate-x-0 sm:transform-gpu">
<div class="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-base font-semibold leading-7 text-indigo-600 mb-4">CONCEPTS</h2>
<h2>Discover Mycelium Network</h2>
<p class="mt-6 text-lg leading-8 text-gray-300">Unlock the Future of Decentralized Networks with MyNet's endless possibilites.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 mt-8 lg:mt-12 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-8">
<div class="flex gap-x-4 rounded-xl bg-white/5 p-6 ring-1 ring-inset ring-white/10">
<div class="text-base leading-7">
<h4 class="font-semibold text-white">Mycelium ID</h4>
<p class="mt-2 text-lg text-gray-300">Identify objects, files, and images uniquely with short, human-readable IDs.
</p>
</div>
</div>
<div class="flex gap-x-4 rounded-xl bg-white/5 p-6 ring-1 ring-inset ring-white/10">
<div class="text-base leading-7">
<h3 class="font-semibold text-white">Mycelium ID</h3>
<p class="mt-2 text-lg text-gray-300">Identify objects, files, and images uniquely with short, human-readable IDs.
</p>
</div>
</div>
<div class="flex gap-x-4 rounded-xl bg-white/5 p-6 ring-1 ring-inset ring-white/10">
<div class="text-base leading-7">
<h3 class="font-semibold text-white">Mycelium ID</h3>
<p class="mt-2 text-lg text-gray-300">Identify objects, files, and images uniquely with short, human-readable IDs.
</p>
</div>
</div>
<div class="flex gap-x-4 rounded-xl bg-white/5 p-6 ring-1 ring-inset ring-white/10">
<div class="text-base leading-7">
<h3 class="font-semibold text-white">Mycelium ID</h3>
<p class="mt-2 text-lg text-gray-300">Identify objects, files, and images uniquely with short, human-readable IDs.
</p>
</div>
</div>
<div class="flex gap-x-4 rounded-xl bg-white/5 p-6 ring-1 ring-inset ring-white/10">
<div class="text-base leading-7">
<h3 class="font-semibold text-white">Mycelium Accounting</h3>
<p class="mt-2 text-lg text-gray-300">Handle millions of transactions per second without the need for blockchain.</p>
</div>
</div>
<div class="flex gap-x-4 rounded-xl bg-white/5 p-6 ring-1 ring-inset ring-white/10">
<div class="text-base leading-7">
<h3 class="font-semibold text-white">Mycelium Settlor</h3>
<p class="mt-2 text-lg text-gray-300">Settle transactions in a regulated sandbox with legal ownership of digital and fiat currencies.</p>
</div>
</div>
</div>
</div>
</div>

2
templates/partials/contact.html
View File

@ -5,7 +5,7 @@
</div> </div>
<div class="mr-auto place-self-center lg:col-span-7"> <div class="mr-auto place-self-center lg:col-span-7">
<h4><b>About Us</b></h4> <h4><b>About Us</b></h4>
<h2 class="mb-4 text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white">Hero Labs</h1> <h2 class="mb-4 text-4xl font-extrabold tracking-tight dark:text-white">Hero Labs</h1>
<p class="max-w-2xl mb-6">Hero Labs provides a decentralized autonomous cloud technologies that allows anyone to become a cloud service provider.</p> <p class="max-w-2xl mb-6">Hero Labs provides a decentralized autonomous cloud technologies that allows anyone to become a cloud service provider.</p>
<p class="max-w-2xl mb-8">We aims to create a cloud where people and organizations can buy, sell, and use cloud resources autonomously,enable individuals to earn by providing compute, network, and storage capacity​.</p> <p class="max-w-2xl mb-8">We aims to create a cloud where people and organizations can buy, sell, and use cloud resources autonomously,enable individuals to earn by providing compute, network, and storage capacity​.</p>

30
templates/partials/cta.html Normal file
View File

@ -0,0 +1,30 @@
<!--
This example requires some changes to your config:
```
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
],
}
```
-->
<div class="py-12 lg:py-24">
<div class="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 lg:grid-cols-12 lg:gap-8 lg:px-8 lg:mb-12">
<div class="max-w-xl text-3xl font-bold tracking-tight text-white sm:text-4xl lg:col-span-7">
<h2 class="inline sm:block lg:inline xl:block">Want product news and updates?</h2><br>
<p class="inline sm:block lg:inline xl:block">Sign up for our newsletter.</p>
</div>
<form class="w-full max-w-md lg:col-span-5 lg:pt-2">
<div class="flex gap-x-4">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6" placeholder="Enter your email">
<button type="submit" class="flex-none rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Subscribe</button>
</div>
<p class="mt-4 text-sm leading-6 text-gray-300">We care about your data. Read our <a href="#" class="font-semibold text-white">privacy&nbsp;policy</a>.</p>
</form>
</div>
</div>

2
templates/partials/faq.html
View File

@ -2,7 +2,7 @@
<!-- Start block --> <!-- Start block -->
<div class="max-w-screen-xl px-8 py-12 mx-auto lg:pb-16"> <div class="max-w-screen-xl px-8 py-12 mx-auto lg:pb-16">
<h2 class="mb-4 text-3xl font-bold tracking-tight text-gray-900 lg:mb-8 lg:text-3xl dark:text-white">Frequently Asked Questions</h2> <h2 class="mb-4 text-3xl font-bold tracking-tight lg:mb-8 lg:text-3xl dark:text-white">Frequently Asked Questions</h2>
<div class="grid divide-y divide-neutral-200 max-w-3xl mx-auto mt-8 shadow"> <div class="grid divide-y divide-neutral-200 max-w-3xl mx-auto mt-8 shadow">
<div class="py-5"> <div class="py-5">
<details class="group px-4 py-4"> <details class="group px-4 py-4">

12
templates/partials/head.html
View File

@ -51,3 +51,15 @@
<!-- End MailerLite Universal --> <!-- End MailerLite Universal -->
</head> </head>
<style>
body {
background: #111827;
}
#header-container .bg-custom-dark-blue {
background-color: #010a2d;
}
#hamburger .bg-custom-dark-blue {
background-color: #010a2d;
}
</style>

12
templates/partials/header.html
View File

@ -16,12 +16,12 @@
{% else %} {% else %}
<header id="header-container"> <header id="header-container">
{% set header_class = config.extra.header_class | default(value='') %} {% set header_class = config.extra.header_class | default(value='') %}
<div class="{{'z-10 bg-white fixed w-screen max-w-full ' ~ header_class}}"> <div class="{{'z-10 bg-black fixed w-screen max-w-full ' ~ header_class}}">
<div class="relative z-50 shadow"> <div class="relative z-50 shadow">
<div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20"> <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5 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 class="h-auto sm:w-15" src="{{logo_path}}" alt="Logo" /> <img class="lg:w-20 h-auto sm:w-10" src="{{logo_path}}" alt="Logo" />
</a> </a>
</div> </div>
<div class="-mr-2 -my-2 lg:hidden"> <div class="-mr-2 -my-2 lg:hidden">
@ -42,7 +42,7 @@
<nav class="flex space-x-10"> <nav class="flex space-x-10">
{% for page in section.pages %} {% for page in section.pages %}
{% if page.extra.menu %} {% continue %} {% endif %} {% if page.extra.menu %} {% continue %} {% endif %}
<a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0"> <a href="{{page.permalink}}" class="text-lg leading-6 text-white focus:outline-none focus:text-white transition ease-in-out duration-150 mt-0">
{{page.title}} {{page.title}}
</a> </a>
<div class="relative"> <div class="relative">
@ -52,7 +52,7 @@
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %} {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
{% set button_id = subsection ~ "-menu-btn" | slugify %} {% set button_id = subsection ~ "-menu-btn" | slugify %}
<div class="relative"> <div class="relative">
<button type="button" id="{{button_id}}" class="nav_btn text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150"> <button type="button" id="{{button_id}}" class="nav_btn text-white group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
<span>{{ subsection }}</span> <span>{{ subsection }}</span>
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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>
@ -98,7 +98,7 @@
{% for page in section.pages %} {% for page in section.pages %}
{% if page.relative_path == "home/index.md" %} {% continue %} {% endif %} {% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
{% if page.extra.menu %} {% continue %} {% endif %} {% if page.extra.menu %} {% continue %} {% endif %}
<a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> <a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-white transition ease-in-out duration-150">
{{page.title}} {{page.title}}
</a> </a>
<hr/> <hr/>
@ -108,7 +108,7 @@
{% set button_id = subsection ~ "-mobile-menu-btn" | slugify %} {% set button_id = subsection ~ "-mobile-menu-btn" | slugify %}
{% set menu_id = subsection ~ "-mobile-menu" | slugify %} {% set menu_id = subsection ~ "-mobile-menu" | slugify %}
<button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-white focus:outline-none focus:text-white transition ease-in-out duration-150">
<span>{{ subsection }}</span> <span>{{ subsection }}</span>
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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>

32
templates/partials/header_custom.html
View File

@ -7,7 +7,7 @@
{% 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">
<div class="z-10 bg-white fixed w-screen"> <div class="z-10 bg-black fixed w-screen">
<div class="relative z-50 shadow"> <div class="relative z-50 shadow">
<div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-1 sm:px-8 md:px-12 py-2 lg:px-28 lg:justify-start lg:space-x-20"> <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-1 sm:px-8 md:px-12 py-2 lg:px-28 lg:justify-start lg:space-x-20">
<div> <div>
@ -40,18 +40,18 @@
{% set link_label = header_label | striptags %} {% set link_label = header_label | striptags %}
{% set link_path = header_label | split(pat="%22") | safe%} {% set link_path = header_label | split(pat="%22") | safe%}
{% if header_label is containing("http") %} {% if header_label is containing("http") %}
<a href="{{link_path[1]}}" target="_blank" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0"> <a href="{{link_path[1]}}" target="_blank" class="text-lg leading-6 font-medium text-white focus:outline-none focus:text-white transition ease-in-out duration-150 mt-0">
{{link_label}} {{link_label}}
</a> </a>
{% else %} {% else %}
<a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0"> <a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-white focus:outline-none focus:text-white transition ease-in-out duration-150 mt-0">
{{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="nav_btn font-medium text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-blue-300 focus:outline-none transition ease-in-out duration-150"> <button type="button" id="{{button_id}}" class="nav_btn font-medium text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
<span>{{ header_label }}</span> <span>{{ header_label }}</span>
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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>
@ -75,7 +75,7 @@
<nav> <nav>
<div id="{{menu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden"> <div id="{{menu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white"> <div class="bg-black">
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12"> <div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
{{header_menu | safe }} {{header_menu | safe }}
</div> </div>
@ -113,17 +113,17 @@
{% set link_label = header_label | striptags %} {% set link_label = header_label | striptags %}
{% set link_path = header_label | split(pat="%22") | safe%} {% set link_path = header_label | split(pat="%22") | safe%}
{% if header_label is containing("http") %} {% if header_label is containing("http") %}
<a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> <a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-white transition ease-in-out duration-150">
{{link_label}} {{link_label}}
</a> </a>
{% else %} {% else %}
<a href="{{link_path[1]}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> <a href="{{link_path[1]}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-white 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 type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-white focus:outline-none focus:text-white transition ease-in-out duration-150">
<span>{{ header_label }}</span> <span>{{ header_label }}</span>
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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>
@ -145,3 +145,19 @@
</header> </header>
<style>
body {
background: #111827;
}
#header-container .bg-custom-dark-blue {
background-color: #010a2d;
}
#hamburger .bg-custom-dark-blue {
background-color: #010a2d;
}
.bg-black {
color: #010a2d;
}
</style>

25
templates/partials/howitworks.html Normal file
View File

@ -0,0 +1,25 @@
<div class="lg:py-12 py-12">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:text-center">
<h2>How Mycelium Network Works</h2>
<p class="mt-4">Discover the simple steps to join and benefit from Mycelium Network.</p>
</div>
<div class="mx-auto mt-4 max-w-2xl sm:mt-20 lg:mt-12 lg:max-w-4xl">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
<div class="relative pl-16 my-2 bg-white/10 rounded-lg p-4">
<dt class="text-base font-semibold leading-7">
<h4>For Users</h4>
</dt>
<h5 class="my-4 text-base leading-7 text-gray-100">Install our browser plugin to connect to the network seamlessly.</h5>
</div>
<div class="relative pl-16 my-2 bg-white/10 rounded-lg p-4">
<dt class="text-base font-semibold leading-7">
<h4>Service Providers</h4>
</dt>
<h5 class="my-4 text-base leading-7 text-white">Set up a Mycelium Router and start earning rewards for network services.</h5>
</div>
</dl>
</div>
</div>
</div>

12
templates/partials/logos.html Normal file
View File

@ -0,0 +1,12 @@
<div class="bg-white py-4 lg:py-10">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-8 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
<img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1" src="https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg" alt="Transistor" width="158" height="48">
<img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1" src="https://tailwindui.com/img/logos/158x48/reform-logo-gray-900.svg" alt="Reform" width="158" height="48">
<img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1" src="https://tailwindui.com/img/logos/158x48/tuple-logo-gray-900.svg" alt="Tuple" width="158" height="48">
<img class="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1" src="https://tailwindui.com/img/logos/158x48/savvycal-logo-gray-900.svg" alt="SavvyCal" width="158" height="48">
<img class="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1" src="https://tailwindui.com/img/logos/158x48/statamic-logo-gray-900.svg" alt="Statamic" width="158" height="48">
</div>
</div>
</div>

36
templates/partials/mesh.html Normal file
View File

@ -0,0 +1,36 @@
<div class="overflow-hidden py-12 sm:py-16">
<div class="mx-auto max-w-7xl px-6 lg:px-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="relative lg:col-span-1">
<img src="images/mesh2.png" alt="Product screenshot" class="w-full h-full object-cover rounded-xl shadow-xl lg:absolute lg:inset-y-0 lg:right-0 lg:w-[50%] lg:max-w-none lg:rounded-l-none">
</div>
<div class="lg:pr-8 lg:pt-4">
<div class="lg:max-w-lg">
<h2 class="text-base font-semibold leading-7 text-indigo-400">CONCEPT</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">A digital Mesh that Comes Together by Simply Connecting the Dots.</p>
<dl class="mt-10 max-w-xl space-y-4 text-base leading-7 text-gray-300 lg:max-w-none">
<div class="relative pl-6">
<dt class="inline font-semibold text-white text-3xl">
A Mesh.
</dt>
<dd class="inline">A network of interconnected elements.</dd>
</div>
<div class="relative pl-6">
<dt class="inline font-semibold text-white text-3xl">
Come together
</dt>
<dd class="inline"> to gather or assemble in one place.</dd>
</div>
<div class="relative pl-6">
<dt class="inline font-semibold text-white text-3xl">
Simply
</dt>
<dd class="inline">in a straight forward or uncomplicated way</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>

14
templates/partials/mesh2.html Normal file
View File

@ -0,0 +1,14 @@
<div class="lg:mb-12 sm:mb-24">
<div class="mx-auto max-w-7xl lg:py-4 sm:px-6 sm:py-12 lg:px-8">
<div class="relative isolate overflow-hidden px-6 lg:py-12 py-8 text-center shadow-2xl rounded-3xl sm:px-8">
<img src="images/mesh2.gif" blend-mode="multiply" alt="" class="absolute inset-0 -z-10 h-full w-full object-cover">
<h2 class="mx-auto max-w-2xl lg:text-3xl leading-8 tracking-tight text-white text-xl lg:py-4 m-2 py-8">A digital Mesh that Comes Together by Simply Connecting the Dots.</h2>
<p class="inline mx-auto mt-2 max-w-xl text-lg lg:text-2xl font-semibold leading-8 text-white">A Mesh</p>
<p class="inline mx-auto mt-2 max-w-xl text-base lg:text-xl leading-8 text-gray-100">A network of interconnected elements.</p><br>
<p class="inline mx-auto mt-2 max-w-xl text-lg lg:text-2xl font-semibold leading-8 text-white">Come together
<p class="inline mx-auto mt-2 max-w-xl text-base lg:text-xl leading-8 text-gray-100">to gather or assemble in one place.</p><br>
<p class="inline mx-auto mt-2 max-w-xl text-lg lg:text-2xl font-semibold leading-8 text-white"> Simply </p>
<p class="inline mx-auto mt-2 max-w-xl text-base lg:text-xl leading-8 text-gray-100">in a straight forward or uncomplicated way.</p>
</div>
</div>
</div>

30
templates/partials/mycelium2.html Normal file
View File

@ -0,0 +1,30 @@
<div class="bg-gray-900">
<div class="relative isolate overflow-hidden pt-14">
<video autoplay loop muted class="absolute inset-0 -z-10 h-full w-full object-cover">
<source src="/videos/hero.mp4" type="video/mp4">
</video>
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<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 leading-6 text-gray-400 ring-1 ring-white/10 hover:ring-white/20">
Announcing our next round of funding. <a href="#" class="font-semibold text-white"><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="text-4xl font-bold leading-8 tracking-tight text-white sm:text-6xl mb-4">Project Mycelium</h1>
<h2>Reverse the Internet for the Better</h2>
<p class="mt-6 leading-8">Welcome to The New Internet: Mycelium Network (MMM). <br>Restore the Internet how it was intended to be.</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="#" class="rounded-md bg-indigo-500 px-3.5 py-2.5 font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">Get started</a>
<a href="#" class="text-sm font-semibold leading-6 text-white">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
<div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true">
<div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
</div>
</div>

2
templates/partials/newinternet.html
View File

@ -1,7 +1,7 @@
<!-- Start block --> <!-- Start block -->
<div class="grid max-w-screen-xl px-4 pt-4 pb-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 lg:pt-28"> <div class="grid max-w-screen-xl px-4 pt-4 pb-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 lg:pt-28">
<div class="mr-auto place-self-center lg:col-span-7"> <div class="mr-auto place-self-center lg:col-span-7">
<h2 class="mb-4 text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white">Our Planet Needs a <br>Cloud & AI Infrastructure Upgrade.</h1> <h2 class="mb-4 text-4xl font-extrabold tracking-tight text-white dark:text-white">Our Planet Needs a <br>Cloud & AI Infrastructure Upgrade.</h1>
<p class="max-w-2xl mb-6">Mycelium was developed to address the increasing demand for a decentralized, secure, and efficient cloud and AI infrastructure in today's interconnected digital landscape.</p> <p class="max-w-2xl mb-6">Mycelium was developed to address the increasing demand for a decentralized, secure, and efficient cloud and AI infrastructure in today's interconnected digital landscape.</p>
<div class="space-y-4 sm:flex sm:space-y-0 sm:space-x-4 border-t border-gray-200 my-7 dark:border-gray-700"> <div class="space-y-4 sm:flex sm:space-y-0 sm:space-x-4 border-t border-gray-200 my-7 dark:border-gray-700">
<div class="pt-8"> <div class="pt-8">

2
templates/partials/newsCard.html
View File

@ -9,7 +9,7 @@
</div> </div>
<div class="flex-1 bg-white p-4 flex flex-col justify-between"> <div class="flex-1 bg-white p-4 flex flex-col justify-between">
<h3 class="mt-2 text-xl leading-7 font-medium text-gray-900 text-left not-italic"> <h3 class="mt-2 text-xl leading-7 font-medium text-white text-left not-italic">
{{ post.title }} {{ post.title }}
</h3> </h3>
{% if post.description %} {% if post.description %}

2
templates/partials/personCard.html
View File

@ -4,7 +4,7 @@
<img src="{{url}}" alt="{{page.title ~ ' Picture'}}" /> <img src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
<div> <div>
<h2 class="text-2xl">{{page.title}}</h2> <h2 class="text-2xl">{{page.title}}</h2>
<div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis"> <div class="text-gray-700 text-left line-clamp-3 text-ellipsis">
{% if page.description %} {% if page.description %}
{{page.description}} {{page.description}}
{% else %} {% else %}

32
templates/partials/stats.html Normal file
View File

@ -0,0 +1,32 @@
<div class="relative isolate overflow-hidden bg-gray-900 py-12 lg:py-12">
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2850&q=80&blend=111827&blend-mode=multiply&sat=-100&exp=15" alt="" class="absolute inset-0 -z-10 h-full w-full object-cover">
<div class="relative mx-auto max-w-7xl px-6 lg:px-8">
<div class="absolute -bottom-8 -left-96 -z-10 transform-gpu blur-3xl sm:-bottom-64 sm:-left-40 lg:-bottom-32 lg:left-8 xl:-left-10" aria-hidden="true">
<div class="aspect-[1266/975] w-[79.125rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
<h2 class="text-base font-semibold leading-8 text-indigo-400">STATS</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">A Growing Community worldwide</p>
<p class="mt-6 text-lg leading-8 text-gray-300">MyNet is rapidly expanding, with thousands of active users across more than 50 countries, processing millions of transactions daily and providing seamless connectivity through an ever-growing network of Mycelium Routers.</p>
</div>
<dl class="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-10 text-white sm:mt-20 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-4">
<div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
<dt class="text-sm leading-6">Internet Capacity</dt>
<dd class="order-first text-3xl font-semibold tracking-tight">32.74 PB+</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
<dt class="text-sm leading-6">Mynet Nodes</dt>
<dd class="order-first text-3xl font-semibold tracking-tight">2569</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
<dt class="text-sm leading-6">Countries</dt>
<dd class="order-first text-3xl font-semibold tracking-tight">61</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
<dt class="text-sm leading-6">Cores</dt>
<dd class="order-first text-3xl font-semibold tracking-tight">63,968+</dd>
</div>
</dl>
</div>
</div>

38
templates/partials/technologies.html Normal file
View File

@ -0,0 +1,38 @@
<div class=" py-12 lg:py-16">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-base font-semibold leading-7 text-indigo-600 mb-4">TECHNOLOGIES</h2>
<h2 class="mt-2">Component Architecture</h2>
<p class="mt-4 text-lg leading-8 text-gray-300">Explore the Core Elements of Mycelium Network.</p>
</div>
</div>
<div class="mx-auto mt-8 max-w-7xl px-6 lg:mt-8 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 leading-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">
<h4 class="font-semibold">FungiNet </h4>
<h5>a smart routing algorithm to find the shortest and most efficient communication paths.</h5>
</div>
<div class="relative pl-9">
<h4 class="font-semibold">FungiStor </h4>
<h5>Content is stored close to consumers, making it quantum-safe and distributed globally.</h5>
</div>
<div class="relative pl-9">
<h4 class="font-semibold">FungiCircles</h4>
<h5>Enable consensus-driven, cryptographically signed data storage and processing.</h5>
</div>
<div class="relative pl-9">
<h4 class="font-semibold">FungiStor Spores (FSS)</h4>
<h5>Describes files deterministically for publishing websites or ebooks, ensuring unique and incorruptible data..</h5>
</div>
<div class="relative pl-9">
<h4 class="font-semibold">FungiDB</h4>
<h5>Provides quantum-safe storage with a unique indexing system for structured data, achieving planetary scale.</h5>
</div>
<div class="relative pl-9">
<h4 class="font-semibold">FungiNames</h4>
<h5>Stores billions of domain names reliably, leveraging FungiDB and FungiCircles for global validation and caching.</h5>
</div>
</dl>
</div>
</div>