www_hero/mycelium.html

468 lines
39 KiB
HTML
Raw Permalink Normal View History

2024-05-03 04:39:20 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="canonical" href="https://https://demo.themesberg.com/landwind/" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero by Mycelium Project</title>
<!-- Meta SEO -->
<meta name="title" content="Hero by Mycelium Project">
<meta name="description" content="Hero: Start owning your data and digital life.">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="author" content="Themesberg">
<!-- Social media share -->
<meta property="og:title" content=Hero by Mycelium Project>
<meta property="og:site_name" content=Themesberg>
<meta property="og:url" content=https://hero.mycelium-network.io/>
<meta property="og:description" content=Hero by Mycelium Project.>
<meta property="og:type" content="">
<meta property="og:image" content=>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@themesberg" />
<meta name="twitter:creator" content="@themesberg" />
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link href="./output.css" rel="stylesheet">
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<header class="fixed w-full">
<nav class="bg-white border-gray-200 py-2.5 dark:bg-gray-900">
<div class="flex flex-wrap items-center justify-between max-w-screen-xl px-4 mx-auto">
<a href="#" class="flex items-center">
<img src="./images/logo.svg" class="h-6 mr-3 sm:h-9" alt="Hero Logo" />
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Hero</span>
</a>
<div class="flex items-center lg:order-2">
<!-- <a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Log in</a> -->
<a href="takepart.html" class="text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 lg:mr-0 dark:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none dark:focus:ring-purple-800">Take Part</a>
<button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div class="items-center justify-between hidden w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
<ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
<li>
<a href="index.html" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Home</a>
</li>
<li>
<a href="mycelium.html" class="block py-2 pl-3 pr-4 text-white bg-purple-700 rounded lg:bg-transparent lg:text-purple-700 lg:p-0 dark:text-white" aria-current="page">Mycelium</a>
</li>
<li>
<a href="hero.html" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Hero</a>
</li>
<li>
<a href="nodes.html" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Nodes</a>
</li>
<li>
<a href="xperiences.html" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Xperiences</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Start block -->
<section class="bg-white">
<div class="grid max-w-screen-xl px-2 pt-20 pb-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16">
<div class="max-w-screen-l mx-auto text-center pt-20">
<h1 class="mb-5 text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl dark:text-white">Welcome to Mycelium Network</h1>
<!-- Image -->
<img src="images/mycelium.png" alt="Mycelium Network" class="mx-auto mb-8" style="width: 75%;"/>
<p class="mb-6 font-light text-gray-500 dark:text-gray-400 md:text-lg">Discover how Mycelium Network is revolutionizing internet access with a decentralized, community-powered approach.<br> We aim to empower individuals worldwide by enabling them to own and manage internet resources collectively.</p>
<br>
<a href="#" class="text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none dark:focus:ring-purple-800">Learn More</a>
</div>
</div>
</section>
<!-- End block -->
<!-- Start block -->
<section class="bg-grad dark:bg-gray-900">
<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">
<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>
<p class="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">This free and open-source landing page template was built using the utility classes from <a href="https://tailwindcss.com" class="hover:underline">Tailwind CSS</a> and based on the components from the <a href="https://flowbite.com/docs/getting-started/introduction/" class="hover:underline">Flowbite Library</a> and the <a href="https://flowbite.com/blocks/" class="hover:underline">Blocks System</a>.</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="pt-8">
<h3 class="mb-2 text-2xl font-bold dark:text-white">Sovereign</h3>
<p class="font-light text-gray-500 dark:text-gray-400">Local infrastructure ensures data locality and security
</p>
</div>
<div class="pt-8">
<h3 class="mb-2 text-2xl font-bold dark:text-white">Private</h3>
<p class="font-light text-gray-500 dark:text-gray-400">Complete control over your own data at your proximity</p>
</div>
<div class="pt-8">
<h3 class="mb-2 text-2xl font-bold dark:text-white">Decentralized</h3>
<p class="font-light text-gray-500 dark:text-gray-400">Dispersed workloads System, instead of centralizing data</p>
</div>
<div class="pt-8">
<h3 class="mb-2 text-2xl font-bold dark:text-white">Secure</h3>
<p class="font-light text-gray-500 dark:text-gray-400">Multi-layered security architecture for data and compute safe</p>
</div>
</div>
</div>
<div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
<img src="./images/my1.png" alt="hero image">
</div>
</div>
</section>
<!-- End block -->
<!-- Start block -->
<section class="bg-white">
<div class="max-w-screen-xl px-4 py-8 mx-auto lg:py-24 lg:px-6">
<div class="max-w-screen-md mx-auto mb-8 text-center lg:mb-12">
<h2 class="mb-4 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">Mycelium by the Numbers</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">Explore key metrics that showcase the scope and scale of the Mycelium Network's global impact. Our widespread global presence is not owned by one single entity, but maintained through the collective effort of a global community.</p>
</div>
<div class="space-y-8 lg:grid lg:grid-cols-4 sm:gap-6 xl:gap-10 lg:space-y-0">
<!-- Pricing Card -->
<div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
<img src="images/stat1.svg" alt="Icon representing Node & Earn" class="mx-auto mb-4 h-20 w-auto">
<h3 class="mb-4 text-2xl font-semibold">32.74 PB<br>Capacity</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Total data storage capacity available within the Mycelium Network.</p>
</div>
<!-- Pricing Card -->
<div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
<img src="images/stat2.svg" alt="Icon representing Get Your Hero" class="mx-auto mb-4 h-20 w-auto">
<h3 class="mb-4 text-2xl font-semibold">2569<br>Nodes</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">The number of active nodes within the networks infrastructure.</p>
</div>
<!-- Pricing Card -->
<div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
<img src="images/stat3.svg" alt="Icon representing Acquire INCA Token" class="mx-auto mb-4 h-20 w-auto">
<h3 class="mb-4 text-2xl font-semibold">61M<br>Countries</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">The number of countries where the Mycelium Network has a presence</p>
</div>
<!-- Pricing Card -->
<div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
<img src="images/stat4.svg" alt="Icon representing Explore Services" class="mx-auto mb-4 h-20 w-auto">
<h3 class="mb-4 text-2xl font-semibold">63.986<br>Cores</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">The total number of processing cores that power the network.</p>
</div>
</div>
</div>
</section>
<!-- End block -->
<!-- Start block -->
<section class="bg-grad dark:bg-gray-800">
<div class="max-w-screen-xl px-4 py-8 mx-auto space-y-12 lg:space-y-20 lg:py-24 lg:px-6">
<!-- Row -->
<div class="items-center gap-8 lg:grid lg:grid-cols-2 xl:gap-16">
<img class="hidden w-full mb-4 rounded-lg lg:mb-0 lg:flex" src="./images/learn.png" alt="feature image 2">
<div class="text-gray-500 sm:text-lg dark:text-gray-400">
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">Mycelium Technologies</h2>
<p class="mb-8 font-light lg:text-xl"> Learn the basics of how our decentralized network distributes computing and storage resources globally.</p>
<!-- List -->
<ul role="list" class="pt-8 space-y-5 border-t border-gray-200 my-7 dark:border-gray-700">
<li class="flex space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<h3 class="mb-2 text-xl font-bold text-purple-800 dark:text-white">Decentralized</h3>
<span class="text-sm font-light leading-tight text-gray-600 dark:text-white">Nodes distributed globally ensure no single point of failure and enhance network resilience.</span>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<h3 class="mb-2 text-xl font-bold text-purple-800 dark:text-white">Autonomous</h3>
<span class="text-sm font-light leading-tight text-gray-600 dark:text-white">Network self-manages resource allocation and maintenance without human intervention.</span>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<h3 class="mb-2 text-xl font-bold text-purple-800 dark:text-white">P2P </h3>
<span class="text-sm font-light leading-tight text-gray-600 dark:text-white"> Direct node interactions eliminate central servers, enhancing privacy, reducing latency.</span>
</li>
</ul>
<div class="pt-6 mt-6 space-y-4 border-t border-gray-200 dark:border-gray-700">
<div>
<a href="#" class="inline-flex items-center text-base font-medium text-purple-600 hover:text-purple-800 dark:text-purple-500 dark:hover:text-purple-700">
Learn More About our Technologies
<svg class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-white">
<div class="max-w-screen-xl px-4 py-8 mx-auto space-y-12 lg:space-y-20 lg:py-24 lg:px-6">
<!-- Row -->
<div class="items-center gap-8 lg:grid lg:grid-cols-2 xl:gap-16">
<div class="text-gray-500 sm:text-lg dark:text-gray-400">
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">From Farmers to Everyone</h2>
<p class="mb-8 font-light lg:text-xl">Mycelium Network and Heroes exist thanks to a vast network of cloud capacity deployed by Farmers- who deploy Mycelium Nodes in supporting locations worldwide. </p>
<!-- List -->
<ul role="list" class="pt-8 space-y-5 border-t border-gray-200 my-7 dark:border-gray-700">
<li class="flex space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Promising Financial Incentives</span>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Plug & Play</span>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Minimal Tech skills required</span>
</li>
</ul>
<div class="pt-6 mt-6 space-y-4 border-t border-gray-200 dark:border-gray-700">
<div>
<a href="#" class="inline-flex items-center text-base font-medium text-purple-600 hover:text-purple-800 dark:text-purple-500 dark:hover:text-purple-700">
Become a Mycelium Farmer
<svg class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
<img class="hidden w-full mb-4 rounded-lg lg:mb-0 lg:flex" src="./images/farmer.png" alt="dashboard feature image">
</div>
</div>
</section>
<!-- End block -->
<!-- Start block -->
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 pb-8 mx-auto lg:pb-24 lg:px-6 ">
<BR>
<BR>
<h2 class="mb-6 text-3xl font-extrabold tracking-tight text-center text-gray-900 lg:mb-8 lg:text-3xl dark:text-white">Frequently asked questions</h2>
<div class="max-w-screen-md mx-auto">
<div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white" data-inactive-classes="text-gray-500 dark:text-gray-400">
<h3 id="accordion-flush-heading-1">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-900 bg-white border-b border-gray-200 dark:border-gray-700 dark:bg-gray-900 dark:text-white" data-accordion-target="#accordion-flush-body-1" aria-expanded="true" aria-controls="accordion-flush-body-1">
<span>What is Hero and how does it work within the Mycelium network?</span>
<svg data-accordion-icon="" class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h3>
<div id="accordion-flush-body-1" class="" aria-labelledby="accordion-flush-heading-1">
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Hero is your personalized digital identity within the Mycelium network. It serves as your unique avatar, enabling you to securely interact with various applications and services while maintaining control over your data. The Mycelium network provides the decentralized infrastructure that powers Hero, ensuring a secure and private digital experience.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="#" class="text-purple-600 dark:text-purple-500 hover:underline">get started</a> and start using Hero on Mycelium Network.</p>
</div>
</div>
<h3 id="accordion-flush-heading-2">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400" data-accordion-target="#accordion-flush-body-2" aria-expanded="false" aria-controls="accordion-flush-body-2">
<span>How does the Mycelium network enhance security for Hero users?</span>
<svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h3>
<div id="accordion-flush-body-2" class="hidden" aria-labelledby="accordion-flush-heading-2">
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400"> The Mycelium network enhances security for Hero users by leveraging a decentralized infrastructure. This means theres no single point of failure or centralized control, reducing the risk of data breaches and ensuring that users have full control over their information.</p>
</div>
</div>
<h3 id="accordion-flush-heading-3">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400" data-accordion-target="#accordion-flush-body-3" aria-expanded="false" aria-controls="accordion-flush-body-3">
<span>What kinds of experiences can I build on the Mycelium network using Hero?</span>
<svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h3>
<div id="accordion-flush-body-3" class="hidden" aria-labelledby="accordion-flush-heading-3">
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">The Mycelium network offers a flexible platform for developing a wide range of digital experiences using Hero, including secure file sharing, communication tools, financial services, and collaborative workspaces. You can also develop custom applications and services tailored to your needs, leveraging the scalability and security of the network.</p>
</div>
</div>
<h3 id="accordion-flush-heading-4">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400" data-accordion-target="#accordion-flush-body-4" aria-expanded="false" aria-controls="accordion-flush-body-4">
<span>How does the Mycelium network promote equal opportunities for users?</span>
<svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h3>
<div id="accordion-flush-body-4" class="hidden" aria-labelledby="accordion-flush-heading-4">
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">The Mycelium network is built on the principles of inclusivity and equality, providing equal access to its decentralized infrastructure. This ensures that all users, regardless of their background or location, have the opportunity to participate, earn, and contribute to the network, thereby fostering a community that values diversity and equal opportunity.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
<li><a href="#" class="text-purple-600 dark:text-purple-500 hover:underline">Mycelium Project Manual</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End block -->
<!-- Start block -->
<section class="bg-grad">
<div class="max-w-screen-xl px-4 py-8 mx-auto lg:py-16 lg:px-6 flex flex-col lg:flex-row items-center">
<div class="max-w-screen-sm lg:flex-1 text-center lg:text-left">
<h2 class="mb-4 text-3xl font-extrabold leading-tight tracking-tight text-gray-900 dark:text-white">Be a Hero Today</h2>
<p class="mb-6 font-light text-gray-500 dark:text-gray-400 md:text-lg"> Become the center of your digital life.</p>
<a href="#" class="text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none dark:focus:ring-purple-800">Get Started</a>
</div>
<div class="flex-1">
<img src="images/banner.png" alt="Free Trial Image" class="w-full h-auto">
</div>
</div>
</section>
<!-- End block -->
<footer class="bg-white dark:bg-gray-800">
<div class="max-w-screen-xl p-4 py-6 mx-auto lg:py-16 md:p-8 lg:p-10">
<div class="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
<div>
<h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">MYCELIUM</h3>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class=" hover:underline">About</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">People</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Project</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Blog</a>
</li>
</ul>
</div>
<div>
<h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Help center</h3>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline">Support Team</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Forum</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Telegram</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Contact Us</a>
</li>
</ul>
</div>
<div>
<h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Legal</h3>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline">Privacy Policy</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Terms</a>
</li>
</ul>
</div>
<div>
<h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Resources</h3>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class=" hover:underline">Manual</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Forum</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Tester Group
</li>
<li class="mb-4">
<a href="#" class="hover:underline">FAQ</a>
</li>
</ul>
</div>
<div>
<h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Download</h3>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline">iOS</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Android</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">Windows</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline">MacOS</a>
</li>
</ul>
</div>
</div>
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
<div class="text-center">
<a href="#" class="flex items-center justify-center mb-5 text-2xl font-semibold text-gray-900 dark:text-white">
<img src="./images/logo.svg" class="h-6 mr-3 sm:h-9" alt="Hero Logo" />
Hero
</a>
<span class="block text-sm text-center text-gray-500 dark:text-gray-400">© 2021-2022 Mycelium Project™. All Rights Reserved.
</span>
<ul class="flex justify-center mt-5 space-x-5">
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" /></svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" /></svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" /></svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" /></svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" /></svg>
</a>
</li>
</ul>
</div>
</footer>
<script src="https://unpkg.com/flowbite@1.4.1/dist/flowbite.js"></script>
</body>
</html>