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

397 lines
32 KiB
HTML

<!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="index.html" 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-white bg-purple-700 rounded lg:bg-transparent lg:text-purple-700 lg:p-0 dark:text-white" aria-current="page">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-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="hidden lg:mt-0 lg:col-span-5 lg:flex">
<img src="./images/hero2.png" alt="hero image">
</div>
<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">Discover Hero,</h1>
<h2 class="mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Your Unified Digital Identity.</h2>
<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">Hero is your unique, singular digital avatar, streamlining your online interactions by eliminating the need to duplicate identities across various platforms. With Hero, manage every aspect of your digital life through one secure, efficient identity.</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>
</section>
<!-- End block -->
<!-- Start block -->
<section class="bg-grad">
<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">Do Anything. Do Everything.</h2>
<p class="mb-8 font-light lg:text-xl">From secure file sharing to encrypted communication, your Hero comes equipped with all the essential skills and capabilities needed to enhance the flexibility and security of your digital life.</p>
<!-- List in Two Columns -->
<ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-4 pt-8 border-t border-gray-200 my-7 dark:border-gray-700">
<li class="flex items-center 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>
<div class="flex flex-col">
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Communication</span>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">Chat, hold meetings, and video conferencing.</p>
</div>
</li>
<li class="flex items-center 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>
<div class="flex flex-col">
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Finance </span>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">Use wallet features to transact and manage assets.</p>
</div>
</li>
<li class="flex items-center 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>
<div class="flex flex-col">
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Collaborate </span>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">Engage in projects and tasks with your network.</p>
</div>
</li><li class="flex items-center 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>
<div class="flex flex-col">
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Develop & Expand</span>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">Create tools or decentralized applications.</p>
</div>
</li><li class="flex items-center 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>
<div class="flex flex-col">
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Creativity</span>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">Generate videos, documents, and other contents.</p>
</div>
</li><li class="flex items-center 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>
<div class="flex flex-col">
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Filesharing</span>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">Directly send data and files without central servers.</p>
</div>
</li>
</li><li class="flex items-center 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>
<div class="flex flex-col">
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Organization</span>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">Securely store and organize data.</p>
</div>
</li>
</li><li class="flex items-center 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>
<div class="flex flex-col">
<span class="text-base font-medium leading-tight text-gray-900 dark:text-white">Browser</span>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">Browse information securely without tracking.</p>
</div>
</li>
</ul>
<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>
<img class="hidden w-full mb-4 rounded-lg lg:mb-0 lg:flex" src="./images/hero5.png" alt="dashboard feature image">
</div>
</div>
</section>
<!-- End block -->
<!-- Start block -->
<section class="bg-white0">
<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/id.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">Become the Center of Your Internet.</h2>
<p class="mb-8 font-light lg:text-xl">By eliminating the need for centralized servers, Hero allows you to be the only central point of data accumulation, communication and execution of digital capabilities.</p>
</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-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">Why Join Hero</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">Hero is designed to benefit everyone by offering a new internet where members can engage in a community dedicated to inclusivity and growth</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-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/hero1.svg" alt="Icon representing Node & Earn" class="mx-auto mb-4 h-30 w-auto"> <!-- Responsive Icon now 2x bigger -->
<h3 class="mb-4 text-2xl font-semibold">Inclusivity</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Everyone gains equal network access and there are no barriers to entry.</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/hero2.svg" alt="Icon representing Node & Earn" class="mx-auto mb-4 h-30 w-auto"> <!-- Responsive Icon now 2x bigger -->
<h3 class="mb-4 text-2xl font-semibold">Sovereignty</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Only you have control of your data and decide who has access to it.</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/hero3.svg" alt="Icon representing Node & Earn" class="mx-auto mb-4 h-30 w-auto"> <!-- Responsive Icon now 2x bigger -->
<h3 class="mb-4 text-2xl font-semibold">Equality</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Anyone can attain the opportunity to earn and to better their lives.</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 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="takepart.html" 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
</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>