add mycelium

content/header/index.md

@@ -7,10 +7,10 @@ extra:
 
 ---
 
-- [Vision]("/why")
+- [About]("/why")
 - [Features]("/what")
-- [Concept]("/initiatives")
-- [Virtual City]("/action")
+- [Roadmap]("/initiatives")
+- [Pricing]("/action")
 - Info
 
 

templates/index.html

@@ -2,6 +2,8 @@
 {% block content %}
 
 {% include "partials/hero/myhero.html" %}
+{% include "partials/hero/myhero2.html" %}
+{% include "partials/hero/myhero3.html" %}
 {% include "partials/hero/hero1.html" %}
 {% include "partials/hero/hero2.html" %}
 {% include "partials/hero/hero3.html" %}

templates/partials/header.html

@@ -107,7 +107,7 @@
                       </a>
                     </li> 
                   </ul> #}
-                    <a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">Participate</a>
+                    <a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">Get Mycelium</a>
                 </div>
               </div>
             </div>

templates/partials/hero/myhero.html

@@ -1,18 +1,18 @@
 <div class="relative fade-in lg:py-16">
   <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
-    <div class="px-6 pt-10 pb-24 sm:pb-32 lg:col-span-7 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-6">
+    <div class="px-6 pt-10 lg:pb-16 lg:col-span-7 lg:px-0 lg:pt-24 xl:col-span-6">
       <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
         <h1 class="text-4xl font-semibold tracking-tight text-white lg:text-6xl">
-            This is Hero6.html
+            MYCELIUM
         </h1>
-        <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
-        <p class="mt-8 text-lg font-light text-gray-50 lgl:text-xl">
-            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. 
-            Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
+        <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">Unleashing the Power of Decentralized Networks
+                  </h2>
+        <p class="mt-8 text-pretty lg:text-xl text-lg  font-light text-gray-50 lgl:text-xl">
+          Discover the future of secure, efficient, and scalable networking with Mycelium, a key component of the ThreeFold Grid. <br>Join the Revolution.
         </p>
         <div class="mt-10 flex items-center gap-x-6">
             <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
-                Get started
+                Get Mycelium
             </a>
             <a href="#" class="text-sm font-semibold text-white hover:text-gray-200">
                 Learn more <span aria-hidden="true">→</span>
@@ -21,7 +21,7 @@
     </div>
     </div>
     <div class="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0 ">
-      <img class="lg:py-16 aspect-1/1 w-full object-cover lg:absolute lg:inset-0 lg:aspect-auto" src="/images/hero5.png" alt="">
+      <img class="lg:pt-16 mt-20 aspect-1/1 w-full object-cover lg:absolute lg:inset-0 lg:aspect-auto" src="/images/hero5.png" alt="">
     </div>
   </div>
 </div>

templates/partials/hero/myhero3.html

@@ -0,0 +1,41 @@
+<div class=" fade-in  ">
+    <div class="lg:py-24 relative isolate">
+        <div class=" mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 pb-24">
+            <p class="text-base/7 font-light text-white tracking-wide">HOW IT WORKS</p>
+            <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">Unraveling Mycelium's Secrets </h2>
+                <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light text-gray-300 fade-in max-w-3xl">
+                    Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.
+                </p>
+          </div>
+        <div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8">
+            <div class="mx-auto max-w-lg lg:mx-0 lg:flex-auto">
+            <dl class="space-y-8 text-base/7 lg:max-w-none">
+                <div class="relative pl-9">
+                  <dt class="font-semibold lg:text-lg text-base text-white">
+                    Decentralized Nodes
+                  </dt>
+                  <dd class="mt-2 text-gray-300  font-light">Mycelium operates through a network of decentralized nodes, similar to how nature's mycelium forms a decentralized network of threads. Each node acts as a connection point in the overall digital ecosystem.</dd>
+                </div>
+                <div class="relative pl-9">
+                  <dt class="font-semibold lg:text-lg text-base text-white">
+   
+                    Efficient Data Routing
+                  </dt>
+                  <dd class="mt-2 text-gray-300 font-light">Mycelium optimizes data routing by choosing the most efficient path for communication. Data travels along the shortest path in terms of latency, ensuring that information reaches its destination swiftly.</dd>
+                </div>
+                <div class="relative pl-9">
+                  <dt class=" font-semibold lg:text-lg text-base text-white">
+        
+                    End-to-End Encryption
+                  </dt>
+                  <dd class="mt-2 text-gray-300 font-light">Each node in the system is identified by a unique key pair. Data between nodes is encrypted using secret keys derived from these pairs. This ensures that data remains confidential, enhancing the privacy of the network.</dd>
+                </div>
+              </dl>
+            </div>
+            <div class="lg:order-first mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
+                <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/feature6.png" 
+                    alt="Mobile App Screenshot">
+            </div>
+        </div>
+    </div>
+</div>