update section 3-4

content/_index.md

@@ -4,7 +4,7 @@ sort_by = "date"
 template = "index.html"
 +++
 
-<!-- Hero header -->
+<!-- Hero section -->
 
 {{ hero_img(
     image_src="/images/mycel_1.png",
@@ -18,14 +18,119 @@ template = "index.html"
     button_link="/download"
 ) }}
 
-<!-- Second section -->
+<!-- section 2 -->
 
 {{ hero_right_img(
+    image_src="/images/mycel2.png",
+    image_alt="Discover Mycelium",
+    title="Discover Mycelium",
+    subtitle_1="ABOUT",
+    description="Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning. <br><br>Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.",
+    button_text="Learn more",
+    button_link="/about"
     
 )
 
 }}
 
+<!-- section 3 -->
+
+{{ hero_features(
+    image_src="/images/feature6a.png",
+    image_alt="How Mycelium Operates",
+    subtitle_1="HOW IT WORKS",
+    title="How Mycelium Operates",
+    description="Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.",
+
+    feature_1_title="Decentralized Nodes",
+    feature_1_description="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.",
+
+    feature_2_title="Efficient Data Routing",
+    feature_2_description="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.",
+
+    feature_3_title="End-to-End Encryption",
+    feature_3_description="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."
+) }}
+
+
+<!-- Section 4 -->
+
+{{ use_cases(
+    subtitle="WHAT IT ENABLES",
+    title="Powering Secure & Decentralized Connectivity",
+    description="Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks."
+)
+
+}}
+
+<div class="container mx-auto px-6 lg:px-8">
+<div class="mx-auto grid grid-cols-1 gap-x-6 gap-y-10 text-base sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-x-8 lg:gap-y-8">
+<div class="relative pl-9">
+
+## **PRODUCTIVITY & COMMUNICATION**
+
+- Secure remote work collaboration.
+- Private file sharing between trusted nodes.
+- Encrypted voice/video calls.
+- Self-hosted messaging systems.
+- Secure document collaboration.
+
+</div>
+
+<div class="relative pl-9">
+
+- Secure remote work collaboration.
+- Private file sharing between trusted nodes.
+- Encrypted voice/video calls.
+- Self-hosted messaging systems.
+- Secure document collaboration.
+
+</div>
+
+<div class="relative pl-9">
+
+- Secure remote work collaboration.
+- Private file sharing between trusted nodes.
+- Encrypted voice/video calls.
+- Self-hosted messaging systems.
+- Secure document collaboration.
+
+</div>
+
+<div class="relative pl-9">
+
+- Secure remote work collaboration.
+- Private file sharing between trusted nodes.
+- Encrypted voice/video calls.
+- Self-hosted messaging systems.
+- Secure document collaboration.
+
+</div>
+</div>
+
+<br>
+
+---------------------------------------------
+
+
+
+   <div class="mx-auto mt-10 px-6 lg:px-0 lg:max-w-6xl">
+      <a href="/download" class=" rounded-2xl bg-black px-6 py-2 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>
+
+
+
+
+<!-- {{ feature(
+    feature_title="Decentralized Nodes",
+    feature_description="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.",
+) 
+
+}} -->
+
 {{ hero3(
     announcement='',
     subheader="",
@@ -89,3 +194,11 @@ For more information, check out the [Zola documentation](https://www.getzola.org
         button_text="View Blog", 
         button_link="/blog") 
 }}
+
+<style scope>
+  ul {
+  list-style: circle;
+  margin: 0;
+  padding: 0;
+}
+  </style>