update new section at home

templates/index.html

@@ -3,6 +3,7 @@
 
 {% include "partials/hero/myhero.html" %}
 {% include "partials/hero/myhero1.html" %}
+{% include "partials/hero/myhero8.html" %}
 {% include "partials/hero/myhero3.html" %}
 {% include "partials/hero/myhero5.html" %}
 {% include "partials/hero/myhero2.html" %}

templates/partials/hero/myhero8.html

@@ -0,0 +1,79 @@
+<div class="py-24 sm:py-32">
+  <div class="mx-auto max-w-7xl px-6 lg:px-8">
+    <div class="mx-auto">
+      <p class="text-base/7 font-light text-black tracking-wide">What It Enables</p>
+      <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black"> Powering Secure & Decentralized Connectivity</h2>
+      <h3 class="mt-2 fade-in text-balance text-2xl font-normal tracking-tight text-black"> Mycelium is a key component of the ThreeFold Grid</h3>
+      <p class="mt-6 text-lg font-light">Mycelium can be installed on any computer (macOS, Linux, Windows) and smartphone (iOS, Android). With seamless integration, it enables secure and private communication across devices.
+        <br>
+        <br>
+        The ThreeFold Dashboard offers dozens of applications with built-in Mycelium support, making it easy to deploy and utilize. Once installed, Mycelium provides a secure, encrypted network for a wide range of use cases, from private communication to decentralized infrastructure.</p>
+    </div>
+  </div>
+  {# <div class="relative overflow-hidden pt-10">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8 flex items-center justify-center">
+      <img src="/images/future.png" alt="App screenshot"  width="900">
+    </div>
+  </div> #}
+  <div class="mx-auto mt-10 max-w-7xl">
+    <dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-black sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-x-8 lg:gap-y-16">
+      <div class="relative pl-9">
+        <dt class="inline font-semibold text-black">
+
+          PRODUCTIVITY & COMMUNICATION
+        </dt>
+        <ul class="mx-4" style="list-style: circle;">
+          <li>Secure remote work collaboration.</li>
+          <li>Private file sharing between trusted nodes.</li>
+          <li>Encrypted voice/video calls.</li>
+          <li>Self-hosted messaging systems.</li>
+          <li>Secure document collaboration.</li>
+        </ul>
+      </div>
+      <div class="relative pl-9">
+        <dt class="inline font-semibold text-black">
+
+          INFRASTRUCTURE
+        </dt>
+        <ul class="mx-4" style="list-style: circle;">
+          <li>Private cloud computing resources.</li>
+          <li>Secure IoT device networks.</li>
+          <li>Remote system administration.</li>
+          <li>Virtual private networks (VPNs).</li>
+          <li>Secure backup systems.</li>
+        </ul>
+      </div>
+      <div class="relative pl-9">
+        <dt class="inline font-semibold text-black">
+ 
+          SERVICES
+        </dt>
+        <ul class="mx-4" style="list-style: circle;">
+          <li>Self-hosted web services.</li>
+          <li>Private file sharing between trusted nodes.</li>
+          <li>Private DNS systems.</li>
+          <li>Personal email servers.</li>
+          <li>Secure document collaboration.</li>
+        </ul>
+      </div>
+      <div class="relative pl-9">
+        <dt class="inline font-semibold text-black">
+
+          MEDIA & CONTENT
+        </dt>
+        <ul class="mx-4" style="list-style: circle;">
+          <li>Private media streaming.</li>
+          <li>Personal cloud storage.</li>
+          <li>Protected content distribution.</li>
+          <li>Secure game servers.</li>
+          <li>Private git repositories.</li>
+        </ul>
+      </div>
+    </dl>
+    <hr class="my-6">
+
+    <div class="mx-auto mt-10 max-w-6xl">
+      <a href="/download" class=" rounded-2xl bg-black px-6 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get Started</a>
+    </div> 
+  </div>
+</div>