add explore section under download #9

Merged
mik-tf merged 1 commits from development_explore into development 2025-02-25 14:52:26 +00:00
Showing only changes of commit 2fcac794dc - Show all commits

View File

@ -69,6 +69,84 @@
</div>
</section>
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<hr class="border-t border-gray-200 my-12">
</div>
<section class="pb-12 bg-white">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none">
<div class="fade-in-box">
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-black mb-6">
Explore Mycelium
</h2>
<h3 class="mx-auto fade-in text-left lg:text-3xl text-2xl leading-snug font-light tracking-tight text-black">
Start the Mycelium app and access the Mycelium ecosystem
</h3>
<p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light text-black fade-in">
The following links are showcase apps running on the ThreeFold Grid via the Mycelium Network.
You can only access those websites while using Mycelium.
</p>
<p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light text-black fade-in">
This is just a glimpse of what is possible with Mycelium.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-6">
<a href="http://[4e6:a249:6d95:8b37:7382:d744:65:12a1]:3000"
class="p-4 rounded-lg border border-gray-200 hover:border-gray-300 transition-all">
<p class="font-semibold text-black">Open WebUI</p>
<p class="text-sm text-gray-600 break-all">http://[40d:51ba:e938:6fba:ff0f:0:200:2]:8080/</p>
</a>
<a href="http://[4fe:8b20:9508:5313:ff0f:0:200:2]"
class="p-4 rounded-lg border border-gray-200 hover:border-gray-300 transition-all">
<p class="font-semibold text-black">Librespeed</p>
<p class="text-sm text-gray-600 break-all">http://[4fe:8b20:9508:5313:ff0f:0:200:2]</p>
</a>
<a href="http://[4ee:82b1:fe44:3988:ff0f:0:200:2]/"
class="p-4 rounded-lg border border-gray-200 hover:border-gray-300 transition-all">
<p class="font-semibold text-black">Umbrel</p>
<p class="text-sm text-gray-600 break-all">http://[4ee:82b1:fe44:3988:ff0f:0:200:2]/</p>
</a>
<a href="https://[57a:cc0c:32ae:b47b:ff0f:0:400:2]/"
class="p-4 rounded-lg border border-gray-200 hover:border-gray-300 transition-all">
<p class="font-semibold text-black">NodePilot</p>
<p class="text-sm text-gray-600 break-all">https://[57a:cc0c:32ae:b47b:ff0f:0:400:2]/</p>
</a>
</div>
</div>
</div>
<div class="mt-12">
<h3 class="text-left text-2xl font-normal text-black mb-4">Access</h3>
<p class="text-left mb-4 text-sm text-gray-600">
If the website requires access, use the following credentials as it applies:
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="p-4 rounded-lg border border-gray-200">
<div class="space-y-2">
<p class="text-sm">
<span class="font-semibold">Username:</span>
<span class="text-gray-600">myceliumdemo</span>
</p>
<p class="text-sm">
<span class="font-semibold">Password:</span>
<span class="text-gray-600">myceliumdemo</span>
</p>
<p class="text-sm">
<span class="font-semibold">Email:</span>
<span class="text-gray-600">mycelium@demo.com</span>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
/* Fade-in animation for the grid items */