www_hero/nodes.html
2024-05-03 07:02:32 +02:00

409 lines
32 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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-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">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-white bg-purple-700 rounded lg:bg-transparent lg:text-purple-700 lg:p-0 dark:text-white" aria-current="page">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-4 pt-20 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">
<h1 class="max-w-2xl mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl dark:text-white">Powering the Network:<br> Mycelium Node</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">Explore how each Mycelium Node contributes to the robust, decentralized architecture of the Mycelium Network, ensuring security, scalability, and resilience.</p>
<div class="space-y-4 sm:flex sm:space-y-0 sm:space-x-4">
<a href="https://www.manual.grid.tf/documentation/documentation.html" class="inline-flex items-center justify-center w-full px-5 py-3 text-sm font-medium text-center text-gray-900 border border-gray-200 rounded-lg sm:w-auto hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
Learn More
</a>
<a href="mailto:info@threefold.io" class="inline-flex items-center justify-center w-full px-5 py-3 mb-2 mr-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:w-auto focus:outline-none hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
Get Hero
</a>
</div>
</div>
<div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
<img src="./images/node.png" alt="hero image">
</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-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">How Mycelium Nodes works</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">Unraveling the Core Functions of the Mycelium Nodes.</p>
</div>
<div class="space-y-8 lg:grid lg:grid-cols-3 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-grad2 border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
<img src="images/node3.png" alt="Icon representing Node & Earn" class="mx-auto mb-8 h-40 w-auto"> <!-- Responsive Icon now 2x bigger -->
<h3 class="mb-4 text-2xl font-semibold">Connection</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Nodes connect to the Mycelium Network, automatically discovering and communicating with nearby nodes to form a resilient, decentralized network.</p>
</div>
<!-- Pricing Card -->
<div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-grad2 border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
<img src="images/node2.png" alt="Icon representing Node & Earn" class="mx-auto mb-8 h-40 w-auto"> <!-- Responsive Icon now 2x bigger -->
<h3 class="mb-4 text-2xl font-semibold">Data Processing</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Each node processes and stores data independently, contributing to the network's collective data management without relying on a central servers.</p>
</div>
<!-- Pricing Card -->
<div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-grad2 border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
<img src="images/node1.png" alt="Icon representing Node & Earn" class="mx-auto mb-8 h-40 w-auto"> <!-- Responsive Icon now 2x bigger -->
<h3 class="mb-4 text-2xl font-semibold">Maintenance</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Nodes continuously maintain themselves and the network using automated protocols to ensure optimal performance and security for all users.</p>
</div>
</div>
</div>
</section>
<!-- End block -->
<!-- Start block -->
<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">
<img class="hidden w-full mb-4 rounded-lg lg:mb-0 lg:flex" src="./images/benefit.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">Unlock the Power of Decentralization with Mycelium Nodes</h2>
<p class="mb-8 font-light lg:text-xl">Mycelium Nodes offer a secure and scalable platform for decentralized applications that aim to provide individuals with robust, user-controlled networking solutions.</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">Enhanced Security</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">Decentralized Control</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">Cost Efficiency</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">Scalable Infrastructure</span>
</li>
</ul>
<p class="font-light lg:text-xl">Join the forefront of technological innovation by integrating Mycelium Nodes into your digital life.</p>
<div class="pt-6 mt-6 space-y-4 border-t border-gray-200 dark:border-gray-700">
<div>
<a href="xperiences.html" 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">
See Xperiences
<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>
</section>
<!-- End block -->
<!-- Start block -->
<section class="bg-grad dark:bg-gray-800">
<div class="max-w-screen-xl px-4 py-6 mx-auto space-y-12 lg:space-y-20 lg:py-20 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/plug.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">Be the Internet.</h2>
<p class="mb-8 font-light lg:text-xl">By simply plugging in a Mycelium Node, you can provide the services that the worlds largest tech companies provide to billions of users.</p>
<a href="#" class="text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:ring-purple-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-purple-900">Get started</a>
</div>
</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">Join The Movement</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">Hero invites you to your new sovereign digital life with 3 easy steps.</p>
</div>
<div class="space-y-8 lg:grid lg:grid-cols-3 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 bg-grad2 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/icon1.svg" alt="Icon representing Node & Earn" class="mx-auto mb-4 h-20 w-auto"> <!-- Responsive Icon -->
<h3 class="mb-4 text-2xl font-semibold">Get A Node & Earn</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Get a Mycelium Node and add capacity to the Mycelium Network.</p>
<a href="nodes.html" class="mt-4 text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:ring-purple-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-purple-900">Get started</a>
</div>
<!-- Pricing Card -->
<div class="flex flex-col max-w-lg p-6 mx-auto text-center bg-grad2 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/icon2.svg" alt="Icon representing Node & Earn" class="mx-auto mb-4 h-20 w-auto"> <!-- Responsive Icon -->
<h3 class="mb-4 text-2xl font-semibold">Get Your Hero</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Register and reserve your own Hero - your sovereign digital identity.</p>
<a href="hero.html" class="mt-4 text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:ring-purple-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-purple-900">Get started</a>
</div>
<!-- Pricing Card -->
<div class="flex flex-col max-w-lg p-6 mx-auto text-center bg-grad2 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/icon3.svg" alt="Icon representing Node & Earn" class="mx-auto mb-4 h-20 w-auto"> <!-- Responsive Icon -->
<h3 class="mb-4 text-2xl font-semibold">Acquire INCA Token</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Purchase INCA - The digital currency of the Mycelium Network.</p>
<a href="#" class="mt-4 text-white bg-purple-600 hover:bg-purple-700 focus:ring-4 focus:ring-purple-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-purple-900">Get started</a>
</div>
</div>
</div>
</section>
<!-- End block -->
<!-- Start block -->
<section class="bg-grad">
<div class="max-w-screen-xl px-4 py-8 mx-auto text-center lg:py-24 lg:px-6">
<figure class="max-w-screen-md mx-auto">
<svg class="h-12 mx-auto mb-3 text-gray-400 dark:text-gray-600" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z" fill="currentColor"/>
</svg>
<blockquote>
<p class="text-xl font-medium text-gray-900 md:text-2xl dark:text-white">"We need a new Internet which is not owned by a few centralized companies. We need an Internet co-owned by all of us, where everyone is equal, where everyone owns their own data. An Internet which is much more green, which is available everywhere in the world."</p>
</blockquote>
<figcaption class="flex items-center justify-center mt-6 space-x-3">
<img class="w-6 h-6 rounded-full" src="images/kds.png" alt="profile picture">
<div class="flex items-center divide-x-2 divide-gray-500 dark:divide-gray-700">
<div class="pr-3 font-medium text-gray-900 dark:text-white">Kristof De Spiegeleer</div>
<div class="pl-3 text-sm font-light text-gray-500 dark:text-gray-400">CEO at Mycelium Project</div>
</div>
</figcaption>
</figure>
</div>
</section>
<!-- End block -->
<!-- Start block -->
<section class="bg-white">
<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="hero.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-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="HeroLogo" />
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>
</div>
</footer>
<script src="https://unpkg.com/flowbite@1.4.1/dist/flowbite.js"></script>
</body>
</html>