From 2fcac794dcf3f7abfac42ac67514c56efbd520ac Mon Sep 17 00:00:00 2001
From: mik-tf <logismos@protonmail.ch>
Date: Tue, 25 Feb 2025 07:49:36 -0700
Subject: [PATCH] add explore section under download

---
 templates/partials/download/download1.html | 78 ++++++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/templates/partials/download/download1.html b/templates/partials/download/download1.html
index cfc5b9d..1a4fa5f 100644
--- a/templates/partials/download/download1.html
+++ b/templates/partials/download/download1.html
@@ -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 */
-- 
2.40.1